@import '_content/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';

/* /Components/App.razor.rz.scp.css */
/* App.razor.css — Migrated inline styles */

.lay-splash-center[b-cdplrfnh5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.lay-splash-logo[b-cdplrfnh5s] {
    width: 100px;
    margin-bottom: 1rem;
}

.lay-splash-text[b-cdplrfnh5s] {
    font-size: 1.2rem;
}
/* /Components/Layout/MainLayoutLanding.razor.rz.scp.css */
/* ========================================
   BEC MAIN LAYOUT LANDING STYLES
   Thin shell: header + body wrapper only.
   All login modal styles live in MainLayoutLandingPage.
   ======================================== */

html[b-w93n5p3wiu],
body[b-w93n5p3wiu] {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.bec-landing-header[b-w93n5p3wiu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bec-landing-container[b-w93n5p3wiu] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bec-landing-logo img[b-w93n5p3wiu] {
    height: 60px;
    width: auto;
}

/* ========================================
   BODY WRAPPER
   ======================================== */

.bec-landing-body[b-w93n5p3wiu] {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
    .bec-landing-container[b-w93n5p3wiu] {
        padding: 0 20px;
    }

    .bec-landing-logo img[b-w93n5p3wiu] {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .bec-landing-logo img[b-w93n5p3wiu] {
        height: 40px;
    }
}
/* /Components/Layout/MainLayoutMS.razor.rz.scp.css */
/* MainLayoutMS.razor.css */
/* All design tokens defined in wwwroot/css/BEC_Theme.css (--BEC- prefix) */

/* ================= HEADER ================= */
.ms-header[b-16wmqvnqmc] {
    height: var(--BEC-layoutHeaderHeight);
    background: rgba(255, 255, 255, 0.6);
    /* More transparent for visibility - Glass/Mica effect */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    z-index: 1000;
    position: sticky;
    top: 0;
    width: 100%;
}

.header-left[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 240px;
}

.waffle-btn[b-16wmqvnqmc] {
    background: none;
    border: none;
    color: var(--BEC-layoutGray600);
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.waffle-btn:hover[b-16wmqvnqmc] {
    background: var(--BEC-layoutGray100);
}

.brand[b-16wmqvnqmc] {
    font-weight: 600;
    font-size: 16px;
    color: var(--BEC-layoutGray900);
    text-decoration: none;
}

/* SEARCH - Central functionality */
.header-center[b-16wmqvnqmc] {
    flex: 1;
    max-width: 460px;
    margin: 0 20px;
}

.search-box[b-16wmqvnqmc] {
    background: var(--BEC-layoutGray100);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 32px;
    transition: all var(--BEC-durationNormal, 0.2s);
    position: relative;
    /* Added for Flyout positioning */
}

.search-box:focus-within[b-16wmqvnqmc] {
    background: var(--BEC-colorNeutralBackground1, white);
    box-shadow: 0 0 0 1px var(--BEC-layoutBluePrimary);
}

.search-box input[b-16wmqvnqmc] {
    border: none;
    background: transparent;
    flex: 1;
    margin-left: 8px;
    outline: none;
    font-size: 14px;
}

/* HEADER RIGHTS - Platform Context */
.header-right[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CONTEXT SELECTOR (Company/Branch) */
.context-selector[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--BEC-layoutGray100);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 12px;
}

.context-selector:hover[b-16wmqvnqmc] {
    background: var(--BEC-layoutGray200);
}

.context-meta[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.context-label[b-16wmqvnqmc] {
    font-size: 10px;
    color: var(--BEC-layoutGray600);
}

.context-value[b-16wmqvnqmc] {
    font-weight: 600;
}

.icon-btn[b-16wmqvnqmc] {
    background: none;
    border: none;
    color: var(--BEC-layoutGray600);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.icon-btn:hover[b-16wmqvnqmc] {
    background: transparent;
}

.badge[b-16wmqvnqmc] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--BEC-layoutDangerRed);
    color: var(--BEC-colorNeutralForegroundOnBrand, white);
    font-size: 10px;
    height: 14px;
    min-width: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

/* AVATAR */
.avatar[b-16wmqvnqmc] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground1, #eff6fc);
    color: var(--BEC-layoutBlueDark);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: 8px;
    border: 1px solid var(--BEC-layoutBluePrimary);
    cursor: pointer;
}

/* ================= LAYOUT ================= */
.layout-container[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    /* FIX: Stack Header on top of Main Stack */
    flex: 1;
    overflow: hidden;
    overflow-x: hidden;
    height: 100vh;
    height: 100dvh;
    /* FIX: Full viewport height — dvh accounts for mobile browser chrome */
    width: 100%;
}

.main-stack[b-16wmqvnqmc] {
    /* !important required: FluentUI <FluentStack> sets inline styles that must be overridden */
    display: flex !important;
    flex-direction: row !important;
    flex: 1;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

/* ================= SIDEBAR ================= */
.ms-sidebar[b-16wmqvnqmc] {
    width: var(--BEC-layoutSidebarWidth);
    min-width: var(--BEC-layoutSidebarWidth);
    max-width: var(--BEC-layoutSidebarWidth);

    /* Layout: Semi-Detached (Flat Left, Rounded Right, Top/Bottom Gaps) */
    margin: 0 0 10px 0;
    border-radius: 0 16px 16px 0;

    /* Theme: Clean White + Elevated Shadow */
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-layoutGray100, #f3f3f3);
    border-right: 1px solid var(--BEC-layoutGray100, #f3f3f3);
    /* Redundant but explicit */
    box-shadow: 4px 8px 32px rgba(0, 0, 0, 0.04);

    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width var(--BEC-durationNormal, 0.2s), min-width var(--BEC-durationNormal, 0.2s), max-width var(--BEC-durationNormal, 0.2s);
    flex-shrink: 0;
    height: calc(100% - 10px);
    /* Adjust height for the bottom margin only */
}

/* SECTION: QUICK ACCESS */
.nav-section[b-16wmqvnqmc] {
    padding: 16px 0 8px 0;
    border-bottom: 1px solid var(--BEC-layoutGray200);
}

.nav-section-title[b-16wmqvnqmc] {
    padding: 0 16px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--BEC-layoutGray600);
    text-transform: uppercase;
}

.nav-item[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    /* Increased padding per prototype */
    text-decoration: none;
    color: var(--BEC-layoutGray600);
    font-size: 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all var(--BEC-durationNormal, 0.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin: 2px 12px;
    border-radius: 8px;
    position: relative;
}

.nav-item span[b-16wmqvnqmc] {
    display: inline-block;
    transition: transform var(--BEC-durationNormal, 0.2s) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item:hover[b-16wmqvnqmc] {
    color: var(--BEC-Text-Primary, #323130);
    background: var(--BEC-colorNeutralBackground2, #fbfbfb);
}

/* HOME LINK — same visual weight as accordion headers */
.home-link[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    margin: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-layoutGray900);
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
    position: relative;
}

.home-link:hover[b-16wmqvnqmc] {
    background: var(--BEC-colorNeutralBackground2, #fbfbfb);
}

.home-link.active[b-16wmqvnqmc] {
    color: var(--BEC-layoutBluePrimary);
    background: transparent;
}

.home-link.active[b-16wmqvnqmc]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--BEC-layoutBluePrimary);
    border-radius: 1px;
}

/* FINAL SELECTION: 2px left accent bar */
.nav-item.active[b-16wmqvnqmc] {
    background: transparent;
    color: var(--BEC-layoutBluePrimary);
    font-weight: 600;
    border-left: none;
}

.nav-item.active[b-16wmqvnqmc]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--BEC-layoutBluePrimary);
    border-radius: 1px;
}

/* Text pop/lift - transform applied to nav-item content */

/* Since Razor text isn't always in a span, we can try to target ::first-line or simplify. */
/* The prototype used a span for text. The razor code shows text directly inside <a> like: <a> <div icon> Text </a> */
/* To make the text 'pop' separately from the icon without a span is hard in CSS. */
/* But we can apply the text-shadow to the .active class directly which we did above. */

.nav-icon[b-16wmqvnqmc] {
    width: 20px;
    margin-right: 16px;
    color: var(--BEC-colorNeutralForeground4, #8d8b8a);
    text-align: center;
    font-size: 16px;
    transition: all var(--BEC-durationNormal, 0.2s);
}

.nav-item:hover .nav-icon[b-16wmqvnqmc] {
    color: var(--BEC-Text-Primary, #323130);
}

.nav-item.active .nav-icon[b-16wmqvnqmc] {
    color: var(--BEC-layoutBluePrimary);
}

/* SECTION: SYSTEMS (Accordion) */
.accordion-header[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-layoutGray900);
}

.accordion-header:hover[b-16wmqvnqmc] {
    background: var(--BEC-layoutGray200);
}

.accordion-icon[b-16wmqvnqmc] {
    margin-left: auto;
    font-size: 10px;
    transition: transform var(--BEC-durationNormal, 0.2s);
}

.accordion-item.expanded .accordion-icon[b-16wmqvnqmc] {
    transform: rotate(180deg);
}

.accordion-content[b-16wmqvnqmc] {
    display: none;
    background: transparent;
    padding-bottom: 8px;
}

.accordion-item.expanded .accordion-content[b-16wmqvnqmc] {
    display: block;
}

.sub-nav-item[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    padding: 6px 16px 6px 48px;
    /* Indented */
    font-size: 13px;
    color: var(--BEC-layoutGray600);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    transition: background-color var(--BEC-durationNormal, 0.2s) ease, color var(--BEC-durationNormal, 0.2s) ease;
}

.sub-nav-item:hover[b-16wmqvnqmc] {
    color: var(--BEC-layoutGray900);
    background: var(--BEC-layoutGray200);
}

.sub-nav-item.active[b-16wmqvnqmc] {
    color: var(--BEC-layoutBluePrimary);
    font-weight: 600;
    background: transparent;
    position: relative;
}

.sub-nav-item.active[b-16wmqvnqmc]::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--BEC-layoutBluePrimary);
    border-radius: 1px;
}

/* ================= CONTENT ================= */
.main-content[b-16wmqvnqmc] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Content wrapper fills area; scrolls only when inner page is taller (full-height pages fill and use their own 2 scrolls) */
.main-content > .erp-page-container[b-16wmqvnqmc] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.ms-sidebar.collapsed[b-16wmqvnqmc] {
    width: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    border-right: none;
    margin: 0;
    padding: 0;
}

/* Layout loading gate — blocks @Body until critical data is ready */
.layout-loading-gate[b-16wmqvnqmc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* Utility: must override any display state set dynamically */
.nav-hidden[b-16wmqvnqmc] {
    display: none !important;
}

/* Helper for Blazor integration - pages that need to fill and control their own scroll */
.erp-page-container[b-16wmqvnqmc],
[b-16wmqvnqmc] .erp-page-container {
    padding: 0;
    min-height: 0;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Custom Scrollbar for Sidebar */
.ms-sidebar[b-16wmqvnqmc]::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.ms-sidebar[b-16wmqvnqmc]::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

.ms-sidebar:hover[b-16wmqvnqmc]::-webkit-scrollbar-thumb {
    background: var(--BEC-layoutGray300);
}

.ms-sidebar[b-16wmqvnqmc]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-layoutGray600);
}

[b-16wmqvnqmc] .erp-page-container.full-height {
    padding: 0;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* CONTENT AREA — wraps main-content */
.content-area[b-16wmqvnqmc] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}



/* Flyouts */
.context-flyout[b-16wmqvnqmc],
.me-control-flyout[b-16wmqvnqmc] {
    position: absolute;
    top: 50px;
    background: var(--BEC-colorNeutralBackground1, white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: none;
    z-index: 2000;
    overflow: hidden;
    border: 1px solid var(--BEC-layoutGray200);
}

.context-flyout[b-16wmqvnqmc] {
    right: 170px;
    width: 240px;
    padding: 8px 0;
}

.me-control-flyout[b-16wmqvnqmc] {
    right: 10px;
    width: 320px;
}

.context-flyout.visible[b-16wmqvnqmc],
.me-control-flyout.visible[b-16wmqvnqmc] {
    display: block;
}

/* Flyout Internals */
.context-section[b-16wmqvnqmc] {
    border-bottom: 1px solid var(--BEC-layoutGray100);
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.context-section:last-child[b-16wmqvnqmc] {
    border: none;
    margin: 0;
    padding: 0;
}

.context-title[b-16wmqvnqmc] {
    padding: 4px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--BEC-layoutGray600);
    text-transform: uppercase;
}

.context-item[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--BEC-layoutGray900);
    cursor: pointer;
}

.context-item:hover[b-16wmqvnqmc] {
    background: var(--BEC-layoutGray100);
}

.context-item.active[b-16wmqvnqmc] {
    font-weight: 600;
    background: var(--BEC-colorBrandBackground1, #eff6fc);
    color: var(--BEC-layoutBlueDark);
}

.check-icon[b-16wmqvnqmc] {
    margin-left: auto;
    color: var(--BEC-layoutBlueDark);
    font-size: 12px;
}

.me-header[b-16wmqvnqmc] {
    background: var(--BEC-layoutGray100);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.me-avatar-large[b-16wmqvnqmc] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground1, #eff6fc);
    color: var(--BEC-layoutBlueDark);
    font-size: 28px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.me-info h3[b-16wmqvnqmc] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.me-info p[b-16wmqvnqmc] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--BEC-layoutGray600);
}

.me-link[b-16wmqvnqmc] {
    font-size: 12px;
    color: var(--BEC-layoutBluePrimary);
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
}

.me-action-item[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-size: 14px;
    color: var(--BEC-layoutGray900);
    border-top: 1px solid var(--BEC-layoutGray200);
    cursor: pointer;
    text-decoration: none;
}

.me-action-item:hover[b-16wmqvnqmc] {
    background: var(--BEC-layoutGray100);
}

.me-action-icon[b-16wmqvnqmc] {
    width: 24px;
    color: var(--BEC-layoutGray600);
    text-align: center;
    margin-right: 12px;
}

.sign-out[b-16wmqvnqmc] {
    color: var(--BEC-layoutDangerRed);
}

/* LOADING SPINNER */
.loading-container[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: var(--BEC-layoutBluePrimary);
    font-size: 14px;
    font-weight: 500;
}

/* ================= INLINE STYLE REFACTORING ================= */
/* Utility: force-transparent background override for FluentUI component slots */
.bg-transparent[b-16wmqvnqmc] {
    background: transparent !important;
}

/* Specificity increased to override FluentUI badge styles without !important */
.layout-container .badge-warning[b-16wmqvnqmc] {
    background: var(--BEC-Warning-Main, #ffb900);
    color: var(--BEC-colorNeutralForeground1, black);
}

.icon-context[b-16wmqvnqmc] {
    margin-left: 8px;
}


/* ================= BIRTHDATE DIALOG ================= */
.birthdate-dialog[b-16wmqvnqmc] {
    max-width: 500px;
}

.birthdate-form[b-16wmqvnqmc],
.birthdate-confirm[b-16wmqvnqmc] {
    padding: 8px 0;
}

.birthdate-warning[b-16wmqvnqmc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--BEC-Warning-Subtle, #fff3cd) 0%, #ffeaa7 100%);
    border: 2px solid var(--BEC-Warning-Main, #ffc107);
    border-radius: 8px;
    margin-bottom: 20px;
    color: var(--BEC-warningText, #856404);
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.birthdate-warning svg[b-16wmqvnqmc] {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--BEC-Warning-Main, #ff9800);
}

.birthdate-warning strong[b-16wmqvnqmc] {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--BEC-warningText, #856404);
}

.birthdate-description[b-16wmqvnqmc] {
    margin: 0 0 20px 0;
    color: var(--BEC-layoutGray600);
    font-size: 14px;
    line-height: 1.5;
}

.birthdate-input-wrapper[b-16wmqvnqmc] {
    margin-bottom: 24px;
}

.birthdate-label[b-16wmqvnqmc] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-layoutGray900);
    margin-bottom: 8px;
}

.birthdate-input[b-16wmqvnqmc] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--BEC-layoutGray300);
    border-radius: 4px;
    font-size: 14px;
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-layoutGray900);
    background: var(--BEC-colorNeutralBackground1);
    transition: border-color var(--BEC-durationNormal, 0.2s), box-shadow var(--BEC-durationNormal, 0.2s);
}

.birthdate-input:focus[b-16wmqvnqmc] {
    outline: none;
    border-color: var(--BEC-layoutBluePrimary);
    box-shadow: 0 0 0 1px var(--BEC-layoutBluePrimary);
}

.birthdate-input:hover:not(:disabled)[b-16wmqvnqmc] {
    border-color: var(--BEC-layoutGray600);
}

.birthdate-display[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-layoutGray100);
    border-radius: 8px;
    margin-bottom: 24px;
}

.birthdate-value[b-16wmqvnqmc] {
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-layoutGray900);
}

.birthdate-actions[b-16wmqvnqmc] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.birthdate-error[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-layoutGray100);
    border: 1px solid var(--BEC-layoutDangerRed);
    border-radius: 4px;
    color: var(--BEC-layoutDangerRed);
    font-size: 13px;
    margin-bottom: 16px;
}

.birthdate-error svg[b-16wmqvnqmc] {
    flex-shrink: 0;
    stroke: var(--BEC-layoutDangerRed);
}

/* ================= BIRTHDAY GREETING ================= */
.birthday-text[b-16wmqvnqmc] {
    color: #b45309;
}

/* ================= MIGRATED INLINE STYLES ================= */

.lay-org-icon[b-16wmqvnqmc] {
    width: 16px;
    margin-right: 8px;
}

.lay-submit-text[b-16wmqvnqmc] {
    margin-left: 8px;
}

/* ================= ERROR BOUNDARY FALLBACK ================= */

.error-boundary-fallback[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    min-height: 50vh;
    color: var(--BEC-text-primary, #333);
}

.error-boundary-fallback h3[b-16wmqvnqmc] {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: var(--BEC-danger, #d32f2f);
}

.error-boundary-fallback p[b-16wmqvnqmc] {
    margin-bottom: 1rem;
    color: var(--BEC-text-secondary, #666);
}

/* ================= RESPONSIVE BREAKPOINTS ================= */

/* Sidebar overlay backdrop */
.sidebar-overlay[b-16wmqvnqmc] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
    .ms-sidebar[b-16wmqvnqmc] {
        position: fixed;
        top: var(--BEC-layoutHeaderHeight);
        left: 0;
        bottom: 0;
        z-index: 1000;
        width: 0;
        min-width: 0;
        max-width: 0;
        overflow: hidden;
        transform: translateX(-100%);
        transition: transform 0.2s ease, width 0s linear 0.2s;
        margin: 0;
        border-radius: 0 16px 16px 0;
        box-shadow: none;
    }

    .ms-sidebar:not(.collapsed)[b-16wmqvnqmc] {
        width: var(--BEC-layoutSidebarWidth);
        min-width: var(--BEC-layoutSidebarWidth);
        max-width: var(--BEC-layoutSidebarWidth);
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease, width 0s linear 0s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ms-sidebar:not(.collapsed) ~ .sidebar-overlay[b-16wmqvnqmc] {
        display: block;
    }

    .content-area[b-16wmqvnqmc] {
        width: 100%;
        margin-left: 0;
    }

    .main-stack[b-16wmqvnqmc] {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
    .ms-header[b-16wmqvnqmc] {
        padding: 0 8px;
        gap: 4px;
    }

    .header-left[b-16wmqvnqmc] {
        min-width: auto;
        gap: 8px;
        flex-shrink: 1;
        overflow: visible;
    }

    .brand[b-16wmqvnqmc] {
        font-size: 14px;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-center[b-16wmqvnqmc] {
        display: none;
    }

    .header-right[b-16wmqvnqmc] {
        gap: 2px;
        flex-shrink: 0;
    }

    .context-selector[b-16wmqvnqmc] {
        max-width: 130px;
        padding: 4px 8px;
        margin-right: 4px;
    }

    .context-label[b-16wmqvnqmc] {
        display: none;
    }

    .context-value[b-16wmqvnqmc] {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90px;
    }

    /* Touch targets — 44px minimum */
    .icon-btn[b-16wmqvnqmc] {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .waffle-btn[b-16wmqvnqmc] {
        width: 44px;
        height: 44px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--BEC-layoutGray100);
        border: 1px solid var(--BEC-layoutGray200);
        border-radius: 8px;
        color: var(--BEC-layoutGray900);
        flex-shrink: 0;
    }

    .waffle-btn:hover[b-16wmqvnqmc],
    .waffle-btn:active[b-16wmqvnqmc] {
        background: var(--BEC-layoutGray200);
    }

    .avatar[b-16wmqvnqmc] {
        width: 36px;
        height: 36px;
        margin-left: 4px;
    }

    /* Sidebar nav touch targets */
    .home-link[b-16wmqvnqmc] {
        padding: 12px;
        min-height: 44px;
    }

    .accordion-header[b-16wmqvnqmc] {
        padding: 12px 16px;
        min-height: 44px;
    }

    .sub-nav-item[b-16wmqvnqmc] {
        padding: 10px 16px 10px 48px;
        min-height: 44px;
    }

    .nav-item[b-16wmqvnqmc] {
        padding: 12px 24px;
        min-height: 44px;
    }

    .ms-sidebar:not(.collapsed)[b-16wmqvnqmc] {
        width: min(var(--BEC-layoutSidebarWidth), calc(100vw - 56px));
        min-width: min(var(--BEC-layoutSidebarWidth), calc(100vw - 56px));
        max-width: min(var(--BEC-layoutSidebarWidth), calc(100vw - 56px));
    }

    /* Flyouts — responsive on mobile */
    .context-flyout[b-16wmqvnqmc] {
        position: fixed;
        top: var(--BEC-layoutHeaderHeight);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - var(--BEC-layoutHeaderHeight) - 16px);
        overflow-y: auto;
    }

    .me-control-flyout[b-16wmqvnqmc] {
        position: fixed;
        top: var(--BEC-layoutHeaderHeight);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - var(--BEC-layoutHeaderHeight) - 16px);
        overflow-y: auto;
    }

    .me-avatar-large[b-16wmqvnqmc] {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .birthdate-dialog[b-16wmqvnqmc] {
        max-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
    }

    .main-content[b-16wmqvnqmc] {
        margin-left: 0;
        width: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Small phone ≤ 480px ── */
@media (max-width: 480px) {
    .ms-header[b-16wmqvnqmc] {
        padding: 0 4px;
    }

    .brand[b-16wmqvnqmc] {
        max-width: 80px;
        font-size: 13px;
    }

    .birthday-greeting-container[b-16wmqvnqmc] {
        display: none;
    }

    .context-selector[b-16wmqvnqmc] {
        max-width: 44px;
        padding: 4px;
        overflow: hidden;
    }

    .context-meta[b-16wmqvnqmc] {
        display: none;
    }

    .context-flyout[b-16wmqvnqmc],
    .me-control-flyout[b-16wmqvnqmc] {
        left: 4px;
        right: 4px;
    }

}

/* ================= PRINT STYLES ================= */
@media print {
    /* Remove ALL height constraints and overflow clipping from layout containers */
    .layout-container[b-16wmqvnqmc] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .main-stack[b-16wmqvnqmc] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    .content-area[b-16wmqvnqmc] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .main-content[b-16wmqvnqmc] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Remove height constraint on erp-page-container within main-content */
    .main-content > .erp-page-container[b-16wmqvnqmc],
    [b-16wmqvnqmc] .erp-page-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide navigation sidebar for print */
    .ms-sidebar[b-16wmqvnqmc] {
        display: none !important;
    }

    /* Hide top header bar for print */
    .ms-header[b-16wmqvnqmc] {
        display: none !important;
    }

    /* Hide flyouts and overlays */
    .context-flyout[b-16wmqvnqmc],
    .me-control-flyout[b-16wmqvnqmc] {
        display: none !important;
    }

    /* Hide the loading gate if it shows during print */
    .layout-loading-gate[b-16wmqvnqmc] {
        display: none !important;
    }
}
/* /Components/Pages/EmailApproval/ApprovalAction.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   Email Approval Action Page - Styles
   Design: Matches EmailTemplateBuilder corporate style
   Colors: Corporate palette from email templates
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Color Variables - Matches EmailTemplateBuilder
   Moved from :root to component scope, aliased from _email-approval.css */

/* Page Layout */
.approval-page[b-ojw1wynvpj] {
    --primary-blue: var(--BEC-Approval-PrimaryBlue);
    --success-green: var(--BEC-Approval-SuccessGreen);
    --warning-orange: var(--BEC-Approval-WarningOrange);
    --danger-red: var(--BEC-Approval-DangerRed);
    --info-blue: var(--BEC-Approval-InfoBlue);
    --text-dark: var(--BEC-Approval-TextDark);
    --text-muted: var(--BEC-Approval-TextMuted);
    --text-light: var(--BEC-Approval-TextLight);
    --border-color: var(--BEC-Approval-Border);
    --background-light: var(--BEC-Approval-BgLight);
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.approval-container[b-ojw1wynvpj] {
    width: 100%;
    max-width: 520px;
}

/* Logo Header */
.approval-logo[b-ojw1wynvpj] {
    text-align: center;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.approval-logo img[b-ojw1wynvpj] {
    height: 40px;
    width: auto;
}

.approval-logo .logo-text[b-ojw1wynvpj] {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: -0.5px;
}

/* Card Styles */
.approval-card[b-ojw1wynvpj] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-ojw1wynvpj] {
    padding: 32px 24px;
    text-align: center;
    color: #ffffff;
}

.card-header.processing[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.card-header.success[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--success-green), #1e8449);
}

.card-header.error[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--danger-red), #922b21);
}

.card-header.warning[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--warning-orange), #d35400);
}

.card-header.info[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.header-icon[b-ojw1wynvpj] {
    margin-bottom: 16px;
}

.header-icon svg[b-ojw1wynvpj] {
    width: 48px;
    height: 48px;
}

.card-header h1[b-ojw1wynvpj] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* Spinner Animation */
.spinner[b-ojw1wynvpj] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-ojw1wynvpj 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-ojw1wynvpj {
    to { transform: rotate(360deg); }
}

/* Card Body */
.card-body[b-ojw1wynvpj] {
    padding: 28px 24px;
}

.status-message[b-ojw1wynvpj] {
    font-size: 16px;
    color: var(--text-dark);
    text-align: center;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.status-hint[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

/* Details Box */
.details-box[b-ojw1wynvpj] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.detail-row[b-ojw1wynvpj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.detail-row:not(:last-child)[b-ojw1wynvpj] {
    border-bottom: 1px solid var(--border-color);
}

.detail-label[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}

.status-badge[b-ojw1wynvpj] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.approved[b-ojw1wynvpj] {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-green);
}

.status-badge.rejected[b-ojw1wynvpj] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger-red);
}

.status-badge.pending[b-ojw1wynvpj] {
    background: rgba(230, 126, 34, 0.1);
    color: var(--warning-orange);
}

/* Info Box */
.info-box[b-ojw1wynvpj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
}

.info-box svg[b-ojw1wynvpj] {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box span[b-ojw1wynvpj] {
    font-size: 14px;
    line-height: 1.5;
}

.info-box.success[b-ojw1wynvpj] {
    background: rgba(39, 174, 96, 0.08);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.info-box.success svg[b-ojw1wynvpj] {
    color: var(--success-green);
}

.info-box.success span[b-ojw1wynvpj] {
    color: #1e8449;
}

.info-box.error[b-ojw1wynvpj] {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.info-box.error svg[b-ojw1wynvpj] {
    color: var(--danger-red);
}

.info-box.error span[b-ojw1wynvpj] {
    color: #922b21;
}

.info-box.warning[b-ojw1wynvpj] {
    background: rgba(230, 126, 34, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.info-box.warning svg[b-ojw1wynvpj] {
    color: var(--warning-orange);
}

.info-box.warning span[b-ojw1wynvpj] {
    color: #a04000;
}

.info-box.info[b-ojw1wynvpj] {
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.info-box.info svg[b-ojw1wynvpj] {
    color: var(--info-blue);
}

.info-box.info span[b-ojw1wynvpj] {
    color: #21618c;
}

/* Card Footer */
.card-footer[b-ojw1wynvpj] {
    padding: 20px 24px;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.footer-text[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

/* Buttons */
.btn-primary[b-ojw1wynvpj],
.btn-secondary[b-ojw1wynvpj] {
    display: inline-block;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary[b-ojw1wynvpj] {
    background: var(--primary-blue);
    color: #ffffff;
}

.btn-primary:hover[b-ojw1wynvpj] {
    background: #154360;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.3);
}

.btn-secondary[b-ojw1wynvpj] {
    background: #ffffff;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover[b-ojw1wynvpj] {
    background: var(--primary-blue);
    color: #ffffff;
}

/* Page Footer */
.page-footer[b-ojw1wynvpj] {
    text-align: center;
    margin-top: 24px;
}

.page-footer p[b-ojw1wynvpj] {
    font-size: 12px;
    color: var(--text-light);
    margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .approval-page[b-ojw1wynvpj] {
        padding: 16px;
    }
    
    .card-header[b-ojw1wynvpj] {
        padding: 24px 20px;
    }
    
    .card-header h1[b-ojw1wynvpj] {
        font-size: 20px;
    }
    
    .card-body[b-ojw1wynvpj] {
        padding: 24px 20px;
    }
    
    .btn-primary[b-ojw1wynvpj],
    .btn-secondary[b-ojw1wynvpj] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/EmailApproval/ApprovalReject.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   Email Approval Reject Page - Styles
   Design: Matches EmailTemplateBuilder corporate style
   Extends base approval styles with form-specific styling
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Color Variables - Matches EmailTemplateBuilder
   Moved from :root to component scope, aliased from _email-approval.css */

/* Page Layout */
.approval-page[b-xg6d2wzy55] {
    --primary-blue: var(--BEC-Approval-PrimaryBlue);
    --success-green: var(--BEC-Approval-SuccessGreen);
    --warning-orange: var(--BEC-Approval-WarningOrange);
    --danger-red: var(--BEC-Approval-DangerRed);
    --info-blue: var(--BEC-Approval-InfoBlue);
    --text-dark: var(--BEC-Approval-TextDark);
    --text-muted: var(--BEC-Approval-TextMuted);
    --text-light: var(--BEC-Approval-TextLight);
    --border-color: var(--BEC-Approval-Border);
    --background-light: var(--BEC-Approval-BgLight);
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.approval-container[b-xg6d2wzy55] {
    width: 100%;
    max-width: 560px;
}

/* Logo Header */
.approval-logo[b-xg6d2wzy55] {
    text-align: center;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.approval-logo img[b-xg6d2wzy55] {
    height: 40px;
    width: auto;
}

.approval-logo .logo-text[b-xg6d2wzy55] {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: -0.5px;
}

/* Card Styles */
.approval-card[b-xg6d2wzy55] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-xg6d2wzy55] {
    padding: 32px 24px;
    text-align: center;
    color: #ffffff;
}

.card-header.processing[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.card-header.success[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--success-green), #1e8449);
}

.card-header.error[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--danger-red), #922b21);
}

.card-header.warning[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--warning-orange), #d35400);
}

.card-header.info[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.card-header.reject[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--danger-red), #a93226);
}

.header-icon[b-xg6d2wzy55] {
    margin-bottom: 16px;
}

.header-icon svg[b-xg6d2wzy55] {
    width: 48px;
    height: 48px;
}

.card-header h1[b-xg6d2wzy55] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* Spinner Animation */
.spinner[b-xg6d2wzy55] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-xg6d2wzy55 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-xg6d2wzy55 {
    to { transform: rotate(360deg); }
}

/* Card Body */
.card-body[b-xg6d2wzy55] {
    padding: 28px 24px;
}

.status-message[b-xg6d2wzy55] {
    font-size: 16px;
    color: var(--text-dark);
    text-align: center;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

/* Request Summary */
.request-summary[b-xg6d2wzy55] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.request-summary h3[b-xg6d2wzy55] {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-grid[b-xg6d2wzy55] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.summary-item[b-xg6d2wzy55] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-item.full-width[b-xg6d2wzy55] {
    grid-column: 1 / -1;
}

.summary-label[b-xg6d2wzy55] {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.summary-value[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}

/* Rejection Form */
.rejection-form[b-xg6d2wzy55] {
    margin-top: 8px;
}

.form-label[b-xg6d2wzy55] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.label-text[b-xg6d2wzy55] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.required-badge[b-xg6d2wzy55] {
    font-size: 11px;
    font-weight: 600;
    color: var(--danger-red);
    background: rgba(192, 57, 43, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-textarea[b-xg6d2wzy55] {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-textarea:focus[b-xg6d2wzy55] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
}

.form-textarea.invalid[b-xg6d2wzy55] {
    border-color: var(--danger-red);
}

.form-textarea.invalid:focus[b-xg6d2wzy55] {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.form-textarea[b-xg6d2wzy55]::placeholder {
    color: var(--text-light);
}

.textarea-footer[b-xg6d2wzy55] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    min-height: 24px;
}

.char-count[b-xg6d2wzy55] {
    font-size: 12px;
    color: var(--text-light);
}

.char-count.warning[b-xg6d2wzy55] {
    color: var(--warning-orange);
    font-weight: 500;
}

.validation-error[b-xg6d2wzy55] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--danger-red);
    font-weight: 500;
}

.validation-error svg[b-xg6d2wzy55] {
    flex-shrink: 0;
}

/* Details Box */
.details-box[b-xg6d2wzy55] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.detail-row[b-xg6d2wzy55] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.detail-row:not(:last-child)[b-xg6d2wzy55] {
    border-bottom: 1px solid var(--border-color);
}

.detail-label[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}

.status-badge[b-xg6d2wzy55] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.approved[b-xg6d2wzy55] {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-green);
}

.status-badge.rejected[b-xg6d2wzy55] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger-red);
}

/* Info Box */
.info-box[b-xg6d2wzy55] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
}

.info-box svg[b-xg6d2wzy55] {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box span[b-xg6d2wzy55] {
    font-size: 14px;
    line-height: 1.5;
}

.info-box.success[b-xg6d2wzy55] {
    background: rgba(39, 174, 96, 0.08);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.info-box.success svg[b-xg6d2wzy55] {
    color: var(--success-green);
}

.info-box.success span[b-xg6d2wzy55] {
    color: #1e8449;
}

.info-box.error[b-xg6d2wzy55] {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.info-box.error svg[b-xg6d2wzy55] {
    color: var(--danger-red);
}

.info-box.error span[b-xg6d2wzy55] {
    color: #922b21;
}

.info-box.warning[b-xg6d2wzy55] {
    background: rgba(230, 126, 34, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.info-box.warning svg[b-xg6d2wzy55] {
    color: var(--warning-orange);
}

.info-box.warning span[b-xg6d2wzy55] {
    color: #a04000;
}

.info-box.info[b-xg6d2wzy55] {
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.info-box.info svg[b-xg6d2wzy55] {
    color: var(--info-blue);
}

.info-box.info span[b-xg6d2wzy55] {
    color: #21618c;
}

/* Card Footer */
.card-footer[b-xg6d2wzy55] {
    padding: 20px 24px;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.card-footer.form-footer[b-xg6d2wzy55] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.footer-text[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

/* Buttons */
.btn-primary[b-xg6d2wzy55],
.btn-secondary[b-xg6d2wzy55],
.btn-cancel[b-xg6d2wzy55],
.btn-reject[b-xg6d2wzy55] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-xg6d2wzy55] {
    background: var(--primary-blue);
    color: #ffffff;
}

.btn-primary:hover[b-xg6d2wzy55] {
    background: #154360;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.3);
}

.btn-secondary[b-xg6d2wzy55] {
    background: #ffffff;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover[b-xg6d2wzy55] {
    background: var(--primary-blue);
    color: #ffffff;
}

.btn-cancel[b-xg6d2wzy55] {
    background: #ffffff;
    color: var(--text-muted);
    border: 2px solid var(--border-color);
}

.btn-cancel:hover[b-xg6d2wzy55] {
    background: var(--background-light);
    border-color: var(--text-muted);
    color: var(--text-dark);
}

.btn-reject[b-xg6d2wzy55] {
    background: var(--danger-red);
    color: #ffffff;
    min-width: 160px;
}

.btn-reject:hover:not(:disabled)[b-xg6d2wzy55] {
    background: #a93226;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
}

.btn-reject:disabled[b-xg6d2wzy55] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-spinner[b-xg6d2wzy55] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-xg6d2wzy55 0.8s linear infinite;
}

/* Page Footer */
.page-footer[b-xg6d2wzy55] {
    text-align: center;
    margin-top: 24px;
}

.page-footer p[b-xg6d2wzy55] {
    font-size: 12px;
    color: var(--text-light);
    margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .approval-page[b-xg6d2wzy55] {
        padding: 16px;
        align-items: flex-start;
        padding-top: 40px;
    }
    
    .card-header[b-xg6d2wzy55] {
        padding: 24px 20px;
    }
    
    .card-header h1[b-xg6d2wzy55] {
        font-size: 20px;
    }
    
    .card-body[b-xg6d2wzy55] {
        padding: 24px 20px;
    }
    
    .summary-grid[b-xg6d2wzy55] {
        grid-template-columns: 1fr;
    }
    
    .card-footer.form-footer[b-xg6d2wzy55] {
        flex-direction: column;
    }
    
    .btn-cancel[b-xg6d2wzy55],
    .btn-reject[b-xg6d2wzy55] {
        width: 100%;
    }
}
/* /Components/Pages/MainLayout/Account/Account.razor.rz.scp.css */
/* Account Page - Modern Compact Design */

/* Page Container */
.account-page[b-wlc9nftlru] {
    padding: 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    min-height: 100vh;
}

@media (max-width: 768px) {
    .account-page[b-wlc9nftlru] {
        padding: 1rem;
    }
}

/* Loading State */
.account-loading[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.loading-text[b-wlc9nftlru] {
    font-size: 1.125rem;
    color: #6c757d;
    font-weight: 500;
}

/* Error State */
.account-error[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-left: 4px solid #dc3545;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
}

.account-error i[b-wlc9nftlru] {
    font-size: 2rem;
    color: #dc3545;
}

.account-error h3[b-wlc9nftlru] {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    color: #dc3545;
}

.account-error p[b-wlc9nftlru] {
    margin: 0;
    color: #721c24;
}

/* Profile Header */
.profile-header[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1.25rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.25);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-header[b-wlc9nftlru]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.profile-header > *[b-wlc9nftlru] {
    position: relative;
    z-index: 1;
}

.profile-avatar[b-wlc9nftlru] {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle[b-wlc9nftlru] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.avatar-circle i[b-wlc9nftlru] {
    font-size: 2.5rem;
    color: #667eea;
}

.avatar-status[b-wlc9nftlru] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.avatar-status.active[b-wlc9nftlru] {
    background: #28a745;
}

.profile-info[b-wlc9nftlru] {
    flex: 1;
    color: white;
}

.profile-name[b-wlc9nftlru] {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-username[b-wlc9nftlru] {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.profile-meta[b-wlc9nftlru] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.875rem;
}

.meta-item[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2rem;
    backdrop-filter: blur(10px);
}

.meta-item i[b-wlc9nftlru] {
    font-size: 1rem;
}

.meta-item .verified[b-wlc9nftlru] {
    color: #28a745;
    background: white;
    border-radius: 50%;
    padding: 2px;
    margin-left: 0.25rem;
}

.profile-actions[b-wlc9nftlru] {
    display: flex;
    gap: 0.75rem;
}

.btn-icon[b-wlc9nftlru] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-icon:hover:not(:disabled)[b-wlc9nftlru] {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(180deg);
}

.btn-icon:disabled[b-wlc9nftlru] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Main Content Grid */
.account-grid[b-wlc9nftlru] {
    display: grid;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

@media (max-width: 1024px) {
    .account-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Full-width cards */
.info-card:first-of-type[b-wlc9nftlru] {
    grid-column: 1 / -1;
}

.split-card[b-wlc9nftlru] {
    grid-column: 1 / -1;
}

/* Info Card */
.info-card[b-wlc9nftlru] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
}

.info-card[b-wlc9nftlru]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-card:hover[b-wlc9nftlru] {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    transform: translateY(-4px);
    border-color: rgba(102, 126, 234, 0.3);
}

.info-card:hover[b-wlc9nftlru]::before {
    opacity: 1;
}

/* Card Header */
.card-header[b-wlc9nftlru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #f0f2f5;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    position: relative;
}

.card-header[b-wlc9nftlru]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #667eea, transparent);
    opacity: 0.3;
}

.card-title[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
}

.card-title i[b-wlc9nftlru] {
    font-size: 1.25rem;
    color: #667eea;
}

.btn-edit[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #667eea;
    color: #667eea;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-edit:hover[b-wlc9nftlru] {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

/* Card Body */
.card-body[b-wlc9nftlru] {
    padding: 1.75rem;
}

@media (max-width: 768px) {
    .card-body[b-wlc9nftlru] {
        padding: 1.25rem;
    }
}

/* Info Grid - Display Mode */
.info-grid[b-wlc9nftlru] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .info-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.info-item[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.info-label[b-wlc9nftlru] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.info-label i[b-wlc9nftlru] {
    font-size: 0.875rem;
    color: #667eea;
}

.info-value[b-wlc9nftlru] {
    font-size: 0.9375rem;
    color: #2c3e50;
    padding: 0.625rem 0.875rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border-left: 3px solid #667eea;
    font-weight: 500;
    min-height: 38px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.info-value-empty[b-wlc9nftlru] {
    color: #6c757d;
    font-style: italic;
}

/* Birthday Field Styling */
.birthday-item[b-wlc9nftlru] {
    grid-column: 1 / -1;
}

.birthday-value[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.birthday-display[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2c3e50;
    font-weight: 500;
}

.birthday-display i[b-wlc9nftlru] {
    color: #667eea;
    font-size: 1rem;
}

.birthday-badge[b-wlc9nftlru] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    color: white;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(198, 69, 105, 0.3);
    animation: birthdayPulse-b-wlc9nftlru 2s ease-in-out infinite;
}

.birthday-badge i[b-wlc9nftlru] {
    font-size: 0.875rem;
    animation: birthdayRotate-b-wlc9nftlru 3s linear infinite;
}

@keyframes birthdayPulse-b-wlc9nftlru {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(198, 69, 105, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(198, 69, 105, 0.5);
    }
}

@keyframes birthdayRotate-b-wlc9nftlru {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Form Grid - Edit Mode */
.form-grid[b-wlc9nftlru] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-field[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label[b-wlc9nftlru] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
}

.required[b-wlc9nftlru] {
    color: #dc3545;
    margin-left: 0.125rem;
}

.input[b-wlc9nftlru] {
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    background: white;
}

.input:focus[b-wlc9nftlru] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input.error[b-wlc9nftlru] {
    border-color: #dc3545;
}

.input.error:focus[b-wlc9nftlru] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.field-error[b-wlc9nftlru] {
    font-size: 0.75rem;
    color: #dc3545;
    font-weight: 500;
    margin-top: -0.25rem;
}

/* Readonly Section */
.readonly-section[b-wlc9nftlru] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 0.75rem;
    border: 1px solid #dee2e6;
    border-left: 4px solid #667eea;
    position: relative;
    overflow: hidden;
}

.readonly-section[b-wlc9nftlru]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #667eea, transparent);
    opacity: 0.5;
}

.readonly-section h4[b-wlc9nftlru] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.info-row[b-wlc9nftlru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid #dee2e6;
}

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

.info-row .info-label[b-wlc9nftlru] {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
}

.info-row .info-value[b-wlc9nftlru] {
    font-size: 0.875rem;
    color: #2c3e50;
    font-weight: 500;
    background: transparent;
    padding: 0;
    border: none;
    min-height: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.info-row .info-value .birthday-display[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-row .info-value .birthday-badge[b-wlc9nftlru] {
    margin-left: 0.5rem;
}

/* Form Actions */
.form-actions[b-wlc9nftlru] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f2f5;
}

.btn-save[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-save:hover:not(:disabled)[b-wlc9nftlru] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-save:disabled[b-wlc9nftlru] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Badges */
.badge[b-wlc9nftlru] {
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.badge.primary[b-wlc9nftlru] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.badge.success[b-wlc9nftlru] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.badge.default[b-wlc9nftlru] {
    background: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

.badge.count[b-wlc9nftlru] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

/* Split Card */
.split-card .split-body[b-wlc9nftlru] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    padding: 1.5rem;
}

.split-section[b-wlc9nftlru] {
    min-width: 0;
}

.section-title[b-wlc9nftlru] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f2f5;
}

.section-title i[b-wlc9nftlru] {
    color: #667eea;
}

.split-divider[b-wlc9nftlru] {
    width: 2px;
    background: linear-gradient(to bottom, transparent, #e9ecef, transparent);
}

/* Compact Card */
.compact-card .compact-grid[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compact-item[b-wlc9nftlru] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.75rem;
    border-left: 3px solid #667eea;
    transition: all 0.3s ease;
}

.compact-item:hover[b-wlc9nftlru] {
    background: #e9ecef;
    transform: translateX(4px);
}

.compact-item > i[b-wlc9nftlru] {
    font-size: 1.25rem;
    color: #667eea;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.compact-item > div[b-wlc9nftlru] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.compact-label[b-wlc9nftlru] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.compact-value[b-wlc9nftlru] {
    font-size: 0.9375rem;
    color: #2c3e50;
    font-weight: 500;
}

/* List Card */
.list-items[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.list-item[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.list-item:hover[b-wlc9nftlru] {
    background: white;
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
    transform: translateX(4px);
}

.list-item.is-default[b-wlc9nftlru] {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4caf50;
}

.list-icon[b-wlc9nftlru] {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.list-content[b-wlc9nftlru] {
    flex: 1;
    min-width: 0;
}

.list-title[b-wlc9nftlru] {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.375rem;
}

.list-meta[b-wlc9nftlru] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8125rem;
    color: #6c757d;
}

.list-meta span[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.list-meta i[b-wlc9nftlru] {
    color: #667eea;
}

.list-badges[b-wlc9nftlru] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Toast Messages */
.toast[b-wlc9nftlru] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    z-index: 1000;
    animation: slideUp-b-wlc9nftlru 0.3s ease;
    backdrop-filter: blur(10px);
}

@keyframes slideUp-b-wlc9nftlru {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast-success[b-wlc9nftlru] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left: 4px solid #28a745;
}

.toast-success i[b-wlc9nftlru] {
    font-size: 1.5rem;
    color: #28a745;
}

.toast-error[b-wlc9nftlru] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-left: 4px solid #dc3545;
}

.toast-error i[b-wlc9nftlru] {
    font-size: 1.5rem;
    color: #dc3545;
}

.toast-content[b-wlc9nftlru] {
    flex: 1;
}

.toast-title[b-wlc9nftlru] {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.toast-success .toast-title[b-wlc9nftlru] {
    color: #155724;
}

.toast-error .toast-title[b-wlc9nftlru] {
    color: #721c24;
}

.toast-message[b-wlc9nftlru] {
    font-size: 0.875rem;
}

.toast-success .toast-message[b-wlc9nftlru] {
    color: #155724;
}

.toast-error .toast-message[b-wlc9nftlru] {
    color: #721c24;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .split-card .split-body[b-wlc9nftlru] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .split-divider[b-wlc9nftlru] {
        display: none;
    }

    .info-grid[b-wlc9nftlru] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .account-page[b-wlc9nftlru] {
        padding: 1rem;
    }

    .profile-header[b-wlc9nftlru] {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .profile-name[b-wlc9nftlru] {
        font-size: 1.5rem;
    }

    .profile-meta[b-wlc9nftlru] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .profile-actions[b-wlc9nftlru] {
        width: 100%;
        justify-content: center;
    }

    .form-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
    }

    .list-item[b-wlc9nftlru] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .list-badges[b-wlc9nftlru] {
        align-self: flex-start;
    }

    .toast[b-wlc9nftlru] {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }

    .form-actions[b-wlc9nftlru] {
        flex-direction: column;
    }

    .btn-save[b-wlc9nftlru] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .avatar-circle[b-wlc9nftlru] {
        width: 80px;
        height: 80px;
    }

    .avatar-circle i[b-wlc9nftlru] {
        font-size: 2rem;
    }

    .profile-name[b-wlc9nftlru] {
        font-size: 1.25rem;
    }

    .profile-username[b-wlc9nftlru] {
        font-size: 1rem;
    }

    .card-header[b-wlc9nftlru] {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .card-body[b-wlc9nftlru] {
        padding: 1rem;
    }

    .list-meta[b-wlc9nftlru] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .compact-grid[b-wlc9nftlru] {
        gap: 0.75rem;
    }
}
/* /Components/Pages/MainLayout/Administration/Administration/AuditLog/AuditLogAdministration.razor.rz.scp.css */
/* ========================================
   AUDIT LOG ADMINISTRATION
   GOLD STANDARD CSS - Role Model for All Pages
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90
   📌 Grid Headers:   top: 120px,  z-index: 80
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-7eozfx1fl5] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   ======================================== */
.erp-page-container[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */
.erp-page-header[b-7eozfx1fl5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-7eozfx1fl5] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-7eozfx1fl5] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-7eozfx1fl5] {
    transform: scale(0.98);
}

.page-subtitle[b-7eozfx1fl5] {
    display: none;
}

.header-right[b-7eozfx1fl5] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-7eozfx1fl5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-7eozfx1fl5] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-7eozfx1fl5] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-7eozfx1fl5] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-7eozfx1fl5] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-7eozfx1fl5] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-7eozfx1fl5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-7eozfx1fl5] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-7eozfx1fl5] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7eozfx1fl5] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7eozfx1fl5] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group,
[b-7eozfx1fl5] .e-toolbar .e-input-group.e-control-wrapper,
[b-7eozfx1fl5] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group .e-input,
[b-7eozfx1fl5] .e-toolbar .e-input-group .e-input,
[b-7eozfx1fl5] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-7eozfx1fl5] .e-toolbar .e-input-group:focus-within,
[b-7eozfx1fl5] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-7eozfx1fl5] .e-toolbar .e-textbox .e-input-group-icon,
[b-7eozfx1fl5] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-7eozfx1fl5] .e-toolbar .e-input-group .e-input::placeholder,
[b-7eozfx1fl5] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   ======================================== */
.erp-page-content[b-7eozfx1fl5] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-7eozfx1fl5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: 16px;
    color: #0078d4;
    font-weight: 600;
}

/* Error Dialog Content */
.error-dialog-content[b-7eozfx1fl5] {
    display: flex;
    gap: 20px;
    padding: 20px;
    align-items: flex-start;
}

.error-icon[b-7eozfx1fl5] {
    flex-shrink: 0;
}

.error-icon i[b-7eozfx1fl5] {
    font-size: 48px;
    color: #d13438;
}

.error-message h4[b-7eozfx1fl5] {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #242424;
}

.error-message p[b-7eozfx1fl5] {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #605e5c;
}

.error-hint[b-7eozfx1fl5] {
    font-size: 13px;
    color: #8a8886;
    font-style: italic;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   (100% IDENTICAL TO SYSTEM MODULES)
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-7eozfx1fl5] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-7eozfx1fl5] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-7eozfx1fl5] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-7eozfx1fl5] .e-grid .e-row.e-selectionbackground,
[b-7eozfx1fl5] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-7eozfx1fl5] .e-grid .e-row.e-selectionbackground:hover,
[b-7eozfx1fl5] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-7eozfx1fl5] .e-grid .e-row.e-selectionbackground td:first-child,
[b-7eozfx1fl5] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - Compact (32px) */
[b-7eozfx1fl5] .e-grid .e-row {
    height: 32px !important;
}

[b-7eozfx1fl5] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - Compact (32px) */
[b-7eozfx1fl5] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Row Hover Effect */
[b-7eozfx1fl5] .e-grid .e-row:hover:not(.e-selectionbackground):not([aria-selected="true"]) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager) */
/* DO NOT add pager CSS here - it will override the global styles */

/* Action Badges in Grid */
:global(.action-badge)[b-7eozfx1fl5] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.action-create)[b-7eozfx1fl5] {
    background: #d4edda;
    color: #155724;
}

:global(.action-update)[b-7eozfx1fl5] {
    background: #cce5ff;
    color: #004085;
}

:global(.action-delete)[b-7eozfx1fl5] {
    background: #f8d7da;
    color: #721c24;
}

:global(.action-read)[b-7eozfx1fl5] {
    background: #e2e3e5;
    color: #383d41;
}

/* Truncate Long Text */
.truncate-text[b-7eozfx1fl5] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   DIALOG STYLING
   ======================================== */
.dialog-content[b-7eozfx1fl5] {
    padding: 20px;
}

.detail-section[b-7eozfx1fl5] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.detail-section:last-child[b-7eozfx1fl5] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section h3[b-7eozfx1fl5] {
    font-size: 16px;
    font-weight: 600;
    color: #0078d4;
    margin: 0 0 16px 0;
}

.detail-table[b-7eozfx1fl5] {
    width: 100%;
    border-collapse: collapse;
}

.detail-table tr[b-7eozfx1fl5] {
    border-bottom: 1px solid #f0f0f0;
}

.detail-table tr:last-child[b-7eozfx1fl5] {
    border-bottom: none;
}

.detail-table td[b-7eozfx1fl5] {
    padding: 10px 12px;
    vertical-align: top;
}

.detail-table td.label[b-7eozfx1fl5] {
    font-weight: 600;
    color: #666;
    width: 180px;
}

.detail-table td.value-cell[b-7eozfx1fl5] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    word-break: break-word;
}

.additional-info[b-7eozfx1fl5] {
    padding: 12px;
    background: #f5f5f5;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #333;
}

/* ========================================
   RESPONSIVE DESIGN (Syncfusion Adaptive UI)
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {

    /* Sticky headers with adjusted positions */
    .erp-page-header[b-7eozfx1fl5] {
        padding: 8px 16px;
    }

    [b-7eozfx1fl5] .e-toolbar.e-control {
        top: 50px !important;
        padding: 4px 16px !important;
    }

    :global(.e-grid .e-gridheader)[b-7eozfx1fl5] {
        top: 100px !important;
    }
}

/* Mobile (< 768px) - Syncfusion Adaptive UI kicks in */
@media (max-width: 768px) {

    /* Page Header - Compact Mobile Layout */
    .erp-page-header[b-7eozfx1fl5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 12px;
    }

    .stats-container[b-7eozfx1fl5] {
        width: 100%;
        justify-content: space-around;
        padding: 4px 8px;
        gap: 8px;
    }

    .stat-card[b-7eozfx1fl5] {
        min-width: 60px;
    }

    .page-title[b-7eozfx1fl5] {
        font-size: 18px;
    }

    .page-title i[b-7eozfx1fl5] {
        font-size: 20px;
    }

    .page-subtitle[b-7eozfx1fl5] {
        font-size: 11px;
    }

    /* Toolbar - Mobile Optimization */
    [b-7eozfx1fl5] .e-toolbar.e-control {
        top: 90px !important;
        /* Adjusted for taller mobile header */
        padding: 4px 12px !important;
        margin: 4px 8px !important;
    }

    [b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    [b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
        font-size: 12px !important;
    }

    /* Grid Headers - Adjusted for Mobile */
    :global(.e-grid .e-gridheader)[b-7eozfx1fl5] {
        top: 140px !important;
    }

    /* Grid Content - Mobile Padding */
    .erp-page-content[b-7eozfx1fl5] {
        padding: 8px;
    }

    /* Adaptive Grid Features (Syncfusion Handles) */
    :global(.e-grid.e-responsive-mode)[b-7eozfx1fl5] {
        font-size: 13px !important;
    }

    /* Dialog - Full Screen on Mobile */
    .detail-table td.label[b-7eozfx1fl5] {
        width: 100px;
        font-size: 12px;
    }

    .detail-table td[b-7eozfx1fl5] {
        padding: 8px;
        font-size: 13px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .page-title[b-7eozfx1fl5] {
        font-size: 16px;
    }

    .stat-value[b-7eozfx1fl5] {
        font-size: 14px;
    }

    .stat-label[b-7eozfx1fl5] {
        font-size: 9px;
    }

    [b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
        /* Show icons only on very small screens */
    }
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-7eozfx1fl5] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-7eozfx1fl5] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-7eozfx1fl5] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-7eozfx1fl5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-7eozfx1fl5] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-7eozfx1fl5] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-7eozfx1fl5] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-7eozfx1fl5] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-7eozfx1fl5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-7eozfx1fl5] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-7eozfx1fl5] {
    margin-bottom: 24px;
    animation: fadeInUp-b-7eozfx1fl5 0.6s ease;
}

.step-icon i[b-7eozfx1fl5] {
    font-size: 48px;
}

.step-title[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-7eozfx1fl5] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-7eozfx1fl5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-7eozfx1fl5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-7eozfx1fl5] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-7eozfx1fl5] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-7eozfx1fl5] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-7eozfx1fl5] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-7eozfx1fl5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-7eozfx1fl5] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-7eozfx1fl5] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-7eozfx1fl5] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-7eozfx1fl5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-7eozfx1fl5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-7eozfx1fl5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-7eozfx1fl5] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-7eozfx1fl5] {
    background: #e1dfdd;
}

.btn-next[b-7eozfx1fl5] {
    background: var(--BEC-colorBrandForeground1);
    color: white;
}

.btn-next:hover:not(:disabled)[b-7eozfx1fl5] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-7eozfx1fl5] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-7eozfx1fl5] {
    background: #059669;
}

/* Animations */
@keyframes fadeInUp-b-7eozfx1fl5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   WIZARD FORM STYLING (View Wizard)
   ======================================== */
.form-group[b-7eozfx1fl5] {
    margin-bottom: 20px;
}

.form-label[b-7eozfx1fl5] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-value[b-7eozfx1fl5] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-7eozfx1fl5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Assignment Wizard Sidebar (View Wizard) */
[b-7eozfx1fl5] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Responsive: Stack form rows on mobile */
@media (max-width: 768px) {
    .form-row[b-7eozfx1fl5] {
        grid-template-columns: 1fr;
    }

    [b-7eozfx1fl5] .assignment-wizard-sidebar {
        width: 90% !important;
    }
}

/* ========================================
   COLUMN CHOOSER STYLING
   ======================================== */
.column-chooser-actions[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-7eozfx1fl5] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-7eozfx1fl5] {
    font-size: 12px;
}

.column-chooser-list[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-7eozfx1fl5]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-7eozfx1fl5]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-7eozfx1fl5] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-7eozfx1fl5] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-7eozfx1fl5] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-7eozfx1fl5] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-7eozfx1fl5] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-7eozfx1fl5] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-7eozfx1fl5] {
    animation: fadeInUp-b-7eozfx1fl5 0.3s ease-out;
}

.step-title[b-7eozfx1fl5] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-7eozfx1fl5] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-7eozfx1fl5]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-7eozfx1fl5]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-7eozfx1fl5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-7eozfx1fl5]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-7eozfx1fl5] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-7eozfx1fl5] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-7eozfx1fl5] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-7eozfx1fl5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-7eozfx1fl5] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-7eozfx1fl5] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-wizard-step-mt[b-7eozfx1fl5] {
    margin-top: 24px;
}

.adm-text-separator[b-7eozfx1fl5] {
    color: #e0e0e0;
}

.adm-text-brand[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Administration/Administration/Branch/BranchAdministration.razor.rz.scp.css */
/* ========================================
   BRANCH ADMINISTRATION
   Following CompanyAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-i648zwq69t] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   NO height constraints - allow natural flow
   ======================================== */
.erp-page-container[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-i648zwq69t] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-i648zwq69t] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-i648zwq69t] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-i648zwq69t] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-i648zwq69t] {
    transform: scale(0.98);
}

.header-right[b-i648zwq69t] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-i648zwq69t] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-i648zwq69t] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-i648zwq69t] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-i648zwq69t] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ORGANIZATION ADMINISTRATION)
   ======================================== */
[b-i648zwq69t] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-i648zwq69t] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE */
/* Maximum specificity to override all Syncfusion defaults */

/* Container - Force exact 22px height with all possible selectors */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper.e-textbox,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group,
[b-i648zwq69t] .e-toolbar .e-input-group.e-control-wrapper {
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Input field - Exact 20px height with vertical centering */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group .e-input,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group input.e-input,
[b-i648zwq69t] .e-toolbar .e-input-group input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    outline: none !important;
}

/* Placeholder - Perfect vertical centering */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input::placeholder,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-i648zwq69t] .e-toolbar .e-input-group input::placeholder {
    line-height: 20px !important;
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
}

/* Clear button icon - Aligned with container */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    border: none !important;
    padding: 0 6px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

/* Focus state */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group:focus-within,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any extra padding/margin from wrapper elements */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group-icon.e-clear-icon {
    height: 22px !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-i648zwq69t] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-i648zwq69t] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-i648zwq69t] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-i648zwq69t] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* Loading Overlay (Legacy - kept for backwards compatibility) */
.loading-overlay[b-i648zwq69t] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Error Dialog Content */
.error-dialog-content[b-i648zwq69t] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.error-icon[b-i648zwq69t] {
    flex-shrink: 0;
}

.error-icon i[b-i648zwq69t] {
    font-size: 48px;
    color: #d13438;
}

.error-message h4[b-i648zwq69t] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
}

.error-message p[b-i648zwq69t] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.error-hint[b-i648zwq69t] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* Sticky Grid Headers - Now handled by EnableStickyHeader="true" in grid */
/* Removed duplicate styles - using System Modules pattern instead */

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-i648zwq69t] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-i648zwq69t] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-i648zwq69t] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-i648zwq69t] .e-grid .e-row.e-selectionbackground,
[b-i648zwq69t] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-i648zwq69t] .e-grid .e-row.e-selectionbackground:hover,
[b-i648zwq69t] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-i648zwq69t] .e-grid .e-row.e-selectionbackground td:first-child,
[b-i648zwq69t] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-i648zwq69t] .e-grid .e-row {
    height: 32px !important;
}

[b-i648zwq69t] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-i648zwq69t] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-i648zwq69t] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Ensure grid table is fully visible */
:global(.e-grid .e-table)[b-i648zwq69t] {
    width: 100% !important;
}

/* Code Badge in Grid */
:global(.code-badge)[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: #e8f4fd;
    color: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid #c7e0f4;
}

/* Type Badges in Grid (Branch-Specific) */
:global(.type-badge)[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.type-branch)[b-i648zwq69t] {
    background: #e8f4fd;
    color: var(--BEC-colorBrandBackground);
    border: 1px solid #c7e0f4;
}

:global(.type-project)[b-i648zwq69t] {
    background: #f4e8fd;
    color: #7b2cbf;
    border: 1px solid #d4c0f4;
}

/* Status Badges in Grid */
:global(.status-badge)[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.status-active)[b-i648zwq69t] {
    background: #d4edda;
    color: #155724;
}

:global(.status-inactive)[b-i648zwq69t] {
    background: #f8d7da;
    color: #721c24;
}

/* RTL Text Support */
:global(.rtl-text)[b-i648zwq69t] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

:global(.rtl-input)[b-i648zwq69t] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-i648zwq69t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-i648zwq69t 0.2s ease-out;
}

@keyframes fadeIn-b-i648zwq69t {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-i648zwq69t 0.3s ease-out;
}

.modal-container.modal-sm[b-i648zwq69t] {
    max-width: 500px;
}

@keyframes slideUp-b-i648zwq69t {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }

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

/* Modal Header */
.modal-header[b-i648zwq69t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-i648zwq69t] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-i648zwq69t] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-i648zwq69t] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-i648zwq69t] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-i648zwq69t] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-i648zwq69t] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-i648zwq69t] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-i648zwq69t] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-i648zwq69t] {
    background: #d1d1d1;
}

.btn-danger[b-i648zwq69t] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-i648zwq69t] {
    background: #b91c1c;
}

.btn-warning[b-i648zwq69t] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-i648zwq69t] {
    background: #e67e00;
}

.btn-success[b-i648zwq69t] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-i648zwq69t] {
    background: #059669;
}

/* Info Grid (View Dialog) */
.info-grid[b-i648zwq69t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.info-section[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-i648zwq69t] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-i648zwq69t] {
    font-size: var(--BEC-fontSizeBase400);
}

.info-row[b-i648zwq69t] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.info-label[b-i648zwq69t] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.info-value[b-i648zwq69t] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

/* Form Grid (Edit Dialog) */
.form-grid[b-i648zwq69t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.form-section[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Form Group */
.form-group[b-i648zwq69t] {
    margin-bottom: 20px;
}

.form-label[b-i648zwq69t] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-i648zwq69t]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-i648zwq69t] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-i648zwq69t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-i648zwq69t] {
    direction: rtl;
    text-align: right;
}

.form-input[b-i648zwq69t] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-i648zwq69t] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: var(--BEC-shadow4);
}

.form-input:disabled[b-i648zwq69t] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground3);
    cursor: not-allowed;
}

.checkbox-label[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-i648zwq69t] {
    width: var(--BEC-spacingHorizontalL);
    height: var(--BEC-spacingHorizontalL);
    cursor: pointer;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-i648zwq69t] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-i648zwq69t] {
    color: #d83b01;
}

.warning-note[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid #d83b01;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-i648zwq69t] {
    color: #d83b01;
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-i648zwq69t] {
    background: linear-gradient(135deg, #e8f4fd 0%, #c7e0f4 100%);
    border-left-color: var(--BEC-colorBrandForeground1);
}

.warning-note-info i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
}

.warning-note-success[b-i648zwq69t] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-i648zwq69t] {
    color: #10b981;
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-i648zwq69t] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-i648zwq69t] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-i648zwq69t] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-i648zwq69t] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* ========================================
   HELP WIZARD STYLING
   ======================================== */

/* Hide sidebar overlay for help wizard */
[b-i648zwq69t] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-i648zwq69t] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-i648zwq69t] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* Wizard Sidebar Styling */
.sidebar-header[b-i648zwq69t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-i648zwq69t] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-i648zwq69t] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-i648zwq69t] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-i648zwq69t] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-i648zwq69t] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-i648zwq69t] {
    max-width: 100%;
    text-align: left;
    padding: 20px;
}

.step-icon[b-i648zwq69t] {
    margin-bottom: 24px;
    animation: fadeInUp-b-i648zwq69t 0.6s ease;
    text-align: center;
}

.step-title[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-i648zwq69t] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-i648zwq69t] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
    line-height: 1.6;
}

/* Info Box */
.info-box[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-i648zwq69t] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-i648zwq69t] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-i648zwq69t] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-i648zwq69t] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-i648zwq69t] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-i648zwq69t] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-i648zwq69t] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-i648zwq69t] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-i648zwq69t] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-i648zwq69t] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-i648zwq69t] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-i648zwq69t] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-i648zwq69t] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-i648zwq69t] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-i648zwq69t] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-i648zwq69t] {
    background: #f3f3f3;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-i648zwq69t] {
    background: #e0e0e0;
}

.btn-next[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-i648zwq69t] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-i648zwq69t] {
    background: #059669;
}

.btn i[b-i648zwq69t] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-i648zwq69t {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   BADGE STYLES (for View Wizard)
   ======================================== */
.badge[b-i648zwq69t] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-i648zwq69t] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-i648zwq69t] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* Column Chooser Dialog Footer (OK button) */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-i648zwq69t] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandForeground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-i648zwq69t] {
    font-size: 12px;
}

.column-chooser-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-i648zwq69t] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-i648zwq69t] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-i648zwq69t] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-i648zwq69t] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-i648zwq69t] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-i648zwq69t] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-i648zwq69t] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-i648zwq69t] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-i648zwq69t] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-i648zwq69t] .notification-success .e-dlg-content,
[b-i648zwq69t] .notification-error .e-dlg-content,
[b-i648zwq69t] .notification-warning .e-dlg-content,
[b-i648zwq69t] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-i648zwq69t] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-i648zwq69t] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-i648zwq69t] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-i648zwq69t] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-i648zwq69t] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   BADGE STYLES (for View Wizard)
   ======================================== */
.badge[b-i648zwq69t] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-i648zwq69t] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-i648zwq69t] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* Column Chooser Dialog Footer (OK button) */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-i648zwq69t] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandForeground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-i648zwq69t] {
    font-size: 12px;
}

.column-chooser-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-i648zwq69t] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-i648zwq69t] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-i648zwq69t] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-i648zwq69t] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-i648zwq69t] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-i648zwq69t] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-i648zwq69t] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-i648zwq69t] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-i648zwq69t] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-i648zwq69t] .notification-success .e-dlg-content,
[b-i648zwq69t] .notification-error .e-dlg-content,
[b-i648zwq69t] .notification-warning .e-dlg-content,
[b-i648zwq69t] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-i648zwq69t] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-i648zwq69t] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-i648zwq69t] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Tablet (768px - 1024px) - Adjust Search Bar */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Search Bar - Tablet Width */
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-i648zwq69t] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-i648zwq69t] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-i648zwq69t] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-i648zwq69t] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-i648zwq69t] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-i648zwq69t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-i648zwq69t] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-i648zwq69t] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-i648zwq69t]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-i648zwq69t]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-i648zwq69t]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-i648zwq69t]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-status-active-text[b-i648zwq69t] {
    color: green;
    font-weight: 600;
}

.adm-status-inactive-text[b-i648zwq69t] {
    color: red;
    font-weight: 600;
}

.adm-checkbox-group[b-i648zwq69t] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

.adm-text-danger[b-i648zwq69t] {
    color: #d13438;
}

.adm-help-icon-lg[b-i648zwq69t] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-i648zwq69t] {
    color: #e0e0e0;
}

.adm-dialog-header-flex[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-i648zwq69t] {
    font-size: 20px;
}

.adm-preline-text[b-i648zwq69t] {
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/Company/CompanyAdministration.razor.rz.scp.css */
/* ========================================
   COMPANY ADMINISTRATION
   Following OrganizationAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-xh255910p3] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   NO height constraints - allow natural flow
   ======================================== */
.erp-page-container[b-xh255910p3] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER (50% Height Reduction)
   STICKY: Stays at top while scrolling
   ======================================== */
.erp-page-header[b-xh255910p3] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: var(--BEC-shadow4);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.header-left[b-xh255910p3] {
    flex: 1;
}

.page-title[b-xh255910p3] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground1);
}

.page-title i[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorBrandBackground);
}

.page-subtitle[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.header-right[b-xh255910p3] {
    flex-shrink: 0;
}

.stats-container[b-xh255910p3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.stat-card[b-xh255910p3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
}

.stat-value[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandBackground);
    line-height: 1;
}

.stat-label[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightSemibold);
    letter-spacing: 0.3px;
}

.stat-divider[b-xh255910p3] {
    width: 1px;
    height: var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   ======================================== */

/* Toolbar Container - Rounded Corners with Visible Edges */
[b-xh255910p3] .e-toolbar.e-control {
    position: sticky !important;
    top: 58px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

/* Toolbar Items - Reduced Spacing */
[b-xh255910p3] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-xh255910p3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: var(--BEC-spacingHorizontalXS) !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform (Active buttons are bright) */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
/* OPTION 5: Opacity Only (Simplest & Lightest) - ACTIVE */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-xh255910p3] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent (20% Smaller) ======= */
[b-xh255910p3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER (User Preference) ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-xh255910p3] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXL);
    position: relative;
}

/* Loading Overlay */
.loading-overlay[b-xh255910p3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Error Dialog Content */
.error-dialog-content[b-xh255910p3] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.error-icon[b-xh255910p3] {
    flex-shrink: 0;
}

.error-icon i[b-xh255910p3] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-message h4[b-xh255910p3] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
}

.error-message p[b-xh255910p3] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.error-hint[b-xh255910p3] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* Sticky Grid Headers - Adjusted for smaller toolbar */
:global(.e-grid .e-gridheader)[b-xh255910p3] {
    position: sticky !important;
    top: 110px !important;
    z-index: 80 !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    box-shadow: var(--BEC-shadow4) !important;
}

:global(.e-grid .e-headercell)[b-xh255910p3] {
    background: var(--BEC-colorNeutralBackground2) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid with natural paging - expands to fill available space */
/* Grid with Fixed Height - Syncfusion Recommended Approach */
:global(.e-grid)[b-xh255910p3] {
    overflow-x: auto !important;
    /* Horizontal scroll for wide tables */
}

:global(.e-grid .e-gridcontent)[b-xh255910p3] {
    overflow-x: auto !important;
    /* Horizontal scroll */
    overflow-y: auto !important;
    /* Vertical scroll for grid content */
}

/* Ensure grid table is fully visible */
:global(.e-grid .e-table)[b-xh255910p3] {
    width: 100% !important;
}

/* ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager) */
/* DO NOT add pager CSS here - it will override the global styles */

/* Code Badge in Grid */
:global(.code-badge)[b-xh255910p3] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorBrandStroke1);
}

/* Count Badge in Grid */
:global(.count-badge)[b-xh255910p3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* Status Badges in Grid */
:global(.status-badge)[b-xh255910p3] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.status-active)[b-xh255910p3] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

:global(.status-inactive)[b-xh255910p3] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* RTL Text Support */
:global(.rtl-text)[b-xh255910p3] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

:global(.rtl-input)[b-xh255910p3] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   DIALOG STYLING
   ======================================== */
.dialog-content[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalXL);
}

.detail-section[b-xh255910p3] {
    margin-bottom: var(--BEC-spacingHorizontalXXL);
    padding-bottom: var(--BEC-spacingHorizontalXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.detail-section:last-child[b-xh255910p3] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section h3[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandBackground);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.section-title[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandBackground);
    margin: var(--BEC-spacingHorizontalXXL) 0 var(--BEC-spacingHorizontalM) 0;
    padding-top: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title:first-of-type[b-xh255910p3] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.detail-table[b-xh255910p3] {
    width: 100%;
    border-collapse: collapse;
}

.detail-table tr[b-xh255910p3] {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.detail-table tr:last-child[b-xh255910p3] {
    border-bottom: none;
}

.detail-table td[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalM);
    vertical-align: top;
}

.detail-table td.label[b-xh255910p3] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    width: 180px;
}

/* Form Groups in Dialogs */
.form-group[b-xh255910p3] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-xh255910p3] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   INLINE VALIDATION ERROR (Phase 9)
   Displayed directly under each field
   ======================================== */
.field-error[b-xh255910p3] {
    margin-top: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background-color: var(--BEC-colorPaletteRedBackground2);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    animation: slideDown-b-xh255910p3 0.2s ease-out;
}

.field-error i[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase300);
}

@keyframes slideDown-b-xh255910p3 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* Confirmation Dialogs */
.confirmation-content[b-xh255910p3] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.confirmation-icon[b-xh255910p3] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.confirmation-icon-danger[b-xh255910p3] {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    color: var(--BEC-colorPaletteRedForeground1);
}

.confirmation-icon-warning[b-xh255910p3] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: var(--BEC-colorPaletteDarkOrangeForeground1);
}

.confirmation-icon-success[b-xh255910p3] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.confirmation-message[b-xh255910p3] {
    flex: 1;
}

.confirmation-message p[b-xh255910p3] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
}

.confirmation-message p:last-child[b-xh255910p3] {
    margin-bottom: 0;
}

.confirmation-warning[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-warning i[b-xh255910p3] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

.confirmation-info[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorPaletteGreenForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-info i[b-xh255910p3] {
    color: var(--BEC-colorPaletteGreenForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-xh255910p3] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-xh255910p3] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-xh255910p3] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-xh255910p3] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-xh255910p3] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-xh255910p3] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-xh255910p3] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-xh255910p3] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-xh255910p3] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}
/* /Components/Pages/MainLayout/Administration/Administration/Company/CompanyCreateModal.razor.rz.scp.css */
/* ========================================
   Company Create Modal - Syncfusion Components
   Used on: CompanyAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Dialog + Stepper + Toast
   ======================================== */

/* ========================================
   SYNCFUSION DIALOG CUSTOMIZATION
   ======================================== */

/* Dialog Container */
:global(.company-create-dialog)[b-tgg3ztwf7h] {
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 1200px;
}

/* Dialog Header */
:global(.company-create-dialog .e-dlg-header)[b-tgg3ztwf7h] {
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXL);
}

.dialog-header-content[b-tgg3ztwf7h] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.dialog-title[b-tgg3ztwf7h] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.dialog-title i[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-subtitle[b-tgg3ztwf7h] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Dialog Content */
:global(.company-create-dialog .e-dlg-content)[b-tgg3ztwf7h] {
    padding: 0;
    overflow: hidden;
}

/* Dialog Footer */
:global(.company-create-dialog .e-footer-content)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   SYNCFUSION STEPPER CUSTOMIZATION (LABEL ONLY)
   ✅ No icon styling needed - Label Only mode
   ✅ Clean, professional text-only display
   ======================================== */

:global(.company-stepper)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* Stepper Labels (Text Only) */
:global(.company-stepper .e-step .e-step-label-container)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalM);
}

:global(.company-stepper .e-step .e-step-text-content)[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.3s ease;
}

/* Active Step Label */
:global(.company-stepper .e-step.e-step-selected .e-step-text-content)[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

/* Completed Step Label */
:global(.company-stepper .e-step.e-step-completed .e-step-text-content)[b-tgg3ztwf7h] {
    color: var(--BEC-colorNeutralForeground2);
}

/* Stepper Connector Lines */
:global(.company-stepper .e-stepper-progressbar)[b-tgg3ztwf7h] {
    background: var(--BEC-colorNeutralStroke2);
    height: 3px;
    transition: all 0.3s ease;
}

:global(.company-stepper .e-step.e-step-completed .e-stepper-progressbar)[b-tgg3ztwf7h],
:global(.company-stepper .e-step.e-step-selected .e-stepper-progressbar)[b-tgg3ztwf7h] {
    background: var(--BEC-colorBrandBackground);
    height: 4px;
}

/* ========================================
   FORM CONTENT AREA
   ======================================== */

.dialog-form-content[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalXXL);
    min-height: 400px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar {
    width: 8px;
}

.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
}

.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke3);
}

/* Form Step Container */
.form-step[b-tgg3ztwf7h] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (2-column grid) */
.form-row[b-tgg3ztwf7h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (3-column grid) - Compact horizontal layout */
.form-row-triple[b-tgg3ztwf7h] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Row (4-column grid) - Ultra-compact for small fields */
.form-row-quad[b-tgg3ztwf7h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Group */
.form-group[b-tgg3ztwf7h] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.form-group.full-width[b-tgg3ztwf7h] {
    grid-column: span 2;
}

/* Form Label */
.form-label[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-label .required[b-tgg3ztwf7h] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: var(--BEC-spacingHorizontalXXS);
}

/* Read-only Company/Organization Display */
.input-readonly[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background-color: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-readonly i[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Company/Organization Display */
.input-loading[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    background-color: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-loading i[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Field Hint */
.field-hint[b-tgg3ztwf7h] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   Displayed directly under each field
   ======================================== */
.error-message[b-tgg3ztwf7h] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-tgg3ztwf7h 0.2s ease;
}

@keyframes slideDown-b-tgg3ztwf7h {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: var(--BEC-spacingHorizontalM) 0 var(--BEC-spacingHorizontalS) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   INFO BOX
   ======================================== */
.info-box[b-tgg3ztwf7h] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.info-box i[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

/* ========================================
   TOGGLE SWITCH (Syncfusion SfSwitch)
   ======================================== */
.toggle-wrapper[b-tgg3ztwf7h] {
    display: flex;
    align-items: center;
    padding-top: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SYNCFUSION SWITCH SIZING
   Make toggle wider to fit Active/Inactive text
   ======================================== */
.toggle-wrapper :global(.e-switch-wrapper)[b-tgg3ztwf7h] {
    width: 100px !important;
    min-width: 100px !important;
}

.toggle-wrapper :global(.e-switch-inner)[b-tgg3ztwf7h] {
    width: 100px !important;
}

.toggle-wrapper :global(.e-switch-on)[b-tgg3ztwf7h],
.toggle-wrapper :global(.e-switch-off)[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase300) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

/* ========================================
   DIALOG FOOTER (SYNCFUSION BUTTONS)
   ✅ NO custom button classes
   ✅ Uses Syncfusion e-btn classes
   ======================================== */
.dialog-footer-wrapper[b-tgg3ztwf7h] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    width: 100%;
}

.footer-spacer[b-tgg3ztwf7h] {
    flex: 1;
}

/* Syncfusion Button Customization */
:global(.company-create-dialog .e-footer-content .e-btn)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 100px;
}

/* Primary Button Styling */
:global(.company-create-dialog .e-footer-content .e-btn.e-primary)[b-tgg3ztwf7h] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
}

:global(.company-create-dialog .e-footer-content .e-btn.e-primary:hover:not(:disabled))[b-tgg3ztwf7h] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
}

/* Success Button Styling */
:global(.company-create-dialog .e-footer-content .e-btn.e-success)[b-tgg3ztwf7h] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

:global(.company-create-dialog .e-footer-content .e-btn.e-success:hover:not(:disabled))[b-tgg3ztwf7h] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

/* Flat Button Styling */
:global(.company-create-dialog .e-footer-content .e-btn.e-flat)[b-tgg3ztwf7h] {
    background: transparent;
    border-color: transparent;
    color: var(--BEC-colorNeutralForeground2);
}

:global(.company-create-dialog .e-footer-content .e-btn.e-flat:hover:not(:disabled))[b-tgg3ztwf7h] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

/* Button Icons */
:global(.company-create-dialog .e-footer-content .e-btn .e-btn-icon)[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Disabled Button State */
:global(.company-create-dialog .e-footer-content .e-btn:disabled)[b-tgg3ztwf7h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :global(.company-create-dialog)[b-tgg3ztwf7h] {
        max-width: 700px;
    }
    
    .dialog-form-content[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalL);
        min-height: 350px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    :global(.company-create-dialog)[b-tgg3ztwf7h] {
        width: 95%;
        max-width: 100%;
        margin: var(--BEC-spacingHorizontalMNudge);
    }
    
    :global(.company-create-dialog .e-dlg-header)[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    }
    
    .dialog-title[b-tgg3ztwf7h] {
        font-size: var(--BEC-fontSizeBase500);
    }
    
    :global(.company-stepper)[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalL);
    }
    
    :global(.company-stepper .e-step .e-step-text-content)[b-tgg3ztwf7h] {
        font-size: var(--BEC-fontSizeBase200);
    }
    
    .dialog-form-content[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalXL);
        min-height: 380px;
    }
    
    .form-row[b-tgg3ztwf7h] {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width[b-tgg3ztwf7h] {
        grid-column: span 1;
    }
    
    .dialog-footer-wrapper[b-tgg3ztwf7h] {
        flex-wrap: wrap;
    }
    
    .footer-spacer[b-tgg3ztwf7h] {
        display: none;
    }
    
    :global(.company-create-dialog .e-footer-content .e-btn)[b-tgg3ztwf7h] {
        flex: 1;
        min-width: 120px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    :global(.company-create-dialog)[b-tgg3ztwf7h] {
        border-radius: 0;
        max-height: 100vh;
    }

    .dialog-title[b-tgg3ztwf7h] {
        font-size: var(--BEC-fontSizeBase400);
    }
    
    :global(.company-stepper .e-step .e-step-text-content)[b-tgg3ztwf7h] {
        display: none; /* Hide labels to save space */
    }
}
/* /Components/Pages/MainLayout/Administration/Administration/Department/DepartmentAdministration.razor.rz.scp.css */
/* ========================================
   DEPARTMENT ADMINISTRATION
   Following OrganizationAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-jfo7ithga7] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   ======================================== */
.erp-page-container[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-jfo7ithga7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jfo7ithga7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jfo7ithga7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jfo7ithga7] {
    transform: scale(0.98);
}

.page-subtitle[b-jfo7ithga7] {
    display: none;
}

.header-right[b-jfo7ithga7] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jfo7ithga7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jfo7ithga7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jfo7ithga7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jfo7ithga7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ORGANIZATION ADMINISTRATION)
   ======================================== */
[b-jfo7ithga7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jfo7ithga7] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE */
/* Maximum specificity to override all Syncfusion defaults */

/* Container - Force exact 22px height with all possible selectors */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper.e-textbox,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group,
[b-jfo7ithga7] .e-toolbar .e-input-group.e-control-wrapper {
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Input field - Exact 20px height with vertical centering */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group .e-input,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group input.e-input,
[b-jfo7ithga7] .e-toolbar .e-input-group input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    outline: none !important;
}

/* Placeholder - Perfect vertical centering */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input::placeholder,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-jfo7ithga7] .e-toolbar .e-input-group input::placeholder {
    line-height: 20px !important;
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
}

/* Clear button icon - Aligned with container */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    border: none !important;
    padding: 0 6px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

/* Focus state */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group:focus-within,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any extra padding/margin from wrapper elements */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group-icon.e-clear-icon {
    height: 22px !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-jfo7ithga7] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-jfo7ithga7] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-jfo7ithga7] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-jfo7ithga7] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* Loading Overlay (Legacy - kept for backwards compatibility) */
.loading-overlay[b-jfo7ithga7] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-jfo7ithga7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-jfo7ithga7 0.2s ease-out;
}

@keyframes fadeIn-b-jfo7ithga7 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-jfo7ithga7 0.3s ease-out;
}

.modal-container.modal-sm[b-jfo7ithga7] {
    max-width: 500px;
}

@keyframes slideUp-b-jfo7ithga7 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }

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

/* Modal Header */
.modal-header[b-jfo7ithga7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-jfo7ithga7] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-jfo7ithga7] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-jfo7ithga7] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-jfo7ithga7] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-jfo7ithga7] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-jfo7ithga7] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jfo7ithga7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-jfo7ithga7] {
    background: #d1d1d1;
}

.btn-danger[b-jfo7ithga7] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-jfo7ithga7] {
    background: #b91c1c;
}

.btn-warning[b-jfo7ithga7] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-jfo7ithga7] {
    background: #e67e00;
}

.btn-success[b-jfo7ithga7] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-jfo7ithga7] {
    background: #059669;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-jfo7ithga7] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-jfo7ithga7] {
    color: #d83b01;
}

.warning-note[b-jfo7ithga7] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid #d83b01;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-jfo7ithga7] {
    color: #d83b01;
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-jfo7ithga7] {
    background: linear-gradient(135deg, #e8f4fd 0%, #c7e0f4 100%);
    border-left-color: var(--BEC-colorBrandForeground);
}

.warning-note-info i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground);
}

.warning-note-success[b-jfo7ithga7] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-jfo7ithga7] {
    color: #10b981;
}

/* ========================================
   PAGE HEADER - DIALOG STYLES
   ======================================== */
.dialog-page-header[b-jfo7ithga7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: var(--BEC-spacingHorizontalL) 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 48px;
}

.dialog-header-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.dialog-header-title i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground);
    font-size: 18px;
}

.dialog-header-close[b-jfo7ithga7] {
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.dialog-header-close:hover[b-jfo7ithga7] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Dialog Content Padding (Override) */
.dialog-content[b-jfo7ithga7] {
    padding: 0;
}

/* Dialog Footer - Compact */
.dialog-footer[b-jfo7ithga7] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   ======================================== */
@media (max-width: 1024px) {
    .erp-page-header[b-jfo7ithga7] {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    }

    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 50px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalL) !important;
    }

    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 100px !important;
    }
}

@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-jfo7ithga7] {
        flex-direction: column;
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-jfo7ithga7] {
        width: 100%;
        justify-content: space-around;
    }

    /* Toolbar - Mobile Optimized */
    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 90px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalM) !important;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 140px !important;
    }

    /* Adaptive Grid */
    :global(.e-grid.e-responsive-mode)[b-jfo7ithga7] {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .page-title[b-jfo7ithga7] {
        font-size: 16px;
    }

    .stat-value[b-jfo7ithga7] {
        font-size: 14px;
    }

    /* Icons Only - Save Space */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-jfo7ithga7] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-jfo7ithga7] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-jfo7ithga7] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-jfo7ithga7] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-jfo7ithga7] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-jfo7ithga7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jfo7ithga7] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jfo7ithga7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jfo7ithga7] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jfo7ithga7] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jfo7ithga7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-jfo7ithga7] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-jfo7ithga7] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jfo7ithga7 0.6s ease;
}

.step-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-jfo7ithga7] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-jfo7ithga7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jfo7ithga7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jfo7ithga7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jfo7ithga7] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-jfo7ithga7] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jfo7ithga7] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jfo7ithga7] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jfo7ithga7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jfo7ithga7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-jfo7ithga7] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jfo7ithga7] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jfo7ithga7] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-jfo7ithga7] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-jfo7ithga7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-jfo7ithga7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jfo7ithga7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-jfo7ithga7] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-jfo7ithga7] {
    background: #e1dfdd;
}

.btn-next[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackground);
    color: #ffffff;
}

.btn-next:hover:not(:disabled)[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-jfo7ithga7] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-jfo7ithga7] {
    background: #0b5c0b;
}

.btn i[b-jfo7ithga7] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-jfo7ithga7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-jfo7ithga7] {
    margin-bottom: 20px;
}

.form-label[b-jfo7ithga7] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-jfo7ithga7]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-input[b-jfo7ithga7] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-jfo7ithga7] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: var(--BEC-shadow4);
}

.form-row[b-jfo7ithga7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Field Error and Hint */
.field-error[b-jfo7ithga7] {
    display: block;
    color: #d13438;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}

.field-hint[b-jfo7ithga7] {
    display: block;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
    font-style: italic;
}

/* Auto-Generation Info Banner */
.auto-gen-info[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 1px solid #90caf9;
    border-radius: 8px;
    font-size: 14px;
    color: #1565c0;
    margin-bottom: 8px;
}

.auto-gen-info i[b-jfo7ithga7] {
    font-size: 18px;
    color: #7b1fa2;
    animation: sparkle-b-jfo7ithga7 2s ease-in-out infinite;
}

@keyframes sparkle-b-jfo7ithga7 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-jfo7ithga7] {
    color: #1565c0;
    font-weight: 600;
}

/* Error Message */
.error-message[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #dc2626;
    font-size: 14px;
    margin: 16px 0;
}

.error-message i[b-jfo7ithga7] {
    font-size: 16px;
}

/* ========================================
   FORM VALUE (Read-only display)
   ======================================== */
.form-value[b-jfo7ithga7] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Matching System Modules Page Design
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jfo7ithga7] .e-treegrid,
[b-jfo7ithga7] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jfo7ithga7] .e-treegrid .e-gridheader,
[b-jfo7ithga7] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jfo7ithga7] .e-treegrid .e-gridcontent,
[b-jfo7ithga7] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Header Cells */
[b-jfo7ithga7] .e-treegrid .e-headercell,
[b-jfo7ithga7] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Row Height - Compact (32px like System Modules) */
[b-jfo7ithga7] .e-treegrid .e-row,
[b-jfo7ithga7] .e-grid .e-row {
    height: 32px !important;
}

[b-jfo7ithga7] .e-treegrid .e-row td,
[b-jfo7ithga7] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Row Hover Effect */
[b-jfo7ithga7] .e-treegrid .e-row:hover,
[b-jfo7ithga7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"],
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"]:hover,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"] td:first-child,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

.badge-warning[b-jfo7ithga7] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-jfo7ithga7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-jfo7ithga7] {
    font-size: 12px;
}

.column-chooser-list[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #dc2626;
    font-size: 14px;
    margin: 16px 0;
}

.error-message i[b-jfo7ithga7] {
    font-size: 16px;
}

/* ========================================
   FORM VALUE (Read-only display)
   ======================================== */
.form-value[b-jfo7ithga7] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Matching System Modules Page Design
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jfo7ithga7] .e-treegrid,
[b-jfo7ithga7] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jfo7ithga7] .e-treegrid .e-gridheader,
[b-jfo7ithga7] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jfo7ithga7] .e-treegrid .e-gridcontent,
[b-jfo7ithga7] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Header Cells */
[b-jfo7ithga7] .e-treegrid .e-headercell,
[b-jfo7ithga7] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Row Height - Compact (32px like System Modules) */
[b-jfo7ithga7] .e-treegrid .e-row,
[b-jfo7ithga7] .e-grid .e-row {
    height: 32px !important;
}

[b-jfo7ithga7] .e-treegrid .e-row td,
[b-jfo7ithga7] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Row Hover Effect */
[b-jfo7ithga7] .e-treegrid .e-row:hover,
[b-jfo7ithga7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"],
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"]:hover,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"] td:first-child,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

.badge-warning[b-jfo7ithga7] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-jfo7ithga7] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-jfo7ithga7] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-jfo7ithga7] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-jfo7ithga7] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-jfo7ithga7] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-jfo7ithga7] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-jfo7ithga7] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-jfo7ithga7] .notification-success .e-dlg-content,
[b-jfo7ithga7] .notification-error .e-dlg-content,
[b-jfo7ithga7] .notification-warning .e-dlg-content,
[b-jfo7ithga7] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-jfo7ithga7] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-jfo7ithga7] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-jfo7ithga7] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-jfo7ithga7] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   STATUS BADGE STYLES - Text Only (No Background)
   ======================================== */
.badge[b-jfo7ithga7] {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success[b-jfo7ithga7] {
    color: #10b981;
}

.badge-inactive[b-jfo7ithga7] {
    color: #dc2626;
}

/* ========================================
   RESPONSIVE DESIGN - COMPREHENSIVE MEDIA QUERIES
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-treegrid .e-gridheader)[b-jfo7ithga7],
    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 100px !important;
        /* Below header + toolbar */
    }

    /* Search Bar - Tablet Width */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-jfo7ithga7] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-jfo7ithga7] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-treegrid .e-gridheader)[b-jfo7ithga7],
    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 140px !important;
        /* Below header + toolbar */
    }

    /* Sidebar Width - Full Width on Mobile */
    [b-jfo7ithga7] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-jfo7ithga7],
    .sidebar-footer[b-jfo7ithga7] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-jfo7ithga7] {
        padding: 16px 20px;
    }

    .form-row[b-jfo7ithga7] {
        grid-template-columns: 1fr;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg,
    [b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-jfo7ithga7] .e-treegrid .e-excelfilter.e-popup.e-popup-open,
[b-jfo7ithga7] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-jfo7ithga7] .e-treegrid .e-excelfilter .e-checkboxlist,
[b-jfo7ithga7] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg .e-dlg-header,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg .e-dlg-content,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg .e-footer-content,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-jfo7ithga7] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-jfo7ithga7] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-jfo7ithga7] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-jfo7ithga7] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-jfo7ithga7] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-jfo7ithga7]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-jfo7ithga7]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-jfo7ithga7]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-jfo7ithga7]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-dialog-header-flex[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-jfo7ithga7] {
    font-size: 20px;
}

.adm-preline-text[b-jfo7ithga7] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-jfo7ithga7] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-jfo7ithga7] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/ConsentAuditAdministration.razor.rz.scp.css */
/* ========================================
   CONSENT AUDIT ADMINISTRATION
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-hcup63o0wt] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */
.erp-page-header[b-hcup63o0wt] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-hcup63o0wt] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-hcup63o0wt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-hcup63o0wt] {
    transform: scale(0.98);
}

.page-subtitle[b-hcup63o0wt] {
    display: none;
}

.header-right[b-hcup63o0wt] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-hcup63o0wt] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-hcup63o0wt] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-hcup63o0wt] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-hcup63o0wt] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-hcup63o0wt] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-hcup63o0wt] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-hcup63o0wt] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-hcup63o0wt] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-hcup63o0wt] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-hcup63o0wt] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-hcup63o0wt] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-hcup63o0wt] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group,
[b-hcup63o0wt] .e-toolbar .e-input-group.e-control-wrapper,
[b-hcup63o0wt] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group .e-input,
[b-hcup63o0wt] .e-toolbar .e-input-group .e-input,
[b-hcup63o0wt] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-hcup63o0wt] .e-toolbar .e-input-group:focus-within,
[b-hcup63o0wt] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-hcup63o0wt] .e-toolbar .e-textbox .e-input-group-icon,
[b-hcup63o0wt] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-hcup63o0wt] .e-toolbar .e-input-group .e-input::placeholder,
[b-hcup63o0wt] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-hcup63o0wt] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-hcup63o0wt] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-hcup63o0wt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-hcup63o0wt] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-hcup63o0wt 1s linear infinite;
}

@keyframes spin-b-hcup63o0wt {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-hcup63o0wt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-hcup63o0wt] {
    font-size: 48px;
}

.error-container p[b-hcup63o0wt] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-hcup63o0wt] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-hcup63o0wt] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-hcup63o0wt] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-hcup63o0wt] .e-grid .e-row.e-selectionbackground,
[b-hcup63o0wt] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-hcup63o0wt] .e-grid .e-row.e-selectionbackground:hover,
[b-hcup63o0wt] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-hcup63o0wt] .e-grid .e-row.e-selectionbackground td:first-child,
[b-hcup63o0wt] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-hcup63o0wt] .e-grid .e-row {
    height: 32px !important;
}

[b-hcup63o0wt] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-hcup63o0wt] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-hcup63o0wt] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-hcup63o0wt] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-hcup63o0wt] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-hcup63o0wt] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-hcup63o0wt] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
    line-height: 1.2;
}

.badge-success[b-hcup63o0wt] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-hcup63o0wt] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-hcup63o0wt] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   VIEW WIZARD & COLUMN CHOOSER SIDEBAR
   ======================================== */
[b-hcup63o0wt] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

[b-hcup63o0wt] .assignment-wizard-sidebar .e-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-hcup63o0wt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-hcup63o0wt] {
    font-size: 12px;
}

.column-chooser-list[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-hcup63o0wt]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-hcup63o0wt]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-hcup63o0wt] {
    margin-bottom: 20px;
}

.form-label[b-hcup63o0wt] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    display: block;
}

.form-value[b-hcup63o0wt] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    min-height: 34px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.form-row[b-hcup63o0wt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ========================================
   NOTIFICATION DIALOG
   ======================================== */
[b-hcup63o0wt] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-hcup63o0wt] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-hcup63o0wt] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-hcup63o0wt] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-hcup63o0wt] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-hcup63o0wt] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-hcup63o0wt] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-hcup63o0wt] .notification-info .e-dlg-header-content i {
    color: white;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-hcup63o0wt] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-hcup63o0wt] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-hcup63o0wt] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-hcup63o0wt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-hcup63o0wt] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-hcup63o0wt] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-hcup63o0wt] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-hcup63o0wt] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-hcup63o0wt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-hcup63o0wt] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-hcup63o0wt] {
    margin-bottom: 24px;
    animation: fadeInUp-b-hcup63o0wt 0.6s ease;
}

.step-icon i[b-hcup63o0wt] {
    font-size: 48px;
}

.step-title[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-hcup63o0wt] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-hcup63o0wt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-hcup63o0wt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-hcup63o0wt] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-hcup63o0wt] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-hcup63o0wt] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-hcup63o0wt] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-hcup63o0wt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-hcup63o0wt] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-hcup63o0wt] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-hcup63o0wt] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-hcup63o0wt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-hcup63o0wt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-hcup63o0wt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-hcup63o0wt] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-hcup63o0wt] {
    background: #e1dfdd;
}

.btn-next[b-hcup63o0wt] {
    background: var(--BEC-colorBrandForeground1);
    color: white;
}

.btn-next:hover:not(:disabled)[b-hcup63o0wt] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-hcup63o0wt] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-hcup63o0wt] {
    background: #059669;
}

/* Animations */
@keyframes fadeInUp-b-hcup63o0wt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-hcup63o0wt] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-hcup63o0wt] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-hcup63o0wt] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-hcup63o0wt] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-hcup63o0wt] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-hcup63o0wt] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-hcup63o0wt] {
    animation: fadeInUp-b-hcup63o0wt 0.3s ease-out;
}

.step-title[b-hcup63o0wt] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-hcup63o0wt] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-hcup63o0wt]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-hcup63o0wt]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-hcup63o0wt]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-hcup63o0wt]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-hcup63o0wt] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-hcup63o0wt] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-hcup63o0wt] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-hcup63o0wt] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-hcup63o0wt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-hcup63o0wt] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-hcup63o0wt] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-brand-icon[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-hcup63o0wt] {
    color: #e0e0e0;
}

.gdpr-dialog-header-sm[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-icon-md[b-hcup63o0wt] {
    font-size: 20px;
}

.gdpr-pre-line[b-hcup63o0wt] {
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/ConsentVersionAdministration.razor.rz.scp.css */
/* ========================================
   CONSENT VERSION ADMINISTRATION PAGE
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-qdnz19q1qa] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-qdnz19q1qa] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-qdnz19q1qa] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-qdnz19q1qa] {
    transform: scale(0.98);
}

.page-subtitle[b-qdnz19q1qa] {
    display: none;
}

.header-right[b-qdnz19q1qa] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-qdnz19q1qa] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-qdnz19q1qa] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: none;
    letter-spacing: 0;
}

.stat-divider[b-qdnz19q1qa] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-qdnz19q1qa] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 100px);
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-qdnz19q1qa] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-qdnz19q1qa] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-qdnz19q1qa] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-qdnz19q1qa] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-qdnz19q1qa] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-qdnz19q1qa] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-qdnz19q1qa] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group,
[b-qdnz19q1qa] .e-toolbar .e-input-group.e-control-wrapper,
[b-qdnz19q1qa] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group .e-input,
[b-qdnz19q1qa] .e-toolbar .e-input-group .e-input,
[b-qdnz19q1qa] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-qdnz19q1qa] .e-toolbar .e-input-group:focus-within,
[b-qdnz19q1qa] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-qdnz19q1qa] .e-toolbar .e-textbox .e-input-group-icon,
[b-qdnz19q1qa] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-qdnz19q1qa] .e-toolbar .e-input-group .e-input::placeholder,
[b-qdnz19q1qa] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-qdnz19q1qa] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-qdnz19q1qa] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-qdnz19q1qa] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-qdnz19q1qa] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-qdnz19q1qa 1s linear infinite;
}

@keyframes spin-b-qdnz19q1qa {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-qdnz19q1qa] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-qdnz19q1qa] {
    font-size: 48px;
}

.error-container p[b-qdnz19q1qa] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-qdnz19q1qa] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.badge-success[b-qdnz19q1qa] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-qdnz19q1qa] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.badge-primary[b-qdnz19q1qa] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-qdnz19q1qa] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-qdnz19q1qa] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-qdnz19q1qa] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-qdnz19q1qa] .e-grid .e-row.e-selectionbackground,
[b-qdnz19q1qa] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-qdnz19q1qa] .e-grid .e-row.e-selectionbackground:hover,
[b-qdnz19q1qa] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-qdnz19q1qa] .e-grid .e-row.e-selectionbackground td:first-child,
[b-qdnz19q1qa] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-qdnz19q1qa] .e-grid .e-row {
    height: 32px !important;
}

[b-qdnz19q1qa] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-qdnz19q1qa] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid Header Styling */
[b-qdnz19q1qa] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-qdnz19q1qa] .e-grid .e-headercell {
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Row Hover Effect */
[b-qdnz19q1qa] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-qdnz19q1qa] .e-grid .e-selectionbackground {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-qdnz19q1qa] {
    margin-bottom: 20px;
}

.form-label[b-qdnz19q1qa] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-value[b-qdnz19q1qa] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-qdnz19q1qa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-qdnz19q1qa] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-qdnz19q1qa] {
    font-size: 12px;
}

.column-chooser-list[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-qdnz19q1qa]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-qdnz19q1qa]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   ======================================== */
[b-qdnz19q1qa] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: white;
}

[b-qdnz19q1qa] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedBackground2);
    color: white;
}

[b-qdnz19q1qa] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: white;
}

[b-qdnz19q1qa] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

[b-qdnz19q1qa] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-qdnz19q1qa] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-qdnz19q1qa] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-qdnz19q1qa] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Sidebar Base Styles */
.sidebar-header[b-qdnz19q1qa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-qdnz19q1qa] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-qdnz19q1qa] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-qdnz19q1qa] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-qdnz19q1qa] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-qdnz19q1qa] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.sidebar-footer[b-qdnz19q1qa] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Help Wizard Sidebar */
[b-qdnz19q1qa] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-qdnz19q1qa] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-qdnz19q1qa] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* Assignment Wizard Sidebar (View, Column Chooser) */
[b-qdnz19q1qa] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

[b-qdnz19q1qa] .assignment-wizard-sidebar .e-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Wizard Step Content - Help Wizard (Centered) */
.wizard-step[b-qdnz19q1qa] {
    text-align: center;
    padding: 20px;
}

/* Wizard Step Content - Form Wizards (Left-aligned) */
.sidebar-step-content .wizard-step[b-qdnz19q1qa] {
    max-width: 100%;
    text-align: left;
    padding: 0;
}

.step-icon[b-qdnz19q1qa] {
    margin-bottom: 24px;
    animation: fadeInUp-b-qdnz19q1qa 0.6s ease;
}

/* Step Title - Help Wizard (Large, Centered) */
.wizard-step .step-title[b-qdnz19q1qa] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    text-align: center;
}

/* Step Title - Form Wizards (Smaller, Left-aligned) */
.sidebar-step-content .step-title[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.sidebar-step-content .step-title i[b-qdnz19q1qa] {
    color: #0078d4;
    font-size: 20px;
}

/* Step Description - Help Wizard */
.wizard-step .step-description[b-qdnz19q1qa] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Step Description - Form Wizards */
.sidebar-step-content .step-description[b-qdnz19q1qa] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-qdnz19q1qa] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-qdnz19q1qa] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-qdnz19q1qa] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-qdnz19q1qa] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-qdnz19q1qa] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-qdnz19q1qa] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-qdnz19q1qa] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-qdnz19q1qa] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-qdnz19q1qa] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-qdnz19q1qa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-qdnz19q1qa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-qdnz19q1qa] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-qdnz19q1qa] {
    background: #e1dfdd;
}

.btn-success[b-qdnz19q1qa] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-qdnz19q1qa] {
    background: #0b5c0b;
}

.btn-next[b-qdnz19q1qa] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-qdnz19q1qa] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-cancel[b-qdnz19q1qa] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-qdnz19q1qa] {
    background: #e1dfdd;
}

.btn i[b-qdnz19q1qa] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-qdnz19q1qa {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-qdnz19q1qa] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-qdnz19q1qa] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-qdnz19q1qa] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-qdnz19q1qa] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-qdnz19q1qa] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-qdnz19q1qa] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-qdnz19q1qa] {
    animation: fadeInUp-b-qdnz19q1qa 0.3s ease-out;
}

.step-title[b-qdnz19q1qa] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-qdnz19q1qa] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-qdnz19q1qa]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-qdnz19q1qa]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-qdnz19q1qa]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-qdnz19q1qa]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-qdnz19q1qa] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-qdnz19q1qa] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-qdnz19q1qa] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-qdnz19q1qa] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-qdnz19q1qa] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-qdnz19q1qa] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-qdnz19q1qa] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-qdnz19q1qa] {
    color: #e0e0e0;
}

.gdpr-scrollable-text[b-qdnz19q1qa] {
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.gdpr-dialog-header-sm[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-icon-md[b-qdnz19q1qa] {
    font-size: 20px;
}

.gdpr-content-pad[b-qdnz19q1qa] {
    padding: 10px 0;
}

.gdpr-pre-line-text[b-qdnz19q1qa] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/DataRetentionPolicyAdministration.razor.rz.scp.css */
/* ========================================
   DATA RETENTION POLICY ADMINISTRATION
   100% Identical to System Modules
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-4x9m1zm0ek] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-4x9m1zm0ek] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-4x9m1zm0ek] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-4x9m1zm0ek] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-4x9m1zm0ek] {
    transform: scale(0.98);
}

.header-right[b-4x9m1zm0ek] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-4x9m1zm0ek] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4x9m1zm0ek] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4x9m1zm0ek] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4x9m1zm0ek] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-4x9m1zm0ek] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-4x9m1zm0ek] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-4x9m1zm0ek] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-4x9m1zm0ek] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-4x9m1zm0ek] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-4x9m1zm0ek] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group,
[b-4x9m1zm0ek] .e-toolbar .e-input-group.e-control-wrapper,
[b-4x9m1zm0ek] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group .e-input,
[b-4x9m1zm0ek] .e-toolbar .e-input-group .e-input,
[b-4x9m1zm0ek] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-4x9m1zm0ek] .e-toolbar .e-input-group:focus-within,
[b-4x9m1zm0ek] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-4x9m1zm0ek] .e-toolbar .e-textbox .e-input-group-icon,
[b-4x9m1zm0ek] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-4x9m1zm0ek] .e-toolbar .e-input-group .e-input::placeholder,
[b-4x9m1zm0ek] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-4x9m1zm0ek] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-4x9m1zm0ek] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-4x9m1zm0ek] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-4x9m1zm0ek] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-4x9m1zm0ek 1s linear infinite;
}

@keyframes spin-b-4x9m1zm0ek {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-4x9m1zm0ek] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-4x9m1zm0ek] {
    font-size: 48px;
}

.error-container p[b-4x9m1zm0ek] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-4x9m1zm0ek] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-4x9m1zm0ek] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-4x9m1zm0ek] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-4x9m1zm0ek] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-4x9m1zm0ek] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-4x9m1zm0ek] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-4x9m1zm0ek] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-4x9m1zm0ek] .e-grid .e-row.e-selectionbackground,
[b-4x9m1zm0ek] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-4x9m1zm0ek] .e-grid .e-row.e-selectionbackground:hover,
[b-4x9m1zm0ek] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-4x9m1zm0ek] .e-grid .e-row.e-selectionbackground td:first-child,
[b-4x9m1zm0ek] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-4x9m1zm0ek] .e-grid .e-row {
    height: 32px !important;
}

[b-4x9m1zm0ek] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-4x9m1zm0ek] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-4x9m1zm0ek] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-4x9m1zm0ek] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-4x9m1zm0ek] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-4x9m1zm0ek] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-4x9m1zm0ek] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-4x9m1zm0ek] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-4x9m1zm0ek] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-4x9m1zm0ek] {
    font-size: 18px;
}

.sidebar-content[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-4x9m1zm0ek] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-4x9m1zm0ek] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-4x9m1zm0ek] {
    margin-bottom: 24px;
    animation: fadeInUp-b-4x9m1zm0ek 0.6s ease;
}

.wizard-step .step-title[b-4x9m1zm0ek] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-4x9m1zm0ek] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-4x9m1zm0ek] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-4x9m1zm0ek] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-4x9m1zm0ek] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-4x9m1zm0ek] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-4x9m1zm0ek] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-4x9m1zm0ek] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-4x9m1zm0ek] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-4x9m1zm0ek] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-4x9m1zm0ek] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
}

.btn-next[b-4x9m1zm0ek] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-4x9m1zm0ek] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* Sidebar Footer */
.sidebar-footer[b-4x9m1zm0ek] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons */
.btn[b-4x9m1zm0ek] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-4x9m1zm0ek] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-4x9m1zm0ek] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-4x9m1zm0ek] {
    background: #e1dfdd;
}

.btn-success[b-4x9m1zm0ek] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-4x9m1zm0ek] {
    background: #0b5c0b;
}

.btn i[b-4x9m1zm0ek] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-4x9m1zm0ek {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-4x9m1zm0ek] {
    margin-bottom: 20px;
}

.form-label[b-4x9m1zm0ek] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-value[b-4x9m1zm0ek] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-4x9m1zm0ek] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-4x9m1zm0ek] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-4x9m1zm0ek] {
    font-size: 12px;
}

.column-chooser-list[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

.column-chooser-item[b-4x9m1zm0ek]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-4x9m1zm0ek]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-4x9m1zm0ek] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-4x9m1zm0ek] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-4x9m1zm0ek] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-4x9m1zm0ek] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-4x9m1zm0ek] .notification-success .e-dlg-content,
[b-4x9m1zm0ek] .notification-error .e-dlg-content,
[b-4x9m1zm0ek] .notification-warning .e-dlg-content,
[b-4x9m1zm0ek] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-4x9m1zm0ek] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-4x9m1zm0ek] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-4x9m1zm0ek] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-4x9m1zm0ek] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-4x9m1zm0ek] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-4x9m1zm0ek] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-4x9m1zm0ek] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-4x9m1zm0ek] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-4x9m1zm0ek] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-4x9m1zm0ek] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-4x9m1zm0ek] {
    animation: fadeInUp-b-4x9m1zm0ek 0.3s ease-out;
}

.step-title[b-4x9m1zm0ek] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-4x9m1zm0ek] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-4x9m1zm0ek]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-4x9m1zm0ek]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-4x9m1zm0ek]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-4x9m1zm0ek]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-4x9m1zm0ek] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-4x9m1zm0ek] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-4x9m1zm0ek] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-4x9m1zm0ek] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-4x9m1zm0ek] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-4x9m1zm0ek] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-4x9m1zm0ek] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-4x9m1zm0ek] {
    color: #e0e0e0;
}

.gdpr-dialog-header[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gdpr-dialog-header-sm[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-danger-icon[b-4x9m1zm0ek] {
    color: #d13438;
}

.gdpr-danger-text[b-4x9m1zm0ek] {
    color: #d13438;
    font-weight: 500;
}

.gdpr-detail-box[b-4x9m1zm0ek] {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
}

.gdpr-pre-line-text[b-4x9m1zm0ek] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/DataSubjectRequestAdministration.razor.rz.scp.css */
/* DATA SUBJECT REQUEST ADMINISTRATION - 100% Identical to System Modules */
.erp-page-container[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules
   ======================================== */
.erp-page-header[b-jhcty2alm6] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jhcty2alm6] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jhcty2alm6] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jhcty2alm6] {
    transform: scale(0.98);
}

.page-subtitle[b-jhcty2alm6] {
    display: none;
}

.header-right[b-jhcty2alm6] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   Same as User Company Assignment
   ======================================== */
.stats-container[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jhcty2alm6] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jhcty2alm6] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jhcty2alm6] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jhcty2alm6] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.erp-page-content[b-jhcty2alm6] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-jhcty2alm6] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-jhcty2alm6] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-jhcty2alm6] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-jhcty2alm6] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-jhcty2alm6] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jhcty2alm6] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jhcty2alm6] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group,
[b-jhcty2alm6] .e-toolbar .e-input-group.e-control-wrapper,
[b-jhcty2alm6] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group .e-input,
[b-jhcty2alm6] .e-toolbar .e-input-group .e-input,
[b-jhcty2alm6] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-jhcty2alm6] .e-toolbar .e-input-group:focus-within,
[b-jhcty2alm6] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-jhcty2alm6] .e-toolbar .e-textbox .e-input-group-icon,
[b-jhcty2alm6] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-jhcty2alm6] .e-toolbar .e-input-group .e-input::placeholder,
[b-jhcty2alm6] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

.content-placeholder[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px
}

.placeholder-icon[b-jhcty2alm6] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px
}

.placeholder-title[b-jhcty2alm6] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0
}

.placeholder-message[b-jhcty2alm6] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-jhcty2alm6] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jhcty2alm6 1s linear infinite;
}

@keyframes spin-b-jhcty2alm6 {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    text-align: center;
}

.error-container i[b-jhcty2alm6] {
    font-size: 48px;
    color: #d13438;
}

.error-container p[b-jhcty2alm6] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-jhcty2alm6] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
    line-height: 1.2;
}

.badge-success[b-jhcty2alm6] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-jhcty2alm6] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.badge-primary[b-jhcty2alm6] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jhcty2alm6] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jhcty2alm6] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jhcty2alm6] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jhcty2alm6] .e-grid .e-row.e-selectionbackground,
[b-jhcty2alm6] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jhcty2alm6] .e-grid .e-row.e-selectionbackground:hover,
[b-jhcty2alm6] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jhcty2alm6] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jhcty2alm6] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-jhcty2alm6] .e-grid .e-row {
    height: 32px !important;
}

[b-jhcty2alm6] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-jhcty2alm6] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-jhcty2alm6] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jhcty2alm6] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-jhcty2alm6] {
    margin-bottom: 20px;
}

.form-label[b-jhcty2alm6] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 6px;
}

.form-label.required[b-jhcty2alm6]::after {
    content: " *";
    color: #d13438;
}

.form-value[b-jhcty2alm6] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    min-height: 36px;
    display: flex;
    align-items: center;
}

.form-row[b-jhcty2alm6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-jhcty2alm6] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-jhcty2alm6] {
    font-size: 12px;
}

.column-chooser-list[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-jhcty2alm6] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-jhcty2alm6] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-jhcty2alm6] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-jhcty2alm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-jhcty2alm6] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-jhcty2alm6] {
    font-size: 18px;
}

.sidebar-content[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jhcty2alm6] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-jhcty2alm6] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-jhcty2alm6] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jhcty2alm6 0.6s ease;
}

.wizard-step .step-title[b-jhcty2alm6] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-jhcty2alm6] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jhcty2alm6] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jhcty2alm6] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-jhcty2alm6] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jhcty2alm6] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jhcty2alm6] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jhcty2alm6] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-jhcty2alm6] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jhcty2alm6] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jhcty2alm6] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
}

.btn-next[b-jhcty2alm6] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-jhcty2alm6] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* Sidebar Footer */
.sidebar-footer[b-jhcty2alm6] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons */
.btn[b-jhcty2alm6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jhcty2alm6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-jhcty2alm6] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-jhcty2alm6] {
    background: #e1dfdd;
}

.btn-success[b-jhcty2alm6] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-jhcty2alm6] {
    background: #0b5c0b;
}

.btn i[b-jhcty2alm6] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-jhcty2alm6 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-jhcty2alm6] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-jhcty2alm6] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-jhcty2alm6] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-jhcty2alm6] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-jhcty2alm6] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-jhcty2alm6] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-jhcty2alm6] {
    animation: fadeInUp-b-jhcty2alm6 0.3s ease-out;
}

.step-title[b-jhcty2alm6] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-jhcty2alm6] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-jhcty2alm6]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-jhcty2alm6]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-jhcty2alm6]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-jhcty2alm6]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-jhcty2alm6] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-jhcty2alm6] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-jhcty2alm6] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-jhcty2alm6] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-jhcty2alm6] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-jhcty2alm6] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-jhcty2alm6] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-jhcty2alm6] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-jhcty2alm6] {
    color: #e0e0e0;
}

.gdpr-dialog-header[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gdpr-dialog-header-sm[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-brand-icon[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-form-group-mb[b-jhcty2alm6] {
    margin-bottom: 20px;
}

.gdpr-readonly-value[b-jhcty2alm6] {
    padding: 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.gdpr-pre-line-text[b-jhcty2alm6] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/ProcessingActivityRecordAdministration.razor.rz.scp.css */
/* PROCESSING ACTIVITY RECORD ADMINISTRATION - Header matches System Modules */

.erp-page-container[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Matches System Modules exactly
   ======================================== */
.erp-page-header[b-x0fmlw6y08] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-x0fmlw6y08] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-x0fmlw6y08] {
    display: none;
}

.header-right[b-x0fmlw6y08] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-x0fmlw6y08] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-x0fmlw6y08] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-x0fmlw6y08] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-x0fmlw6y08] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-x0fmlw6y08] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-x0fmlw6y08] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-x0fmlw6y08] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-x0fmlw6y08] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-x0fmlw6y08] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-x0fmlw6y08] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-x0fmlw6y08] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-x0fmlw6y08] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group,
[b-x0fmlw6y08] .e-toolbar .e-input-group.e-control-wrapper,
[b-x0fmlw6y08] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group .e-input,
[b-x0fmlw6y08] .e-toolbar .e-input-group .e-input,
[b-x0fmlw6y08] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-x0fmlw6y08] .e-toolbar .e-input-group:focus-within,
[b-x0fmlw6y08] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-x0fmlw6y08] .e-toolbar .e-textbox .e-input-group-icon,
[b-x0fmlw6y08] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-x0fmlw6y08] .e-toolbar .e-input-group .e-input::placeholder,
[b-x0fmlw6y08] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-x0fmlw6y08] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-x0fmlw6y08] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-x0fmlw6y08] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   HELP ICON BUTTON
   ======================================== */
.help-icon-btn[b-x0fmlw6y08] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-x0fmlw6y08] {
    transform: scale(0.98);
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-x0fmlw6y08] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-x0fmlw6y08] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-x0fmlw6y08] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-x0fmlw6y08] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-x0fmlw6y08] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-x0fmlw6y08] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-x0fmlw6y08] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-x0fmlw6y08] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-x0fmlw6y08] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-x0fmlw6y08] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-x0fmlw6y08] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-x0fmlw6y08] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Step Icon */
.step-icon[b-x0fmlw6y08] {
    margin-bottom: 24px;
    animation: fadeInUp-b-x0fmlw6y08 0.6s ease;
}

.step-icon i[b-x0fmlw6y08] {
    font-size: 48px;
}

/* Info Box */
.info-box[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-x0fmlw6y08] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-x0fmlw6y08] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-x0fmlw6y08] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-x0fmlw6y08] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-x0fmlw6y08] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-x0fmlw6y08] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-x0fmlw6y08] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-x0fmlw6y08] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-x0fmlw6y08] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-x0fmlw6y08] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn[b-x0fmlw6y08] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-x0fmlw6y08] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-x0fmlw6y08] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-x0fmlw6y08] {
    background: #e1dfdd;
}

.btn-success[b-x0fmlw6y08] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-x0fmlw6y08] {
    background: #0b5c0b;
}

.btn i[b-x0fmlw6y08] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-x0fmlw6y08 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-x0fmlw6y08] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-x0fmlw6y08 1s linear infinite;
}

@keyframes spin-b-x0fmlw6y08 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-x0fmlw6y08] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-x0fmlw6y08] {
    font-size: 48px;
}

.error-container p[b-x0fmlw6y08] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-x0fmlw6y08] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-x0fmlw6y08] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-x0fmlw6y08] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-x0fmlw6y08] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-x0fmlw6y08] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-x0fmlw6y08] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-x0fmlw6y08] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-x0fmlw6y08] .e-grid .e-row.e-selectionbackground,
[b-x0fmlw6y08] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-x0fmlw6y08] .e-grid .e-row.e-selectionbackground:hover,
[b-x0fmlw6y08] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-x0fmlw6y08] .e-grid .e-row.e-selectionbackground td:first-child,
[b-x0fmlw6y08] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-x0fmlw6y08] .e-grid .e-row {
    height: 32px !important;
}

[b-x0fmlw6y08] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-x0fmlw6y08] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-x0fmlw6y08] .e-grid .e-headercell {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

/* Grid Row Hover Effect */
[b-x0fmlw6y08] .e-grid .e-row:hover:not(.e-selectionbackground):not([aria-selected="true"]) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* ========================================
   FORM STYLING FOR WIZARDS
   ======================================== */
.form-group[b-x0fmlw6y08] {
    margin-bottom: 20px;
}

.form-label[b-x0fmlw6y08] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-x0fmlw6y08]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-x0fmlw6y08] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-x0fmlw6y08] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ========================================
   COLUMN CHOOSER STYLING
   ======================================== */
.column-chooser-actions[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-x0fmlw6y08] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-x0fmlw6y08] {
    font-size: 12px;
}

.column-chooser-list[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-x0fmlw6y08]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-x0fmlw6y08]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-x0fmlw6y08] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-x0fmlw6y08] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-x0fmlw6y08] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-x0fmlw6y08] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-x0fmlw6y08] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-x0fmlw6y08] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-x0fmlw6y08] {
    animation: fadeInUp-b-x0fmlw6y08 0.3s ease-out;
}

.step-title[b-x0fmlw6y08] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-x0fmlw6y08] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-x0fmlw6y08]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-x0fmlw6y08]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-x0fmlw6y08]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-x0fmlw6y08]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-x0fmlw6y08] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-x0fmlw6y08] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-x0fmlw6y08] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-x0fmlw6y08] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-x0fmlw6y08] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-x0fmlw6y08] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-x0fmlw6y08] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-x0fmlw6y08] {
    color: #e0e0e0;
}

.gdpr-dialog-header[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gdpr-icon-lg[b-x0fmlw6y08] {
    font-size: 24px;
}

.gdpr-title-text[b-x0fmlw6y08] {
    font-size: 18px;
    font-weight: 600;
}

.gdpr-pre-line-text[b-x0fmlw6y08] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/SecurityIncidentAdministration.razor.rz.scp.css */
/* ========================================
   SECURITY INCIDENT ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-u1fz6q8ml5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-u1fz6q8ml5] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-u1fz6q8ml5] {
    display: none;
}

.header-right[b-u1fz6q8ml5] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-u1fz6q8ml5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-u1fz6q8ml5] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-u1fz6q8ml5] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-u1fz6q8ml5] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-u1fz6q8ml5] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-u1fz6q8ml5] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-u1fz6q8ml5] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-u1fz6q8ml5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-u1fz6q8ml5] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-u1fz6q8ml5] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group,
[b-u1fz6q8ml5] .e-toolbar .e-input-group.e-control-wrapper,
[b-u1fz6q8ml5] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group .e-input,
[b-u1fz6q8ml5] .e-toolbar .e-input-group .e-input,
[b-u1fz6q8ml5] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-u1fz6q8ml5] .e-toolbar .e-input-group:focus-within,
[b-u1fz6q8ml5] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-u1fz6q8ml5] .e-toolbar .e-textbox .e-input-group-icon,
[b-u1fz6q8ml5] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-u1fz6q8ml5] .e-toolbar .e-input-group .e-input::placeholder,
[b-u1fz6q8ml5] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-u1fz6q8ml5] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-u1fz6q8ml5] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-u1fz6q8ml5] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-u1fz6q8ml5] .e-grid .e-row.e-selectionbackground,
[b-u1fz6q8ml5] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-u1fz6q8ml5] .e-grid .e-row.e-selectionbackground:hover,
[b-u1fz6q8ml5] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-u1fz6q8ml5] .e-grid .e-row.e-selectionbackground td:first-child,
[b-u1fz6q8ml5] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-u1fz6q8ml5] .e-grid .e-row {
    height: 32px !important;
}

[b-u1fz6q8ml5] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-u1fz6q8ml5] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-u1fz6q8ml5] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-u1fz6q8ml5 1s linear infinite;
}

@keyframes spin-b-u1fz6q8ml5 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-u1fz6q8ml5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-u1fz6q8ml5] {
    font-size: 48px;
}

.error-container p[b-u1fz6q8ml5] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-u1fz6q8ml5] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-u1fz6q8ml5] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-u1fz6q8ml5] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-danger[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.badge-info[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteBlueBackground2);
    color: var(--BEC-colorPaletteBlueForeground2);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-u1fz6q8ml5] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-u1fz6q8ml5] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-u1fz6q8ml5] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-u1fz6q8ml5] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-u1fz6q8ml5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-u1fz6q8ml5] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-u1fz6q8ml5] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-u1fz6q8ml5] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-u1fz6q8ml5] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-u1fz6q8ml5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-u1fz6q8ml5] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-u1fz6q8ml5] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-u1fz6q8ml5] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Form Group */
.form-group[b-u1fz6q8ml5] {
    margin-bottom: 20px;
}

.form-label[b-u1fz6q8ml5] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-u1fz6q8ml5]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-u1fz6q8ml5] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-u1fz6q8ml5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-u1fz6q8ml5] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-u1fz6q8ml5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-u1fz6q8ml5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-u1fz6q8ml5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-u1fz6q8ml5] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-u1fz6q8ml5] {
    background: #e1dfdd;
}

.btn-success[b-u1fz6q8ml5] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-u1fz6q8ml5] {
    background: #0b5c0b;
}

.btn i[b-u1fz6q8ml5] {
    font-size: 14px;
}

/* Info Box */
.info-box[b-u1fz6q8ml5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-u1fz6q8ml5] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-u1fz6q8ml5] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-u1fz6q8ml5] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-u1fz6q8ml5] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-u1fz6q8ml5] .notification-success .e-dlg-content,
[b-u1fz6q8ml5] .notification-error .e-dlg-content,
[b-u1fz6q8ml5] .notification-warning .e-dlg-content,
[b-u1fz6q8ml5] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-u1fz6q8ml5] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-u1fz6q8ml5] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-u1fz6q8ml5] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-u1fz6q8ml5] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-u1fz6q8ml5] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-u1fz6q8ml5] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-u1fz6q8ml5] {
        font-size: 18px;
    }

    [b-u1fz6q8ml5] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-u1fz6q8ml5] {
        grid-template-columns: 1fr;
    }

    [b-u1fz6q8ml5] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-u1fz6q8ml5],
    .sidebar-footer[b-u1fz6q8ml5] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-u1fz6q8ml5] {
        padding: 16px 20px;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-u1fz6q8ml5] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-u1fz6q8ml5] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-u1fz6q8ml5] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-u1fz6q8ml5] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-u1fz6q8ml5] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-u1fz6q8ml5] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-u1fz6q8ml5] {
    animation: fadeInUp 0.3s ease-out;
}

.step-title[b-u1fz6q8ml5] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-u1fz6q8ml5] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-u1fz6q8ml5]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-u1fz6q8ml5]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-u1fz6q8ml5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-u1fz6q8ml5]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-u1fz6q8ml5] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-u1fz6q8ml5] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-u1fz6q8ml5] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-u1fz6q8ml5] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-u1fz6q8ml5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-u1fz6q8ml5] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-u1fz6q8ml5] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-separator-text[b-u1fz6q8ml5] {
    color: #e0e0e0;
}

.gdpr-dialog-header-sm[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-icon-md[b-u1fz6q8ml5] {
    font-size: 20px;
}

.gdpr-pre-line[b-u1fz6q8ml5] {
    white-space: pre-line;
}

.gdpr-mt-20[b-u1fz6q8ml5] {
    margin-top: 20px;
}
/* /Components/Pages/MainLayout/Administration/Administration/Organization/OrganizationAdministration.razor.rz.scp.css */
/* ========================================
   ORGANIZATION ADMINISTRATION
   Following AuditLogAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-6cjosv2t6k] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   ======================================== */
.erp-page-container[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-6cjosv2t6k] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-6cjosv2t6k] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-6cjosv2t6k] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-6cjosv2t6k] {
    transform: scale(0.98);
}

.page-subtitle[b-6cjosv2t6k] {
    display: none;
}

.header-right[b-6cjosv2t6k] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-6cjosv2t6k] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-6cjosv2t6k] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-6cjosv2t6k] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-6cjosv2t6k] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ALIALONE)
   ======================================== */
[b-6cjosv2t6k] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-6cjosv2t6k] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE */
/* Maximum specificity to override all Syncfusion defaults */

/* Container - Force exact 22px height with all possible selectors */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper.e-textbox,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group,
[b-6cjosv2t6k] .e-toolbar .e-input-group.e-control-wrapper {
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Input field - Exact 20px height with vertical centering */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group .e-input,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group input.e-input,
[b-6cjosv2t6k] .e-toolbar .e-input-group input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    outline: none !important;
}

/* Placeholder - Perfect vertical centering */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input::placeholder,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-6cjosv2t6k] .e-toolbar .e-input-group input::placeholder {
    line-height: 20px !important;
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
}

/* Clear button icon - Aligned with container */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    border: none !important;
    padding: 0 6px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

/* Focus state */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group:focus-within,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any extra padding/margin from wrapper elements */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group-icon.e-clear-icon {
    height: 22px !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   ======================================== */
.erp-page-content[b-6cjosv2t6k] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-6cjosv2t6k] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-6cjosv2t6k] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-6cjosv2t6k] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* Error Dialog Content */
.error-dialog-content[b-6cjosv2t6k] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.error-icon[b-6cjosv2t6k] {
    flex-shrink: 0;
}

.error-icon i[b-6cjosv2t6k] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-message h4[b-6cjosv2t6k] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
}

.error-message p[b-6cjosv2t6k] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.error-hint[b-6cjosv2t6k] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-6cjosv2t6k] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-6cjosv2t6k] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-6cjosv2t6k] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-6cjosv2t6k] .e-grid .e-row.e-selectionbackground,
[b-6cjosv2t6k] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-6cjosv2t6k] .e-grid .e-row.e-selectionbackground:hover,
[b-6cjosv2t6k] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-6cjosv2t6k] .e-grid .e-row.e-selectionbackground td:first-child,
[b-6cjosv2t6k] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-6cjosv2t6k] .e-grid .e-row {
    height: 32px !important;
}

[b-6cjosv2t6k] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-6cjosv2t6k] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-6cjosv2t6k] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Ensure grid table is fully visible */
:global(.e-grid .e-table)[b-6cjosv2t6k] {
    width: 100% !important;
}

/* ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager) */
/* DO NOT add pager CSS here - it will override the global styles */

/* Code Badge in Grid */
:global(.code-badge)[b-6cjosv2t6k] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorBrandStroke1);
}

/* Count Badge in Grid */
:global(.count-badge)[b-6cjosv2t6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* Status Text in Grid - Simple colored text without background or icons */
:global(.status-text)[b-6cjosv2t6k] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

:global(.status-text.status-active)[b-6cjosv2t6k] {
    color: #107c10;
    /* Green text for Active */
}

:global(.status-text.status-inactive)[b-6cjosv2t6k] {
    color: #d13438;
    /* Red text for Inactive */
}

/* RTL Text Support */
:global(.rtl-text)[b-6cjosv2t6k] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

:global(.rtl-input)[b-6cjosv2t6k] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   DIALOG STYLING
   Note: View/Edit modals now use separate scoped CSS files
   ======================================== */

/* ========================================
   INLINE VALIDATION ERROR (Phase 9)
   Displayed directly under each field
   ======================================== */
.field-error[b-6cjosv2t6k] {
    margin-top: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background-color: var(--BEC-colorPaletteRedBackground2);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    animation: slideDown-b-6cjosv2t6k 0.2s ease-out;
}

.field-error i[b-6cjosv2t6k] {
    font-size: var(--BEC-fontSizeBase300);
}

@keyframes slideDown-b-6cjosv2t6k {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* Confirmation Dialogs */
.confirmation-content[b-6cjosv2t6k] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.confirmation-icon[b-6cjosv2t6k] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.confirmation-icon-danger[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    color: var(--BEC-colorPaletteRedForeground1);
}

.confirmation-icon-warning[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: var(--BEC-colorPaletteDarkOrangeForeground1);
}

.confirmation-icon-success[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.confirmation-message[b-6cjosv2t6k] {
    flex: 1;
}

.confirmation-message p[b-6cjosv2t6k] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
}

.confirmation-message p:last-child[b-6cjosv2t6k] {
    margin-bottom: 0;
}

.confirmation-warning[b-6cjosv2t6k] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-warning i[b-6cjosv2t6k] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

.confirmation-info[b-6cjosv2t6k] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorPaletteGreenForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-info i[b-6cjosv2t6k] {
    color: var(--BEC-colorPaletteGreenForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-6cjosv2t6k] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-6cjosv2t6k] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-6cjosv2t6k] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-6cjosv2t6k] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-6cjosv2t6k] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-6cjosv2t6k] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }


    /* Column Chooser - Responsive on Mobile */
    [b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Tablet (768px - 1024px) - Adjust Search Bar */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Search Bar - Tablet Width */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-6cjosv2t6k] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-6cjosv2t6k] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLES
   ======================================== */
[b-6cjosv2t6k] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-6cjosv2t6k] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-6cjosv2t6k] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-6cjosv2t6k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-6cjosv2t6k] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-6cjosv2t6k] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-6cjosv2t6k] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-6cjosv2t6k] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* Wizard Step Content */
.wizard-step[b-6cjosv2t6k] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-6cjosv2t6k] {
    margin-bottom: 24px;
    animation: fadeInUp-b-6cjosv2t6k 0.6s ease;
}

.step-title[b-6cjosv2t6k] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-6cjosv2t6k] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-6cjosv2t6k] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-6cjosv2t6k] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-6cjosv2t6k] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-6cjosv2t6k] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-6cjosv2t6k] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-6cjosv2t6k] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-6cjosv2t6k] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-6cjosv2t6k] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sidebar-footer[b-6cjosv2t6k] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-6cjosv2t6k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-6cjosv2t6k] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-6cjosv2t6k] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-6cjosv2t6k] {
    background: #e1dfdd;
}

.btn-success[b-6cjosv2t6k] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-6cjosv2t6k] {
    background: #0b5c0b;
}

.btn i[b-6cjosv2t6k] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-6cjosv2t6k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* ========================================
   ASSIGNMENT WIZARD SIDEBAR STYLING
   ======================================== */
.assignment-wizard-sidebar[b-6cjosv2t6k] {
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar-step-content[b-6cjosv2t6k] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* Form styling for wizard */
.form-group[b-6cjosv2t6k] {
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.form-label[b-6cjosv2t6k] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
    text-align: left;
}

.form-label.required[b-6cjosv2t6k]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-6cjosv2t6k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    margin-bottom: 20px;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure all Syncfusion inputs take full width within wizard */
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group input,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group .e-input,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-textbox,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownbase,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownlist,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownlist .e-input-group,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-textbox-wrapper,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure form groups in wizard take full width */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k] {
    width: 100% !important;
}

/* Ensure Syncfusion components within form groups take full width */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-input-group,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-textbox,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-dropdownbase,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-dropdownlist {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure all wrapper divs don't constrain width */
.assignment-wizard-sidebar .form-group>*[b-6cjosv2t6k] {
    width: 100%;
    box-sizing: border-box;
}

/* Remove any margins/padding that create white space */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure inputs have no internal padding creating white space */
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group input {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Specific targeting for Syncfusion TextBox wrapper */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control-wrapper,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove any default margins from Syncfusion components */
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-textbox,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownbase {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force all child elements to fill width */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  * {
    max-width: 100% !important;
}

/* Target SfTextBox component directly */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control-wrapper,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-textbox-wrapper,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-input-group-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    [b-6cjosv2t6k] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-6cjosv2t6k],
    .sidebar-footer[b-6cjosv2t6k] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-6cjosv2t6k] {
        padding: 16px 20px;
    }

    .form-row[b-6cjosv2t6k] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   VIEW WIZARD STYLING
   ======================================== */
.form-value[b-6cjosv2t6k] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-value a[b-6cjosv2t6k] {
    text-decoration: none;
    color: var(--BEC-colorBrandForeground1);
}

.form-value a:hover[b-6cjosv2t6k] {
    text-decoration: underline;
}

.status-text[b-6cjosv2t6k] {
    font-size: 14px;
    font-weight: 600;
}

.status-text.status-active[b-6cjosv2t6k] {
    color: #107c10;
    /* Green text for Active */
}

.status-text.status-inactive[b-6cjosv2t6k] {
    color: #d13438;
    /* Red text for Inactive */
}

.stat-value[b-6cjosv2t6k] {
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

.loading-container[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.loading-container .spinner[b-6cjosv2t6k] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-6cjosv2t6k 1s linear infinite;
}

@keyframes spin-b-6cjosv2t6k {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   ======================================== */
/* Success Notification */
[b-6cjosv2t6k] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-6cjosv2t6k] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-6cjosv2t6k] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-6cjosv2t6k] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-6cjosv2t6k] .notification-success .e-dlg-content,
[b-6cjosv2t6k] .notification-error .e-dlg-content,
[b-6cjosv2t6k] .notification-warning .e-dlg-content,
[b-6cjosv2t6k] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-6cjosv2t6k] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-6cjosv2t6k] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-6cjosv2t6k] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-6cjosv2t6k] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-6cjosv2t6k] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-6cjosv2t6k] {
    font-size: 12px;
}

.column-chooser-list[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-6cjosv2t6k]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-6cjosv2t6k]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD - PROPER HEIGHT FIX
   ======================================== */
[b-6cjosv2t6k] .assignment-wizard-sidebar .sidebar-content {
    height: calc(100vh - 140px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

[b-6cjosv2t6k] .assignment-wizard-sidebar .sidebar-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-6cjosv2t6k] .assignment-wizard-sidebar .wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ========================================
   COLUMN CHOOSER WIZARD STYLES (MATCHING TRANSACTIONS PAGE)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-6cjosv2t6k] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-6cjosv2t6k] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-6cjosv2t6k] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-6cjosv2t6k] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-6cjosv2t6k] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-6cjosv2t6k]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-6cjosv2t6k]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-6cjosv2t6k]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-6cjosv2t6k]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-dialog-header-flex[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-6cjosv2t6k] {
    font-size: 20px;
}

.adm-preline-text[b-6cjosv2t6k] {
    white-space: pre-line;
}

.adm-text-muted[b-6cjosv2t6k] {
    color: var(--BEC-colorNeutralForeground3);
}

.adm-text-brand[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-auto-generate-notice[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.adm-wizard-icon[b-6cjosv2t6k] {
    margin-right: 6px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-label-hidden[b-6cjosv2t6k] {
    visibility: hidden;
}

.adm-checkbox-row[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.adm-checkbox-hint[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 8px;
}

.adm-checkbox-row-gap12[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
}

.adm-help-icon-lg[b-6cjosv2t6k] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-6cjosv2t6k] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/Profile/ProfileAdministration.razor.rz.scp.css */
/* ========================================
   PROFILE ADMINISTRATION PAGE - RIGHT SIDEBAR WIZARD
   Sophisticated CSS | Proper Specificity | Minimal !important
   ======================================== */

/* ========================================
   0. ERP PAGE CONTAINER - ESSENTIAL BASE STYLES
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-t0ywbv7zjt] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-t0ywbv7zjt] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-t0ywbv7zjt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-t0ywbv7zjt] {
    transform: scale(0.98);
}

.page-subtitle[b-t0ywbv7zjt] {
    display: none;
}

.header-right[b-t0ywbv7zjt] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-t0ywbv7zjt] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-t0ywbv7zjt] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-t0ywbv7zjt] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-t0ywbv7zjt] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT - Natural Flex Layout (Organization Admin Pattern)
   ✅ No fixed height - let page scroll naturally
   ✅ Grid handles its own scrolling via .e-gridcontent
   ======================================== */
.erp-page-content[b-t0ywbv7zjt] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    /* NO overflow - let page scroll naturally */
}

/* ========================================
   GRID SCROLLING - Organization Admin Pattern (PROVEN TO WORK)
   ✅ Horizontal and vertical scroll in grid content
   ======================================== */
[b-t0ywbv7zjt] .profile-admin-grid.e-grid {
    overflow-x: auto !important;
    /* Horizontal scroll for wide tables */
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent {
    overflow-x: auto !important;
    /* Horizontal scroll */
    overflow-y: auto !important;
    /* Vertical scroll for grid content */
}

/* ========================================
   ACTION TOOLBAR STYLING
   ======================================== */

[b-t0ywbv7zjt] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-t0ywbv7zjt] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-t0ywbv7zjt] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-t0ywbv7zjt] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-t0ywbv7zjt] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-t0ywbv7zjt] .e-grid .e-row.e-selectionbackground,
[b-t0ywbv7zjt] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-t0ywbv7zjt] .e-grid .e-row.e-selectionbackground:hover,
[b-t0ywbv7zjt] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-t0ywbv7zjt] .e-grid .e-row.e-selectionbackground td:first-child,
[b-t0ywbv7zjt] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-t0ywbv7zjt] .e-grid .e-row {
    height: 32px !important;
}

[b-t0ywbv7zjt] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-t0ywbv7zjt] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content area - Syncfusion official scrolling solution */
[b-t0ywbv7zjt] .e-grid .e-gridcontent {
    overflow-x: auto;
    overflow-y: auto;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-t0ywbv7zjt] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-t0ywbv7zjt] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-t0ywbv7zjt] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Custom Scrollbar Styling - Professional look */
[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    margin: 2px;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    border: 2px solid var(--BEC-colorNeutralBackground2);
    transition: background 0.2s ease;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:active {
    background: var(--BEC-colorBrandBackgroundPressed);
}

/* Horizontal scrollbar */
[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-corner {
    background: var(--BEC-colorNeutralBackground2);
}

/* Firefox scrollbar */
[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent {
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke2) var(--BEC-colorNeutralBackground2);
}

/* Grid content positioning */
[b-t0ywbv7zjt] .profile-admin-grid .e-content {
    position: relative;
}

/* Smooth selection highlight */
[b-t0ywbv7zjt] .profile-admin-grid .e-selectionbackground {
    transition: background-color 0.15s ease;
}

/* Loading indicator for virtual scrolling */
[b-t0ywbv7zjt] .profile-admin-grid .e-spinner-pane {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ========================================
   FILTERED COLUMN INDICATOR
   Blue header text when column is filtered
   ======================================== */

/* Change filter icon color to blue when active */
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell .e-filtered::before {
    color: var(--BEC-colorBrandForeground1);
}

/* Change header TEXT color to blue when column is filtered */
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell .e-headercelldiv {
    transition: color 0.2s ease;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-filtered~.e-headercelldiv,
[b-t0ywbv7zjt] .profile-admin-grid .e-filtered~.e-headertext,
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-headercelldiv,
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-headertext {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

/* Also highlight the sort icon if column is both filtered and sorted */
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-ascending,
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-descending {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-t0ywbv7zjt] .e-spinner-pane.e-spin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.97);
    z-index: 50;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Spinner Label */
[b-t0ywbv7zjt] .e-spinner-pane .e-spin-label {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    margin-top: 20px;
}

/* Tailwind3 Spinner Customization */
[b-t0ywbv7zjt] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1);
    border-top-color: var(--BEC-colorBrandBackground);
}

/* ========================================
   RTL TEXT (for Arabic names)
   ======================================== */
.rtl-text[b-t0ywbv7zjt] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   GRID COLUMN TEMPLATES - Stacked Display (Name + Code)
   Used for Organization and Company columns
   ======================================== */
.stacked-display[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.main-text[b-t0ywbv7zjt] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.sub-text[b-t0ywbv7zjt] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   Larger size for better visibility with viewport constraints
   ======================================== */
[b-t0ywbv7zjt] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px;
    max-width: 90vw;
    /* Never exceed 90% viewport width */
    height: auto;
    max-height: 80vh;
    /* Never exceed 80% viewport height */
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow16);
}

/* Excel Filter Checkbox List Area - More visible items */
[b-t0ywbv7zjt] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px);
    /* Account for search box, header, footer */
    min-height: 300px;
    overflow-y: auto;
}

/* Excel Filter Search Box */
[b-t0ywbv7zjt] .e-grid .e-excelfilter .e-searchbox {
    margin-bottom: 8px;
}

/* Excel Filter Dialog Content */
[b-t0ywbv7zjt] .e-grid .e-excelfilter .e-dlg-content {
    padding: 16px;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   Make it a compact dialog instead of full-screen
   ======================================== */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px;
    width: 450px;
    max-height: 80vh;
    /* Responsive height constraint */
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
}

/* Column Chooser Dialog Header */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: 16px 20px;
}

/* Column Chooser Dialog Content */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Column Chooser Dialog Footer (OK button) */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
}

/* ========================================
   1. SIDEBAR CONTAINER - Full Height Right Panel
   Responsive: Desktop 40%, Laptop 45%, Tablet 60%, Mobile 90%
   ======================================== */

/* ✅ SYNCFUSION PATTERN: Fixed height container */
[b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Width - Desktop (default in C#: 40%) */
@media (max-width: 1366px) {

    /* Laptop */
    [b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
        width: 45% !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet */
    [b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    [b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }

    /* Reduce padding on mobile */
    .sidebar-header[b-t0ywbv7zjt],
    .sidebar-footer[b-t0ywbv7zjt] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-t0ywbv7zjt] {
        padding: 16px 20px;
    }

    .sidebar-stepper[b-t0ywbv7zjt] {
        padding: 12px 20px;
    }
}

/* ========================================
   2. SIDEBAR HEADER - Fixed at Top
   ======================================== */

/* ✅ SYNCFUSION PATTERN: Fixed header with position sticky */
.sidebar-header[b-t0ywbv7zjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-t0ywbv7zjt] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-t0ywbv7zjt] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-t0ywbv7zjt] {
    font-size: 18px;
    color: #605e5c;
}

/* ========================================
   3. SIDEBAR CONTENT - Scrollable Middle
   ======================================== */

/* ✅ CORRECT PATTERN: Flex container for sticky footer support */
.sidebar-content[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* ========================================
   4. STEPPER - Compact Horizontal
   ======================================== */

/* ✅ SYNCFUSION PATTERN: Fixed stepper with position sticky */
.sidebar-stepper[b-t0ywbv7zjt] {
    padding: 12px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    top: 56px;
    z-index: 99;
}

/* Syncfusion Stepper Overrides - Increase specificity instead of !important */
[b-t0ywbv7zjt] .sidebar-stepper-clean.e-stepper {
    max-width: 100%;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-stepper-steps {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-container {
    padding: 6px 12px;
    border-radius: 20px;
    min-height: auto;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 150px;
    justify-content: center;
}

/* Responsive Stepper - Mobile */
@media (max-width: 768px) {
    [b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-container {
        padding: 4px 8px;
        max-width: 120px;
    }

    [b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-label-container {
        font-size: 10px;
    }

    [b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-icons {
        font-size: 12px;
        margin-right: 4px;
    }
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-label-container {
    font-size: 12px;
    font-weight: 500;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-icons {
    font-size: 14px;
    margin-right: 6px;
}

/* Remove circle around icon - Target more specifically */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-step-label-container .e-icons::before {
    background: none;
    border: none;
    box-shadow: none;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-step-inprogress .e-step-label-container .e-icons {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Hide subtitle */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-text-container {
    display: none;
}

/* Hide connector line */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-stepper-progressbar {
    display: none;
}

/* Stepper States - Higher specificity */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-notstarted {
    background: transparent;
    border: 1.5px solid #d1d1d1;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-notstarted .e-step-label-container {
    color: #8a8886;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-inprogress {
    background: #0078d4;
    border: 1.5px solid #0078d4;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-inprogress .e-step-label-container {
    color: white;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-completed {
    background: #107c10;
    border: 1.5px solid #107c10;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-completed .e-step-label-container {
    color: white;
    font-weight: 600;
}

/* ========================================
   5. STEP CONTENT - Fills Available Space
   ======================================== */

/* ✅ CORRECT PATTERN: Flex-grow to fill space, scrollable when needed */
.sidebar-step-content[b-t0ywbv7zjt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px 24px 16px;
    position: relative;
}

/* Step Container for Steps 1, 3, 4, 5 (with cards) */
.step-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 8px;
}

/* ========================================
   6. SYNCFUSION CARD STYLING
   ======================================== */

[b-t0ywbv7zjt] .step-container .e-card {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}

[b-t0ywbv7zjt] .step-container .e-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[b-t0ywbv7zjt] .step-container .e-card .e-card-header {
    background: #f3f2f1;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

[b-t0ywbv7zjt] .step-container .e-card .e-card-header .e-card-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
}

[b-t0ywbv7zjt] .step-container .e-card .e-card-content {
    padding: 16px;
}

/* ========================================
   7. FORM FIELDS - COMPACT SPACING
   ======================================== */

.field-row[b-t0ywbv7zjt] {
    margin-bottom: 12px;
}

.field-row-2col[b-t0ywbv7zjt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .field-row-2col[b-t0ywbv7zjt] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.field-col[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
}

.field-hint-clean[b-t0ywbv7zjt] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #605e5c;
    font-style: italic;
}

.error-text-clean[b-t0ywbv7zjt] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #d13438;
    font-weight: 500;
}

[b-t0ywbv7zjt] .error-field.e-input-group,
[b-t0ywbv7zjt] .error-field.e-control-wrapper {
    border-color: #d13438;
}

/* Owner Item Template */
.owner-item-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.owner-item-clean i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 14px;
}

.email-clean[b-t0ywbv7zjt] {
    margin-left: auto;
    font-size: 12px;
    color: #8a8886;
}

/* ========================================
   8. STEP 2 - SYSTEMS TOGGLE SWITCHES (2-COLUMN GRID)
   Modern, compact, professional with Syncfusion SfSwitch
   Reference: https://blazor.syncfusion.com/demos/buttons/toggle-switch-button?theme=fluent2
   ======================================== */

/* Main Container */
.systems-toggle-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 8px;
    background: #fafafa;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Header with Label and Count */
.systems-toggle-header[b-t0ywbv7zjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.systems-toggle-header .field-label-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.systems-toggle-header .field-label-clean i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 16px;
}

.selection-count-badge[b-t0ywbv7zjt] {
    font-size: 12px;
    font-weight: 600;
    color: #0078d4;
    background: #e1f5fe;
    padding: 4px 12px;
    border-radius: 12px;
}

/* Search Box */
.systems-search-box[b-t0ywbv7zjt] {
    margin-bottom: 6px;
}

/* 2-COLUMN GRID LAYOUT */
.systems-toggle-grid[b-t0ywbv7zjt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Individual Toggle Card */
.system-toggle-card[b-t0ywbv7zjt] {
    background: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.system-toggle-card:hover[b-t0ywbv7zjt] {
    border-color: #0078d4;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

.toggle-card-content[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* System Info (Icon + Text) */
.system-info-toggle[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.system-icon-toggle[b-t0ywbv7zjt] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e1f5fe;
    color: #0078d4;
    border-radius: 6px;
    font-size: 14px;
    flex-shrink: 0;
}

.system-details-toggle[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.system-name-toggle[b-t0ywbv7zjt] {
    font-size: 13px;
    font-weight: 500;
    color: #323130;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-code-toggle[b-t0ywbv7zjt] {
    font-size: 11px;
    color: #605e5c;
    font-weight: 400;
}

/* Syncfusion Switch Styling */
[b-t0ywbv7zjt] .system-switch.e-switch-wrapper {
    flex-shrink: 0;
}

[b-t0ywbv7zjt] .system-switch .e-switch-inner {
    background: #d1d1d1;
}

[b-t0ywbv7zjt] .system-switch.e-switch-wrapper .e-switch-on {
    background: #0078d4;
}

[b-t0ywbv7zjt] .system-switch.e-switch-wrapper .e-switch-handle {
    background: white;
}

/* Selection Summary */
.systems-summary[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #e6f7f1;
    border: 1px solid #8cd4b0;
    border-radius: 6px;
    color: #107c10;
    font-size: 13px;
    font-weight: 500;
}

.systems-summary i[b-t0ywbv7zjt] {
    font-size: 14px;
}

/* Warning (No Selection) */
.systems-warning[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff4ce;
    border: 1px solid #ffb900;
    border-radius: 6px;
    color: #8a5100;
    font-size: 13px;
    font-weight: 500;
}

.systems-warning i[b-t0ywbv7zjt] {
    font-size: 14px;
}

/* Scrollbar for Grid */
.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar {
    width: 8px;
}

.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar-track {
    background: #fafafa;
}

.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 4px;
}

.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar-thumb:hover {
    background: #0078d4;
}

/* Responsive: Stack to 1 column on small screens */
@media (max-width: 600px) {
    .systems-toggle-grid[b-t0ywbv7zjt] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   9. STEP 3 - MODULES ACCORDION
   ======================================== */

[b-t0ywbv7zjt] .modules-accordion-clean.e-accordion {
    border: none;
    background: transparent;
    margin-top: 8px;
}

[b-t0ywbv7zjt] .modules-accordion-clean .e-acrdn-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: white;
}

.accordion-header-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    font-size: 15px;
    font-weight: 600;
}

.accordion-header-clean i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 16px;
}

.badge-clean[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #e3f2fd;
    color: #0078d4;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
}

[b-t0ywbv7zjt] .modules-accordion-clean .e-acrdn-item .e-acrdn-content {
    padding: 8px;
    border-top: 1px solid #e0e0e0;
}

.module-item-clean[b-t0ywbv7zjt] {
    padding: 10px;
    border: 1px solid #f3f2f1;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.module-item-clean:hover[b-t0ywbv7zjt] {
    border-color: #d1d1d1;
    background: #fafafa;
}

.module-item-clean.selected[b-t0ywbv7zjt] {
    border-color: #0078d4;
    background: #f3f9ff;
}

.module-header-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.module-icon-clean[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 16px;
}

.module-type-badge-clean[b-t0ywbv7zjt] {
    margin-left: auto;
    padding: 2px 8px;
    background: #edebe9;
    color: #323130;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.module-permissions-clean[b-t0ywbv7zjt] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.permissions-section-clean[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-label-clean[b-t0ywbv7zjt] {
    font-size: 12px;
    font-weight: 600;
    color: #605e5c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.permissions-row-clean[b-t0ywbv7zjt] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.field-col-clean[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label-clean[b-t0ywbv7zjt] {
    font-size: 12px;
    color: #605e5c;
    font-weight: 500;
}

/* ========================================
   10. LOADING & EMPTY STATES
   ======================================== */

.loading-state-clean[b-t0ywbv7zjt],
.empty-state-clean[b-t0ywbv7zjt],
.placeholder-clean[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #8a8886;
}

.loading-state-clean .spinner-border[b-t0ywbv7zjt] {
    margin-bottom: 16px;
}

.empty-state-clean i[b-t0ywbv7zjt],
.placeholder-clean i[b-t0ywbv7zjt] {
    color: #d1d1d1;
    margin-bottom: 16px;
}

.empty-state-clean h3[b-t0ywbv7zjt],
.placeholder-clean h3[b-t0ywbv7zjt] {
    font-size: 18px;
    font-weight: 600;
    color: #605e5c;
    margin-bottom: 8px;
}

/* ========================================
   LOADING & ERROR CONTAINERS (Matches System Modules)
   ======================================== */

.loading-container[b-t0ywbv7zjt],
.error-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2);
}

.loading-container .spinner[b-t0ywbv7zjt],
.loading-container .spinner[b-t0ywbv7zjt]::before,
.loading-container .spinner[b-t0ywbv7zjt]::after {
    display: inline-block;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin-b-t0ywbv7zjt 1s linear infinite;
}

@keyframes spin-b-t0ywbv7zjt {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-t0ywbv7zjt],
.error-container p[b-t0ywbv7zjt] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.error-container i[b-t0ywbv7zjt] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-t0ywbv7zjt] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-t0ywbv7zjt] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-t0ywbv7zjt] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-t0ywbv7zjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-t0ywbv7zjt] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-t0ywbv7zjt] {
    font-size: 18px;
}

.sidebar-content[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.wizard-step[b-t0ywbv7zjt] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-t0ywbv7zjt] {
    margin-bottom: 24px;
    animation: fadeInUp-b-t0ywbv7zjt 0.6s ease;
}

@keyframes fadeInUp-b-t0ywbv7zjt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.wizard-step .step-title[b-t0ywbv7zjt] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-t0ywbv7zjt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Form Styling for Wizard */
.sidebar-step-content[b-t0ywbv7zjt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.sidebar-step-content .wizard-step[b-t0ywbv7zjt] {
    text-align: left;
    padding: 0;
}

.sidebar-step-content .step-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 20px;
}

.sidebar-step-content .step-description[b-t0ywbv7zjt] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* Info Box */
.info-box[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.info-box div[b-t0ywbv7zjt] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.info-box strong[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Features List */
.features-list[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.feature-item[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-t0ywbv7zjt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.example-step[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-t0ywbv7zjt] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.example-step ul[b-t0ywbv7zjt] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.use-case[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-t0ywbv7zjt] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-t0ywbv7zjt] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-t0ywbv7zjt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 12px 0;
    text-align: left;
}

.warning-box i[b-t0ywbv7zjt] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-t0ywbv7zjt] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-t0ywbv7zjt] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-t0ywbv7zjt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-t0ywbv7zjt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-t0ywbv7zjt] {
    background: #f3f3f3;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-t0ywbv7zjt] {
    background: #e0e0e0;
}

.btn-next[b-t0ywbv7zjt] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-t0ywbv7zjt] {
    background: var(--BEC-colorBrandForeground1);
}

.btn-success[b-t0ywbv7zjt] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-t0ywbv7zjt] {
    background: #059669;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-t0ywbv7zjt] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-t0ywbv7zjt] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-t0ywbv7zjt] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-t0ywbv7zjt] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */
.column-chooser-actions[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-chooser-actions .btn-link[b-t0ywbv7zjt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-t0ywbv7zjt] {
    font-size: 12px;
}

.column-chooser-list[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-t0ywbv7zjt]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-t0ywbv7zjt]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* ========================================
   BADGE STYLING (Matches System Modules)
   ======================================== */

.badge[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    border: none;
    background: transparent;
}

.badge-success[b-t0ywbv7zjt] {
    background: transparent;
    color: #10b981;
    border: none;
}

.badge-inactive[b-t0ywbv7zjt] {
    background: transparent;
    color: #ef4444;
    border: none;
}

.badge-warning[b-t0ywbv7zjt] {
    background: transparent;
    color: #f59e0b;
    border: none;
}

.badge-primary[b-t0ywbv7zjt] {
    background: transparent;
    color: #3b82f6;
    border: none;
}

/* Count Badges in Grid - NO SHADOW, NO BACKGROUND COLOR */
.count-badge[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
    border: none;
}

.count-systems[b-t0ywbv7zjt] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
}

.count-modules[b-t0ywbv7zjt] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
}

.count-users[b-t0ywbv7zjt] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
}

/* Status Badges - Green for Active, Red for Inactive */
.badge[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    border: none;
    background: transparent;
}

.badge-success[b-t0ywbv7zjt] {
    background: transparent;
    color: #10b981;
    border: none;
}

.badge-inactive[b-t0ywbv7zjt] {
    background: transparent;
    color: #ef4444;
    border: none;
}

.badge-warning[b-t0ywbv7zjt] {
    background: transparent;
    color: #f59e0b;
    border: none;
}

.badge-primary[b-t0ywbv7zjt] {
    background: transparent;
    color: #3b82f6;
    border: none;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-t0ywbv7zjt] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-t0ywbv7zjt] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-t0ywbv7zjt] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-t0ywbv7zjt] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-t0ywbv7zjt] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-t0ywbv7zjt] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-t0ywbv7zjt] {
    animation: fadeInUp-b-t0ywbv7zjt 0.3s ease-out;
}

.step-title[b-t0ywbv7zjt] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-t0ywbv7zjt] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-t0ywbv7zjt]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-t0ywbv7zjt]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-t0ywbv7zjt]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-t0ywbv7zjt]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-t0ywbv7zjt] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-t0ywbv7zjt] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-t0ywbv7zjt] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-t0ywbv7zjt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-t0ywbv7zjt] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-t0ywbv7zjt] {
    background: #f3f2f1;
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-badge-active[b-t0ywbv7zjt] {
    color: #28a745;
    font-weight: 600;
}

.adm-badge-inactive[b-t0ywbv7zjt] {
    color: #dc3545;
    font-weight: 600;
}

.adm-warning-icon[b-t0ywbv7zjt] {
    color: var(--BEC-warning-color);
    margin-bottom: 15px;
}

.adm-warning-heading[b-t0ywbv7zjt] {
    margin: 0 0 10px 0;
    color: var(--BEC-warning-color);
}

.adm-warning-desc[b-t0ywbv7zjt] {
    color: var(--BEC-text-secondary);
    margin-bottom: 20px;
}

.adm-dependency-actions-box[b-t0ywbv7zjt] {
    margin-top: 20px;
    padding: 15px;
    background: var(--BEC-background-secondary);
    border-radius: 8px;
}

.adm-dependency-title[b-t0ywbv7zjt] {
    margin: 0 0 10px 0;
    font-weight: 500;
}

.adm-btn-row[b-t0ywbv7zjt] {
    display: flex;
    gap: 10px;
}

.adm-delete-list[b-t0ywbv7zjt] {
    margin: 10px 0;
    padding-left: 20px;
}

.adm-delete-list-item[b-t0ywbv7zjt] {
    margin: 5px 0;
}

.adm-text-brand[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-t0ywbv7zjt] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/SystemManagement/SystemAdministration.razor.rz.scp.css */
/* ========================================
   SYSTEM ADMINISTRATION - STANDARDIZED PAGE STYLES
   Used on: SystemAdministration.razor (Read-only view)
   
   Note: This page is read-only for viewing system configuration.
   Uses same styling pattern as System Modules page.
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-281cb7uv7c] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-281cb7uv7c] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-281cb7uv7c] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-281cb7uv7c] {
    transform: scale(0.98);
}

.page-subtitle[b-281cb7uv7c] {
    display: none;
}

.header-right[b-281cb7uv7c] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   Same as System Modules page
   ======================================== */
.stats-container[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-281cb7uv7c] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-281cb7uv7c] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-281cb7uv7c] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-281cb7uv7c] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.BEC-CommandBar[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    min-height: 56px;
    position: sticky;
    top: 36px;
    z-index: 99;
    backdrop-filter: blur(8px);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.action-group[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.action-group-primary[b-281cb7uv7c] {
    flex-shrink: 0;
}

.action-group-utility[b-281cb7uv7c] {
    flex-shrink: 0;
}

.BEC-CommandBar-button[b-281cb7uv7c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.BEC-CommandBar-button:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.BEC-CommandBar-button:disabled[b-281cb7uv7c] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground4);
}

.BEC-CommandBar-button--primary[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.BEC-CommandBar-button--primary:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
    box-shadow: var(--BEC-shadow8);
}

.BEC-CommandBar-button--danger[b-281cb7uv7c] {
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorNeutralStroke1);
}

.BEC-CommandBar-button--danger:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorPaletteRedBackground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

.action-divider[b-281cb7uv7c] {
    width: 1px;
    height: 28px;
    background: var(--BEC-colorNeutralStroke1);
    margin: 0 var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

.search-box[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    min-width: 280px;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.search-box:focus-within[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
    min-width: 320px;
}

.search-icon[b-281cb7uv7c] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: color var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.search-box:focus-within .search-icon[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
}

.search-input[b-281cb7uv7c] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--BEC-fontSizeBase300);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    outline: none;
}

.search-input[b-281cb7uv7c]::placeholder {
    color: var(--BEC-colorNeutralForeground4);
}

.content-placeholder[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-281cb7uv7c] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-281cb7uv7c] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-281cb7uv7c] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-281cb7uv7c] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   LOADING AND ERROR STATES
   ======================================== */
.loading-container[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-281cb7uv7c] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-281cb7uv7c 1s linear infinite;
}

@keyframes spin-b-281cb7uv7c {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-281cb7uv7c] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.error-container[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-281cb7uv7c] {
    font-size: 48px;
}

.error-container p[b-281cb7uv7c] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-281cb7uv7c] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-281cb7uv7c] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-281cb7uv7c] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-281cb7uv7c] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-281cb7uv7c] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-281cb7uv7c] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-281cb7uv7c] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-281cb7uv7c] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-281cb7uv7c] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-281cb7uv7c] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group,
[b-281cb7uv7c] .e-toolbar .e-input-group.e-control-wrapper,
[b-281cb7uv7c] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group .e-input,
[b-281cb7uv7c] .e-toolbar .e-input-group .e-input,
[b-281cb7uv7c] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-281cb7uv7c] .e-toolbar .e-input-group:focus-within,
[b-281cb7uv7c] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-281cb7uv7c] .e-toolbar .e-textbox .e-input-group-icon,
[b-281cb7uv7c] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-281cb7uv7c] .e-toolbar .e-input-group .e-input::placeholder,
[b-281cb7uv7c] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Same as System Modules page
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-281cb7uv7c] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-281cb7uv7c] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-281cb7uv7c] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-281cb7uv7c] .e-grid .e-row.e-selectionbackground,
[b-281cb7uv7c] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-281cb7uv7c] .e-grid .e-row.e-selectionbackground:hover,
[b-281cb7uv7c] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-281cb7uv7c] .e-grid .e-row.e-selectionbackground td:first-child,
[b-281cb7uv7c] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-281cb7uv7c] .e-grid .e-row {
    height: 32px !important;
}

[b-281cb7uv7c] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-281cb7uv7c] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-281cb7uv7c] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Search Textbox in Toolbar */
[b-281cb7uv7c] .e-toolbar .e-textbox {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox:focus {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

@media (max-width: 768px) {
    .page-header-content[b-281cb7uv7c] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .page-stats[b-281cb7uv7c] {
        width: 100%;
        justify-content: center;
    }

    .BEC-CommandBar[b-281cb7uv7c] {
        flex-wrap: wrap;
        gap: var(--BEC-spacingHorizontalS);
    }

    .action-divider[b-281cb7uv7c] {
        display: none;
    }

    .search-box[b-281cb7uv7c] {
        order: -1;
        width: 100%;
        min-width: auto;
    }

    .BEC-CommandBar-button span[b-281cb7uv7c] {
        display: none;
    }

    .BEC-CommandBar-button[b-281cb7uv7c] {
        padding: var(--BEC-spacingHorizontalS);
        width: 36px;
    }
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-281cb7uv7c] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-281cb7uv7c] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-281cb7uv7c] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-281cb7uv7c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-281cb7uv7c] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-281cb7uv7c] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-281cb7uv7c] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-281cb7uv7c] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-281cb7uv7c] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-281cb7uv7c] {
    margin-bottom: 24px;
    animation: fadeInUp-b-281cb7uv7c 0.6s ease;
}

.step-title[b-281cb7uv7c] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-281cb7uv7c] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-281cb7uv7c] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-281cb7uv7c] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-281cb7uv7c] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-281cb7uv7c] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-281cb7uv7c] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-281cb7uv7c] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-281cb7uv7c] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-281cb7uv7c] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-281cb7uv7c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-281cb7uv7c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-281cb7uv7c] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-281cb7uv7c] {
    background: #e1dfdd;
}

.btn-next[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-281cb7uv7c] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-281cb7uv7c] {
    background: #0b5c0b;
}

.btn i[b-281cb7uv7c] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-281cb7uv7c {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-281cb7uv7c] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-281cb7uv7c] {
    font-size: 12px;
}

.column-chooser-list[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-281cb7uv7c]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-281cb7uv7c]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-281cb7uv7c] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-281cb7uv7c] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-281cb7uv7c] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-281cb7uv7c] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-281cb7uv7c] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-281cb7uv7c] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-281cb7uv7c] {
    animation: fadeInUp-b-281cb7uv7c 0.3s ease-out;
}

.step-title[b-281cb7uv7c] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-281cb7uv7c] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-281cb7uv7c]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-281cb7uv7c]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-281cb7uv7c]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-281cb7uv7c]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-281cb7uv7c] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-281cb7uv7c] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-281cb7uv7c] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-281cb7uv7c] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-281cb7uv7c] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-281cb7uv7c] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-281cb7uv7c] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-notification-icon[b-281cb7uv7c] {
    font-size: 20px;
}

.adm-preline-text[b-281cb7uv7c] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-281cb7uv7c] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-281cb7uv7c] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/SystemManagement/SystemModuleAdministration.razor.rz.scp.css */
/* ========================================
   SYSTEM MODULE ADMINISTRATION PAGE
   100% Identical to Profile Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-nmjmt102f1] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-nmjmt102f1] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-nmjmt102f1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-nmjmt102f1] {
    transform: scale(0.98);
}

.page-subtitle[b-nmjmt102f1] {
    display: none;
}

.header-right[b-nmjmt102f1] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-nmjmt102f1] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-nmjmt102f1] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-nmjmt102f1] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-nmjmt102f1] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-nmjmt102f1] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-nmjmt102f1] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-nmjmt102f1] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-nmjmt102f1] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-nmjmt102f1] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-nmjmt102f1] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-nmjmt102f1] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-nmjmt102f1] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group,
[b-nmjmt102f1] .e-toolbar .e-input-group.e-control-wrapper,
[b-nmjmt102f1] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group .e-input,
[b-nmjmt102f1] .e-toolbar .e-input-group .e-input,
[b-nmjmt102f1] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-nmjmt102f1] .e-toolbar .e-input-group:focus-within,
[b-nmjmt102f1] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-nmjmt102f1] .e-toolbar .e-textbox .e-input-group-icon,
[b-nmjmt102f1] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-nmjmt102f1] .e-toolbar .e-input-group .e-input::placeholder,
[b-nmjmt102f1] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-nmjmt102f1] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-nmjmt102f1] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-nmjmt102f1] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-nmjmt102f1] .e-grid .e-row.e-selectionbackground,
[b-nmjmt102f1] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-nmjmt102f1] .e-grid .e-row.e-selectionbackground:hover,
[b-nmjmt102f1] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-nmjmt102f1] .e-grid .e-row.e-selectionbackground td:first-child,
[b-nmjmt102f1] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-nmjmt102f1] .e-grid .e-row {
    height: 32px !important;
}

[b-nmjmt102f1] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-nmjmt102f1] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-nmjmt102f1] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-nmjmt102f1 1s linear infinite;
}

@keyframes spin-b-nmjmt102f1 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-nmjmt102f1] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-nmjmt102f1] {
    font-size: 48px;
}

.error-container p[b-nmjmt102f1] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-nmjmt102f1] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-nmjmt102f1] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-nmjmt102f1] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-nmjmt102f1] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-nmjmt102f1] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-nmjmt102f1] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-nmjmt102f1] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-nmjmt102f1] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-nmjmt102f1] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-nmjmt102f1] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-nmjmt102f1] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from UserBranchAdministration)
   ======================================== */
.sidebar-header[b-nmjmt102f1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-nmjmt102f1] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-nmjmt102f1] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-nmjmt102f1] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-nmjmt102f1] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-nmjmt102f1] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-nmjmt102f1] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-nmjmt102f1] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-nmjmt102f1] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Form Group */
.form-group[b-nmjmt102f1] {
    margin-bottom: 20px;
}

.form-label[b-nmjmt102f1] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-nmjmt102f1]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-nmjmt102f1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-nmjmt102f1] {
    font-size: 12px;
}

.column-chooser-list[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-nmjmt102f1]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-nmjmt102f1]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 1px solid #90caf9;
    border-radius: 8px;
    font-size: 14px;
    color: #1565c0;
    margin-bottom: 8px;
}

.auto-gen-info i[b-nmjmt102f1] {
    font-size: 18px;
    color: #7b1fa2;
    animation: sparkle-b-nmjmt102f1 2s ease-in-out infinite;
}

@keyframes sparkle-b-nmjmt102f1 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-nmjmt102f1] {
    color: #1565c0;
    font-weight: 600;
}

.form-value[b-nmjmt102f1] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-nmjmt102f1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-nmjmt102f1] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-nmjmt102f1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-nmjmt102f1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-nmjmt102f1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-nmjmt102f1] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-nmjmt102f1] {
    background: #e1dfdd;
}

.btn-success[b-nmjmt102f1] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-nmjmt102f1] {
    background: #0b5c0b;
}

.btn i[b-nmjmt102f1] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-nmjmt102f1] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-nmjmt102f1] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-nmjmt102f1] {
        font-size: 18px;
    }

    [b-nmjmt102f1] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-nmjmt102f1] {
        grid-template-columns: 1fr;
    }

    [b-nmjmt102f1] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-nmjmt102f1],
    .sidebar-footer[b-nmjmt102f1] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-nmjmt102f1] {
        padding: 16px 20px;
    }
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-nmjmt102f1] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-nmjmt102f1] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-nmjmt102f1] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-nmjmt102f1] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-nmjmt102f1] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-nmjmt102f1] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-nmjmt102f1] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-nmjmt102f1] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-nmjmt102f1] .notification-success .e-dlg-content,
[b-nmjmt102f1] .notification-error .e-dlg-content,
[b-nmjmt102f1] .notification-warning .e-dlg-content,
[b-nmjmt102f1] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-nmjmt102f1] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-nmjmt102f1] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-nmjmt102f1] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-nmjmt102f1] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-nmjmt102f1] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-nmjmt102f1] {
    margin-bottom: 24px;
    animation: fadeInUp-b-nmjmt102f1 0.6s ease;
}

.step-title[b-nmjmt102f1] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-nmjmt102f1] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-nmjmt102f1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-nmjmt102f1] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-nmjmt102f1] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-nmjmt102f1] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-nmjmt102f1] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-nmjmt102f1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-nmjmt102f1] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-nmjmt102f1] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-nmjmt102f1] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-nmjmt102f1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   STATUS BADGE STYLES - Text Only (No Background)
   ======================================== */
.badge[b-nmjmt102f1] {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.badge-success[b-nmjmt102f1] {
    color: #10b981 !important;
}

.badge-inactive[b-nmjmt102f1] {
    color: #dc2626 !important;
}

.badge-warning[b-nmjmt102f1] {
    color: #f59e0b !important;
}

.badge-primary[b-nmjmt102f1] {
    color: #0078d4 !important;
}

/* ========================================
   RESPONSIVE DESIGN - COMPREHENSIVE MEDIA QUERIES
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-nmjmt102f1] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-nmjmt102f1] {
        top: 100px !important;
        /* Below header + toolbar */
    }

    /* Search Bar - Tablet Width */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-nmjmt102f1] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-nmjmt102f1] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-nmjmt102f1] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-nmjmt102f1] {
        top: 140px !important;
        /* Below header + toolbar */
    }

    /* Sidebar Width - Full Width on Mobile */
    [b-nmjmt102f1] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-nmjmt102f1],
    .sidebar-footer[b-nmjmt102f1] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-nmjmt102f1] {
        padding: 16px 20px;
    }

    .form-row[b-nmjmt102f1] {
        grid-template-columns: 1fr;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-nmjmt102f1] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-nmjmt102f1] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-nmjmt102f1] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-nmjmt102f1] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-nmjmt102f1] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-nmjmt102f1] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-nmjmt102f1] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-nmjmt102f1] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-nmjmt102f1] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-nmjmt102f1] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-nmjmt102f1] {
    animation: fadeInUp-b-nmjmt102f1 0.3s ease-out;
}

.step-title[b-nmjmt102f1] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-nmjmt102f1] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-nmjmt102f1]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-nmjmt102f1]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-nmjmt102f1]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-nmjmt102f1]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-nmjmt102f1] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-nmjmt102f1] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-nmjmt102f1] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-nmjmt102f1] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-nmjmt102f1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-nmjmt102f1] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-nmjmt102f1] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-label-hidden[b-nmjmt102f1] {
    visibility: hidden;
}

.adm-checkbox-group[b-nmjmt102f1] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

.adm-dialog-header-flex[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-text-danger[b-nmjmt102f1] {
    color: #d13438;
}

.adm-text-danger-bold[b-nmjmt102f1] {
    color: #d13438;
    font-weight: 500;
}

.adm-info-box-light[b-nmjmt102f1] {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
}

.adm-notification-icon[b-nmjmt102f1] {
    font-size: 20px;
}

.adm-preline-text[b-nmjmt102f1] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-nmjmt102f1] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-nmjmt102f1] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/SystemManagement/SystemOverview.razor.rz.scp.css */
/* ============================================================================
   SYSTEM OVERVIEW PAGE STYLES
   Microsoft-Style Compact Design with TreeView
   ============================================================================ */

/* ============================================================================
   PAGE HEADER - ULTRA MINIMAL (IDENTICAL TO PROFILE ADMINISTRATION)
   ============================================================================ */

.erp-page-header[b-tp30048l04] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 6px 24px;
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.header-left[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.page-title[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.page-title i[b-tp30048l04] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-title h1[b-tp30048l04] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.stats-container[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-tp30048l04] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-tp30048l04] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-tp30048l04] {
    display: block;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.stat-divider[b-tp30048l04] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ============================================================================
   ACTION TOOLBAR - MICROSOFT STYLE (IDENTICAL TO PROFILE ADMINISTRATION)
   ============================================================================ */

[b-tp30048l04] .erp-action-toolbar.e-toolbar.e-control {
    position: sticky;
    top: 36px;
    z-index: 99;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 2px 20px;
    min-height: 28px;
    margin: 3px 24px 1px 24px;
    box-shadow: var(--BEC-shadow2);
}

[b-tp30048l04] .e-toolbar .e-toolbar-item {
    margin: 0 2px;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn {
    color: #0078d4;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    padding: 0 8px;
    min-height: 24px;
    line-height: 1;
    gap: 5px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: #106ebe;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn:active {
    background: var(--BEC-colorNeutralBackground1Pressed);
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn[disabled] {
    color: var(--BEC-colorNeutralForegroundDisabled);
    opacity: 0.5;
    cursor: not-allowed;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px;
    line-height: 1;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    font-size: 12px;
    line-height: 1;
}

[b-tp30048l04] .e-toolbar .e-separator {
    width: 2px;
    height: 14px;
    background: #0078d4;
    margin: 0 4px;
    opacity: 0.3;
}

[b-tp30048l04] .e-toolbar .e-textbox.e-input-group {
    width: 200px;
    min-height: 24px;
    border-radius: var(--BEC-borderRadiusSmall);
}

[b-tp30048l04] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px;
    padding: 2px 8px;
    line-height: 1;
}

/* ============================================================================
   PAGE CONTENT - TREEVIEW CONTAINER
   ============================================================================ */

.erp-page-content[b-tp30048l04] {
    padding: 8px 24px 24px 24px;
    height: calc(100vh - 235px);
    overflow: auto;
}

/* ============================================================================
   TREEVIEW - CUSTOM NODE STYLING
   ============================================================================ */

.system-overview-tree[b-tp30048l04] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    padding: 8px;
}

[b-tp30048l04] .system-overview-tree .e-list-item {
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 4px 8px;
    margin-bottom: 2px;
}

[b-tp30048l04] .system-overview-tree .e-list-item:hover {
    background: var(--BEC-colorNeutralBackground1Hover);
}

[b-tp30048l04] .system-overview-tree .e-list-item.e-active {
    background: var(--BEC-colorNeutralBackground1Selected);
    border-left: 3px solid var(--BEC-colorBrandBackground);
}

/* Tree Node Template Styling */
.tree-node[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.tree-node i[b-tp30048l04] {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.tree-node .node-title[b-tp30048l04] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    flex: 1;
}

/* Node Type Specific Colors */
.tree-node.node-root i[b-tp30048l04] {
    color: var(--BEC-colorBrandForeground1);
}

.tree-node.node-organization i[b-tp30048l04] {
    color: #0078d4;
}

.tree-node.node-company i[b-tp30048l04] {
    color: #107c10;
}

.tree-node.node-branch i[b-tp30048l04] {
    color: #0078d4;
}

.tree-node.node-project i[b-tp30048l04] {
    color: #ca5010;
}

.tree-node.node-system i[b-tp30048l04] {
    color: #8764b8;
}

.tree-node.node-module i[b-tp30048l04] {
    color: #00b7c3;
}

.tree-node.node-profile i[b-tp30048l04] {
    color: #c239b3;
}

.tree-node.node-group i[b-tp30048l04] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Node Badges */
.node-badge[b-tp30048l04] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightMedium);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.node-badge.users[b-tp30048l04] {
    background: #e1f5fe;
    color: #01579b;
}

.node-badge.modules[b-tp30048l04] {
    background: #f3e5f5;
    color: #4a148c;
}

.node-badge.projects[b-tp30048l04] {
    background: #fff3e0;
    color: #e65100;
}

/* Node Status */
.node-status[b-tp30048l04] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.node-status.active[b-tp30048l04] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.node-status.inactive[b-tp30048l04] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.node-status.in-progress[b-tp30048l04] {
    background: var(--BEC-colorPaletteBlueForeground2);
    color: white;
}

.node-status.under-development[b-tp30048l04] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.node-status.production[b-tp30048l04] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* Node Type Badge (Standalone) */
.node-type-badge[b-tp30048l04] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold);
    background: var(--BEC-colorBrandBackground);
    color: white;
    text-transform: uppercase;
}

/* ============================================================================
   LOADING & ERROR STATES
   ============================================================================ */

.loading-container[b-tp30048l04],
.error-container[b-tp30048l04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2);
}

.loading-spinner[b-tp30048l04] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-tp30048l04 1s linear infinite;
}

@keyframes spin-b-tp30048l04 {
    to {
        transform: rotate(360deg);
    }
}

.error-container i[b-tp30048l04] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground2);
}

/* ============================================================================
   DIALOG STYLING
   ============================================================================ */

[b-tp30048l04] .erp-dialog .e-dlg-header-content {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 12px 20px;
}

.dialog-header[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dialog-header i[b-tp30048l04] {
    font-size: 20px;
    color: var(--BEC-colorBrandForeground1);
}

.dialog-header span[b-tp30048l04] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-content[b-tp30048l04] {
    padding: 20px;
}

.dialog-content .form-group[b-tp30048l04] {
    margin-bottom: 16px;
}

.dialog-content .form-group label[b-tp30048l04] {
    display: block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 4px;
}

.dialog-content .form-value[b-tp30048l04] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* ============================================================================
   NOTIFICATION DIALOG STYLING
   ============================================================================ */

[b-tp30048l04] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteGreenBackground2) 0%, var(--BEC-colorPaletteGreenBackground1) 100%);
    border-bottom: none;
}

[b-tp30048l04] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteRedBackground2) 0%, var(--BEC-colorPaletteRedBackground1) 100%);
    border-bottom: none;
}

[b-tp30048l04] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteYellowBackground2) 0%, var(--BEC-colorPaletteYellowBackground1) 100%);
    border-bottom: none;
}

[b-tp30048l04] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteBlueForeground2) 0%, var(--BEC-colorBrandBackground) 100%);
    border-bottom: none;
}

.notification-header[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-header i[b-tp30048l04] {
    font-size: 24px;
    color: white;
}

.notification-header span[b-tp30048l04] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightBold);
    color: white;
}

.notification-content[b-tp30048l04] {
    padding: 20px;
}

.notification-content p[b-tp30048l04] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1200px) {
    .stats-container[b-tp30048l04] {
        gap: 12px;
    }

    .stat-card[b-tp30048l04] {
        gap: 3px;
    }

    .stat-value[b-tp30048l04] {
        font-size: 12px;
    }

    .stat-label[b-tp30048l04] {
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    .erp-page-header[b-tp30048l04] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 16px;
    }

    .header-left[b-tp30048l04] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .stats-container[b-tp30048l04] {
        flex-wrap: wrap;
        gap: 8px;
    }

    [b-tp30048l04] .erp-action-toolbar {
        margin: 8px 16px;
    }

    .erp-page-content[b-tp30048l04] {
        padding: 8px 16px 16px 16px;
    }

    [b-tp30048l04] .e-toolbar .e-textbox.e-input-group {
        width: 150px;
    }
}

/* /Components/Pages/MainLayout/Administration/Administration/User/Assignments/UserBranchAdministration.razor.rz.scp.css */
/* ========================================
   USER BRANCH ASSIGNMENT - OPTIMIZED CSS
   Clean | Efficient | No Duplications
   ======================================== */

/* ========================================
   PAGE LAYOUT
   ======================================== */
.erp-page-container[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.erp-page-content[b-xfjca4ar1k] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-xfjca4ar1k] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-xfjca4ar1k] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-xfjca4ar1k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-xfjca4ar1k] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-xfjca4ar1k] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-xfjca4ar1k] {
    transform: scale(0.98);
}

.page-subtitle[b-xfjca4ar1k] {
    display: none;
}

.header-right[b-xfjca4ar1k] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-xfjca4ar1k] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-xfjca4ar1k] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-xfjca4ar1k] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-xfjca4ar1k] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR STYLING
   ======================================== */

[b-xfjca4ar1k] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-xfjca4ar1k] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 20px !important;
}

/* ========================================
   GRID BADGES
   ======================================== */
.badge[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-project[b-xfjca4ar1k] {
    background: var(--BEC-colorStatusWarningBackground1);
    color: var(--BEC-colorStatusWarningForeground1);
}

.badge-branch[b-xfjca4ar1k] {
    background: var(--BEC-colorStatusInfoBackground1);
    color: var(--BEC-colorStatusInfoForeground1);
}

.user-count-badge[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--BEC-colorBrandBackground1);
    color: var(--BEC-colorBrandForeground1);
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-badge[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-active[b-xfjca4ar1k] {
    color: #10b981;
    background: transparent;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-inactive[b-xfjca4ar1k] {
    color: #ef4444;
    background: transparent;
    font-weight: var(--BEC-fontWeightSemibold);
}

.rtl-text[b-xfjca4ar1k] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-xfjca4ar1k] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-xfjca4ar1k] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-xfjca4ar1k] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-xfjca4ar1k] .e-grid .e-row.e-selectionbackground,
[b-xfjca4ar1k] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-xfjca4ar1k] .e-grid .e-row.e-selectionbackground:hover,
[b-xfjca4ar1k] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-xfjca4ar1k] .e-grid .e-row.e-selectionbackground td:first-child,
[b-xfjca4ar1k] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-xfjca4ar1k] .e-grid .e-row {
    height: 32px !important;
}

[b-xfjca4ar1k] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-xfjca4ar1k] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-xfjca4ar1k] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   SIDEBAR WIZARD (40% Width)
   ======================================== */
[b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Width - Matches ProfileAdministration (Desktop default: 40%) */
@media (max-width: 1366px) {

    /* Laptop */
    [b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
        width: 45% !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet */
    [b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    [b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }

    /* Reduce padding on mobile */
    .sidebar-header[b-xfjca4ar1k],
    .sidebar-footer[b-xfjca4ar1k] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-xfjca4ar1k] {
        padding: 16px 20px;
    }

    .sidebar-stepper[b-xfjca4ar1k] {
        padding: 12px 20px;
    }
}

.sidebar-header[b-xfjca4ar1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-xfjca4ar1k] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-xfjca4ar1k] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-xfjca4ar1k] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-xfjca4ar1k] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* ========================================
   STEPPER (Syncfusion) - Matches ProfileAdministration
   ======================================== */
.sidebar-stepper[b-xfjca4ar1k] {
    padding: 12px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    top: 56px;
    z-index: 99;
}

/* Syncfusion Stepper Overrides - Increase specificity instead of !important */
[b-xfjca4ar1k] .sidebar-stepper-clean.e-stepper {
    max-width: 100%;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-stepper-steps {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-container {
    padding: 6px 12px;
    border-radius: 20px;
    min-height: auto;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 150px;
    justify-content: center;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-label-container {
    font-size: 12px;
    font-weight: 500;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-icons {
    font-size: 14px;
    margin-right: 6px;
}

/* ⭐ CRITICAL: Remove circle around icon */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-step-label-container .e-icons::before {
    background: none;
    border: none;
    box-shadow: none;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-step-inprogress .e-step-label-container .e-icons {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Hide subtitle */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-text-container {
    display: none;
}

/* Hide connector line */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-stepper-progressbar {
    display: none;
}

/* Stepper States - Higher specificity */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-notstarted {
    background: transparent;
    border: 1.5px solid #d1d1d1;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-notstarted .e-step-label-container {
    color: #8a8886;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-inprogress {
    background: #0078d4;
    border: 1.5px solid #0078d4;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-inprogress .e-step-label-container {
    color: white;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-completed {
    background: #107c10;
    border: 1.5px solid #107c10;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-completed .e-step-label-container {
    color: white;
    font-weight: 600;
}

/* ========================================
   WIZARD STEPS
   ======================================== */
.sidebar-step-content[b-xfjca4ar1k] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-xfjca4ar1k] {
    max-width: 100%;
}

.step-title[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-xfjca4ar1k] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-xfjca4ar1k] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-xfjca4ar1k] {
    margin-bottom: 20px;
}

.form-label[b-xfjca4ar1k] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-xfjca4ar1k]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-xfjca4ar1k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.form-hint[b-xfjca4ar1k],
.field-hint[b-xfjca4ar1k] {
    display: block;
    font-size: 12px;
    color: #605e5c;
    margin-top: 4px;
    font-style: italic;
}

.error-message[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d13438;
    font-size: 13px;
    margin-top: 4px;
}

.error-message i[b-xfjca4ar1k] {
    font-size: 14px;
}

.error-message-box[b-xfjca4ar1k] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #fef0f0;
    border: 1px solid #f1aeb5;
    border-radius: 6px;
    color: #d13438;
    font-size: 14px;
    margin-top: 16px;
}

.error-message-box i[b-xfjca4ar1k] {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   SELECTED ITEM CARD (Branch/Project Display)
   ======================================== */
.selected-item-card[b-xfjca4ar1k] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 16px;
    overflow: hidden;
}

.selected-item-card .card-header[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #e8f4fd;
    border-bottom: 1px solid #d0e8f7;
    font-size: 16px;
    font-weight: 600;
    color: #0078d4;
}

.selected-item-card .card-header i[b-xfjca4ar1k] {
    font-size: 20px;
}

.selected-item-card .card-body[b-xfjca4ar1k] {
    padding: 16px;
}

.selected-item-card .info-row[b-xfjca4ar1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

.selected-item-card .info-row:last-child[b-xfjca4ar1k] {
    border-bottom: none;
}

.selected-item-card .info-row .label[b-xfjca4ar1k] {
    font-weight: 500;
    color: #605e5c;
    font-size: 14px;
}

.selected-item-card .info-row .value[b-xfjca4ar1k] {
    color: #323130;
    font-size: 14px;
}

/* ========================================
   USER SELECTION CONTAINER
   ======================================== */
.user-selection-container[b-xfjca4ar1k] {
    margin-top: 16px;
}

.selection-toolbar[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.search-box[b-xfjca4ar1k] {
    flex: 1;
}

.action-buttons[b-xfjca4ar1k] {
    display: flex;
    gap: 8px;
}

.action-btn[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #e1dfdd;
    border-color: #c8c6c4;
}

.action-btn:disabled[b-xfjca4ar1k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn i[b-xfjca4ar1k] {
    font-size: 14px;
}

.selection-info[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #e8f4fd;
    border: 1px solid #c7e0f4;
    border-radius: 6px;
    color: #0078d4;
    font-size: 14px;
    margin-bottom: 12px;
}

.selection-info i[b-xfjca4ar1k] {
    font-size: 16px;
}

.listbox-container[b-xfjca4ar1k] {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    overflow: hidden;
}

.no-results[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #605e5c;
}

.no-results i[b-xfjca4ar1k] {
    font-size: 48px;
    color: #c8c6c4;
    margin-bottom: 16px;
}

.no-results p[b-xfjca4ar1k] {
    margin: 0;
    font-size: 14px;
}

/* User Item in ListBox */
.user-item[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.user-name[b-xfjca4ar1k] {
    font-weight: 500;
    color: #323130;
}

.user-separator[b-xfjca4ar1k] {
    color: #c8c6c4;
}

.user-email[b-xfjca4ar1k] {
    color: #605e5c;
    font-size: 13px;
}

/* ========================================
   REVIEW SECTION
   ======================================== */
.review-section[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-card[b-xfjca4ar1k] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.review-card .review-header[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e8f4fd;
    border-bottom: 1px solid #d0e8f7;
    font-size: 15px;
    font-weight: 600;
    color: #0078d4;
}

.review-card .review-header i[b-xfjca4ar1k] {
    font-size: 18px;
}

.review-card .review-body[b-xfjca4ar1k] {
    padding: 16px;
}

.review-card .review-row[b-xfjca4ar1k] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.review-card .review-row:last-child[b-xfjca4ar1k] {
    border-bottom: none;
}

.review-card .review-row .label[b-xfjca4ar1k] {
    font-weight: 500;
    color: #605e5c;
    font-size: 14px;
    min-width: 120px;
}

.review-card .review-row .value[b-xfjca4ar1k] {
    color: #323130;
    font-size: 14px;
    text-align: right;
    flex: 1;
}

.review-card .user-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.review-card .user-review-item[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.review-card .user-review-item i[b-xfjca4ar1k] {
    font-size: 16px;
    color: #0078d4;
}

.review-card .user-info[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-card .user-info .user-name[b-xfjca4ar1k] {
    font-weight: 500;
    color: #323130;
    font-size: 14px;
}

.review-card .user-info .user-email[b-xfjca4ar1k] {
    color: #605e5c;
    font-size: 12px;
}

.review-card .no-data[b-xfjca4ar1k] {
    color: #605e5c;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* ========================================
   SIDEBAR FOOTER (Buttons)
   ======================================== */
.sidebar-footer[b-xfjca4ar1k] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

/* Button Styles (HTML buttons) */
.btn[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.btn:disabled[b-xfjca4ar1k] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn i[b-xfjca4ar1k] {
    font-size: 14px;
}

.btn-secondary[b-xfjca4ar1k] {
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #d1d1d1;
}

.btn-secondary:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #e1dfdd;
    border-color: #c8c6c4;
}

.btn-secondary:active:not(:disabled)[b-xfjca4ar1k] {
    background: #d2d0ce;
}

.btn-primary[b-xfjca4ar1k] {
    background: #0078d4;
    color: white;
    border: 1px solid #0078d4;
}

.btn-primary:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #106ebe;
    border-color: #106ebe;
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.3);
}

.btn-primary:active:not(:disabled)[b-xfjca4ar1k] {
    background: #005a9e;
}

.btn-success[b-xfjca4ar1k] {
    background: #107c10;
    color: white;
    border: 1px solid #107c10;
}

.btn-success:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #0b5a0b;
    border-color: #0b5a0b;
    box-shadow: 0 2px 6px rgba(16, 124, 16, 0.3);
}

.btn-success:active:not(:disabled)[b-xfjca4ar1k] {
    background: #094509;
}

/* Spinner in button */
.spinner-border[b-xfjca4ar1k] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-animation-b-xfjca4ar1k 0.75s linear infinite;
}

.spinner-border-sm[b-xfjca4ar1k] {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

@keyframes spinner-border-animation-b-xfjca4ar1k {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   SYNCFUSION COMPONENT OVERRIDES FOR WIZARD
   ======================================== */

/* TextBox in wizard forms */
[b-xfjca4ar1k] .sidebar-step-content .e-input-group,
[b-xfjca4ar1k] .sidebar-step-content .e-float-input {
    margin-bottom: 0;
}

[b-xfjca4ar1k] .sidebar-step-content .e-input-group .e-input,
[b-xfjca4ar1k] .sidebar-step-content .e-float-input .e-input {
    font-size: 14px;
    padding: 8px 12px;
    border-color: #d1d1d1;
    border-radius: 4px;
}

[b-xfjca4ar1k] .sidebar-step-content .e-input-group:focus-within,
[b-xfjca4ar1k] .sidebar-step-content .e-float-input:focus-within {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.3);
}

/* DropDownList in wizard forms */
[b-xfjca4ar1k] .sidebar-step-content .e-ddl.e-input-group,
[b-xfjca4ar1k] .sidebar-step-content .e-dropdownlist.e-input-group {
    border-radius: 4px;
}

[b-xfjca4ar1k] .sidebar-step-content .e-ddl .e-input,
[b-xfjca4ar1k] .sidebar-step-content .e-dropdownlist .e-input {
    font-size: 14px;
}

/* MultiSelect in wizard */
[b-xfjca4ar1k] .sidebar-step-content .e-multi-select-wrapper {
    border-radius: 4px;
    border-color: #d1d1d1;
}

[b-xfjca4ar1k] .sidebar-step-content .e-multi-select-wrapper:focus-within {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.3);
}

/* ListBox styling */
[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
}

[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-list-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f2f1;
}

[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-list-item:hover {
    background: #f8f9fa;
}

[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-list-item.e-active {
    background: #e8f4fd;
    color: #0078d4;
}

/* Checkbox in ListBox */
[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-checkbox-wrapper {
    margin-right: 10px;
}

/* ========================================
   HELP WIZARD SPECIFIC STYLES
   ======================================== */
[b-xfjca4ar1k] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

[b-xfjca4ar1k] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

.step-icon[b-xfjca4ar1k] {
    text-align: center;
    margin-bottom: 24px;
}

.step-icon i[b-xfjca4ar1k] {
    font-size: 48px;
    color: #0078d4;
}

.info-box[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #e8f4fd;
    border: 1px solid #c7e0f4;
    border-left: 4px solid #0078d4;
    border-radius: 6px;
    margin: 20px 0;
}

.info-box i[b-xfjca4ar1k] {
    font-size: 20px;
    color: #0078d4;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #323130;
}

.features-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.feature-item i[b-xfjca4ar1k] {
    font-size: 20px;
    color: #0078d4;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-item strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #323130;
}

.feature-item p[b-xfjca4ar1k] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.example-steps[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.example-step[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.step-number[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #0078d4;
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.example-step ul[b-xfjca4ar1k] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step li[b-xfjca4ar1k] {
    margin: 4px 0;
    color: #605e5c;
}

.use-cases[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.use-case[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.use-case-good[b-xfjca4ar1k] {
    background: #f0fdf4;
    border-color: #86efac;
}

.use-case i[b-xfjca4ar1k] {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.use-case-good i[b-xfjca4ar1k] {
    color: #16a34a;
}

.use-case strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #323130;
}

.use-case p[b-xfjca4ar1k] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.warning-box[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    margin: 20px 0;
}

.warning-box i[b-xfjca4ar1k] {
    font-size: 20px;
    color: #ffc107;
    flex-shrink: 0;
    margin-top: 2px;
}

.warning-box strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #856404;
}

.dont-show-again[b-xfjca4ar1k] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.dont-show-again label[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #605e5c;
}

.dont-show-again input[type="checkbox"][b-xfjca4ar1k] {
    cursor: pointer;
}

.wizard-progress[b-xfjca4ar1k] {
    color: #605e5c;
    font-size: 13px;
}

.wizard-actions[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
}

.btn-next[b-xfjca4ar1k] {
    background: #0078d4;
    color: white;
}

.btn-next:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #106ebe;
}

.btn-cancel[b-xfjca4ar1k] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #e1dfdd;
}

/* ========================================
   COLUMN CHOOSER WIZARD
   ======================================== */
.column-chooser-actions[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.column-chooser-actions .btn-link[b-xfjca4ar1k] {
    background: transparent;
    border: none;
    color: #0078d4;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.column-chooser-actions .btn-link:hover[b-xfjca4ar1k] {
    background: #f3f2f1;
}

.column-chooser-actions .btn-link i[b-xfjca4ar1k] {
    font-size: 12px;
}

.column-chooser-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.column-chooser-item[b-xfjca4ar1k] {
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-xfjca4ar1k] {
    background: #e8f4fd;
    border-color: #c7e0f4;
    transform: translateX(2px);
}

[b-xfjca4ar1k] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
}

[b-xfjca4ar1k] .column-chooser-item .e-label {
    font-size: 14px;
    font-weight: 500;
    color: #323130;
}

/* ========================================
   NOTIFICATION DIALOG STYLING (Syncfusion SfDialog)
   Matches SystemModuleAdministration pattern
   ======================================== */
[b-xfjca4ar1k] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteGreenBackground2) 0%, var(--BEC-colorPaletteGreenBackground1) 100%);
    border-bottom: none;
}

[b-xfjca4ar1k] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteRedBackground2) 0%, var(--BEC-colorPaletteRedBackground1) 100%);
    border-bottom: none;
}

[b-xfjca4ar1k] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteYellowBackground2) 0%, var(--BEC-colorPaletteYellowBackground1) 100%);
    border-bottom: none;
}

[b-xfjca4ar1k] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteBlueForeground2) 0%, var(--BEC-colorBrandBackground) 100%);
    border-bottom: none;
}

.notification-header[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-header i[b-xfjca4ar1k] {
    font-size: 24px;
    color: white;
}

.notification-header span[b-xfjca4ar1k] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightBold);
    color: white;
}

.notification-content[b-xfjca4ar1k] {
    padding: 20px;
}

.notification-content p[b-xfjca4ar1k] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    white-space: pre-line;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .form-row[b-xfjca4ar1k] {
        grid-template-columns: 1fr;
    }

    .sidebar-footer[b-xfjca4ar1k] {
        flex-wrap: wrap;
    }

    .btn[b-xfjca4ar1k] {
        min-width: auto;
        flex: 1;
    }

    .review-card .review-row[b-xfjca4ar1k] {
        flex-direction: column;
        gap: 4px;
    }

    .review-card .review-row .value[b-xfjca4ar1k] {
        text-align: left;
    }
}

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   Matches UserAdministration & Standard Layouts
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-xfjca4ar1k] {
        padding: 12px 20px;
    }

    [b-xfjca4ar1k] .e-toolbar.e-control {
        top: 50px !important;
        padding: 2px 20px !important;
    }

    :global(.e-grid .e-gridheader)[b-xfjca4ar1k] {
        top: 100px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-xfjca4ar1k] {
        flex-direction: column;
        padding: 12px 16px;
        gap: 12px;
        min-height: auto;
    }

    .header-right[b-xfjca4ar1k] {
        width: 100%;
    }

    /* Stats - Full Width */
    .stats-container[b-xfjca4ar1k] {
        width: 100%;
        justify-content: space-around;
        background: var(--BEC-colorNeutralBackground2);
        padding: 8px;
        border-radius: 6px;
    }

    /* Toolbar - Mobile Optimized */
    [b-xfjca4ar1k] .e-toolbar.e-control {
        top: 110px !important;
        /* Pushed down by stacked header */
        margin: 0 16px !important;
        padding: 2px 8px !important;
        overflow-x: auto;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-xfjca4ar1k] {
        top: 160px !important;
    }

    /* Grid Body - Adjust height for mobile header */
    [b-xfjca4ar1k] .e-grid {
        height: calc(100vh - 230px) !important;
    }

    /* Sidebars - Full Width on Mobile */
    [b-xfjca4ar1k] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    /* Help Wizard - Full Width */
    [b-xfjca4ar1k] .help-wizard-sidebar {
        width: 100% !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {

    /* Icon-Only Toolbar to save space */
    [b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn-text {
        display: none;
    }

    /* Except for search box */
    [b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn-text.e-search {
        display: block;
    }

    /* Stats - Smaller Text */
    .stat-value[b-xfjca4ar1k] {
        font-size: 16px;
    }

    .stat-label[b-xfjca4ar1k] {
        font-size: 10px;
    }

    /* Sidebars - Full Screen */
    [b-xfjca4ar1k] .assignment-wizard-sidebar {
        width: 100% !important;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-xfjca4ar1k] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-xfjca4ar1k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-xfjca4ar1k] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-xfjca4ar1k] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-xfjca4ar1k] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-xfjca4ar1k] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-xfjca4ar1k]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-xfjca4ar1k]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-xfjca4ar1k]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-xfjca4ar1k]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-help-icon-lg[b-xfjca4ar1k] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-xfjca4ar1k] {
    color: #e0e0e0;
}

.adm-dialog-header-flex[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-xfjca4ar1k] {
    font-size: 20px;
}

.adm-preline-text[b-xfjca4ar1k] {
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Assignments/UserCompanyAdministration.razor.rz.scp.css */
/* ========================================
   USER BRANCH ASSIGNMENT - OPTIMIZED CSS
   Clean | Efficient | No Duplications
   ======================================== */

/* ========================================
   PAGE LAYOUT
   ======================================== */
.erp-page-container[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.erp-page-content[b-jlwbmd2lyy] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-jlwbmd2lyy] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jlwbmd2lyy] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jlwbmd2lyy] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jlwbmd2lyy] {
    transform: scale(0.98);
}

.page-subtitle[b-jlwbmd2lyy] {
    display: none;
}

.header-right[b-jlwbmd2lyy] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jlwbmd2lyy] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jlwbmd2lyy] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jlwbmd2lyy] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jlwbmd2lyy] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR STYLING
   ======================================== */

[b-jlwbmd2lyy] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jlwbmd2lyy] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   GRID BADGES
   ======================================== */
.badge[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-project[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusWarningBackground1);
    color: var(--BEC-colorStatusWarningForeground1);
}

.badge-branch[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusInfoBackground1);
    color: var(--BEC-colorStatusInfoForeground1);
}

.user-count-badge[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--BEC-colorBrandBackground1);
    color: var(--BEC-colorBrandForeground1);
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-badge[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-active[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusSuccessBackground1);
    color: var(--BEC-colorStatusSuccessForeground1);
}

.status-inactive[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusDangerBackground1);
    color: var(--BEC-colorStatusDangerForeground1);
}

.rtl-text[b-jlwbmd2lyy] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jlwbmd2lyy] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jlwbmd2lyy] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jlwbmd2lyy] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jlwbmd2lyy] .e-grid .e-row.e-selectionbackground,
[b-jlwbmd2lyy] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jlwbmd2lyy] .e-grid .e-row.e-selectionbackground:hover,
[b-jlwbmd2lyy] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jlwbmd2lyy] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jlwbmd2lyy] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-jlwbmd2lyy] .e-grid .e-row {
    height: 32px !important;
}

[b-jlwbmd2lyy] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-jlwbmd2lyy] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-jlwbmd2lyy] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   SIDEBAR WIZARD (40% Width)
   ======================================== */
[b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Width - Matches ProfileAdministration (Desktop default: 40%) */
@media (max-width: 1366px) {

    /* Laptop */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
        width: 45% !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }

    /* Reduce padding on mobile */
    .sidebar-header[b-jlwbmd2lyy],
    .sidebar-footer[b-jlwbmd2lyy] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-jlwbmd2lyy] {
        padding: 16px 20px;
    }

    .sidebar-stepper[b-jlwbmd2lyy] {
        padding: 12px 20px;
    }
}

.sidebar-header[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jlwbmd2lyy] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jlwbmd2lyy] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jlwbmd2lyy] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* ========================================
   STEPPER (Syncfusion) - Matches ProfileAdministration
   ======================================== */
.sidebar-stepper[b-jlwbmd2lyy] {
    padding: 12px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    top: 56px;
    z-index: 99;
}

/* Syncfusion Stepper Overrides - Increase specificity instead of !important */
[b-jlwbmd2lyy] .sidebar-stepper-clean.e-stepper {
    max-width: 100%;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-stepper-steps {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-container {
    padding: 6px 12px;
    border-radius: 20px;
    min-height: auto;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 150px;
    justify-content: center;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-label-container {
    font-size: 12px;
    font-weight: 500;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-icons {
    font-size: 14px;
    margin-right: 6px;
}

/* ⭐ CRITICAL: Remove circle around icon */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-step-label-container .e-icons::before {
    background: none;
    border: none;
    box-shadow: none;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-step-inprogress .e-step-label-container .e-icons {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Hide subtitle */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-text-container {
    display: none;
}

/* Hide connector line */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-stepper-progressbar {
    display: none;
}

/* Stepper States - Higher specificity */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-notstarted {
    background: transparent;
    border: 1.5px solid #d1d1d1;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-notstarted .e-step-label-container {
    color: #8a8886;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-inprogress {
    background: #0078d4;
    border: 1.5px solid #0078d4;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-inprogress .e-step-label-container {
    color: white;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-completed {
    background: #107c10;
    border: 1.5px solid #107c10;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-completed .e-step-label-container {
    color: white;
    font-weight: 600;
}

/* ========================================
   WIZARD STEPS
   ======================================== */
.sidebar-step-content[b-jlwbmd2lyy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-jlwbmd2lyy] {
    max-width: 100%;
}

.step-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* ========================================
   FORM ELEMENTS (Consolidated)
   ======================================== */
.form-group[b-jlwbmd2lyy] {
    margin-bottom: 20px;
}

.form-label[b-jlwbmd2lyy] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-jlwbmd2lyy]::after {
    content: " *";
    color: #d13438;
}

.field-hint[b-jlwbmd2lyy] {
    display: block;
    font-size: 11px;
    color: #8a8886;
    margin-top: 4px;
    font-style: italic;
}

.error-message[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #d13438;
    margin-top: 6px;
}

.error-message-box[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    margin-top: 16px;
}

.error-message-box i[b-jlwbmd2lyy] {
    color: #d13438;
    font-size: 18px;
    flex-shrink: 0;
}

.error-message-box span[b-jlwbmd2lyy] {
    color: #d13438;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

[b-jlwbmd2lyy] .uppercase-input input {
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

[b-jlwbmd2lyy] .multiline-textbox textarea {
    min-height: 70px;
    resize: vertical;
}

[b-jlwbmd2lyy] .rtl-text input {
    direction: rtl;
    text-align: right;
}

/* ========================================
   SELECTED ITEM CARD
   ======================================== */
.selected-item-card[b-jlwbmd2lyy] {
    margin-top: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
}

.selected-item-card .card-header[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f3f2f1;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    font-weight: 600;
    color: #323130;
}

.selected-item-card .card-header i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 18px;
}

.selected-item-card .card-body[b-jlwbmd2lyy] {
    padding: 16px;
}

.info-row[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edebe9;
}

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

.info-row .label[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #8a8886;
    font-weight: 500;
}

.info-row .value[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #323130;
    font-weight: 600;
}

/* ========================================
   USER SELECTION (Optimized ListBox)
   ======================================== */
.user-selection-container[b-jlwbmd2lyy] {
    margin-top: 20px;
}

.selection-toolbar[b-jlwbmd2lyy] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-box[b-jlwbmd2lyy] {
    flex: 1;
    min-width: 250px;
}

/* ⭐ MULTI-SELECT CHIP STYLING (Syncfusion Box Mode) */
[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper {
    border: 2px solid #d1d1d1;
    border-radius: 6px;
    padding: 4px 8px;
    transition: border-color 0.2s ease;
}

[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper:hover {
    border-color: #0078d4;
}

[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper.e-input-focus {
    border-color: #0078d4;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

/* Chip styling */
[b-jlwbmd2lyy] .search-box .e-chips {
    background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
    color: white;
    border-radius: 16px;
    padding: 4px 12px;
    margin: 2px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

[b-jlwbmd2lyy] .search-box .e-chips:hover {
    background: linear-gradient(135deg, #106ebe 0%, #005a9e 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.3);
}

/* Chip close button */
[b-jlwbmd2lyy] .search-box .e-chips .e-chips-close::before {
    color: white;
    font-size: 12px;
    opacity: 0.9;
}

[b-jlwbmd2lyy] .search-box .e-chips .e-chips-close:hover::before {
    opacity: 1;
}

/* Input field inside MultiSelect */
[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper .e-input-group input {
    font-size: 14px;
    padding: 6px 8px;
}

.action-buttons[b-jlwbmd2lyy] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #0078d4;
    border-radius: 4px;
    background: white;
    color: #0078d4;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #0078d4;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2);
}

.action-btn:disabled[b-jlwbmd2lyy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn i[b-jlwbmd2lyy] {
    font-size: 14px;
}

.selection-info[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%);
    border: 1px solid #0078d4;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #004578;
}

.selection-info i[b-jlwbmd2lyy] {
    font-size: 20px;
    color: #0078d4;
}

.selection-info strong[b-jlwbmd2lyy] {
    color: #0078d4;
    font-weight: 600;
}

.listbox-container[b-jlwbmd2lyy] {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ⭐ SYNCFUSION LISTBOX - SINGLE LINE LAYOUT (Official Pattern) */

/* List item - Fixed height with proper structure */
[b-jlwbmd2lyy] .e-listbox .e-list-item {
    height: 44px !important;
    padding: 0 16px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f3f2f1 !important;
    border-radius: 0 !important;
    transition: all 0.2s ease;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-listbox .e-list-item:last-child {
    border-bottom: none !important;
}

[b-jlwbmd2lyy] .e-listbox .e-list-item:hover {
    background-color: #f9f9f9 !important;
}

[b-jlwbmd2lyy] .e-listbox .e-list-item.e-active {
    background-color: #e6f7ff !important;
    border-left: 3px solid #0078d4 !important;
    padding-left: 13px !important;
}

/* ⭐ CRITICAL: Checkbox wrapper - Position inline at vertical center */
[b-jlwbmd2lyy] .e-listbox .e-list-item .e-checkbox-wrapper {
    position: relative !important;
    margin: 0 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* ⭐ CRITICAL: List text container - Must constrain width for ellipsis to work */
[b-jlwbmd2lyy] .e-listbox .e-list-item .e-list-text {
    display: block !important;
    width: 100% !important;
    flex: 1 !important;
    overflow: hidden !important;
    padding-right: 16px !important;
}

/* User item wrapper - Single line flex layout with ellipsis */
.user-item[b-jlwbmd2lyy] {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    height: 44px !important;
    line-height: 44px !important;
}

.user-name[b-jlwbmd2lyy] {
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

.user-separator[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #d0d0d0;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

.user-email[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #8a8886;
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    line-height: normal !important;
}

.no-results[b-jlwbmd2lyy] {
    text-align: center;
    padding: 50px 20px;
    color: #8a8886;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    margin-top: 16px;
}

.no-results i[b-jlwbmd2lyy] {
    font-size: 56px;
    color: #d0d0d0;
    margin-bottom: 16px;
    display: block;
}

.no-results p[b-jlwbmd2lyy] {
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.no-results strong[b-jlwbmd2lyy] {
    color: #323130;
    font-weight: 600;
}

/* ========================================
   REVIEW SECTION
   ======================================== */
.review-section[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-card[b-jlwbmd2lyy] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.review-header[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f3f2f1;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.review-header i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 16px;
}

.review-body[b-jlwbmd2lyy] {
    padding: 16px;
}

.review-row[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #edebe9;
}

.review-row:last-child[b-jlwbmd2lyy] {
    border-bottom: none;
}

.review-row .label[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #8a8886;
    font-weight: 500;
}

.review-row .value[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #323130;
    font-weight: 600;
}

.user-list[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-review-item[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.user-review-item i[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #0078d4;
}

.user-review-item .user-info[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-review-item .user-name[b-jlwbmd2lyy] {
    font-size: 13px;
    font-weight: 500;
    color: #323130;
}

.user-review-item .user-email[b-jlwbmd2lyy] {
    font-size: 11px;
    color: #8a8886;
}

.no-data[b-jlwbmd2lyy] {
    text-align: center;
    color: #8a8886;
    font-size: 13px;
    padding: 20px;
}

/* ========================================
   FOOTER BUTTONS (Consolidated)
   ======================================== */
.sidebar-footer[b-jlwbmd2lyy] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.btn[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jlwbmd2lyy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-jlwbmd2lyy] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #e1dfdd;
}

.btn-primary[b-jlwbmd2lyy] {
    background: #0078d4;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #106ebe;
}

.btn-success[b-jlwbmd2lyy] {
    background: #107c10;
    color: white;
}

.btn-success:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #0b5a0b;
    box-shadow: 0 2px 8px rgba(16, 124, 16, 0.3);
}

.btn i[b-jlwbmd2lyy] {
    font-size: 14px;
}

.spinner-border[b-jlwbmd2lyy] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-jlwbmd2lyy 0.75s linear infinite;
}

.spinner-border-sm[b-jlwbmd2lyy] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.15em;
}

@keyframes spinner-border-b-jlwbmd2lyy {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-jlwbmd2lyy] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-jlwbmd2lyy] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-jlwbmd2lyy] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-jlwbmd2lyy] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-jlwbmd2lyy] {
    font-size: 18px;
}

.sidebar-content[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.wizard-step[b-jlwbmd2lyy] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-jlwbmd2lyy] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jlwbmd2lyy 0.6s ease;
}

@keyframes fadeInUp-b-jlwbmd2lyy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.wizard-step .step-title[b-jlwbmd2lyy] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-jlwbmd2lyy] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Form Styling for Wizard */
.sidebar-step-content[b-jlwbmd2lyy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.sidebar-step-content .wizard-step[b-jlwbmd2lyy] {
    text-align: left;
    padding: 0;
}

.sidebar-step-content .step-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 20px;
}

.sidebar-step-content .step-description[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* Info Box */
.info-box[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.info-box div[b-jlwbmd2lyy] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.info-box strong[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Features List */
.features-list[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.feature-item[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jlwbmd2lyy] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jlwbmd2lyy] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.example-step[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jlwbmd2lyy] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.example-step ul[b-jlwbmd2lyy] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.use-case[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jlwbmd2lyy] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jlwbmd2lyy] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jlwbmd2lyy] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jlwbmd2lyy] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 12px 0;
    text-align: left;
}

.warning-box i[b-jlwbmd2lyy] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jlwbmd2lyy] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jlwbmd2lyy] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-jlwbmd2lyy] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-jlwbmd2lyy] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
}

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   Matches UserAdministration & Standard Layouts
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-jlwbmd2lyy] {
        padding: 12px 20px;
    }

    [b-jlwbmd2lyy] .e-toolbar.e-control {
        top: 50px !important;
        padding: 2px 20px !important;
    }

    :global(.e-grid .e-gridheader)[b-jlwbmd2lyy] {
        top: 100px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-jlwbmd2lyy] {
        flex-direction: column;
        padding: 12px 16px;
        gap: 12px;
        min-height: auto;
    }

    .header-right[b-jlwbmd2lyy] {
        width: 100%;
    }

    /* Stats - Full Width */
    .stats-container[b-jlwbmd2lyy] {
        width: 100%;
        justify-content: space-around;
        background: var(--BEC-colorNeutralBackground2);
        padding: 8px;
        border-radius: 6px;
    }

    /* Toolbar - Mobile Optimized */
    [b-jlwbmd2lyy] .e-toolbar.e-control {
        top: 110px !important;
        /* Pushed down by stacked header */
        margin: 0 16px !important;
        padding: 2px 8px !important;
        overflow-x: auto;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-jlwbmd2lyy] {
        top: 160px !important;
    }

    /* Grid Body - Adjust height for mobile header */
    [b-jlwbmd2lyy] .e-grid {
        height: calc(100vh - 230px) !important;
    }

    /* Sidebars - Full Width on Mobile */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    /* Help Wizard - Full Width */
    [b-jlwbmd2lyy] .help-wizard-sidebar {
        width: 100% !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {

    /* Icon-Only Toolbar to save space */
    [b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn-text {
        display: none;
    }

    /* Except for search box */
    [b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn-text.e-search {
        display: block;
    }

    /* Stats - Smaller Text */
    .stat-value[b-jlwbmd2lyy] {
        font-size: 16px;
    }

    .stat-label[b-jlwbmd2lyy] {
        font-size: 10px;
    }

    /* Sidebars - Full Screen */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar {
        width: 100% !important;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-jlwbmd2lyy] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-jlwbmd2lyy] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-jlwbmd2lyy] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-jlwbmd2lyy] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-jlwbmd2lyy] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-jlwbmd2lyy]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-jlwbmd2lyy]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-jlwbmd2lyy]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-jlwbmd2lyy]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-text-brand[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-jlwbmd2lyy] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Compliance/UserConsentAdministration.razor.rz.scp.css */
/* ========================================
   USER CONSENT ADMINISTRATION - STANDARDIZED PAGE STYLES
   Uses same styling pattern as System Modules page
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-40scv0mve3] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-40scv0mve3] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-40scv0mve3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-40scv0mve3] {
    transform: scale(0.98);
}

.page-subtitle[b-40scv0mve3] {
    display: none;
}

.header-right[b-40scv0mve3] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.stat-value[b-40scv0mve3] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.stat-label[b-40scv0mve3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-40scv0mve3] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-40scv0mve3] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-40scv0mve3] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-40scv0mve3] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-40scv0mve3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-40scv0mve3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-40scv0mve3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-40scv0mve3] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-40scv0mve3] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-40scv0mve3] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-40scv0mve3] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-40scv0mve3] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group,
[b-40scv0mve3] .e-toolbar .e-input-group.e-control-wrapper,
[b-40scv0mve3] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group .e-input,
[b-40scv0mve3] .e-toolbar .e-input-group .e-input,
[b-40scv0mve3] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-40scv0mve3] .e-toolbar .e-input-group:focus-within,
[b-40scv0mve3] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-40scv0mve3] .e-toolbar .e-textbox .e-input-group-icon,
[b-40scv0mve3] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-40scv0mve3] .e-toolbar .e-input-group .e-input::placeholder,
[b-40scv0mve3] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   ======================================== */
[b-40scv0mve3] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-40scv0mve3] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-40scv0mve3] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-40scv0mve3] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-40scv0mve3] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-40scv0mve3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-40scv0mve3] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-40scv0mve3] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-40scv0mve3] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-40scv0mve3] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

.sidebar-step-content[b-40scv0mve3] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-40scv0mve3] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-40scv0mve3] {
    margin-bottom: 24px;
    animation: fadeInUp-b-40scv0mve3 0.6s ease;
}

.step-title[b-40scv0mve3] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-40scv0mve3] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-40scv0mve3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-40scv0mve3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-40scv0mve3] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-40scv0mve3] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-40scv0mve3] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-40scv0mve3] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-40scv0mve3] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-40scv0mve3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-40scv0mve3] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-40scv0mve3] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-40scv0mve3] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-40scv0mve3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-40scv0mve3] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-40scv0mve3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-40scv0mve3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-40scv0mve3],
.btn-secondary[b-40scv0mve3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-40scv0mve3],
.btn-secondary:hover:not(:disabled)[b-40scv0mve3] {
    background: #e1dfdd;
}

.btn-next[b-40scv0mve3] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-40scv0mve3] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-40scv0mve3] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-40scv0mve3] {
    background: #059669;
}

/* Animation */
@keyframes fadeInUp-b-40scv0mve3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-40scv0mve3] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-40scv0mve3] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-40scv0mve3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-40scv0mve3] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-40scv0mve3] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-40scv0mve3] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-40scv0mve3] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-40scv0mve3] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-40scv0mve3] {
    animation: fadeInUp-b-40scv0mve3 0.3s ease-out;
}

.step-title[b-40scv0mve3] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-40scv0mve3] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-40scv0mve3] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-40scv0mve3]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-40scv0mve3]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-40scv0mve3]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-40scv0mve3]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-40scv0mve3] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-40scv0mve3] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-40scv0mve3] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-40scv0mve3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-40scv0mve3] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-40scv0mve3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-40scv0mve3] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-40scv0mve3] {
    background: #f3f2f1;
}

/* ========================================
   LOADING AND ERROR STATES
   ======================================== */
.loading-container[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-40scv0mve3] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-40scv0mve3 1s linear infinite;
}

@keyframes spin-b-40scv0mve3 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-40scv0mve3] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

.error-container[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.error-container i[b-40scv0mve3] {
    font-size: 48px;
    color: var(--BEC-colorError);
}

.error-container p[b-40scv0mve3] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
    text-align: center;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-40scv0mve3] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-40scv0mve3] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-40scv0mve3] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-40scv0mve3] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-text-success[b-40scv0mve3] {
    color: var(--BEC-colorSuccess);
}

.adm-text-error[b-40scv0mve3] {
    color: var(--BEC-colorError);
}

.adm-help-icon-lg[b-40scv0mve3] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-40scv0mve3] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Management/UserAdministration.razor.rz.scp.css */
/* ========================================
   USER ADMINISTRATION - 100% SYNCFUSION NATIVE RESPONSIVE
   
   FEATURES:
   ✅ 100% Syncfusion EnableAdaptiveUI (automatic mobile/tablet optimization)
   ✅ 100% Syncfusion HideAtMedia (responsive column hiding)
   ✅ 100% Syncfusion RowRenderingMode (vertical layout on mobile)
   ✅ BEC Theme variables only (no hardcoded values)
   ✅ No inline styles (all CSS in this file)
   ✅ NO custom media queries (all responsive via Syncfusion)
   
   RESPONSIVE BEHAVIOR:
   Handled 100% by Syncfusion EnableAdaptiveUI + HideAtMedia
   No custom @media queries needed - Syncfusion handles everything
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-4hr5k2elbg] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-4hr5k2elbg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-4hr5k2elbg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-4hr5k2elbg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-4hr5k2elbg] {
    transform: scale(0.98);
}

.page-subtitle[b-4hr5k2elbg] {
    display: none;
}

.header-right[b-4hr5k2elbg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-4hr5k2elbg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4hr5k2elbg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4hr5k2elbg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4hr5k2elbg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ORGANIZATION ADMINISTRATION)
   ======================================== */
[b-4hr5k2elbg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-4hr5k2elbg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   Positions overflow menu directly below toolbar
   ======================================== */
[b-4hr5k2elbg] .e-toolbar-pop.e-popup {
    top: 58px !important;
    /* Match toolbar sticky position */
    margin-top: 0 !important;
}

[b-4hr5k2elbg] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   PAGE CONTENT - Grid Container
   ======================================== */
.erp-page-content[b-4hr5k2elbg] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: visible;
}

/* ========================================
   GRID VIRTUAL SCROLLING - BUTTER SMOOTH PERFORMANCE 🚀
   Optimized for 5K+ records with hardware acceleration
   ======================================== */

/* Main grid container - Hardware acceleration */
[b-4hr5k2elbg] .user-admin-grid {
    will-change: scroll-position;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    contain: layout style paint;
    isolation: isolate;
}

/* Grid content area - Syncfusion official scrolling solution */
/* Note: Overflow is now handled in the Grid Styling section below */

/* Virtual scroll placeholder - Ensure smooth rendering */
[b-4hr5k2elbg] .user-admin-grid .e-virtualtrack {
    will-change: height;
    contain: layout;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-4hr5k2elbg] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-4hr5k2elbg] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-4hr5k2elbg] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-4hr5k2elbg] .e-grid .e-row.e-selectionbackground,
[b-4hr5k2elbg] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-4hr5k2elbg] .e-grid .e-row.e-selectionbackground:hover,
[b-4hr5k2elbg] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-4hr5k2elbg] .e-grid .e-row.e-selectionbackground td:first-child,
[b-4hr5k2elbg] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-4hr5k2elbg] .e-grid .e-row {
    height: 32px !important;
}

[b-4hr5k2elbg] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-4hr5k2elbg] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-4hr5k2elbg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Custom Scrollbar Styling - Professional look */
[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    margin: 2px;
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    border: 2px solid var(--BEC-colorNeutralBackground2);
    transition: background 0.2s ease;
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:active {
    background: var(--BEC-colorBrandBackgroundPressed);
}

/* Horizontal scrollbar */
[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-corner {
    background: var(--BEC-colorNeutralBackground2);
}

/* Firefox scrollbar */
[b-4hr5k2elbg] .user-admin-grid .e-gridcontent {
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke2) var(--BEC-colorNeutralBackground2);
}

/* Prevent flickering during scroll */
[b-4hr5k2elbg] .user-admin-grid .e-content {
    position: relative;
    overflow: hidden;
}

/* Smooth selection highlight */
[b-4hr5k2elbg] .user-admin-grid .e-selectionbackground {
    transition: background-color 0.15s ease;
}

/* Loading indicator for virtual scrolling */
[b-4hr5k2elbg] .user-admin-grid .e-spinner-pane {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ========================================
   FILTERED COLUMN INDICATOR
   Blue header text when column is filtered
   ======================================== */

/* Change filter icon color to blue when active */
[b-4hr5k2elbg] .user-admin-grid .e-headercell .e-filtered::before {
    color: var(--BEC-colorBrandForeground1) !important;
}

/* Change header TEXT color to blue when column is filtered */
[b-4hr5k2elbg] .user-admin-grid .e-headercell .e-headercelldiv {
    transition: color 0.2s ease;
}

[b-4hr5k2elbg] .user-admin-grid .e-filtered~.e-headercelldiv,
[b-4hr5k2elbg] .user-admin-grid .e-filtered~.e-headertext,
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-headercelldiv,
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-headertext {
    color: var(--BEC-colorBrandForeground1) !important;
    font-weight: 600 !important;
}

/* Also highlight the sort icon if column is both filtered and sorted */
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-ascending,
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-descending {
    color: var(--BEC-colorBrandForeground1) !important;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-4hr5k2elbg] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-4hr5k2elbg] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-4hr5k2elbg] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   RTL TEXT (for Arabic names)
   ======================================== */
.rtl-text[b-4hr5k2elbg] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   USER TYPE STYLING (No inline styles)
   ======================================== */
.user-type-employee[b-4hr5k2elbg] {
    color: #0078d4;
    font-weight: 500;
}

.user-type-external[b-4hr5k2elbg] {
    color: #ff8c00;
    font-weight: 500;
}

/* ========================================
   STATUS BADGE (for IsActive column)
   Text-only, no background or icons
   ======================================== */
.status-badge[b-4hr5k2elbg] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-active[b-4hr5k2elbg] {
    color: #10b981;
    /* Green for active */
}

.status-inactive[b-4hr5k2elbg] {
    color: #dc2626;
    /* Red for inactive */
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   Larger size for better visibility with viewport constraints
   ======================================== */
[b-4hr5k2elbg] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    /* Never exceed 90% viewport width */
    height: auto !important;
    max-height: 80vh !important;
    /* Never exceed 80% viewport height */
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Excel Filter Checkbox List Area - More visible items */
[b-4hr5k2elbg] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    /* Account for search box, header, footer */
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* Excel Filter Search Box */
[b-4hr5k2elbg] .e-grid .e-excelfilter .e-searchbox {
    margin-bottom: 8px !important;
}

/* Excel Filter Dialog Content */
[b-4hr5k2elbg] .e-grid .e-excelfilter .e-dlg-content {
    padding: 16px !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   Make it a compact dialog instead of full-screen
   ======================================== */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    /* Responsive height constraint */
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   RESPONSIVE DESIGN - 100% SYNCFUSION NATIVE
   All responsive behavior handled by:
   - EnableAdaptiveUI (Grid)
   - HideAtMedia (Columns)  
   - RowRenderingMode (Mobile vertical layout)
   NO custom media queries - Syncfusion handles everything
   ======================================== */

/* ========================================
   CONFIRMATION DIALOGS - Minimal Clean Style
   Matching UserAdministration aesthetic
   ======================================== */
.confirmation-dialog-content[b-4hr5k2elbg] {
    padding: var(--BEC-spacingVerticalL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalL);
}

.confirmation-message[b-4hr5k2elbg] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.confirmation-count[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

.confirmation-warning[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-left: 3px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.5;
}

.confirmation-warning i[b-4hr5k2elbg] {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

/* ========================================
   RESET PASSWORD MODAL V2 - 100% SYNCFUSION COMPONENTS
   Clean card-based design with proper visual hierarchy
   ======================================== */

/* Main Container */
.reset-password-container[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalL);
    padding: var(--BEC-spacingVerticalM);
}

/* ===== SYNCFUSION CARD BASE STYLES ===== */
.sf-card[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow2);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.sf-card:hover[b-4hr5k2elbg] {
    box-shadow: var(--BEC-shadow4);
}

/* Card Header */
.sf-card-header[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.sf-card-header i[b-4hr5k2elbg] {
    font-size: 20px;
    color: var(--BEC-colorBrandForeground1);
}

.sf-card-header h5[b-4hr5k2elbg] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* Card Body */
.sf-card-body[b-4hr5k2elbg] {
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
}

.sf-card-body p[b-4hr5k2elbg] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

/* ===== PRIMARY HEADER CARD (Blue gradient) ===== */
.sf-card-primary[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground), var(--BEC-colorBrandBackground2));
    border: none;
    color: white;
}

.sf-card-primary .sf-card-icon i[b-4hr5k2elbg] {
    font-size: 36px;
    color: white;
}

.sf-card-title[b-4hr5k2elbg] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: inherit;
}

.sf-card-subtitle[b-4hr5k2elbg] {
    margin: 4px 0 0 0;
    font-size: var(--BEC-fontSizeBase200);
    opacity: 0.9;
}

/* ===== SUCCESS CARD (Green gradient) ===== */
.sf-card-success[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
}

.sf-card-success .sf-card-icon i[b-4hr5k2elbg] {
    font-size: 36px;
    color: white;
}

/* Success Light (for email status) */
.sf-card-success-light[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusSuccessBackground1);
    border-color: var(--BEC-colorStatusSuccessForeground1);
}

/* ===== WARNING CARD (Yellow) ===== */
.sf-card-warning[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusWarningBackground1);
    border-color: var(--BEC-colorStatusWarningForeground1);
}

.sf-card-warning .sf-card-header i[b-4hr5k2elbg] {
    color: var(--BEC-colorStatusWarningForeground1);
}

/* ===== INFO CARD (Blue light) ===== */
.sf-card-info[b-4hr5k2elbg] {
    background: #f0f9ff;
    border-color: var(--BEC-colorBrandBackground);
}

.sf-card-info .sf-card-header i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandBackground);
}

/* ===== USER INFO CARD ===== */
.sf-card-user[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-left: 4px solid var(--BEC-colorBrandBackground);
}

.sf-user-avatar[b-4hr5k2elbg] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusCircular);
}

.sf-user-avatar i[b-4hr5k2elbg] {
    font-size: 32px;
    color: white;
}

.sf-user-details[b-4hr5k2elbg] {
    flex: 1;
}

.sf-user-name[b-4hr5k2elbg] {
    margin: 0 0 8px 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sf-user-email[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.sf-user-email i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
}

.sf-no-email[b-4hr5k2elbg] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-style: italic;
}

/* ===== PASSWORD CARD ===== */
.sf-card-password[b-4hr5k2elbg] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid var(--BEC-colorBrandBackground);
}

.sf-card-password .sf-card-header[b-4hr5k2elbg] {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ===== OPTION CARD (for checkbox) ===== */
.sf-card-option[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke2);
}

/* ===== INFO LIST (bullet points with icons) ===== */
.sf-info-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalM);
}

.sf-info-item[b-4hr5k2elbg] {
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
}

.sf-info-item i[b-4hr5k2elbg] {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 2px;
}

.sf-icon-success[b-4hr5k2elbg] {
    color: var(--BEC-colorStatusSuccessForeground1);
}

/* ===== SYNCFUSION CHECKBOX CUSTOM ===== */
[b-4hr5k2elbg] .sf-checkbox-custom {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

[b-4hr5k2elbg] .sf-checkbox-custom .e-checkbox-wrapper {
    margin-right: var(--BEC-spacingHorizontalS);
}

[b-4hr5k2elbg] .sf-checkbox-custom .e-label {
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

/* ===== SUMMARY STATS GRID ===== */
.sf-summary-grid[b-4hr5k2elbg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.sf-summary-card[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingVerticalS);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    transition: transform 0.2s ease;
}

.sf-summary-card:hover[b-4hr5k2elbg] {
    transform: translateY(-2px);
}

.sf-summary-card.sf-success[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusSuccessBackground1);
    color: var(--BEC-colorStatusSuccessForeground1);
    border: 1px solid var(--BEC-colorStatusSuccessForeground1);
}

.sf-summary-card.sf-info[b-4hr5k2elbg] {
    background: #f0f9ff;
    color: var(--BEC-colorBrandBackground);
    border: 1px solid var(--BEC-colorBrandBackground);
}

.sf-summary-card.sf-warning[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusWarningBackground1);
    color: var(--BEC-colorStatusWarningForeground1);
    border: 1px solid var(--BEC-colorStatusWarningForeground1);
}

.sf-summary-card.sf-error[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusDangerBackground1);
    color: var(--BEC-colorStatusDangerForeground1);
    border: 1px solid var(--BEC-colorStatusDangerForeground1);
}

.sf-summary-card i[b-4hr5k2elbg] {
    font-size: 28px;
}

.sf-summary-number[b-4hr5k2elbg] {
    font-size: 32px;
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
}

.sf-summary-label[b-4hr5k2elbg] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    opacity: 0.9;
}

/* ===== PASSWORDS LIST CONTAINER ===== */
.sf-passwords-container[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalM);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--BEC-spacingVerticalS);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.sf-password-item[b-4hr5k2elbg] {
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.sf-password-item:hover[b-4hr5k2elbg] {
    box-shadow: var(--BEC-shadow2);
    border-color: var(--BEC-colorBrandBackground);
}

.sf-password-header[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--BEC-spacingVerticalM);
}

.sf-password-header strong[b-4hr5k2elbg] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* ===== BADGE ===== */
.sf-badge[b-4hr5k2elbg] {
    padding: 4px 10px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightBold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-badge-danger[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusDangerBackground1);
    color: var(--BEC-colorStatusDangerForeground1);
    border: 1px solid var(--BEC-colorStatusDangerForeground1);
}

/* ===== PASSWORD INPUT FIELDS ===== */
.sf-password-field[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

[b-4hr5k2elbg] .sf-password-input {
    flex: 1;
}

[b-4hr5k2elbg] .sf-password-input .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground3);
}

[b-4hr5k2elbg] .sf-password-input input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightBold);
    letter-spacing: 1.5px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground1);
}

[b-4hr5k2elbg] .sf-copy-btn {
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
}

/* Large Password Display */
.sf-password-display-field[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

[b-4hr5k2elbg] .sf-password-input-large {
    flex: 1;
}

[b-4hr5k2elbg] .sf-password-input-large .e-input-group {
    border: 2px solid var(--BEC-colorBrandBackground);
    background: white;
}

[b-4hr5k2elbg] .sf-password-input-large input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightBold);
    letter-spacing: 2px;
    text-align: center;
    color: var(--BEC-colorBrandForeground1);
}

[b-4hr5k2elbg] .sf-copy-btn-large {
    flex-shrink: 0;
    min-width: 100px;
    height: 40px;
}

/* Copy Feedback */
.sf-copy-feedback[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-top: var(--BEC-spacingVerticalS);
    padding: var(--BEC-spacingVerticalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorStatusSuccessBackground1);
    color: var(--BEC-colorStatusSuccessForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    animation: fadeIn-b-4hr5k2elbg 0.3s ease;
}

@keyframes fadeIn-b-4hr5k2elbg {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* ===== STATUS MESSAGE ===== */
.sf-status-message[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
}

.sf-status-message i[b-4hr5k2elbg] {
    font-size: 20px;
}

/* ===== NOTICE LIST ===== */
.sf-notice-list[b-4hr5k2elbg] {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.sf-notice-list li[b-4hr5k2elbg] {
    margin-bottom: var(--BEC-spacingVerticalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
}

/* ===== DIALOG CUSTOMIZATION ===== */
[b-4hr5k2elbg] .reset-password-dialog-v2.e-dialog {
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow16);
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalXL);
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-dlg-header-content {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-dlg-content {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-footer-content {
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalXL);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-4hr5k2elbg] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-4hr5k2elbg] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-4hr5k2elbg] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-4hr5k2elbg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-4hr5k2elbg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-4hr5k2elbg] {
    font-size: 18px;
}

.sidebar-content[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.wizard-step[b-4hr5k2elbg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-4hr5k2elbg] {
    margin-bottom: 24px;
    animation: fadeInUp-b-4hr5k2elbg 0.6s ease;
}

@keyframes fadeInUp-b-4hr5k2elbg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.wizard-step .step-title[b-4hr5k2elbg] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-4hr5k2elbg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Form Styling for Wizard */
.sidebar-step-content[b-4hr5k2elbg] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.sidebar-step-content .wizard-step[b-4hr5k2elbg] {
    text-align: left;
    padding: 0;
}

.sidebar-step-content .step-title[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-4hr5k2elbg] {
    color: #0078d4;
    font-size: 20px;
}

.sidebar-step-content .step-description[b-4hr5k2elbg] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

.form-group[b-4hr5k2elbg] {
    margin-bottom: 20px;
}

.form-label[b-4hr5k2elbg] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-4hr5k2elbg]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-4hr5k2elbg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-4hr5k2elbg] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-4hr5k2elbg] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-4hr5k2elbg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-4hr5k2elbg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-4hr5k2elbg] {
    background: #f3f3f3;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-4hr5k2elbg] {
    background: #e0e0e0;
}

.btn-success[b-4hr5k2elbg] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-4hr5k2elbg] {
    background: #059669;
}

/* Info Box */
.info-box[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.info-box div[b-4hr5k2elbg] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.info-box strong[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-4hr5k2elbg] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-4hr5k2elbg] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-4hr5k2elbg] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-4hr5k2elbg] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ========================================
   COLUMN CHOOSER SPECIFIC STYLES
   ======================================== */
.column-chooser-actions[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-chooser-actions .btn-link[b-4hr5k2elbg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-4hr5k2elbg] {
    font-size: 12px;
}

.column-chooser-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

.column-chooser-item[b-4hr5k2elbg]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-4hr5k2elbg]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* ========================================
   RESPONSIVE - 100% SYNCFUSION NATIVE
   Reset Password Modal uses Syncfusion's built-in dialog responsiveness
   No custom media queries needed
/* ========================================
   MISSING WIZARD STYLES (Ported from SystemModuleAdministration)
   ======================================== */

.form-value[b-4hr5k2elbg] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}



/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-4hr5k2elbg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-4hr5k2elbg] {
    margin-bottom: 24px;
    animation: fadeInUp-b-4hr5k2elbg 0.6s ease;
}

.step-title[b-4hr5k2elbg] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-4hr5k2elbg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-4hr5k2elbg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-4hr5k2elbg] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-4hr5k2elbg] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-4hr5k2elbg] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-4hr5k2elbg] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-4hr5k2elbg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-4hr5k2elbg] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-4hr5k2elbg] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-4hr5k2elbg] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-4hr5k2elbg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-4hr5k2elbg] {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    }

    [b-4hr5k2elbg] .e-toolbar.e-control {
        top: 50px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalL) !important;
    }

    :global(.e-grid .e-gridheader)[b-4hr5k2elbg] {
        top: 100px !important;
    }

    /* Search Bar - Tablet Width */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-4hr5k2elbg] {
        flex-direction: column;
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-4hr5k2elbg] {
        width: 100%;
        justify-content: space-around;
    }

    /* Toolbar - Mobile Optimized */
    [b-4hr5k2elbg] .e-toolbar.e-control {
        top: 90px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalM) !important;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-4hr5k2elbg] {
        top: 140px !important;
    }

    /* Sidebars - Full Width on Mobile */
    [b-4hr5k2elbg] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    /* Form Row - Single Column on Mobile */
    .form-row[b-4hr5k2elbg] {
        grid-template-columns: 1fr;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {

    /* Icon-Only Toolbar */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn-text {
        display: none;
    }

    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item {
        min-width: 32px;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser Dialog - Responsive */
    [b-4hr5k2elbg] .e-dialog.e-cc-dialog {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    /* Sidebars - Full Width */
    [b-4hr5k2elbg] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    /* Stats - Smaller Text */
    .stat-value[b-4hr5k2elbg] {
        font-size: 20px;
    }

    .stat-label[b-4hr5k2elbg] {
        font-size: 10px;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-4hr5k2elbg] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-4hr5k2elbg] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-4hr5k2elbg] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-4hr5k2elbg] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-4hr5k2elbg] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-4hr5k2elbg]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-4hr5k2elbg]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-4hr5k2elbg]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-4hr5k2elbg]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-label-hidden[b-4hr5k2elbg] {
    visibility: hidden;
}

.adm-checkbox-row[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.adm-checkbox-hint[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 8px;
}

.adm-text-brand[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-muted[b-4hr5k2elbg] {
    color: var(--BEC-colorNeutralForeground3);
}

.adm-error-center[b-4hr5k2elbg] {
    padding: 20px;
    text-align: center;
}

.adm-error-icon-sm[b-4hr5k2elbg] {
    font-size: 24px;
    color: var(--BEC-colorPaletteRedForeground1);
    margin-bottom: 10px;
}

.adm-dialog-header-flex[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-4hr5k2elbg] {
    font-size: 20px;
}

.adm-preline-text[b-4hr5k2elbg] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-4hr5k2elbg] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-4hr5k2elbg] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Profile/UserProfileAdministration.razor.rz.scp.css */
/* ========================================
   USER PROFILE ADMINISTRATION - PAGE STYLES
   Used on: UserProfileAdministration.razor
   
   Standard page header + BEC Command Bar + custom tabs and card layouts
   All styles use correct BEC Theme variables for consistency.
   ======================================== */

/* ========================================
   STANDARDIZED PAGE HEADER (from CompanyAdministration)
   ======================================== */

.page-header[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    min-height: 72px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: linear-gradient(
        to bottom,
        var(--BEC-colorNeutralBackground1) 0%,
        rgba(255, 255, 255, 0.98) 100%
    );
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.page-header-content[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalXL);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header-left[b-aay0xlne2g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
}

.page-title[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    line-height: 1.2;
}

.page-title i[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
    transition: transform var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.page-title:hover i[b-aay0xlne2g] {
    transform: scale(1.1) rotate(-5deg);
}

.page-description[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.4;
}

.page-header-right[b-aay0xlne2g] {
    flex-shrink: 0;
}

/* ========================================
   STANDARDIZED BEC COMMAND BAR (from CompanyAdministration)
   ======================================== */

.BEC-CommandBar[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    min-height: 56px;
    position: sticky;
    top: 72px;
    z-index: 99;
    backdrop-filter: blur(8px);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.action-group[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.action-group-primary[b-aay0xlne2g] {
    flex-shrink: 0;
}

.action-group-utility[b-aay0xlne2g] {
    flex-shrink: 0;
}

.BEC-CommandBar-button[b-aay0xlne2g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.BEC-CommandBar-button:hover:not(:disabled)[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.BEC-CommandBar-button--primary[b-aay0xlne2g] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.BEC-CommandBar-button--primary:hover:not(:disabled)[b-aay0xlne2g] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
    box-shadow: var(--BEC-shadow8);
}

.action-divider[b-aay0xlne2g] {
    width: 1px;
    height: 28px;
    background: var(--BEC-colorNeutralStroke1);
    margin: 0 var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

.search-box[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    min-width: 280px;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.search-box:focus-within[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
    min-width: 320px;
}

.search-icon[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: color var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.search-box:focus-within .search-icon[b-aay0xlne2g] {
    color: var(--BEC-colorBrandForeground1);
}

.search-input[b-aay0xlne2g] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--BEC-fontSizeBase300);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    outline: none;
}

.search-input[b-aay0xlne2g]::placeholder {
    color: var(--BEC-colorNeutralForeground4);
}

.clear-search-btn[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--BEC-colorNeutralBackground3);
    border: none;
    border-radius: var(--BEC-borderRadiusCircular);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.clear-search-btn:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground1);
    transform: rotate(90deg) scale(1.1);
}

.clear-search-btn i[b-aay0xlne2g] {
    font-size: 12px;
}

/* ========================================
   CUSTOM CONTENT AREA - Tabs and Cards
   ======================================== */

.BEC-page-container[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background-color: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    min-height: 400px;
}

/* Tabs */
.BEC-Tabs[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.BEC-Tab[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-bottom: 2px solid transparent;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.BEC-Tab:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorBrandBackground);
}

.BEC-Tab.active[b-aay0xlne2g] {
    color: var(--BEC-colorBrandBackground);
    border-bottom-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightMedium);
}

.BEC-Tab-icon[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
}

.BEC-Tab-text[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Content Area */
.BEC-page-content[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    min-height: 400px;
}

/* Loading States */
.BEC-loading-container[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXXXL);
    gap: var(--BEC-spacingHorizontalL);
}

.BEC-loading-text[b-aay0xlne2g] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Assignments Container */
.BEC-assignments-container[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
}

.BEC-Card[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
    padding: var(--BEC-spacingHorizontalL);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    cursor: default;
}

.BEC-Card--clickable[b-aay0xlne2g] {
    cursor: pointer;
}

.BEC-Card--clickable:hover[b-aay0xlne2g] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-colorBrandBackground);
}

.BEC-Card.selected[b-aay0xlne2g] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.BEC-Card-header[b-aay0xlne2g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding-bottom: var(--BEC-spacingHorizontalM);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.BEC-user-info[b-aay0xlne2g] {
    flex: 1;
}

.BEC-user-name[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
}

.BEC-user-email[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.BEC-user-actions[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-profiles-section[b-aay0xlne2g] {
    margin-top: var(--BEC-spacingHorizontalM);
}

.BEC-profiles-header[b-aay0xlne2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.BEC-profiles-title[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.BEC-profiles-grid[b-aay0xlne2g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-empty-state[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalL);
    text-align: center;
    color: var(--BEC-colorNeutralForeground2);
}

.BEC-empty-icon[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    margin-bottom: var(--BEC-spacingHorizontalS);
    opacity: 0.5;
}

.BEC-empty-text[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Table Styles */
.BEC-Table-container[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    margin: var(--BEC-spacingHorizontalL);
}

.BEC-Table[b-aay0xlne2g] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--BEC-fontFamilyBase);
    font-size: var(--BEC-fontSizeBase300);
    line-height: var(--BEC-lineHeightBase300);
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1);
}

.BEC-Table th[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    text-align: left;
    font-weight: var(--BEC-fontWeightSemibold);
    height: 42px;
    position: relative;
}

.BEC-Table th.sortable[b-aay0xlne2g] {
    cursor: pointer;
    user-select: none;
}

.BEC-Table th.sortable:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground3);
}

.BEC-Table td[b-aay0xlne2g] {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 42px;
}

.BEC-Table tbody tr:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
}

.BEC-Table tbody tr.selected[b-aay0xlne2g] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
}

.BEC-Table-sortIcon[b-aay0xlne2g] {
    width: 16px;
    height: 16px;
    margin-left: var(--BEC-spacingHorizontalXS);
    opacity: 0.5;
}

.BEC-Table th.sorted .BEC-Table-sortIcon[b-aay0xlne2g] {
    opacity: 1;
}

.BEC-Table-actions[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-profile-info[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
}

.BEC-profile-name[b-aay0xlne2g] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-profile-desc[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
}

/* Analytics */
.BEC-analytics-container[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalL);
}

.BEC-stats-grid[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.BEC-stat-card[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
}

.BEC-stat-icon[b-aay0xlne2g] {
    width: 48px;
    height: 48px;
    background: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralBackground1);
    font-size: var(--BEC-fontSizeBase500);
}

.BEC-stat-content[b-aay0xlne2g] {
    flex: 1;
}

.BEC-stat-value[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
}

.BEC-stat-label[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* Dialog Styles */
.BEC-Dialog[b-aay0xlne2g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-aay0xlne2g var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.BEC-Dialog.open[b-aay0xlne2g] {
    display: flex;
}

@keyframes fadeIn-b-aay0xlne2g {
    from { opacity: 0; }
    to { opacity: 1; }
}

.BEC-Dialog-content[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusSmall);
    box-shadow: var(--BEC-shadow28);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    animation: slideInUp-b-aay0xlne2g var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

@keyframes slideInUp-b-aay0xlne2g {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.BEC-Dialog--small .BEC-Dialog-content[b-aay0xlne2g] {
    width: 400px;
}

.BEC-Dialog--medium .BEC-Dialog-content[b-aay0xlne2g] {
    width: 600px;
}

.BEC-Dialog--large .BEC-Dialog-content[b-aay0xlne2g] {
    width: 900px;
}

.BEC-Dialog-header[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--BEC-spacingHorizontalL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.BEC-Dialog-title[b-aay0xlne2g] {
    font-family: var(--BEC-fontFamilyBase);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.BEC-Dialog-closeButton[b-aay0xlne2g] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--BEC-borderRadiusSmall);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    color: var(--BEC-colorNeutralForeground2);
}

.BEC-Dialog-closeButton:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
}

.BEC-Dialog-body[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalL);
    font-family: var(--BEC-fontFamilyBase);
    font-size: var(--BEC-fontSizeBase300);
    line-height: var(--BEC-lineHeightBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-Dialog-footer[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Form Styles */
.BEC-form-grid[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.BEC-form-group[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-form-group--full[b-aay0xlne2g] {
    grid-column: 1 / -1;
}

.BEC-field-validation-error[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXS);
}

/* Assignments Management */
.BEC-assignments-management[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    max-height: 60vh;
    overflow-y: auto;
}

.BEC-available-section[b-aay0xlne2g],
.BEC-assigned-section[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
}

.BEC-section-title[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.BEC-profiles-list[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-List-item[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    min-height: 48px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    gap: var(--BEC-spacingHorizontalS);
}

.BEC-List-item:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
}

.BEC-List-item.assigned[b-aay0xlne2g] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

.BEC-List-itemContent[b-aay0xlne2g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
}

.BEC-List-itemTitle[b-aay0xlne2g] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-List-itemDescription[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
}

.BEC-List-itemActions[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .BEC-page-container[b-aay0xlne2g] {
        padding: var(--BEC-spacingHorizontalM);
    }
    
    .page-header-content[b-aay0xlne2g] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .BEC-CommandBar[b-aay0xlne2g] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--BEC-spacingHorizontalS);
    }
    
    .search-box[b-aay0xlne2g] {
        max-width: none;
    }
    
    .BEC-assignments-container[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-stats-grid[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-assignments-management[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-form-grid[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-Dialog--medium .BEC-Dialog-content[b-aay0xlne2g],
    .BEC-Dialog--large .BEC-Dialog-content[b-aay0xlne2g] {
        width: 95vw;
        max-width: 95vw;
    }
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Profile/UserProfileFavoriteAdministration.razor.rz.scp.css */
/* ========================================
   USER PROFILE FAVORITE ADMINISTRATION - STANDARDIZED PAGE STYLES
   Used on: UserProfileFavoriteAdministration.razor
   
   Manages user favorite profiles.
   Uses same styling pattern as System Modules page.
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-be6j9x5bbm] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-be6j9x5bbm] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-be6j9x5bbm] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-be6j9x5bbm] {
    transform: scale(0.98);
}

.page-subtitle[b-be6j9x5bbm] {
    display: none;
}

.header-right[b-be6j9x5bbm] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   Same as System Modules page
   ======================================== */
.stats-container[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-be6j9x5bbm] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-be6j9x5bbm] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-be6j9x5bbm] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-be6j9x5bbm] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-be6j9x5bbm] {
    padding: var(--BEC-spacingHorizontalL);
    flex: 1;
    overflow: auto;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-be6j9x5bbm] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-be6j9x5bbm 1s linear infinite;
}

@keyframes spin-b-be6j9x5bbm {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-container p[b-be6j9x5bbm] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: var(--BEC-spacingHorizontalXL);
    text-align: center;
}

.error-container i[b-be6j9x5bbm] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container p[b-be6j9x5bbm] {
    font-size: 14px;
    margin: 0;
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-CommandBar[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    min-height: 56px;
    position: sticky;
    top: 36px;
    z-index: 99;
    backdrop-filter: blur(8px);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.action-group[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.action-group-primary[b-be6j9x5bbm] {
    flex-shrink: 0;
}

.action-group-utility[b-be6j9x5bbm] {
    flex-shrink: 0;
}

.BEC-CommandBar-button[b-be6j9x5bbm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.BEC-CommandBar-button:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.BEC-CommandBar-button:disabled[b-be6j9x5bbm] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground4);
}

.BEC-CommandBar-button--primary[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.BEC-CommandBar-button--primary:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
    box-shadow: var(--BEC-shadow8);
}

.BEC-CommandBar-button--danger[b-be6j9x5bbm] {
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorNeutralStroke1);
}

.BEC-CommandBar-button--danger:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorPaletteRedBackground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

.action-divider[b-be6j9x5bbm] {
    width: 1px;
    height: 28px;
    background: var(--BEC-colorNeutralStroke1);
    margin: 0 var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

.search-box[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    min-width: 280px;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.search-box:focus-within[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
    min-width: 320px;
}

.search-icon[b-be6j9x5bbm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: color var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.search-box:focus-within .search-icon[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
}

.search-input[b-be6j9x5bbm] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--BEC-fontSizeBase300);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    outline: none;
}

.search-input[b-be6j9x5bbm]::placeholder {
    color: var(--BEC-colorNeutralForeground4);
}

.content-placeholder[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-be6j9x5bbm] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-be6j9x5bbm] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-be6j9x5bbm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-be6j9x5bbm] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-be6j9x5bbm] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-be6j9x5bbm] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-be6j9x5bbm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-be6j9x5bbm] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-be6j9x5bbm] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-be6j9x5bbm] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-be6j9x5bbm] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-be6j9x5bbm] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-be6j9x5bbm] {
    margin-bottom: 24px;
    animation: fadeInUp-b-be6j9x5bbm 0.6s ease;
}

.step-title[b-be6j9x5bbm] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-be6j9x5bbm] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-be6j9x5bbm] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-be6j9x5bbm] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-be6j9x5bbm] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-be6j9x5bbm] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-be6j9x5bbm] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-be6j9x5bbm] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-be6j9x5bbm] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-be6j9x5bbm] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-be6j9x5bbm] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-be6j9x5bbm] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* ========================================
   FORM STYLING (Create Wizard)
   ======================================== */
.form-group[b-be6j9x5bbm] {
    margin-bottom: 20px;
}

.form-label[b-be6j9x5bbm] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 6px;
}

.form-text[b-be6j9x5bbm] {
    display: block;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

[b-be6j9x5bbm] .e-textbox {
    width: 100%;
}

/* Wizard Progress */
.wizard-progress[b-be6j9x5bbm] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-be6j9x5bbm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-be6j9x5bbm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-be6j9x5bbm] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-be6j9x5bbm] {
    background: #e1dfdd;
}

.btn-next[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-be6j9x5bbm] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-be6j9x5bbm] {
    background: #0b5c0b;
}

.btn i[b-be6j9x5bbm] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-be6j9x5bbm {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-be6j9x5bbm] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-be6j9x5bbm] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-be6j9x5bbm] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-be6j9x5bbm] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-be6j9x5bbm] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-be6j9x5bbm] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-be6j9x5bbm] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group,
[b-be6j9x5bbm] .e-toolbar .e-input-group.e-control-wrapper,
[b-be6j9x5bbm] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group .e-input,
[b-be6j9x5bbm] .e-toolbar .e-input-group .e-input,
[b-be6j9x5bbm] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-be6j9x5bbm] .e-toolbar .e-input-group:focus-within,
[b-be6j9x5bbm] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-be6j9x5bbm] .e-toolbar .e-textbox .e-input-group-icon,
[b-be6j9x5bbm] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-be6j9x5bbm] .e-toolbar .e-input-group .e-input::placeholder,
[b-be6j9x5bbm] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   ======================================== */
[b-be6j9x5bbm] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-be6j9x5bbm] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   GRID STYLING
   ======================================== */

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Same as System Modules page
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-be6j9x5bbm] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-be6j9x5bbm] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-be6j9x5bbm] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-be6j9x5bbm] .e-grid .e-row.e-selectionbackground,
[b-be6j9x5bbm] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-be6j9x5bbm] .e-grid .e-row.e-selectionbackground:hover,
[b-be6j9x5bbm] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-be6j9x5bbm] .e-grid .e-row.e-selectionbackground td:first-child,
[b-be6j9x5bbm] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-be6j9x5bbm] .e-grid .e-row {
    height: 32px !important;
}

[b-be6j9x5bbm] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-be6j9x5bbm] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-be6j9x5bbm] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   NOTIFICATION DIALOG STYLING
   ======================================== */
[b-be6j9x5bbm] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-bottom: 2px solid #10b981;
}

[b-be6j9x5bbm] .notification-success .e-dlg-header-content i {
    color: #10b981;
}

[b-be6j9x5bbm] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-bottom: 2px solid #ef4444;
}

[b-be6j9x5bbm] .notification-error .e-dlg-header-content i {
    color: #ef4444;
}

[b-be6j9x5bbm] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 2px solid #f59e0b;
}

[b-be6j9x5bbm] .notification-warning .e-dlg-header-content i {
    color: #f59e0b;
}

[b-be6j9x5bbm] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-bottom: 2px solid #3b82f6;
}

[b-be6j9x5bbm] .notification-info .e-dlg-header-content i {
    color: #3b82f6;
}

@media (max-width: 768px) {
    .page-header-content[b-be6j9x5bbm] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .page-stats[b-be6j9x5bbm] {
        width: 100%;
        justify-content: center;
    }

    .BEC-CommandBar[b-be6j9x5bbm] {
        flex-wrap: wrap;
        gap: var(--BEC-spacingHorizontalS);
    }

    .action-divider[b-be6j9x5bbm] {
        display: none;
    }

    .search-box[b-be6j9x5bbm] {
        order: -1;
        width: 100%;
        min-width: auto;
    }

    .BEC-CommandBar-button span[b-be6j9x5bbm] {
        display: none;
    }

    .BEC-CommandBar-button[b-be6j9x5bbm] {
        padding: var(--BEC-spacingHorizontalS);
        width: 36px;
    }
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-be6j9x5bbm] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-be6j9x5bbm] {
    font-size: 12px;
}

.column-chooser-list[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-be6j9x5bbm]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-be6j9x5bbm]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-notification-icon[b-be6j9x5bbm] {
    font-size: 20px;
}

.adm-preline-text[b-be6j9x5bbm] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-be6j9x5bbm] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-required-marker[b-be6j9x5bbm] {
    color: red;
}

.adm-warning-icon-sm[b-be6j9x5bbm] {
    color: #f59e0b;
    margin-right: 8px;
}

.adm-info-box-gray[b-be6j9x5bbm] {
    background: #f3f4f6;
    padding: 12px;
    border-radius: 6px;
    margin-top: 12px;
}

.adm-text-cannot-undo[b-be6j9x5bbm] {
    margin-top: 12px;
    color: #dc2626;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Profile/UserProfileHistoryAdministration.razor.rz.scp.css */
/* ========================================
   USER PROFILE HISTORY ADMINISTRATION - STANDARDIZED PAGE STYLES
   Uses same styling pattern as System Modules page
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-ctmqhc6ibl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ctmqhc6ibl] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ctmqhc6ibl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ctmqhc6ibl] {
    transform: scale(0.98);
}

.page-subtitle[b-ctmqhc6ibl] {
    display: none;
}

.header-right[b-ctmqhc6ibl] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.stat-value[b-ctmqhc6ibl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.stat-label[b-ctmqhc6ibl] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-ctmqhc6ibl] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ctmqhc6ibl] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ctmqhc6ibl] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ctmqhc6ibl] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-ctmqhc6ibl] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-ctmqhc6ibl] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-ctmqhc6ibl] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group,
[b-ctmqhc6ibl] .e-toolbar .e-input-group.e-control-wrapper,
[b-ctmqhc6ibl] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group .e-input,
[b-ctmqhc6ibl] .e-toolbar .e-input-group .e-input,
[b-ctmqhc6ibl] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-ctmqhc6ibl] .e-toolbar .e-input-group:focus-within,
[b-ctmqhc6ibl] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-ctmqhc6ibl] .e-toolbar .e-textbox .e-input-group-icon,
[b-ctmqhc6ibl] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-ctmqhc6ibl] .e-toolbar .e-input-group .e-input::placeholder,
[b-ctmqhc6ibl] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */
.loading-container[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-ctmqhc6ibl] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-ctmqhc6ibl 1s linear infinite;
}

@keyframes spin-b-ctmqhc6ibl {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-ctmqhc6ibl] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

.error-container[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.error-container i[b-ctmqhc6ibl] {
    font-size: 48px;
    color: var(--BEC-colorError);
}

.error-container p[b-ctmqhc6ibl] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
    text-align: center;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-ctmqhc6ibl] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-ctmqhc6ibl] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-ctmqhc6ibl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-ctmqhc6ibl] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-ctmqhc6ibl] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-ctmqhc6ibl] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-ctmqhc6ibl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-ctmqhc6ibl] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-ctmqhc6ibl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ctmqhc6ibl] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-ctmqhc6ibl] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-ctmqhc6ibl] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-ctmqhc6ibl] {
    margin-bottom: 24px;
    animation: fadeInUp-b-ctmqhc6ibl 0.6s ease;
}

.step-title[b-ctmqhc6ibl] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-ctmqhc6ibl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ctmqhc6ibl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ctmqhc6ibl] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-ctmqhc6ibl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ctmqhc6ibl] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-ctmqhc6ibl] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ctmqhc6ibl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ctmqhc6ibl] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ctmqhc6ibl] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ctmqhc6ibl] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-ctmqhc6ibl] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ctmqhc6ibl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ctmqhc6ibl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ctmqhc6ibl] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: #e1dfdd;
}

.btn-cancel[b-ctmqhc6ibl] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: #e1dfdd;
}

.btn-next[b-ctmqhc6ibl] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-ctmqhc6ibl] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: #0b5c0b;
}

.btn i[b-ctmqhc6ibl] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-ctmqhc6ibl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-ctmqhc6ibl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-ctmqhc6ibl] {
    font-size: 12px;
}

.column-chooser-list[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-ctmqhc6ibl]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-ctmqhc6ibl]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-ctmqhc6ibl] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-ctmqhc6ibl] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-ctmqhc6ibl] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-ctmqhc6ibl] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-ctmqhc6ibl] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-ctmqhc6ibl] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-ctmqhc6ibl] {
    animation: fadeInUp-b-ctmqhc6ibl 0.3s ease-out;
}

.step-title[b-ctmqhc6ibl] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-ctmqhc6ibl] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-ctmqhc6ibl]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-ctmqhc6ibl]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-ctmqhc6ibl]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-ctmqhc6ibl]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-ctmqhc6ibl] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-ctmqhc6ibl] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-ctmqhc6ibl] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-ctmqhc6ibl] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-ctmqhc6ibl] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-ctmqhc6ibl] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-text-success[b-ctmqhc6ibl] {
    color: var(--BEC-colorSuccess);
}

.adm-help-icon-lg[b-ctmqhc6ibl] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-ctmqhc6ibl] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Security/UserLoginHistoryAdministration.razor.rz.scp.css */
/* ========================================
   USER LOGIN HISTORY ADMINISTRATION - STANDARDIZED PAGE STYLES
   Uses same styling pattern as System Modules page
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-p0dh8uzlbv] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-p0dh8uzlbv] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-p0dh8uzlbv] {
    display: none;
}

.header-right[b-p0dh8uzlbv] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.stat-value[b-p0dh8uzlbv] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.stat-label[b-p0dh8uzlbv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-p0dh8uzlbv] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke1);
}

/* Help Icon Button */
.help-icon-btn[b-p0dh8uzlbv] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-p0dh8uzlbv] {
    transform: scale(0.98);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-p0dh8uzlbv] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-p0dh8uzlbv] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-p0dh8uzlbv] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-p0dh8uzlbv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-p0dh8uzlbv] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-p0dh8uzlbv] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-p0dh8uzlbv] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-p0dh8uzlbv] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-p0dh8uzlbv] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* Wizard Step Content */
.wizard-step[b-p0dh8uzlbv] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-p0dh8uzlbv] {
    margin-bottom: 24px;
    animation: fadeInUp-b-p0dh8uzlbv 0.6s ease;
}

.step-title[b-p0dh8uzlbv] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-title h2[b-p0dh8uzlbv] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    text-align: center;
}

.step-description[b-p0dh8uzlbv] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

.info-box[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-p0dh8uzlbv] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-p0dh8uzlbv] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-p0dh8uzlbv] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-p0dh8uzlbv] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-p0dh8uzlbv] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-p0dh8uzlbv] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.warning-box[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-p0dh8uzlbv] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-p0dh8uzlbv] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-p0dh8uzlbv] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-p0dh8uzlbv] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-p0dh8uzlbv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-p0dh8uzlbv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-p0dh8uzlbv] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-p0dh8uzlbv] {
    background: #e1dfdd;
}

.btn-next[b-p0dh8uzlbv] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-p0dh8uzlbv] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-p0dh8uzlbv] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-p0dh8uzlbv] {
    background: #0b5c0b;
}

.btn i[b-p0dh8uzlbv] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-p0dh8uzlbv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-p0dh8uzlbv] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-p0dh8uzlbv] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-p0dh8uzlbv] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-p0dh8uzlbv] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-p0dh8uzlbv] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group,
[b-p0dh8uzlbv] .e-toolbar .e-input-group.e-control-wrapper,
[b-p0dh8uzlbv] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group .e-input,
[b-p0dh8uzlbv] .e-toolbar .e-input-group .e-input,
[b-p0dh8uzlbv] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-p0dh8uzlbv] .e-toolbar .e-input-group:focus-within,
[b-p0dh8uzlbv] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-p0dh8uzlbv] .e-toolbar .e-textbox .e-input-group-icon,
[b-p0dh8uzlbv] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-p0dh8uzlbv] .e-toolbar .e-input-group .e-input::placeholder,
[b-p0dh8uzlbv] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   ======================================== */
[b-p0dh8uzlbv] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-p0dh8uzlbv] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-p0dh8uzlbv] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-p0dh8uzlbv] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-p0dh8uzlbv] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-p0dh8uzlbv] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */
.column-chooser-actions[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-p0dh8uzlbv] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-p0dh8uzlbv] {
    font-size: 12px;
}

.column-chooser-list[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-p0dh8uzlbv]  .e-checkbox-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
}

.column-chooser-item[b-p0dh8uzlbv]  .e-checkbox-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 400;
    margin-left: 8px;
    cursor: pointer;
    user-select: none;
    flex: 1;
}

/* ========================================
   LOADING AND ERROR STATES
   ======================================== */
.loading-container[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-p0dh8uzlbv] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-p0dh8uzlbv 1s linear infinite;
}

@keyframes spin-b-p0dh8uzlbv {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-p0dh8uzlbv] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

.error-container[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.error-container i[b-p0dh8uzlbv] {
    font-size: 48px;
    color: var(--BEC-colorError);
}

.error-container p[b-p0dh8uzlbv] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .erp-page-header[b-p0dh8uzlbv] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-p0dh8uzlbv] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-p0dh8uzlbv] {
        font-size: 18px;
    }

    [b-p0dh8uzlbv] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-p0dh8uzlbv] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-p0dh8uzlbv] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-p0dh8uzlbv] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-p0dh8uzlbv] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-p0dh8uzlbv] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-p0dh8uzlbv] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-p0dh8uzlbv] {
    animation: fadeInUp-b-p0dh8uzlbv 0.3s ease-out;
}

.step-title[b-p0dh8uzlbv] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-p0dh8uzlbv] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-p0dh8uzlbv]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-p0dh8uzlbv]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-p0dh8uzlbv]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-p0dh8uzlbv]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-p0dh8uzlbv] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-p0dh8uzlbv] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-p0dh8uzlbv] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-p0dh8uzlbv] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-p0dh8uzlbv] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-p0dh8uzlbv] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-help-icon-lg[b-p0dh8uzlbv] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-p0dh8uzlbv] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Security/UserSessionAdministration.razor.rz.scp.css */
/* ========================================
   USER SESSION ADMINISTRATION - COMPREHENSIVE STYLES
   Used on: UserSessionAdministration.razor
   
   Monitor active sessions, track login history, and manage authentication.
   100% Identical to Profile Administration Header & Toolbar
   ======================================== */

/* ========================================
   ERP PAGE CONTAINER
   ======================================== */
.erp-page-container[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */
.erp-page-header[b-lillroxeb1] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-lillroxeb1] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-lillroxeb1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-lillroxeb1] {
    transform: scale(0.98);
}

.page-subtitle[b-lillroxeb1] {
    display: none;
}

.header-right[b-lillroxeb1] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-lillroxeb1] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-lillroxeb1] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-lillroxeb1] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-lillroxeb1] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-lillroxeb1] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to Attendance - Back Office
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-lillroxeb1] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-lillroxeb1] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-lillroxeb1] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-lillroxeb1] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-lillroxeb1] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-lillroxeb1] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-lillroxeb1] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-lillroxeb1] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-lillroxeb1] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-lillroxeb1] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group,
[b-lillroxeb1] .e-toolbar .e-input-group.e-control-wrapper,
[b-lillroxeb1] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group .e-input,
[b-lillroxeb1] .e-toolbar .e-input-group .e-input,
[b-lillroxeb1] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-lillroxeb1] .e-toolbar .e-input-group:focus-within,
[b-lillroxeb1] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-lillroxeb1] .e-toolbar .e-textbox .e-input-group-icon,
[b-lillroxeb1] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-lillroxeb1] .e-toolbar .e-input-group .e-input::placeholder,
[b-lillroxeb1] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* Ensure toolbar item containing search is properly aligned */
[b-lillroxeb1] .e-toolbar .e-toolbar-item[align="Right"] {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* ========================================
   TAB CONTAINER
   ======================================== */
.tab-container[b-lillroxeb1] {
    padding: 0;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   FILTERS BAR (Login History Tab)
   ======================================== */
.filters-bar[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin-bottom: var(--BEC-spacingHorizontalM);
    flex-wrap: wrap;
}

.filter-group[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.filter-group--search[b-lillroxeb1] {
    margin-left: auto;
}

.filter-label[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

.filter-buttons[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.filter-button[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    height: 32px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.filter-button:hover:not(.active)[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
}

.filter-button.active[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.filter-button--success.active[b-lillroxeb1] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
    border-color: var(--BEC-colorPaletteGreenBorder1);
}

.filter-button--danger.active[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedBorder1);
}

.filter-divider[b-lillroxeb1] {
    width: 1px;
    height: 24px;
    background: var(--BEC-colorNeutralStroke1);
}

.filter-spacer[b-lillroxeb1] {
    flex: 1;
}

.tab-content[b-lillroxeb1] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    min-height: calc(100vh - 250px);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: 4px 10px;
    border-radius: var(--BEC-borderRadiusLarge);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.status-badge i[b-lillroxeb1] {
    font-size: 10px;
}

.status-badge--success[b-lillroxeb1] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenBorder1);
}

.status-badge--warning[b-lillroxeb1] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1);
}

.status-badge--danger[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBorder1);
}

.status-badge--info[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-state[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.loading-spinner[b-lillroxeb1] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-lillroxeb1 1s linear infinite;
}

@keyframes spin-b-lillroxeb1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-state p[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-state[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
    text-align: center;
}

.error-state i[b-lillroxeb1] {
    font-size: 64px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-state h3[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.error-state p[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
    max-width: 500px;
}

.retry-button[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.retry-button:hover[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow8);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
    text-align: center;
}

.empty-state i[b-lillroxeb1] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
    opacity: 0.6;
}

.empty-state h3[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.empty-state p[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   PLACEHOLDER STATE (Phase 3 Coming Soon)
   ======================================== */
.content-placeholder[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-lillroxeb1] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   DIALOG STYLING (Phase 4)
   ======================================== */

/* Dialog Header */
.dialog-header[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-header i[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-header--info[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    border-bottom: 3px solid var(--BEC-colorBrandBackground);
}

.dialog-header--info i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
}

.dialog-header--warning[b-lillroxeb1] {
    color: var(--BEC-colorPaletteYellowForeground2);
    border-bottom: 3px solid var(--BEC-colorPaletteYellowBorder1);
}

.dialog-header--warning i[b-lillroxeb1] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.dialog-header--danger[b-lillroxeb1] {
    color: var(--BEC-colorPaletteRedForeground1);
    border-bottom: 3px solid var(--BEC-colorPaletteRedBorder1);
}

.dialog-header--danger i[b-lillroxeb1] {
    color: var(--BEC-colorPaletteRedForeground1);
}

/* Dialog Content */
.dialog-content[b-lillroxeb1] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
}

.dialog-message[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    line-height: 1.6;
}

.dialog-warning[b-lillroxeb1] {
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorPaletteYellowBackground1);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteYellowForeground2);
    margin: 0;
    line-height: 1.5;
}

.dialog-warning i[b-lillroxeb1] {
    color: var(--BEC-colorPaletteYellowForeground1);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Dialog Footer */
.dialog-footer[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Dialog Buttons */
.dialog-button[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    height: 36px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.dialog-button:disabled[b-lillroxeb1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-button--primary[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.dialog-button--primary:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.dialog-button--secondary[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.dialog-button--secondary:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke2);
}

.dialog-button--danger[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBorder1);
}

.dialog-button--danger:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedForeground1);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

/* Session Details Dialog */
.session-details[b-lillroxeb1] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
}

.details-section[b-lillroxeb1] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.details-section:last-child[b-lillroxeb1] {
    margin-bottom: 0;
}

.section-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

.section-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
}

.details-grid[b-lillroxeb1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

.detail-item[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* Syncfusion Dialog Overrides */
[b-lillroxeb1] .confirmation-dialog .e-dlg-header-content,
[b-lillroxeb1] .details-dialog .e-dlg-header-content {
    padding: 0 !important;
    background: transparent !important;
}

[b-lillroxeb1] .confirmation-dialog .e-dlg-content,
[b-lillroxeb1] .details-dialog .e-dlg-content {
    padding: 0 !important;
}

[b-lillroxeb1] .confirmation-dialog .e-footer-content,
[b-lillroxeb1] .details-dialog .e-footer-content {
    padding: 0 !important;
    border-top: none !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1200px) {
    .statistics-cards[b-lillroxeb1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .details-grid[b-lillroxeb1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header-content[b-lillroxeb1] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .statistics-cards[b-lillroxeb1] {
        grid-template-columns: 1fr;
    }

    .BEC-CommandBar[b-lillroxeb1] {
        flex-wrap: wrap;
        gap: var(--BEC-spacingHorizontalS);
    }

    .action-divider[b-lillroxeb1] {
        display: none;
    }

    .search-box[b-lillroxeb1] {
        order: -1;
        width: 100%;
        min-width: auto;
    }

    .BEC-CommandBar-button span[b-lillroxeb1] {
        display: none;
    }

    .BEC-CommandBar-button[b-lillroxeb1] {
        padding: var(--BEC-spacingHorizontalS);
        width: 36px;
    }

    .filters-bar[b-lillroxeb1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-group--search[b-lillroxeb1] {
        margin-left: 0;
        width: 100%;
    }
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-lillroxeb1] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-lillroxeb1] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-lillroxeb1] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-lillroxeb1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-lillroxeb1] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-lillroxeb1] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-lillroxeb1] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-lillroxeb1] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-lillroxeb1] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-lillroxeb1] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-lillroxeb1] {
    margin-bottom: 24px;
    animation: fadeInUp-b-lillroxeb1 0.6s ease;
}

.step-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-lillroxeb1] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-lillroxeb1] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-lillroxeb1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-lillroxeb1] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-lillroxeb1] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-lillroxeb1] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-lillroxeb1] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-lillroxeb1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-lillroxeb1] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-lillroxeb1] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-lillroxeb1] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-lillroxeb1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-lillroxeb1] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-lillroxeb1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-lillroxeb1] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-lillroxeb1] {
    background: #e1dfdd;
}

.btn-next[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackground);
    color: #ffffff;
}

.btn-next:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-lillroxeb1] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-lillroxeb1] {
    background: #0b5c0b;
}

.btn i[b-lillroxeb1] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-lillroxeb1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   NOTIFICATION DIALOG STYLING
   ======================================== */

/* Success Notification */
[b-lillroxeb1] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-lillroxeb1] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-lillroxeb1] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-lillroxeb1] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-lillroxeb1] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-lillroxeb1] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-lillroxeb1] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-lillroxeb1] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-lillroxeb1] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-lillroxeb1] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-lillroxeb1] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-lillroxeb1] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-lillroxeb1] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-lillroxeb1] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-lillroxeb1] {
    animation: fadeInUp-b-lillroxeb1 0.3s ease-out;
}

.step-title[b-lillroxeb1] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-lillroxeb1] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-lillroxeb1]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-lillroxeb1]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-lillroxeb1]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-lillroxeb1]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-lillroxeb1] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-lillroxeb1] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-lillroxeb1] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-lillroxeb1] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-lillroxeb1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-lillroxeb1] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-lillroxeb1] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-dialog-header-flex[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-lillroxeb1] {
    font-size: 20px;
}

.adm-preline-text[b-lillroxeb1] {
    white-space: pre-line;
}

.adm-text-brand[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-lillroxeb1] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Settings/UserPreferenceAdministration.razor.rz.scp.css */
/* ========================================
   USER PREFERENCE ADMINISTRATION PAGE
   100% Identical to Profile Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Matches System Modules exactly
   ======================================== */
.erp-page-header[b-2kj826wd10] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-2kj826wd10] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-2kj826wd10] {
    display: none;
}

.header-right[b-2kj826wd10] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-2kj826wd10] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-2kj826wd10] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-2kj826wd10] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-2kj826wd10] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-2kj826wd10] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-2kj826wd10] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-2kj826wd10] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-2kj826wd10] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-2kj826wd10] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-2kj826wd10] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-2kj826wd10] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-2kj826wd10] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-2kj826wd10] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-2kj826wd10] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-2kj826wd10] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group,
[b-2kj826wd10] .e-toolbar .e-input-group.e-control-wrapper,
[b-2kj826wd10] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group .e-input,
[b-2kj826wd10] .e-toolbar .e-input-group .e-input,
[b-2kj826wd10] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-2kj826wd10] .e-toolbar .e-input-group:focus-within,
[b-2kj826wd10] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-2kj826wd10] .e-toolbar .e-textbox .e-input-group-icon,
[b-2kj826wd10] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-2kj826wd10] .e-toolbar .e-input-group .e-input::placeholder,
[b-2kj826wd10] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER (Temporary)
   ======================================== */
.content-placeholder[b-2kj826wd10] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.content-placeholder-inner[b-2kj826wd10] {
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-2kj826wd10] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-2kj826wd10] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-2kj826wd10] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-2kj826wd10] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-2kj826wd10 1s linear infinite;
}

@keyframes spin-b-2kj826wd10 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-2kj826wd10] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-2kj826wd10] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-system[b-2kj826wd10] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-user[b-2kj826wd10] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* ========================================
   DIALOG STYLING
   ======================================== */
.dialog-header[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-header i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
}

.dialog-content[b-2kj826wd10] {
    padding: 20px;
}

.dialog-footer[b-2kj826wd10] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-2kj826wd10] {
    margin-bottom: 16px;
}

.form-group label[b-2kj826wd10] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 6px;
}

.form-group .required[b-2kj826wd10] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-value[b-2kj826wd10] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-2kj826wd10] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* ========================================
   DIALOG TEXT STYLING
   ======================================== */
.warning-text[b-2kj826wd10] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 8px 0;
}

.info-text[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    margin: 8px 0;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.info-text i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-2kj826wd10] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-2kj826wd10] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-2kj826wd10] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-2kj826wd10] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from UserBranchAdministration)
   ======================================== */
.sidebar-header[b-2kj826wd10] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-2kj826wd10] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-2kj826wd10] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-2kj826wd10] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-2kj826wd10] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-2kj826wd10] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-2kj826wd10] {
    max-width: 100%;
}

.step-title[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-2kj826wd10] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-2kj826wd10] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-2kj826wd10] {
    margin-bottom: 20px;
}

.form-label[b-2kj826wd10] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-2kj826wd10]::after {
    content: ' *';
    color: #d13438;
}

.form-row[b-2kj826wd10] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Review Section */
.review-section[b-2kj826wd10] {
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.review-item[b-2kj826wd10] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.review-item:last-child[b-2kj826wd10] {
    border-bottom: none;
}

.review-label[b-2kj826wd10] {
    font-weight: 600;
    color: #323130;
    font-size: 14px;
}

.review-value[b-2kj826wd10] {
    color: #605e5c;
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* Sidebar Footer */
.sidebar-footer[b-2kj826wd10] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-2kj826wd10] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-2kj826wd10] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-2kj826wd10] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-2kj826wd10] {
    background: #e1dfdd;
}

.btn-primary[b-2kj826wd10] {
    background: #0078d4;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-2kj826wd10] {
    background: #106ebe;
}

.btn-success[b-2kj826wd10] {
    background: #107c10;
    color: white;
}

.btn-success:hover:not(:disabled)[b-2kj826wd10] {
    background: #0b5a0b;
    box-shadow: 0 2px 8px rgba(16, 124, 16, 0.3);
}

.btn i[b-2kj826wd10] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-2kj826wd10] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-2kj826wd10] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-2kj826wd10] {
        font-size: 18px;
    }

    [b-2kj826wd10] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-2kj826wd10] {
        grid-template-columns: 1fr;
    }

    [b-2kj826wd10] .e-dialog {
        width: 95% !important;
    }

    [b-2kj826wd10] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-2kj826wd10],
    .sidebar-footer[b-2kj826wd10] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-2kj826wd10] {
        padding: 16px 20px;
    }

    .form-row[b-2kj826wd10] {
        grid-template-columns: 1fr;
    }

    .review-item[b-2kj826wd10] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .review-value[b-2kj826wd10] {
        max-width: 100%;
        text-align: left;
    }
}

/* ========================================
   HELP ICON BUTTON
   ======================================== */
.help-icon-btn[b-2kj826wd10] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-2kj826wd10] {
    transform: scale(0.98);
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-2kj826wd10] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-2kj826wd10] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-2kj826wd10] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-2kj826wd10] {
    max-width: 100%;
    text-align: left;
}

.step-icon[b-2kj826wd10] {
    margin-bottom: 24px;
    animation: fadeInUp-b-2kj826wd10 0.6s ease;
}

.step-icon i[b-2kj826wd10] {
    font-size: 48px;
}

.step-title[b-2kj826wd10] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-2kj826wd10] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-2kj826wd10] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-2kj826wd10] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-2kj826wd10] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-2kj826wd10] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-2kj826wd10] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-2kj826wd10] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-2kj826wd10] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-2kj826wd10] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-2kj826wd10] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-2kj826wd10] {
    display: flex;
    gap: 12px;
}

/* Animations */
@keyframes fadeInUp-b-2kj826wd10 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-2kj826wd10] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-2kj826wd10] {
    font-size: 12px;
}

.column-chooser-list[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-2kj826wd10] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-2kj826wd10]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-2kj826wd10]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-2kj826wd10] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-2kj826wd10] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-2kj826wd10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-2kj826wd10] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-2kj826wd10] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-2kj826wd10] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-2kj826wd10] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-2kj826wd10] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-2kj826wd10] {
    animation: fadeInUp-b-2kj826wd10 0.3s ease-out;
}

.step-title[b-2kj826wd10] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-2kj826wd10] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-2kj826wd10] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-2kj826wd10]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-2kj826wd10]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-2kj826wd10]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-2kj826wd10]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-2kj826wd10] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-2kj826wd10] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-2kj826wd10] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-2kj826wd10] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-2kj826wd10] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-2kj826wd10] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-2kj826wd10] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-2kj826wd10] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-dialog-header-flex[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-2kj826wd10] {
    font-size: 20px;
}

.adm-preline-text[b-2kj826wd10] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-2kj826wd10] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-2kj826wd10] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Approval/Workflow.razor.rz.scp.css */
/* Fluent Focus Design Styles */
:root[b-ju80plb9qk] {
    --bg-color: #f0f2f5;
    --white: #ffffff;
    --primary: #0f6cbd;
    --primary-hover: #005a9e;
    --text-primary: #242424;
    --text-secondary: #616161;
    --border-color: #e0e0e0;
    --header-height: 60px;
}

.workflow-container[b-ju80plb9qk] {
    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    height: calc(100vh - 60px);
    /* Adjust for main layout header if needed */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Command Bar */
.command-bar[b-ju80plb9qk] {
    background: var(--white);
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    flex-shrink: 0;
}

.page-title[b-ju80plb9qk] {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.actions[b-ju80plb9qk] {
    display: flex;
    gap: 12px;
}

.btn[b-ju80plb9qk] {
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.btn:disabled[b-ju80plb9qk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-ju80plb9qk] {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: var(--primary-hover);
}

.btn-light[b-ju80plb9qk],
.btn-secondary[b-ju80plb9qk],
.btn-outline[b-ju80plb9qk] {
    background-color: white;
    border-color: #d1d1d1;
    color: var(--text-primary);
}

.btn-light:hover:not(:disabled)[b-ju80plb9qk],
.btn-secondary:hover:not(:disabled)[b-ju80plb9qk],
.btn-outline:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: #f5f5f5;
}

.btn-danger[b-ju80plb9qk] {
    background-color: #d92b2b;
    color: white;
    border-color: #d92b2b;
}

.btn-danger:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: #a80000;
}

.btn-success[b-ju80plb9qk] {
    background-color: #107c10;
    color: white;
    border-color: #107c10;
}

.btn-success:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: #0b5a0b;
}

/* Stats Ribbon */
.stats-ribbon[b-ju80plb9qk] {
    background: white;
    padding: 16px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stat-item[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    border-left: 4px solid transparent;
}

.stat-item.active[b-ju80plb9qk] {
    border-color: var(--primary);
}

.stat-item.danger[b-ju80plb9qk] {
    border-color: #d92b2b;
}

.stat-item.warning[b-ju80plb9qk] {
    border-color: #ffb900;
}

.stat-item.info[b-ju80plb9qk] {
    border-color: #0078d4;
}

.stat-value[b-ju80plb9qk] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.stat-label[b-ju80plb9qk] {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Layout */
.main-layout[b-ju80plb9qk] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar Tabs */
.tab-sidebar[b-ju80plb9qk] {
    width: 240px;
    background: white;
    border-right: 1px solid var(--border-color);
    padding-top: 20px;
    flex-shrink: 0;
}

.tab-btn[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 24px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    gap: 12px;
    border-left: 3px solid transparent;
}

.tab-btn:hover[b-ju80plb9qk] {
    background-color: #f0f0f0;
}

.tab-btn.active[b-ju80plb9qk] {
    font-weight: 600;
    background-color: #eff6fc;
    border-left-color: var(--primary);
    color: var(--primary);
}

.badge[b-ju80plb9qk] {
    margin-left: auto;
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

/* Content Area */
.content-area[b-ju80plb9qk] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Tab Content Wrapper */
.tab-content[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Filters */
.filters-bar[b-ju80plb9qk] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    background: white;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.search-input[b-ju80plb9qk] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-family: inherit;
    min-width: 200px;
}

.select-filter[b-ju80plb9qk],
.form-control[b-ju80plb9qk] {
    padding: 8px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background: white;
    font-family: inherit;
    color: var(--text-primary);
}

.form-control[b-ju80plb9qk] {
    width: 100%;
    box-sizing: border-box;
}

.filter-separator[b-ju80plb9qk] {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
    margin: 0 8px;
}

/* Data List */
.approval-list[b-ju80plb9qk] {
    background: white;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.approval-list-body[b-ju80plb9qk] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

.list-header[b-ju80plb9qk] {
    display: grid;
    grid-template-columns: 40px minmax(200px, 2fr) 150px 150px 150px 100px 100px;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    align-items: center;
    flex-shrink: 0;
}

.list-item[b-ju80plb9qk] {
    display: grid;
    grid-template-columns: 40px minmax(200px, 2fr) 150px 150px 150px 100px 100px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s;
}

.list-item:hover[b-ju80plb9qk] {
    background-color: #f5f5f5;
}

.list-item:last-child[b-ju80plb9qk] {
    border-bottom: none;
}

.cell-main[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
}

.main-text[b-ju80plb9qk] {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.sub-text[b-ju80plb9qk] {
    font-size: 12px;
    color: var(--text-secondary);
}

.status-badge[b-ju80plb9qk] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #eee;
}

.status-badge.pending[b-ju80plb9qk] {
    background: #fff4ce;
    color: #5c4300;
}

.status-badge.approved[b-ju80plb9qk] {
    background: #dff6dd;
    color: #107c10;
}

.status-badge.rejected[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

.status-badge.sla[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

.status-badge.escalated[b-ju80plb9qk] {
    background: #fdf6e7;
    color: #8a3c00;
}

.status-badge.active[b-ju80plb9qk] {
    background: #e1dfdd;
    color: #201f1e;
}

.status-badge.inactive[b-ju80plb9qk] {
    background: #f3f2f1;
    color: #a19f9d;
}

.user-cell[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar-circle[b-ju80plb9qk] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
}

.action-cell[b-ju80plb9qk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.list-item:hover .action-cell[b-ju80plb9qk] {
    opacity: 1;
}

/* Checkbox custom */
.custom-checkbox[b-ju80plb9qk] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bulk Actions Message */
.bulk-actions-bar[b-ju80plb9qk] {
    background: #eff6fc;
    color: var(--primary);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.selection-count[b-ju80plb9qk] {
    font-weight: 600;
}

/* Pagination */
.pagination-container[b-ju80plb9qk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: auto;
    flex-shrink: 0;
}

.pagination-info[b-ju80plb9qk] {
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-numbers[b-ju80plb9qk] {
    font-size: 13px;
    font-weight: 600;
}

/* Empty State */
.empty-state[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-secondary);
    text-align: center;
}

.empty-state i[b-ju80plb9qk],
.empty-state svg[b-ju80plb9qk] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d1d1;
}

.empty-state h3[b-ju80plb9qk] {
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

/* Loading State */
.loading-state[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.spinner[b-ju80plb9qk] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin-b-ju80plb9qk 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin-b-ju80plb9qk {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Delegation Card (Adaptive for new layout) */
.delegations-grid[b-ju80plb9qk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.delegation-card[b-ju80plb9qk] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delegation-header[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary);
}

.delegation-row[b-ju80plb9qk] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.delegation-row:last-child[b-ju80plb9qk] {
    border-bottom: none;
}

.delegation-row .label[b-ju80plb9qk] {
    color: var(--text-secondary);
}

.delegation-row .value[b-ju80plb9qk] {
    font-weight: 500;
}

/* Drawer / Side Panel (Right Side Wizard) */
.drawer-overlay[b-ju80plb9qk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
    /* Align to right */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
}

.drawer-panel[b-ju80plb9qk] {
    background: white;
    width: 600px;
    max-width: 90vw;
    height: 100vh;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-ju80plb9qk 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
    /* Smoother bezier */
    position: relative;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.drawer-panel.large[b-ju80plb9qk] {
    width: 800px;
}

@keyframes slideInRight-b-ju80plb9qk {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.drawer-header[b-ju80plb9qk] {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-color);
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.drawer-header h3[b-ju80plb9qk] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close-drawer[b-ju80plb9qk] {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-close-drawer:hover[b-ju80plb9qk] {
    background: #eaeaea;
    color: var(--text-primary);
}

.drawer-body[b-ju80plb9qk] {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: white;
}

.drawer-footer[b-ju80plb9qk] {
    padding: 24px 32px;
    border-top: 1px solid var(--border-color);
    background: #fafafa;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

/* Form refinement inside drawer */
.form-group label[b-ju80plb9qk] {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control[b-ju80plb9qk] {
    border: 1px solid #d1d1d1;
    padding: 10px 12px;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.form-control:focus[b-ju80plb9qk] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.1);
}

/* Improve list items in drawer */
.drawer-body .list-item[b-ju80plb9qk] {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
}

.drawer-body .list-item:last-child[b-ju80plb9qk] {
    border-bottom: none;
}


/* Toast */
.toast[b-ju80plb9qk] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2000;
    border-left: 4px solid var(--primary);
    animation: slideIn-b-ju80plb9qk 0.3s ease-out;
}

.toast-success[b-ju80plb9qk] {
    border-left-color: #107c10;
}

.toast-error[b-ju80plb9qk] {
    border-left-color: #d92b2b;
}

.toast-warning[b-ju80plb9qk] {
    border-left-color: #ffb900;
}

@keyframes slideIn-b-ju80plb9qk {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Trip Type Badges for Travel Request Details */
.status-badge.one-way[b-ju80plb9qk] {
    background: #e8f4fd;
    color: #0078d4;
}

.status-badge.round-trip[b-ju80plb9qk] {
    background: #e8f5e9;
    color: #107c10;
}

.status-badge.multi-city[b-ju80plb9qk] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.status-badge.default[b-ju80plb9qk] {
    background: #f5f5f5;
    color: #616161;
}

/* Running status badge for workflows */
.status-badge.running[b-ju80plb9qk] {
    background: #e3f2fd;
    color: #1976d2;
}

.status-badge.completed[b-ju80plb9qk] {
    background: #dff6dd;
    color: #107c10;
}

.status-badge.cancelled[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

/* ============================================
   OPTIMISTIC UI - FAILURE BADGE STYLES
   ============================================ */

/* Failed status badge */
.status-badge.failed[b-ju80plb9qk] {
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    animation: pulse-error-b-ju80plb9qk 2s infinite;
    font-weight: 600;
}

@keyframes pulse-error-b-ju80plb9qk {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 68, 68, 0);
    }
}

/* List item with failure */
.list-item.has-failure[b-ju80plb9qk] {
    background: linear-gradient(90deg, #fff5f5 0%, white 30%);
    border-left: 4px solid #d92b2b;
}

/* Inline failure badge */
.failure-badge[b-ju80plb9qk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d92b2b;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    animation: shake-b-ju80plb9qk 0.5s ease-in-out;
}

@keyframes shake-b-ju80plb9qk {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.failure-badge i[b-ju80plb9qk] {
    font-size: 10px;
}

/* Failure message under the item */
.failure-message[b-ju80plb9qk] {
    color: #d92b2b;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 2px;
}

.failure-message a[b-ju80plb9qk] {
    color: #0f6cbd;
    text-decoration: underline;
    cursor: pointer;
}

.failure-message a:hover[b-ju80plb9qk] {
    color: #005a9e;
}

/* Priority class for failed items */
.priority-failed[b-ju80plb9qk] {
    position: relative;
}

.priority-failed[b-ju80plb9qk]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #d92b2b;
}

/* ============================================
   PERFORMANCE EVALUATION DETAILS
   ============================================ */

.pe-result-badge[b-ju80plb9qk] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pe-result-excellent[b-ju80plb9qk] {
    background: #dff6dd;
    color: #107c10;
}

.pe-result-very-good[b-ju80plb9qk] {
    background: #e3f2fd;
    color: #0f6cbd;
}

.pe-result-good[b-ju80plb9qk] {
    background: #fff4ce;
    color: #7a6400;
}

.pe-result-satisfactory[b-ju80plb9qk] {
    background: #fff1e0;
    color: #a36200;
}

.pe-result-needs-improvement[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

.pe-result-na[b-ju80plb9qk] {
    background: #f5f5f5;
    color: #616161;
}

.pe-view-btn[b-ju80plb9qk] {
    border: 1px solid #0078d4;
    color: #fff;
    background: #0078d4;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 4px;
}

.pe-view-btn:hover:not(:disabled)[b-ju80plb9qk] {
    background: #005a9e;
    border-color: #005a9e;
    color: #fff;
}

/* ============================================
   MOBILE RESPONSIVE — ≤768px
   ============================================ */
@media (max-width: 768px) {

    /* Container: allow scrolling instead of fixed viewport height */
    .workflow-container[b-ju80plb9qk] {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: auto;
    }

    /* Command bar: stack title and actions vertically */
    .command-bar[b-ju80plb9qk] {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
        gap: 12px;
    }

    .page-title[b-ju80plb9qk] {
        font-size: 16px;
    }

    .actions[b-ju80plb9qk] {
        width: 100%;
        justify-content: stretch;
    }

    .actions .btn[b-ju80plb9qk] {
        flex: 1;
        justify-content: center;
        min-height: 44px;
        font-size: 13px;
    }

    /* Stats ribbon: 2×2 grid with more breathing room */
    .stats-ribbon[b-ju80plb9qk] {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px 16px;
        gap: 12px;
    }

    .stat-item[b-ju80plb9qk] {
        padding: 8px 12px;
    }

    .stat-value[b-ju80plb9qk] {
        font-size: 20px;
    }

    .stat-label[b-ju80plb9qk] {
        font-size: 11px;
    }

    /* Main layout: collapse from side-by-side to stacked */
    .main-layout[b-ju80plb9qk] {
        flex-direction: column;
        overflow: auto;
    }

    /* Sidebar tabs → horizontal scrollable row */
    .tab-sidebar[b-ju80plb9qk] {
        width: 100%;
        display: flex;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
    }

    .tab-btn[b-ju80plb9qk] {
        flex: 1 0 auto;
        padding: 12px 16px;
        justify-content: center;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        min-height: 44px;
        font-size: 13px;
    }

    .tab-btn.active[b-ju80plb9qk] {
        border-left-color: transparent;
        border-bottom-color: var(--primary);
    }

    .badge[b-ju80plb9qk] {
        margin-left: 6px;
    }

    /* Content area: reduce padding */
    .content-area[b-ju80plb9qk] {
        padding: 12px;
    }

    /* Filters: full-width stacked */
    .filters-bar[b-ju80plb9qk] {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .search-input[b-ju80plb9qk] {
        min-width: unset;
        width: 100%;
        min-height: 44px;
    }

    .select-filter[b-ju80plb9qk] {
        width: 100%;
        min-height: 44px;
    }

    .filter-separator[b-ju80plb9qk] {
        display: none;
    }

    .filters-bar .btn[b-ju80plb9qk] {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* Approval list: card-style stacked layout */
    .list-header[b-ju80plb9qk] {
        display: none;
    }

    .list-item[b-ju80plb9qk] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        grid-template-columns: none;
    }

    .cell-main[b-ju80plb9qk] {
        width: 100%;
    }

    .main-text[b-ju80plb9qk] {
        word-break: break-word;
        white-space: normal;
    }

    .sub-text[b-ju80plb9qk] {
        word-break: break-word;
        white-space: normal;
    }

    .user-cell[b-ju80plb9qk] {
        width: 100%;
    }

    .action-cell[b-ju80plb9qk] {
        opacity: 1;
        justify-content: flex-start;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
    }

    .action-cell .btn[b-ju80plb9qk] {
        min-width: 44px;
        min-height: 44px;
    }

    .custom-checkbox[b-ju80plb9qk] {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .list-item[b-ju80plb9qk] {
        position: relative;
    }

    /* Bulk actions: wrap */
    .bulk-actions-bar[b-ju80plb9qk] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .bulk-actions-bar .btn[b-ju80plb9qk] {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    /* Pagination: stack */
    .pagination-container[b-ju80plb9qk] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        text-align: center;
    }

    .pagination[b-ju80plb9qk] {
        justify-content: center;
    }

    .pagination .btn[b-ju80plb9qk] {
        min-height: 44px;
    }

    /* Delegation cards: single column */
    .delegations-grid[b-ju80plb9qk] {
        grid-template-columns: 1fr;
    }

    /* Drawer: full-width on mobile */
    .drawer-panel[b-ju80plb9qk] {
        width: 100vw;
        max-width: 100vw;
    }

    .drawer-panel.large[b-ju80plb9qk] {
        width: 100vw;
    }

    .drawer-header[b-ju80plb9qk] {
        padding: 16px;
    }

    .drawer-header h3[b-ju80plb9qk] {
        font-size: 17px;
    }

    .drawer-body[b-ju80plb9qk] {
        padding: 16px;
    }

    .drawer-footer[b-ju80plb9qk] {
        padding: 16px;
    }

    .drawer-footer .btn[b-ju80plb9qk] {
        min-height: 44px;
    }

    /* Empty/loading states: less padding */
    .empty-state[b-ju80plb9qk] {
        padding: 32px 16px;
    }

    .loading-state[b-ju80plb9qk] {
        padding: 32px 16px;
    }
}

/* ============================================
   SMALL MOBILE — ≤430px (iPhone 14 Pro Max)
   ============================================ */
@media (max-width: 430px) {

    .command-bar[b-ju80plb9qk] {
        padding: 10px 12px;
    }

    .page-title[b-ju80plb9qk] {
        font-size: 15px;
        gap: 8px;
    }

    .actions .btn[b-ju80plb9qk] {
        font-size: 12px;
        padding: 6px 10px;
    }

    .stats-ribbon[b-ju80plb9qk] {
        padding: 10px 12px;
        gap: 8px;
    }

    .stat-value[b-ju80plb9qk] {
        font-size: 18px;
    }

    .stat-label[b-ju80plb9qk] {
        font-size: 10px;
    }

    .content-area[b-ju80plb9qk] {
        padding: 8px;
    }

    .tab-btn[b-ju80plb9qk] {
        padding: 10px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .tab-btn svg[b-ju80plb9qk] {
        width: 14px;
        height: 14px;
    }

    .list-item[b-ju80plb9qk] {
        padding: 12px;
    }
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/backoffice/absents/AbsentsBackOffice.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-lcdmb8hylg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-lcdmb8hylg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-lcdmb8hylg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-lcdmb8hylg] {
    transform: scale(0.98);
}

.page-subtitle[b-lcdmb8hylg] {
    display: none;
}

.header-right[b-lcdmb8hylg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-lcdmb8hylg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-lcdmb8hylg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-lcdmb8hylg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-lcdmb8hylg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-lcdmb8hylg] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-lcdmb8hylg] .e-grid .e-row {
    height: 28px !important;
}

[b-lcdmb8hylg] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-lcdmb8hylg] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-lcdmb8hylg] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-lcdmb8hylg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-lcdmb8hylg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-lcdmb8hylg] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-lcdmb8hylg] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-lcdmb8hylg] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-lcdmb8hylg] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-lcdmb8hylg] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group,
[b-lcdmb8hylg] .e-toolbar .e-input-group.e-control-wrapper,
[b-lcdmb8hylg] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group .e-input,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-input,
[b-lcdmb8hylg] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-input::placeholder,
[b-lcdmb8hylg] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-lcdmb8hylg] .e-toolbar .e-input-group:focus-within,
[b-lcdmb8hylg] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-lcdmb8hylg] .e-toolbar .e-textbox .e-clear-icon,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-lcdmb8hylg] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-lcdmb8hylg] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   DATE FILTER SECTION
   ======================================== */
.filter-section[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 8px 16px;
    margin: 8px 24px;
}

.filter-row[b-lcdmb8hylg] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-item[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-label[b-lcdmb8hylg] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-lcdmb8hylg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-lcdmb8hylg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-lcdmb8hylg] .e-grid .e-row.e-selectionbackground,
[b-lcdmb8hylg] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-lcdmb8hylg] .e-grid .e-row.e-selectionbackground:hover,
[b-lcdmb8hylg] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-lcdmb8hylg] .e-grid .e-row.e-selectionbackground td:first-child,
[b-lcdmb8hylg] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-lcdmb8hylg] .assignment-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-lcdmb8hylg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-lcdmb8hylg] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-lcdmb8hylg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-lcdmb8hylg] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-lcdmb8hylg] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-lcdmb8hylg] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-lcdmb8hylg] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-lcdmb8hylg] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-lcdmb8hylg] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-lcdmb8hylg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-lcdmb8hylg] {
    font-size: 12px;
}

.column-chooser-list[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-lcdmb8hylg]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-lcdmb8hylg]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-lcdmb8hylg] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-lcdmb8hylg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-lcdmb8hylg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-lcdmb8hylg] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-lcdmb8hylg] {
    background: #e1dfdd;
}

.btn-success[b-lcdmb8hylg] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-lcdmb8hylg] {
    background: #0b5c0b;
}

.btn i[b-lcdmb8hylg] {
    font-size: 14px;
}
/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-lcdmb8hylg] .help-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-lcdmb8hylg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-lcdmb8hylg] {
    margin-bottom: 24px;
    animation: fadeInUp-b-lcdmb8hylg 0.6s ease;
}

/* Info Box */
.info-box[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-lcdmb8hylg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-lcdmb8hylg] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-lcdmb8hylg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-lcdmb8hylg] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-lcdmb8hylg] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-lcdmb8hylg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-lcdmb8hylg] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-lcdmb8hylg] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-lcdmb8hylg] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-lcdmb8hylg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-lcdmb8hylg] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-lcdmb8hylg] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-lcdmb8hylg] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-empty-subtitle[b-lcdmb8hylg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-footer-left[b-lcdmb8hylg] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/backoffice/attendance/AttendanceBackOffice.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-keb7a3ybg3] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-keb7a3ybg3] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-keb7a3ybg3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-keb7a3ybg3] {
    transform: scale(0.98);
}

.page-subtitle[b-keb7a3ybg3] {
    display: none;
}

.header-right[b-keb7a3ybg3] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-keb7a3ybg3] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-keb7a3ybg3] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-keb7a3ybg3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-keb7a3ybg3] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 10px 20px;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Grid container to fill available space */
[b-keb7a3ybg3] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-keb7a3ybg3] .e-grid .e-row {
    height: 28px !important;
}

[b-keb7a3ybg3] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-keb7a3ybg3] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-keb7a3ybg3] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-keb7a3ybg3] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-keb7a3ybg3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-keb7a3ybg3] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-keb7a3ybg3] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-keb7a3ybg3] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-keb7a3ybg3] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-keb7a3ybg3] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-keb7a3ybg3] .e-toolbar .e-textbox.e-input-group,
[b-keb7a3ybg3] .e-toolbar .e-input-group.e-control-wrapper,
[b-keb7a3ybg3] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-keb7a3ybg3] .e-toolbar .e-textbox.e-input-group .e-input,
[b-keb7a3ybg3] .e-toolbar .e-input-group .e-input,
[b-keb7a3ybg3] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-keb7a3ybg3] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-keb7a3ybg3] .e-toolbar .e-input-group:focus-within,
[b-keb7a3ybg3] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-keb7a3ybg3] .e-toolbar .e-textbox .e-input-group-icon,
[b-keb7a3ybg3] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-keb7a3ybg3] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-keb7a3ybg3 1s linear infinite;
}

@keyframes spin-b-keb7a3ybg3 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-keb7a3ybg3] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-keb7a3ybg3] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-keb7a3ybg3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-keb7a3ybg3] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-keb7a3ybg3] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-keb7a3ybg3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-keb7a3ybg3] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-keb7a3ybg3] .e-grid .e-row.e-selectionbackground,
[b-keb7a3ybg3] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-keb7a3ybg3] .e-grid .e-row.e-selectionbackground:hover,
[b-keb7a3ybg3] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-keb7a3ybg3] .e-grid .e-row.e-selectionbackground td:first-child,
[b-keb7a3ybg3] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   HELP WIZARD STYLES (Mirrored from OrganizationAdministration)
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-keb7a3ybg3] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

[b-keb7a3ybg3] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-keb7a3ybg3] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

.sidebar-title[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-keb7a3ybg3] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-keb7a3ybg3] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-keb7a3ybg3] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-keb7a3ybg3] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* Wizard Step Content */
.wizard-step[b-keb7a3ybg3] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-keb7a3ybg3] {
    margin-bottom: 24px;
    animation: fadeInUp-b-keb7a3ybg3 0.6s ease;
}

.step-title[b-keb7a3ybg3] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-keb7a3ybg3] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-keb7a3ybg3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-keb7a3ybg3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.example-step[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-keb7a3ybg3] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.example-step code[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-keb7a3ybg3] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-keb7a3ybg3] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-keb7a3ybg3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-keb7a3ybg3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-keb7a3ybg3] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-keb7a3ybg3] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-keb7a3ybg3] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-keb7a3ybg3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-keb7a3ybg3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn[b-keb7a3ybg3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-keb7a3ybg3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-keb7a3ybg3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-keb7a3ybg3] {
    background: #e1dfdd;
}

.btn-next[b-keb7a3ybg3] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-keb7a3ybg3] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-keb7a3ybg3] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-keb7a3ybg3] {
    background: #0b5c0b;
}

/* Animations */
@keyframes fadeInUp-b-keb7a3ybg3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER WIZARD SPECIFIC STYLES
   ======================================== */

/* Sidebar header for both wizards */
.sidebar-header[b-keb7a3ybg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Column Chooser Actions */
.column-chooser-actions[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.btn-link[b-keb7a3ybg3] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-link:hover[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-link i[b-keb7a3ybg3] {
    font-size: 11px;
}

/* Column Chooser List */
.column-chooser-list[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-keb7a3ybg3] {
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* Checkbox styling */
[b-keb7a3ybg3] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[b-keb7a3ybg3] .column-chooser-item .e-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    text-align: left;
    flex: 1;
}

/* Scrollbar for column list */
.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar {
    width: 6px;
}

.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 3px;
}

.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 3px;
}

.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

/* Sidebar Step Content */
.sidebar-step-content[b-keb7a3ybg3] {
    flex: 1;
    overflow-y: auto;
}

/* Assignment Wizard Sidebar */
[b-keb7a3ybg3] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

[b-keb7a3ybg3] .assignment-wizard-sidebar .e-sidebar {
    background: #ffffff;
}

.btn-secondary[b-keb7a3ybg3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-keb7a3ybg3] {
    background: #e1dfdd;
}

/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* Tablet and below (1024px and below) */
@media (max-width: 1024px) {

    /* Adjust header padding */
    .erp-page-header[b-keb7a3ybg3] {
        padding: 6px 16px;
    }

    /* Adjust stats container */
    .stats-container[b-keb7a3ybg3] {
        gap: 12px;
    }

    .stat-value[b-keb7a3ybg3] {
        font-size: 12px;
    }

    .stat-label[b-keb7a3ybg3] {
        font-size: 9px;
    }

    /* Adjust toolbar */
    [b-keb7a3ybg3] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
        padding: 2px 12px !important;
    }

    /* Adjust page content padding */
    .erp-page-content[b-keb7a3ybg3] {
        padding: 10px 16px 30px 16px;
    }

    /* Column chooser width */
    [b-keb7a3ybg3] .assignment-wizard-sidebar {
        width: 50% !important;
        min-width: 320px !important;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {

    /* Hide page subtitle */
    .page-subtitle[b-keb7a3ybg3] {
        display: none !important;
    }

    /* Stack header items vertically */
    .erp-page-header[b-keb7a3ybg3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 12px;
    }

    .header-left[b-keb7a3ybg3],
    .header-right[b-keb7a3ybg3] {
        width: 100%;
    }

    /* Adjust stats to be more compact */
    .stats-container[b-keb7a3ybg3] {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .stat-card[b-keb7a3ybg3] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Toolbar adjustments */
    [b-keb7a3ybg3] .e-toolbar.e-control {
        margin: 3px 12px 1px 12px !important;
        padding: 2px 8px !important;
        min-height: 36px !important;
    }

    /* Hide less important toolbar buttons on mobile */
    [b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    /* Show only icons on mobile */
    [b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 6px !important;
    }

    /* Page content */
    .erp-page-content[b-keb7a3ybg3] {
        padding: 10px 12px 20px 12px;
    }

    /* Adjust grid height for mobile */
    [b-keb7a3ybg3] .e-grid {
        height: calc(100vh - 280px) !important;
    }

    /* Column chooser full width on mobile */
    [b-keb7a3ybg3] .assignment-wizard-sidebar {
        width: 90% !important;
        min-width: unset !important;
    }

    /* Help wizard full width on mobile */
    [b-keb7a3ybg3] .help-wizard-sidebar {
        width: 90% !important;
    }

    /* Reduce font sizes for mobile */
    .page-title[b-keb7a3ybg3] {
        font-size: 13px;
    }

    .page-title i[b-keb7a3ybg3] {
        font-size: 13px;
    }

    /* Grid cells more compact */
    [b-keb7a3ybg3] .e-grid .e-row td {
        padding: 2px 4px !important;
        font-size: 10px !important;
    }

    [b-keb7a3ybg3] .e-grid .e-gridheader .e-headercell {
        padding: 2px 4px !important;
        font-size: 10px !important;
    }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {

    /* Further compact adjustments */
    .erp-page-header[b-keb7a3ybg3] {
        padding: 8px;
    }

    /* Hide stat dividers */
    .stat-divider[b-keb7a3ybg3] {
        display: none;
    }

    /* Compact stats */
    .stat-value[b-keb7a3ybg3] {
        font-size: 11px;
    }

    .stat-label[b-keb7a3ybg3] {
        font-size: 8px;
    }

    /* Toolbar */
    [b-keb7a3ybg3] .e-toolbar.e-control {
        margin: 3px 8px 1px 8px !important;
        padding: 2px 4px !important;
    }

    /* Content */
    .erp-page-content[b-keb7a3ybg3] {
        padding: 8px;
    }

    /* Sidebar full width */
    [b-keb7a3ybg3] .assignment-wizard-sidebar,
    [b-keb7a3ybg3] .help-wizard-sidebar {
        width: 95% !important;
    }

    /* Sidebar padding reduction */
    .sidebar-content[b-keb7a3ybg3] {
        padding: 16px;
    }

    .sidebar-header[b-keb7a3ybg3] {
        padding: 12px 16px;
    }

    .sidebar-footer[b-keb7a3ybg3] {
        padding: 12px 16px;
    }
}

/* ========================================
   COLUMN CHOOSER - LEFT ALIGNMENT (PROFESSIONAL)
   Using aggressive selectors to override Syncfusion defaults
   ======================================== */

/* Dialog content area */
:global(.e-ccdlg .e-cc-contentdiv)[b-keb7a3ybg3],
:global(.e-ccdlg .e-dlg-content)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-cc-contentdiv)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-keb7a3ybg3] {
    direction: ltr !important;
    text-align: left !important;
}

/* Search box */
:global(.e-ccdlg .e-cc-searchdiv)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-cc-searchdiv)[b-keb7a3ybg3] {
    direction: ltr !important;
    text-align: left !important;
}

/* Checkbox wrapper - force left alignment */
:global(.e-ccdlg .e-checkbox-wrapper)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper)[b-keb7a3ybg3],
:global(.e-ccdlg .e-frame.e-check)[b-keb7a3ybg3],
:global(.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper)[b-keb7a3ybg3] {
    direction: ltr !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
}

/* Checkbox labels */
:global(.e-ccdlg .e-checkbox-wrapper .e-label)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper .e-label)[b-keb7a3ybg3],
:global(.e-ccdlg .e-label)[b-keb7a3ybg3] {
    padding-left: 8px !important;
    padding-right: 0 !important;
    text-align: left !important;
    order: 2 !important;
}

/* Checkbox itself */
:global(.e-ccdlg .e-checkbox-wrapper .e-frame)[b-keb7a3ybg3],
:global(.e-ccdlg .e-frame.e-check)[b-keb7a3ybg3] {
    order: 1 !important;
    margin-right: 0 !important;
}

/* Select All/Deselect All */
:global(.e-ccdlg .e-selectall)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-selectall)[b-keb7a3ybg3] {
    direction: ltr !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-keb7a3ybg3] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/backoffice/transactions/TransactionsBackOffice.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-l735bs6vnh] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-l735bs6vnh] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-l735bs6vnh] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-l735bs6vnh] {
    transform: scale(0.98);
}

.page-subtitle[b-l735bs6vnh] {
    display: none;
}

.header-right[b-l735bs6vnh] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-l735bs6vnh] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-l735bs6vnh] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-l735bs6vnh] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-l735bs6vnh] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Grid container to fill available space */
[b-l735bs6vnh] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-l735bs6vnh] .e-grid .e-row {
    height: 28px !important;
}

[b-l735bs6vnh] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-l735bs6vnh] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-l735bs6vnh] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-l735bs6vnh] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-l735bs6vnh] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-l735bs6vnh] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-l735bs6vnh] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-l735bs6vnh] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-l735bs6vnh] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-l735bs6vnh] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group,
[b-l735bs6vnh] .e-toolbar .e-input-group.e-control-wrapper,
[b-l735bs6vnh] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group .e-input,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-input,
[b-l735bs6vnh] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-input::placeholder,
[b-l735bs6vnh] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-l735bs6vnh] .e-toolbar .e-input-group:focus-within,
[b-l735bs6vnh] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-l735bs6vnh] .e-toolbar .e-textbox .e-clear-icon,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-l735bs6vnh] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-l735bs6vnh] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-l735bs6vnh] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-l735bs6vnh 1s linear infinite;
}

@keyframes spin-b-l735bs6vnh {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-l735bs6vnh] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-l735bs6vnh] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-l735bs6vnh] .e-grid .e-row.e-selectionbackground,
[b-l735bs6vnh] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-l735bs6vnh] .e-grid .e-row.e-selectionbackground:hover,
[b-l735bs6vnh] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-l735bs6vnh] .e-grid .e-row.e-selectionbackground td:first-child,
[b-l735bs6vnh] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-l735bs6vnh] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-l735bs6vnh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-l735bs6vnh] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-l735bs6vnh] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-l735bs6vnh] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-l735bs6vnh] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-l735bs6vnh] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-l735bs6vnh] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-l735bs6vnh] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-l735bs6vnh] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-l735bs6vnh] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-l735bs6vnh] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-l735bs6vnh] {
    font-size: 12px;
}

.column-chooser-list[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-l735bs6vnh] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-l735bs6vnh]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-l735bs6vnh]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-l735bs6vnh] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-l735bs6vnh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-l735bs6vnh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-l735bs6vnh] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-l735bs6vnh] {
    background: #e1dfdd;
}

.btn-success[b-l735bs6vnh] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-l735bs6vnh] {
    background: #0b5c0b;
}

.btn i[b-l735bs6vnh] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-l735bs6vnh] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-l735bs6vnh] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-l735bs6vnh] {
    margin-bottom: 24px;
    animation: fadeInUp-b-l735bs6vnh 0.6s ease;
}

/* Info Box */
.info-box[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-l735bs6vnh] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-l735bs6vnh] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-l735bs6vnh] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-l735bs6vnh] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-l735bs6vnh] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-l735bs6vnh] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-l735bs6vnh] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-l735bs6vnh] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-l735bs6vnh] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-l735bs6vnh] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-l735bs6vnh {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-l735bs6vnh] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-l735bs6vnh] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-l735bs6vnh] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-empty-subtitle[b-l735bs6vnh] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-footer-left[b-l735bs6vnh] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/concrete/absents/AbsentsConcrete.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-ygar6goh48] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ygar6goh48] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ygar6goh48] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ygar6goh48] {
    transform: scale(0.98);
}

.header-right[b-ygar6goh48] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ygar6goh48] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-ygar6goh48] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-ygar6goh48] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-ygar6goh48] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* Grid container to fill available space */
[b-ygar6goh48] .e-grid {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Compact row height and font size */
[b-ygar6goh48] .e-grid .e-row {
    height: 28px !important;
}

[b-ygar6goh48] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-ygar6goh48] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-ygar6goh48] .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ygar6goh48] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-ygar6goh48] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ygar6goh48] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ygar6goh48] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ygar6goh48] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-ygar6goh48] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-ygar6goh48] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-ygar6goh48] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ygar6goh48] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ygar6goh48] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   ENHANCED SEARCH BAR STYLING - MATCHING ATTENDANCE CONCRETE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group,
[b-ygar6goh48] .e-toolbar .e-input-group.e-control-wrapper,
[b-ygar6goh48] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group .e-input,
[b-ygar6goh48] .e-toolbar .e-input-group .e-input,
[b-ygar6goh48] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-ygar6goh48] .e-toolbar .e-input-group:focus-within,
[b-ygar6goh48] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-ygar6goh48] .e-toolbar .e-textbox .e-input-group-icon,
[b-ygar6goh48] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-ygar6goh48] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-ygar6goh48 1s linear infinite;
}

@keyframes spin-b-ygar6goh48 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-ygar6goh48] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-ygar6goh48] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-ygar6goh48] .e-grid .e-row.e-selectionbackground,
[b-ygar6goh48] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-ygar6goh48] .e-grid .e-row.e-selectionbackground:hover,
[b-ygar6goh48] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-ygar6goh48] .e-grid .e-row.e-selectionbackground td:first-child,
[b-ygar6goh48] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-ygar6goh48] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-ygar6goh48] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-ygar6goh48] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-ygar6goh48] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ygar6goh48] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-ygar6goh48] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-ygar6goh48] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-ygar6goh48] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-ygar6goh48] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-ygar6goh48] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-ygar6goh48] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-ygar6goh48] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-ygar6goh48] {
    font-size: 12px;
}

.column-chooser-list[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-ygar6goh48] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-ygar6goh48] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-ygar6goh48]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-ygar6goh48]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-ygar6goh48] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ygar6goh48] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ygar6goh48] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ygar6goh48] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-ygar6goh48] {
    background: #e1dfdd;
}

.btn-success[b-ygar6goh48] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-ygar6goh48] {
    background: #0b5c0b;
}

.btn i[b-ygar6goh48] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-ygar6goh48] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-ygar6goh48] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-ygar6goh48] {
    margin-bottom: 24px;
    animation: fadeInUp-b-ygar6goh48 0.6s ease;
}

.step-title[b-ygar6goh48] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-ygar6goh48] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ygar6goh48] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ygar6goh48] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ygar6goh48] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-ygar6goh48] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ygar6goh48] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-ygar6goh48] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ygar6goh48] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ygar6goh48] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ygar6goh48] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ygar6goh48] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-ygar6goh48 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-ygar6goh48] {
        padding: 8px 16px;
    }

    .stats-container[b-ygar6goh48] {
        gap: 12px;
    }

    .stat-value[b-ygar6goh48] {
        font-size: 13px;
    }

    .stat-label[b-ygar6goh48] {
        font-size: 9px;
    }

    [b-ygar6goh48] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
        padding: 2px 12px !important;
    }

    [b-ygar6goh48] .assignment-wizard-sidebar,
    [b-ygar6goh48] .help-wizard-sidebar {
        width: 50% !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {

    /* Page Header - Stack Layout */
    .erp-page-header[b-ygar6goh48] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 12px;
    }

    .header-left[b-ygar6goh48] {
        width: 100%;
    }

    .header-right[b-ygar6goh48] {
        width: 100%;
    }

    .page-title[b-ygar6goh48] {
        font-size: 16px;
    }

    .page-title i[b-ygar6goh48] {
        font-size: 16px;
    }

    /* Stats Container - Full Width */
    .stats-container[b-ygar6goh48] {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
    }

    .stat-card[b-ygar6goh48] {
        flex: 1;
        justify-content: center;
    }

    .stat-value[b-ygar6goh48] {
        font-size: 14px;
    }

    .stat-label[b-ygar6goh48] {
        font-size: 10px;
    }

    /* Toolbar - Icon Only Mode */
    [b-ygar6goh48] .e-toolbar.e-control {
        margin: 3px 12px 1px 12px !important;
        padding: 2px 8px !important;
    }

    /* Hide button text, show only icons on mobile */
    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
        margin-right: 0 !important;
        font-size: 14px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 6px !important;
        min-width: auto !important;
    }

    /* Search Bar - Reduced Width */
    [b-ygar6goh48] .e-toolbar .e-textbox.e-input-group,
    [b-ygar6goh48] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
        min-width: 150px !important;
    }

    /* Wizards - Larger Width on Mobile */
    [b-ygar6goh48] .assignment-wizard-sidebar,
    [b-ygar6goh48] .help-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-ygar6goh48] {
        padding: 12px 16px;
    }

    .sidebar-title[b-ygar6goh48] {
        font-size: 18px;
    }

    .sidebar-title i[b-ygar6goh48] {
        font-size: 20px;
    }

    .sidebar-step-content[b-ygar6goh48] {
        padding: 16px;
    }

    .sidebar-footer[b-ygar6goh48] {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    /* Grid Adjustments */
    [b-ygar6goh48] .e-grid .e-row {
        height: 36px !important;
    }

    [b-ygar6goh48] .e-grid .e-row td {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    [b-ygar6goh48] .e-grid .e-gridheader .e-headercell {
        height: 36px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* Help Wizard - Mobile Adjustments */
    .step-title[b-ygar6goh48] {
        font-size: 20px;
    }

    .step-icon i[b-ygar6goh48] {
        font-size: 40px !important;
    }

    .feature-item[b-ygar6goh48] {
        padding: 12px;
    }

    .feature-item i[b-ygar6goh48] {
        font-size: 20px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {

    /* Page Header - More Compact */
    .erp-page-header[b-ygar6goh48] {
        padding: 8px 12px;
    }

    .page-title[b-ygar6goh48] {
        font-size: 14px;
    }

    .page-title i[b-ygar6goh48] {
        font-size: 14px;
    }

    .help-icon-btn[b-ygar6goh48] {
        font-size: 12px;
        padding: 2px 4px;
    }

    /* Stats Container - Stack Vertically */
    .stats-container[b-ygar6goh48] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .stat-card[b-ygar6goh48] {
        justify-content: flex-start;
        padding: 4px 0;
    }

    .stat-divider[b-ygar6goh48] {
        display: none;
    }

    .stat-value[b-ygar6goh48] {
        font-size: 16px;
    }

    .stat-label[b-ygar6goh48] {
        font-size: 11px;
    }

    /* Toolbar - Ultra Compact */
    [b-ygar6goh48] .e-toolbar.e-control {
        margin: 2px 8px 1px 8px !important;
        padding: 2px 4px !important;
        min-height: 32px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 4px !important;
        min-height: 28px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
        font-size: 12px !important;
    }

    /* Search Bar - Minimum Width */
    [b-ygar6goh48] .e-toolbar .e-textbox.e-input-group,
    [b-ygar6goh48] .e-toolbar .e-input-group.e-control-wrapper {
        width: 120px !important;
        min-width: 100px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-textbox.e-input-group .e-input {
        font-size: 11px !important;
        padding: 0px 6px !important;
    }

    /* Wizards - Full Width on Small Mobile */
    [b-ygar6goh48] .assignment-wizard-sidebar,
    [b-ygar6goh48] .help-wizard-sidebar {
        width: 95% !important;
    }

    .sidebar-header[b-ygar6goh48] {
        padding: 10px 12px;
    }

    .sidebar-title[b-ygar6goh48] {
        font-size: 16px;
        gap: 8px;
    }

    .sidebar-title i[b-ygar6goh48] {
        font-size: 18px;
    }

    .sidebar-close-btn[b-ygar6goh48] {
        width: 32px;
        height: 32px;
    }

    .sidebar-close-btn i[b-ygar6goh48] {
        font-size: 16px;
    }

    .sidebar-step-content[b-ygar6goh48] {
        padding: 12px;
    }

    .sidebar-footer[b-ygar6goh48] {
        padding: 10px 12px;
    }

    .btn[b-ygar6goh48] {
        padding: 8px 12px;
        font-size: 13px;
        min-width: 80px;
    }

    /* Grid - More Compact */
    [b-ygar6goh48] .e-grid .e-row {
        height: 40px !important;
    }

    [b-ygar6goh48] .e-grid .e-row td {
        padding: 6px !important;
        font-size: 11px !important;
    }

    [b-ygar6goh48] .e-grid .e-gridheader .e-headercell {
        height: 40px !important;
        padding: 6px !important;
        font-size: 11px !important;
    }

    /* Help Wizard - Small Mobile */
    .step-title[b-ygar6goh48] {
        font-size: 18px;
    }

    .step-description[b-ygar6goh48] {
        font-size: 13px;
    }

    .step-icon i[b-ygar6goh48] {
        font-size: 36px !important;
    }

    .feature-item[b-ygar6goh48] {
        padding: 10px;
        gap: 10px;
    }

    .feature-item i[b-ygar6goh48] {
        font-size: 18px;
    }

    .feature-item strong[b-ygar6goh48] {
        font-size: 13px;
    }

    .feature-item p[b-ygar6goh48] {
        font-size: 11px;
    }

    .example-step[b-ygar6goh48] {
        padding: 10px;
        gap: 10px;
    }

    .step-number[b-ygar6goh48] {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .use-case[b-ygar6goh48] {
        padding: 10px;
        gap: 10px;
    }

    .use-case i[b-ygar6goh48] {
        font-size: 18px;
    }

    .column-chooser-list[b-ygar6goh48] {
        max-height: calc(100vh - 300px);
    }

    .column-chooser-item[b-ygar6goh48] {
        padding: 8px 10px;
    }

    .wizard-progress[b-ygar6goh48] {
        font-size: 11px;
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-ygar6goh48] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/concrete/attendance/AttendanceConcrete.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-qn997bd4fg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-qn997bd4fg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-qn997bd4fg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-qn997bd4fg] {
    transform: scale(0.98);
}

.page-subtitle[b-qn997bd4fg] {
    display: none;
}

.header-right[b-qn997bd4fg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-qn997bd4fg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-qn997bd4fg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-qn997bd4fg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-qn997bd4fg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 20px 10px 20px;
    position: relative;
}

/* Grid container to fill available space */
[b-qn997bd4fg] .e-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-qn997bd4fg] .e-grid .e-row {
    height: 28px !important;
}

[b-qn997bd4fg] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-qn997bd4fg] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Ensure grid header stays below toolbar */
[b-qn997bd4fg] .e-grid .e-gridheader {
    z-index: 1 !important;
    position: relative !important;
}

/* Grid content scrolls internally */
[b-qn997bd4fg] .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-qn997bd4fg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 999 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Toolbar Items */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-qn997bd4fg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-qn997bd4fg] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-qn997bd4fg] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-qn997bd4fg] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-qn997bd4fg] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-qn997bd4fg] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group,
[b-qn997bd4fg] .e-toolbar .e-input-group.e-control-wrapper,
[b-qn997bd4fg] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group .e-input,
[b-qn997bd4fg] .e-toolbar .e-input-group .e-input,
[b-qn997bd4fg] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-qn997bd4fg] .e-toolbar .e-input-group:focus-within,
[b-qn997bd4fg] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-qn997bd4fg] .e-toolbar .e-textbox .e-input-group-icon,
[b-qn997bd4fg] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-qn997bd4fg] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-qn997bd4fg 1s linear infinite;
}

@keyframes spin-b-qn997bd4fg {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-qn997bd4fg] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-qn997bd4fg] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-qn997bd4fg] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-qn997bd4fg] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-qn997bd4fg] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-qn997bd4fg] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-qn997bd4fg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-qn997bd4fg] .e-grid .e-row.e-selectionbackground,
[b-qn997bd4fg] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-qn997bd4fg] .e-grid .e-row.e-selectionbackground:hover,
[b-qn997bd4fg] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-qn997bd4fg] .e-grid .e-row.e-selectionbackground td:first-child,
[b-qn997bd4fg] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-qn997bd4fg] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-qn997bd4fg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.sidebar-title[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-qn997bd4fg] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-qn997bd4fg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-qn997bd4fg] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-qn997bd4fg] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    padding: 24px;
    overflow-y: auto;
}

.wizard-step[b-qn997bd4fg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-qn997bd4fg] {
    margin-bottom: 24px;
}

.step-title[b-qn997bd4fg] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-qn997bd4fg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

.info-box[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.features-list[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-qn997bd4fg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-qn997bd4fg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.example-steps[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.example-step[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-qn997bd4fg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.example-step code[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

.use-cases[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-qn997bd4fg] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-qn997bd4fg] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-qn997bd4fg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-qn997bd4fg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.warning-box[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-qn997bd4fg] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

.dont-show-again[b-qn997bd4fg] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-qn997bd4fg] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sidebar-footer[b-qn997bd4fg] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.wizard-progress[b-qn997bd4fg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
}

/* Base Button Styling */
.btn[b-qn997bd4fg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-qn997bd4fg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn i[b-qn997bd4fg] {
    font-size: 12px;
}

.btn-cancel[b-qn997bd4fg] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-qn997bd4fg] {
    background: #e1dfdd;
}

.btn-next[b-qn997bd4fg] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-qn997bd4fg] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-qn997bd4fg] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-qn997bd4fg] {
    background: #0b5c0b;
}

.btn-secondary[b-qn997bd4fg] {
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #e1dfdd;
}

.btn-secondary:hover:not(:disabled)[b-qn997bd4fg] {
    background: #e1dfdd;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - specific styling */
[b-qn997bd4fg] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1001 !important;
}

[b-qn997bd4fg] .assignment-wizard-sidebar .e-sidebar {
    background: #ffffff;
}

.sidebar-step-content[b-qn997bd4fg] {
    flex: 1;
    overflow-y: auto;
}

/* Column Chooser Actions */
.column-chooser-actions[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.btn-link[b-qn997bd4fg] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-link:hover[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-link i[b-qn997bd4fg] {
    font-size: 11px;
}

/* Column Chooser List */
.column-chooser-list[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-qn997bd4fg] {
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* Scrollbar for column list */
.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar {
    width: 6px;
}

.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 3px;
}

.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 3px;
}

.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

/* Checkbox styling */
[b-qn997bd4fg] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[b-qn997bd4fg] .column-chooser-item .e-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    text-align: left;
    flex: 1;
}

/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .erp-page-header[b-qn997bd4fg] {
        padding: 8px 16px;
    }

    .stats-container[b-qn997bd4fg] {
        gap: 12px;
    }

    .stat-value[b-qn997bd4fg] {
        font-size: 13px;
    }

    .stat-label[b-qn997bd4fg] {
        font-size: 9px;
    }

    [b-qn997bd4fg] .e-toolbar.e-control {
        padding: 2px 16px !important;
        margin: 3px 16px 1px 16px !important;
    }

    .erp-page-content[b-qn997bd4fg] {
        padding: 10px 16px 10px 16px;
    }

    [b-qn997bd4fg] .help-wizard-sidebar,
    [b-qn997bd4fg] .assignment-wizard-sidebar {
        width: 50% !important;
        min-width: 320px;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .erp-page-header[b-qn997bd4fg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 12px;
    }

    .header-left[b-qn997bd4fg],
    .header-right[b-qn997bd4fg] {
        width: 100%;
    }

    .page-title[b-qn997bd4fg] {
        font-size: 16px;
    }

    .stats-container[b-qn997bd4fg] {
        width: 100%;
        justify-content: space-around;
        gap: 8px;
    }

    .stat-card[b-qn997bd4fg] {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .stat-value[b-qn997bd4fg] {
        font-size: 14px;
    }

    .stat-label[b-qn997bd4fg] {
        font-size: 9px;
    }

    [b-qn997bd4fg] .e-toolbar.e-control {
        padding: 2px 12px !important;
        margin: 3px 12px 1px 12px !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn {
        min-width: auto !important;
        padding: 0 8px !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group,
    [b-qn997bd4fg] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
    }

    .erp-page-content[b-qn997bd4fg] {
        padding: 8px 12px 8px 12px;
    }

    [b-qn997bd4fg] .help-wizard-sidebar,
    [b-qn997bd4fg] .assignment-wizard-sidebar {
        width: 90% !important;
        min-width: unset;
    }

    .sidebar-header[b-qn997bd4fg] {
        padding: 12px 16px;
    }

    .sidebar-title[b-qn997bd4fg] {
        font-size: 18px;
    }

    .sidebar-content[b-qn997bd4fg] {
        padding: 16px;
    }

    .sidebar-footer[b-qn997bd4fg] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .wizard-actions[b-qn997bd4fg] {
        width: 100%;
        justify-content: space-between;
    }

    .btn[b-qn997bd4fg] {
        flex: 1;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .erp-page-header[b-qn997bd4fg] {
        padding: 8px;
    }

    .page-title[b-qn997bd4fg] {
        font-size: 14px;
    }

    .page-title i[b-qn997bd4fg] {
        font-size: 14px;
    }

    .stat-divider[b-qn997bd4fg] {
        display: none;
    }

    .stats-container[b-qn997bd4fg] {
        gap: 12px;
    }

    [b-qn997bd4fg] .e-toolbar.e-control {
        padding: 2px 8px !important;
        margin: 3px 8px 1px 8px !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group,
    [b-qn997bd4fg] .e-toolbar .e-input-group.e-control-wrapper {
        width: 150px !important;
    }

    .erp-page-content[b-qn997bd4fg] {
        padding: 8px;
    }

    [b-qn997bd4fg] .help-wizard-sidebar,
    [b-qn997bd4fg] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    .sidebar-header[b-qn997bd4fg] {
        padding: 10px 12px;
    }

    .sidebar-title[b-qn997bd4fg] {
        font-size: 16px;
    }

    .sidebar-title i[b-qn997bd4fg] {
        font-size: 18px;
    }

    .sidebar-content[b-qn997bd4fg] {
        padding: 12px;
    }

    .step-title[b-qn997bd4fg] {
        font-size: 18px;
    }

    .step-description[b-qn997bd4fg] {
        font-size: 13px;
    }

    .btn[b-qn997bd4fg] {
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-qn997bd4fg] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/concrete/transactions/TransactionsConcrete.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-pytgkeub8j] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-pytgkeub8j] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-pytgkeub8j] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-pytgkeub8j] {
    transform: scale(0.98);
}

.page-subtitle[b-pytgkeub8j] {
    display: none;
}

.header-right[b-pytgkeub8j] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-pytgkeub8j] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-pytgkeub8j] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-pytgkeub8j] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-pytgkeub8j] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-pytgkeub8j] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-pytgkeub8j] .e-grid .e-row {
    height: 28px !important;
}

[b-pytgkeub8j] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-pytgkeub8j] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-pytgkeub8j] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-pytgkeub8j] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-pytgkeub8j] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-pytgkeub8j] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-pytgkeub8j] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-pytgkeub8j] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-pytgkeub8j] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-pytgkeub8j] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-pytgkeub8j] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-pytgkeub8j 1s linear infinite;
}

@keyframes spin-b-pytgkeub8j {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-pytgkeub8j] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-pytgkeub8j] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-pytgkeub8j] .e-grid .e-row.e-selectionbackground,
[b-pytgkeub8j] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-pytgkeub8j] .e-grid .e-row.e-selectionbackground:hover,
[b-pytgkeub8j] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-pytgkeub8j] .e-grid .e-row.e-selectionbackground td:first-child,
[b-pytgkeub8j] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group,
[b-pytgkeub8j] .e-toolbar .e-input-group.e-control-wrapper,
[b-pytgkeub8j] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group .e-input,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-input,
[b-pytgkeub8j] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-input::placeholder,
[b-pytgkeub8j] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-pytgkeub8j] .e-toolbar .e-input-group:focus-within,
[b-pytgkeub8j] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-pytgkeub8j] .e-toolbar .e-textbox .e-clear-icon,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-pytgkeub8j] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-pytgkeub8j] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-pytgkeub8j] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Sidebar header, content, footer already defined above */

/* Wizard Step Content */
.wizard-step[b-pytgkeub8j] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-pytgkeub8j] {
    margin-bottom: 24px;
    animation: fadeInUp-b-pytgkeub8j 0.6s ease;
}

/* Info Box */
.info-box[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-pytgkeub8j] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-pytgkeub8j] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-pytgkeub8j] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-pytgkeub8j] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-pytgkeub8j] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-pytgkeub8j] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-pytgkeub8j] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-pytgkeub8j] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-pytgkeub8j] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-pytgkeub8j] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-pytgkeub8j {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-pytgkeub8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-pytgkeub8j] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-pytgkeub8j] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-pytgkeub8j] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-pytgkeub8j] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-pytgkeub8j] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-pytgkeub8j] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-pytgkeub8j] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-pytgkeub8j] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-pytgkeub8j] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-pytgkeub8j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-pytgkeub8j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-pytgkeub8j] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-pytgkeub8j] {
    background: #e1dfdd;
}

.btn-success[b-pytgkeub8j] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-pytgkeub8j] {
    background: #0b5c0b;
}

.btn i[b-pytgkeub8j] {
    font-size: 14px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-pytgkeub8j] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column list container */
.column-list[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

/* Custom scrollbar for column list */
.column-list[b-pytgkeub8j]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Column item */
.column-item[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.column-item:hover[b-pytgkeub8j] {
    background: #f9f9f9;
    border-color: #0078d4;
    transform: translateX(2px);
}

.column-item input[type="checkbox"][b-pytgkeub8j] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0078d4;
}

.column-item label[b-pytgkeub8j] {
    flex: 1;
    font-size: 14px;
    color: #242424;
    cursor: pointer;
    user-select: none;
}

/* Bulk actions */
.bulk-actions[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.bulk-action-btn[b-pytgkeub8j] {
    flex: 1;
    padding: 8px 16px;
    background: #f3f2f1;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    color: #323130;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bulk-action-btn:hover[b-pytgkeub8j] {
    background: #e1dfdd;
    border-color: #0078d4;
}

.bulk-action-btn i[b-pytgkeub8j] {
    margin-right: 6px;
    font-size: 12px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-pytgkeub8j] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-pytgkeub8j] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-pytgkeub8j] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-pytgkeub8j] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-pytgkeub8j] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-pytgkeub8j] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-pytgkeub8j]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Devices (320px - 767px) */
@media screen and (max-width: 767px) {

    /* Page Header - Stack Stats */
    .erp-page-header[b-pytgkeub8j] {
        flex-direction: column;
        gap: 16px;
        padding: 12px 16px;
    }

    .header-left[b-pytgkeub8j] {
        width: 100%;
    }

    .page-title[b-pytgkeub8j] {
        font-size: 18px;
    }

    .header-right[b-pytgkeub8j] {
        width: 100%;
    }

    .stats-container[b-pytgkeub8j] {
        justify-content: flex-start;
        gap: 12px;
    }

    .stat-card[b-pytgkeub8j] {
        min-width: auto;
    }

    .stat-value[b-pytgkeub8j] {
        font-size: 20px;
    }

    .stat-label[b-pytgkeub8j] {
        font-size: 10px;
    }

    /* Toolbar - Stack Buttons */
    [b-pytgkeub8j] .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }

    [b-pytgkeub8j] .e-toolbar .e-toolbar-item {
        margin: 4px;
    }

    /* Search Bar - Full Width */
    [b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid - Reduce Padding */
    .erp-page-content[b-pytgkeub8j] {
        padding: 8px;
    }

    [b-pytgkeub8j] .e-grid {
        font-size: 12px;
    }

    [b-pytgkeub8j] .e-grid .e-headercell {
        padding: 8px 4px;
        font-size: 11px;
    }

    [b-pytgkeub8j] .e-grid .e-rowcell {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* Wizards - Full Width */
    [b-pytgkeub8j] .column-chooser-sidebar,
    [b-pytgkeub8j] .help-wizard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-header[b-pytgkeub8j] {
        padding: 12px 16px;
    }

    .sidebar-title[b-pytgkeub8j] {
        font-size: 16px;
    }

    .sidebar-step-content[b-pytgkeub8j] {
        padding: 16px;
    }

    .step-title[b-pytgkeub8j] {
        font-size: 16px;
    }

    .step-description[b-pytgkeub8j] {
        font-size: 13px;
    }

    /* Buttons - Larger Tap Targets */
    .btn[b-pytgkeub8j] {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .sidebar-close-btn[b-pytgkeub8j] {
        width: 44px;
        height: 44px;
    }

    /* Column List - Better Spacing */
    .column-item[b-pytgkeub8j] {
        padding: 14px 12px;
    }

    .column-item input[type="checkbox"][b-pytgkeub8j] {
        width: 20px;
        height: 20px;
    }

    .column-item label[b-pytgkeub8j] {
        font-size: 14px;
    }

    /* Feature Items - Stack Icons */
    .feature-item[b-pytgkeub8j] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .feature-item i[b-pytgkeub8j] {
        margin-bottom: 8px;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Page Header - Adjust Spacing */
    .erp-page-header[b-pytgkeub8j] {
        padding: 16px 20px;
    }

    .page-title[b-pytgkeub8j] {
        font-size: 20px;
    }

    .stats-container[b-pytgkeub8j] {
        gap: 16px;
    }

    /* Search Bar - Responsive Width */
    [b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
        width: 250px !important;
        max-width: 250px !important;
    }

    /* Wizards - Responsive Width */
    [b-pytgkeub8j] .column-chooser-sidebar,
    [b-pytgkeub8j] .help-wizard-sidebar {
        width: 500px !important;
        max-width: 90vw !important;
    }

    /* Grid - Adjust Font Size */
    [b-pytgkeub8j] .e-grid {
        font-size: 13px;
    }

    [b-pytgkeub8j] .e-grid .e-headercell {
        font-size: 12px;
    }

    [b-pytgkeub8j] .e-grid .e-rowcell {
        font-size: 13px;
    }
}

/* Desktop Devices (1025px+) */
@media screen and (min-width: 1025px) {
    /* Default styles already optimized for desktop */

    /* Wizards - Fixed Width */
    [b-pytgkeub8j] .column-chooser-sidebar,
    [b-pytgkeub8j] .help-wizard-sidebar {
        width: 600px !important;
        max-width: 600px !important;
    }

    /* Search Bar - Fixed Width */
    [b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger Tap Targets */
    .btn[b-pytgkeub8j],
    .action-link[b-pytgkeub8j],
    .sidebar-close-btn[b-pytgkeub8j],
    .help-icon-btn[b-pytgkeub8j] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger Checkboxes */
    .column-item input[type="checkbox"][b-pytgkeub8j] {
        width: 22px;
        height: 22px;
    }

    /* Remove Hover Effects (Not Applicable on Touch) */
    .column-item:hover[b-pytgkeub8j],
    .feature-item:hover[b-pytgkeub8j],
    .btn:hover[b-pytgkeub8j] {
        transform: none;
    }
}

/* Landscape Orientation on Mobile */
@media screen and (max-width: 767px) and (orientation: landscape) {

    /* Reduce Header Height */
    .erp-page-header[b-pytgkeub8j] {
        padding: 8px 16px;
    }

    .page-title[b-pytgkeub8j] {
        font-size: 16px;
    }

    .stats-container[b-pytgkeub8j] {
        gap: 8px;
    }

    .stat-value[b-pytgkeub8j] {
        font-size: 18px;
    }

    /* Wizards - Reduce Height */
    .sidebar-header[b-pytgkeub8j] {
        padding: 10px 16px;
    }

    .sidebar-step-content[b-pytgkeub8j] {
        padding: 12px 16px;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper Borders */
    .stat-card[b-pytgkeub8j],
    .column-item[b-pytgkeub8j],
    .feature-item[b-pytgkeub8j] {
        border-width: 0.5px;
    }
}

/* Print Styles */
@media print {

    /* Hide UI Elements */
    .e-toolbar[b-pytgkeub8j],
    .sidebar-header[b-pytgkeub8j],
    .sidebar-footer[b-pytgkeub8j],
    .help-icon-btn[b-pytgkeub8j] {
        display: none !important;
    }

    /* Optimize Grid for Print */
    .erp-page-content[b-pytgkeub8j] {
        padding: 0;
    }

    [b-pytgkeub8j] .e-grid {
        border: 1px solid #000;
    }

    [b-pytgkeub8j] .e-grid .e-headercell,
    [b-pytgkeub8j] .e-grid .e-rowcell {
        border: 1px solid #ccc;
        padding: 4px;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-pytgkeub8j] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-pytgkeub8j] {
    color: #e0e0e0;
}

.att-footer-left[b-pytgkeub8j] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/contracting/absents/AbsentsContracting.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-e8hlpuwmm7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-e8hlpuwmm7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-e8hlpuwmm7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-e8hlpuwmm7] {
    transform: scale(0.98);
}

.page-subtitle[b-e8hlpuwmm7] {
    display: none;
}

.header-right[b-e8hlpuwmm7] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-e8hlpuwmm7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-e8hlpuwmm7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-e8hlpuwmm7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-e8hlpuwmm7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-e8hlpuwmm7] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-e8hlpuwmm7] .e-grid .e-row {
    height: 28px !important;
}

[b-e8hlpuwmm7] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-e8hlpuwmm7] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-e8hlpuwmm7] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-e8hlpuwmm7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-e8hlpuwmm7] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-e8hlpuwmm7] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-e8hlpuwmm7] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-e8hlpuwmm7] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-e8hlpuwmm7] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   ENHANCED SEARCH BAR STYLING - MATCHING ATTENDANCE CONCRETE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group,
[b-e8hlpuwmm7] .e-toolbar .e-input-group.e-control-wrapper,
[b-e8hlpuwmm7] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group .e-input,
[b-e8hlpuwmm7] .e-toolbar .e-input-group .e-input,
[b-e8hlpuwmm7] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-e8hlpuwmm7] .e-toolbar .e-input-group:focus-within,
[b-e8hlpuwmm7] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-e8hlpuwmm7] .e-toolbar .e-textbox .e-input-group-icon,
[b-e8hlpuwmm7] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-e8hlpuwmm7] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-e8hlpuwmm7 1s linear infinite;
}

@keyframes spin-b-e8hlpuwmm7 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-e8hlpuwmm7] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-e8hlpuwmm7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-e8hlpuwmm7] .e-grid .e-row.e-selectionbackground,
[b-e8hlpuwmm7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-e8hlpuwmm7] .e-grid .e-row.e-selectionbackground:hover,
[b-e8hlpuwmm7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-e8hlpuwmm7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-e8hlpuwmm7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-e8hlpuwmm7] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-e8hlpuwmm7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-e8hlpuwmm7] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-e8hlpuwmm7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-e8hlpuwmm7] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-e8hlpuwmm7] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-e8hlpuwmm7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-e8hlpuwmm7] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-e8hlpuwmm7] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-e8hlpuwmm7] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-e8hlpuwmm7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-e8hlpuwmm7] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-e8hlpuwmm7] {
    font-size: 12px;
}

.column-chooser-list[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-e8hlpuwmm7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-e8hlpuwmm7]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-e8hlpuwmm7]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-e8hlpuwmm7] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-e8hlpuwmm7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-e8hlpuwmm7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-e8hlpuwmm7] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-e8hlpuwmm7] {
    background: #e1dfdd;
}

.btn-success[b-e8hlpuwmm7] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-e8hlpuwmm7] {
    background: #0b5c0b;
}

.btn i[b-e8hlpuwmm7] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-e8hlpuwmm7] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-e8hlpuwmm7] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-e8hlpuwmm7] {
    margin-bottom: 24px;
    animation: fadeInUp-b-e8hlpuwmm7 0.6s ease;
}

.step-title[b-e8hlpuwmm7] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-e8hlpuwmm7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-e8hlpuwmm7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-e8hlpuwmm7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-e8hlpuwmm7] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-e8hlpuwmm7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-e8hlpuwmm7] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-e8hlpuwmm7] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-e8hlpuwmm7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-e8hlpuwmm7] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-e8hlpuwmm7] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-e8hlpuwmm7] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-e8hlpuwmm7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-e8hlpuwmm7] {
        padding: 8px 16px;
    }

    .page-title[b-e8hlpuwmm7] {
        font-size: 13px;
    }

    .stat-value[b-e8hlpuwmm7] {
        font-size: 13px;
    }

    .stat-label[b-e8hlpuwmm7] {
        font-size: 9px;
    }

    [b-e8hlpuwmm7] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
    }

    /* Wizards take 50% width on tablet */
    [b-e8hlpuwmm7] .assignment-wizard-sidebar,
    [b-e8hlpuwmm7] .help-wizard-sidebar {
        width: 50% !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .erp-page-header[b-e8hlpuwmm7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 12px;
    }

    .header-left[b-e8hlpuwmm7] {
        width: 100%;
    }

    .header-right[b-e8hlpuwmm7] {
        width: 100%;
    }

    .stats-container[b-e8hlpuwmm7] {
        width: 100%;
        justify-content: flex-start;
    }

    .page-title[b-e8hlpuwmm7] {
        font-size: 12px;
    }

    /* Toolbar - Icon only mode for mobile */
    [b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 6px !important;
        min-width: auto !important;
    }

    [b-e8hlpuwmm7] .e-toolbar.e-control {
        padding: 2px 12px !important;
        margin: 3px 12px 1px 12px !important;
    }

    /* Search bar smaller on mobile */
    [b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group,
    [b-e8hlpuwmm7] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
    }

    /* Wizards take 90% width on mobile */
    [b-e8hlpuwmm7] .assignment-wizard-sidebar,
    [b-e8hlpuwmm7] .help-wizard-sidebar {
        width: 90% !important;
    }

    /* Grid rows taller for better touch interaction */
    [b-e8hlpuwmm7] .e-grid .e-row {
        height: 36px !important;
    }

    [b-e8hlpuwmm7] .e-grid .e-row td {
        padding: 4px 8px !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .erp-page-header[b-e8hlpuwmm7] {
        padding: 6px 8px;
    }

    .page-title[b-e8hlpuwmm7] {
        font-size: 11px;
    }

    .stats-container[b-e8hlpuwmm7] {
        flex-direction: column;
        gap: 8px;
    }

    .stat-card[b-e8hlpuwmm7] {
        width: 100%;
    }

    .stat-divider[b-e8hlpuwmm7] {
        display: none;
    }

    /* Ultra compact toolbar */
    [b-e8hlpuwmm7] .e-toolbar.e-control {
        padding: 2px 8px !important;
        margin: 3px 8px 1px 8px !important;
    }

    [b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 4px !important;
    }

    /* Search bar even smaller */
    [b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group,
    [b-e8hlpuwmm7] .e-toolbar .e-input-group.e-control-wrapper {
        width: 150px !important;
    }

    /* Wizards take 95% width on small mobile */
    [b-e8hlpuwmm7] .assignment-wizard-sidebar,
    [b-e8hlpuwmm7] .help-wizard-sidebar {
        width: 95% !important;
    }

    /* Grid rows even taller for touch */
    [b-e8hlpuwmm7] .e-grid .e-row {
        height: 40px !important;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-e8hlpuwmm7] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/contracting/attendance/AttendanceContracting.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-7gquzzaxap] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-7gquzzaxap] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-7gquzzaxap] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-7gquzzaxap] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-7gquzzaxap] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-7gquzzaxap] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-7gquzzaxap] {
    transform: scale(0.98);
}

.page-subtitle[b-7gquzzaxap] {
    display: none;
}

.header-right[b-7gquzzaxap] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-7gquzzaxap] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-7gquzzaxap] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-7gquzzaxap] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-7gquzzaxap] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-7gquzzaxap] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* Grid container to fill available space */
[b-7gquzzaxap] .e-grid {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-7gquzzaxap] .e-grid .e-row {
    height: 28px !important;
}

[b-7gquzzaxap] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-7gquzzaxap] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-7gquzzaxap] .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-7gquzzaxap] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-7gquzzaxap] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-7gquzzaxap] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-7gquzzaxap] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-7gquzzaxap] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7gquzzaxap] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7gquzzaxap] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-7gquzzaxap] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7gquzzaxap] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7gquzzaxap] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-7gquzzaxap] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-7gquzzaxap] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-7gquzzaxap] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-7gquzzaxap] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-7gquzzaxap] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-7gquzzaxap] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-7gquzzaxap] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-7gquzzaxap] .e-grid .e-row.e-selectionbackground,
[b-7gquzzaxap] .e-grid .e-row[aria-selected=\"true\"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-7gquzzaxap] .e-grid .e-row.e-selectionbackground:hover,
[b-7gquzzaxap] .e-grid .e-row[aria-selected=\"true\"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-7gquzzaxap] .e-grid .e-row.e-selectionbackground td:first-child,
[b-7gquzzaxap] .e-grid .e-row[aria-selected=\"true\"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group,
[b-7gquzzaxap] .e-toolbar .e-input-group.e-control-wrapper,
[b-7gquzzaxap] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group .e-input,
[b-7gquzzaxap] .e-toolbar .e-input-group .e-input,
[b-7gquzzaxap] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-7gquzzaxap] .e-toolbar .e-input-group:focus-within,
[b-7gquzzaxap] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-7gquzzaxap] .e-toolbar .e-textbox .e-input-group-icon,
[b-7gquzzaxap] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - specific styling */
[b-7gquzzaxap] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1001 !important;
}

[b-7gquzzaxap] .assignment-wizard-sidebar .e-sidebar {
    background: #ffffff;
}

.sidebar-header[b-7gquzzaxap] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-7gquzzaxap] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-7gquzzaxap] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-7gquzzaxap] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-7gquzzaxap] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-7gquzzaxap] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
}

.sidebar-step-content[b-7gquzzaxap] {
    flex: 1;
    overflow-y: auto;
}

.wizard-step[b-7gquzzaxap] {
    text-align: center;
    padding: 20px;
}

.step-title[b-7gquzzaxap] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-7gquzzaxap] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Column Chooser Actions */
.column-chooser-actions[b-7gquzzaxap] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.btn-link[b-7gquzzaxap] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-link:hover[b-7gquzzaxap] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-link i[b-7gquzzaxap] {
    font-size: 11px;
}

/* Column Chooser List */
.column-chooser-list[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-7gquzzaxap] {
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-7gquzzaxap] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* Scrollbar for column list */
.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar {
    width: 6px;
}

.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 3px;
}

.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 3px;
}

.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

/* Checkbox styling */
[b-7gquzzaxap] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
}

[b-7gquzzaxap] .column-chooser-item .e-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.sidebar-footer[b-7gquzzaxap] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.btn[b-7gquzzaxap] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-7gquzzaxap] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn i[b-7gquzzaxap] {
    font-size: 12px;
}

.btn-secondary[b-7gquzzaxap] {
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #e1dfdd;
}

.btn-secondary:hover:not(:disabled)[b-7gquzzaxap] {
    background: #e1dfdd;
}

.btn-success[b-7gquzzaxap] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-7gquzzaxap] {
    background: #0b5c0b;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-7gquzzaxap] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.wizard-step[b-7gquzzaxap] {
    animation: fadeInUp-b-7gquzzaxap 0.4s ease;
}

.step-icon[b-7gquzzaxap] {
    text-align: center;
    margin-bottom: 24px;
}

.info-box[b-7gquzzaxap] {
    background: #f0f7fc;
    border-left: 4px solid #0078d4;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.info-box i[b-7gquzzaxap] {
    color: #0078d4;
    font-size: 20px;
    flex-shrink: 0;
}

.features-list[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.feature-item[b-7gquzzaxap] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: all 0.2s;
}

.feature-item:hover[b-7gquzzaxap] {
    background: #f0f0f0;
    transform: translateX(4px);
}

.feature-item i[b-7gquzzaxap] {
    color: #0078d4;
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-7gquzzaxap] {
    display: block;
    margin-bottom: 4px;
    color: #242424;
}

.feature-item p[b-7gquzzaxap] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.example-steps[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-7gquzzaxap] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
}

.step-number[b-7gquzzaxap] {
    width: 32px;
    height: 32px;
    background: #0078d4;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.use-cases[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-7gquzzaxap] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
}

.use-case-good[b-7gquzzaxap] {
    background: linear-gradient(135deg, #f0f9f0 0%, #e6f4e6 100%);
    border-left: 4px solid #107c10;
}

.use-case i[b-7gquzzaxap] {
    font-size: 20px;
    flex-shrink: 0;
}

\n .use-case-good i[b-7gquzzaxap] {
    color: #107c10;
}

.use-case strong[b-7gquzzaxap] {
    display: block;
    margin-bottom: 4px;
    color: #242424;
}

.use-case p[b-7gquzzaxap] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.warning-box[b-7gquzzaxap] {
    background: #fff4e5;
    border-left: 4px solid #f7630c;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.warning-box i[b-7gquzzaxap] {
    color: #f7630c;
    font-size: 20px;
    flex-shrink: 0;
}

.dont-show-again[b-7gquzzaxap] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.dont-show-again label[b-7gquzzaxap] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #605e5c;
    font-size: 13px;
}

.wizard-progress[b-7gquzzaxap] {
    color: #605e5c;
    font-size: 13px;
    font-weight: 500;
}

.wizard-actions[b-7gquzzaxap] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-7gquzzaxap] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-7gquzzaxap] {
    background: #e1dfdd;
}

.btn-next[b-7gquzzaxap] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-7gquzzaxap] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* Animations */
@keyframes fadeInUp-b-7gquzzaxap {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .erp-page-header[b-7gquzzaxap] {
        padding: 8px 16px;
    }

    .stats-container[b-7gquzzaxap] {
        gap: 12px;
    }

    .stat-value[b-7gquzzaxap] {
        font-size: 13px;
    }

    .stat-label[b-7gquzzaxap] {
        font-size: 9px;
    }

    [b-7gquzzaxap] .e-toolbar.e-control {
        padding: 2px 16px !important;
        margin: 3px 16px 1px 16px !important;
    }

    .erp-page-content[b-7gquzzaxap] {
        padding: 10px 16px 10px 16px;
    }

    /* Wizards - 50% width on tablet */
    [b-7gquzzaxap] .help-wizard-sidebar,
    [b-7gquzzaxap] .assignment-wizard-sidebar {
        width: 50% !important;
        min-width: 320px;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {

    /* Header - Stack vertically */
    .erp-page-header[b-7gquzzaxap] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 12px;
    }

    .header-left[b-7gquzzaxap],
    .header-right[b-7gquzzaxap] {
        width: 100%;
    }

    .page-title[b-7gquzzaxap] {
        font-size: 16px;
    }

    /* Stats - Compact layout */
    .stats-container[b-7gquzzaxap] {
        width: 100%;
        justify-content: space-around;
        gap: 8px;
    }

    .stat-card[b-7gquzzaxap] {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .stat-value[b-7gquzzaxap] {
        font-size: 14px;
    }

    .stat-label[b-7gquzzaxap] {
        font-size: 9px;
    }

    /* Toolbar - Icons only on mobile */
    [b-7gquzzaxap] .e-toolbar.e-control {
        padding: 2px 12px !important;
        margin: 3px 12px 1px 12px !important;
    }

    [b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn {
        min-width: auto !important;
        padding: 0 8px !important;
    }

    /* Search box - Smaller on mobile */
    [b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group,
    [b-7gquzzaxap] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
    }

    /* Page content */
    .erp-page-content[b-7gquzzaxap] {
        padding: 8px 12px 8px 12px;
    }

    /* Wizards - 90% width on mobile */
    [b-7gquzzaxap] .help-wizard-sidebar,
    [b-7gquzzaxap] .assignment-wizard-sidebar {
        width: 90% !important;
        min-width: unset;
    }

    .sidebar-header[b-7gquzzaxap] {
        padding: 12px 16px;
    }

    .sidebar-title[b-7gquzzaxap] {
        font-size: 18px;
    }

    .sidebar-content[b-7gquzzaxap] {
        padding: 16px;
    }

    .sidebar-footer[b-7gquzzaxap] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .wizard-actions[b-7gquzzaxap] {
        width: 100%;
        justify-content: space-between;
    }

    .btn[b-7gquzzaxap] {
        flex: 1;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .erp-page-header[b-7gquzzaxap] {
        padding: 8px;
    }

    .page-title[b-7gquzzaxap] {
        font-size: 14px;
    }

    .page-title i[b-7gquzzaxap] {
        font-size: 14px;
    }

    /* Stats - Hide dividers on very small screens */
    .stat-divider[b-7gquzzaxap] {
        display: none;
    }

    .stats-container[b-7gquzzaxap] {
        gap: 12px;
    }

    /* Toolbar */
    [b-7gquzzaxap] .e-toolbar.e-control {
        padding: 2px 8px !important;
        margin: 3px 8px 1px 8px !important;
    }

    /* Search - Even smaller */
    [b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group,
    [b-7gquzzaxap] .e-toolbar .e-input-group.e-control-wrapper {
        width: 150px !important;
    }

    /* Page content */
    .erp-page-content[b-7gquzzaxap] {
        padding: 8px;
    }

    /* Wizards - 95% width on very small screens */
    [b-7gquzzaxap] .help-wizard-sidebar,
    [b-7gquzzaxap] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    .sidebar-header[b-7gquzzaxap] {
        padding: 10px 12px;
    }

    .sidebar-title[b-7gquzzaxap] {
        font-size: 16px;
    }

    .sidebar-title i[b-7gquzzaxap] {
        font-size: 18px;
    }

    .sidebar-content[b-7gquzzaxap] {
        padding: 12px;
    }

    .step-title[b-7gquzzaxap] {
        font-size: 18px;
    }

    .step-description[b-7gquzzaxap] {
        font-size: 13px;
    }

    .btn[b-7gquzzaxap] {
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* ========================================
   LOADING SPINNER CUSTOMIZATION - Force White Background
   ======================================== */
/* ========================================
   LOADING & ERROR CONTAINERS
   ======================================== */
.loading-container[b-7gquzzaxap],
.error-container[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2);
    background: #ffffff;
}

.loading-container .spinner[b-7gquzzaxap],
.loading-container .spinner[b-7gquzzaxap]::before,
.loading-container .spinner[b-7gquzzaxap]::after {
    display: inline-block;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin-b-7gquzzaxap 1s linear infinite;
}

@keyframes spin-b-7gquzzaxap {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-7gquzzaxap],
.error-container p[b-7gquzzaxap] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.error-container i[b-7gquzzaxap] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-7gquzzaxap] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/contracting/transactions/TransactionsContracting.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-th51h3fbep] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-th51h3fbep] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-th51h3fbep] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-th51h3fbep] {
    transform: scale(0.98);
}

.page-subtitle[b-th51h3fbep] {
    display: none;
}

.header-right[b-th51h3fbep] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-th51h3fbep] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-th51h3fbep] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-th51h3fbep] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-th51h3fbep] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-th51h3fbep] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-th51h3fbep] .e-grid .e-row {
    height: 28px !important;
}

[b-th51h3fbep] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-th51h3fbep] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-th51h3fbep] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-th51h3fbep] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-th51h3fbep] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-th51h3fbep] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-th51h3fbep] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-th51h3fbep] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-th51h3fbep] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-th51h3fbep] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-th51h3fbep] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-th51h3fbep] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-th51h3fbep] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-th51h3fbep] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-th51h3fbep] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-th51h3fbep] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group,
[b-th51h3fbep] .e-toolbar .e-input-group.e-control-wrapper,
[b-th51h3fbep] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group .e-input,
[b-th51h3fbep] .e-toolbar .e-input-group .e-input,
[b-th51h3fbep] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-th51h3fbep] .e-toolbar .e-input-group .e-input::placeholder,
[b-th51h3fbep] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-th51h3fbep] .e-toolbar .e-input-group:focus-within,
[b-th51h3fbep] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-th51h3fbep] .e-toolbar .e-textbox .e-clear-icon,
[b-th51h3fbep] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-th51h3fbep] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-th51h3fbep] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-th51h3fbep] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-th51h3fbep] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-th51h3fbep 1s linear infinite;
}

@keyframes spin-b-th51h3fbep {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-th51h3fbep] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-th51h3fbep] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-th51h3fbep] .e-grid .e-row.e-selectionbackground,
[b-th51h3fbep] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-th51h3fbep] .e-grid .e-row.e-selectionbackground:hover,
[b-th51h3fbep] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-th51h3fbep] .e-grid .e-row.e-selectionbackground td:first-child,
[b-th51h3fbep] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-th51h3fbep] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-th51h3fbep] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-th51h3fbep] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-th51h3fbep] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-th51h3fbep] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-th51h3fbep] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-th51h3fbep] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-th51h3fbep] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-th51h3fbep] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-th51h3fbep] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-th51h3fbep] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-th51h3fbep] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-th51h3fbep] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-th51h3fbep] {
    background: #e1dfdd;
}

.btn-success[b-th51h3fbep] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-th51h3fbep] {
    background: #0b5c0b;
}

.btn i[b-th51h3fbep] {
    font-size: 14px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-th51h3fbep] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-th51h3fbep] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-th51h3fbep] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-th51h3fbep] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-th51h3fbep] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-th51h3fbep] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-th51h3fbep]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-th51h3fbep]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-th51h3fbep]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-th51h3fbep]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-th51h3fbep] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-th51h3fbep] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-th51h3fbep] {
    margin-bottom: 24px;
    animation: fadeInUp-b-th51h3fbep 0.6s ease;
}

/* Info Box */
.info-box[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-th51h3fbep] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-th51h3fbep] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-th51h3fbep] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-th51h3fbep] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-th51h3fbep] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-th51h3fbep] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-th51h3fbep] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-th51h3fbep] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-th51h3fbep] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-th51h3fbep] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-th51h3fbep {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-th51h3fbep] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-th51h3fbep] {
    color: #e0e0e0;
}

.att-footer-left[b-th51h3fbep] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-th51h3fbep] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/mobco/absents/AbsentsMOBCO.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-o2xzrywrtl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-o2xzrywrtl] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-o2xzrywrtl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-o2xzrywrtl] {
    transform: scale(0.98);
}

.page-subtitle[b-o2xzrywrtl] {
    display: none;
}

.header-right[b-o2xzrywrtl] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-o2xzrywrtl] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-o2xzrywrtl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-o2xzrywrtl] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-o2xzrywrtl] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-o2xzrywrtl] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-o2xzrywrtl] .e-grid .e-row {
    height: 28px !important;
}

[b-o2xzrywrtl] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-o2xzrywrtl] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-o2xzrywrtl] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-o2xzrywrtl] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-o2xzrywrtl] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-o2xzrywrtl] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-o2xzrywrtl] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-o2xzrywrtl] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-o2xzrywrtl] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-o2xzrywrtl] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group,
[b-o2xzrywrtl] .e-toolbar .e-input-group.e-control-wrapper,
[b-o2xzrywrtl] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group .e-input,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-input,
[b-o2xzrywrtl] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-input::placeholder,
[b-o2xzrywrtl] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-o2xzrywrtl] .e-toolbar .e-input-group:focus-within,
[b-o2xzrywrtl] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-o2xzrywrtl] .e-toolbar .e-textbox .e-clear-icon,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-o2xzrywrtl] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-o2xzrywrtl] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-o2xzrywrtl] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-o2xzrywrtl] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-o2xzrywrtl] .e-grid .e-row.e-selectionbackground,
[b-o2xzrywrtl] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-o2xzrywrtl] .e-grid .e-row.e-selectionbackground:hover,
[b-o2xzrywrtl] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-o2xzrywrtl] .e-grid .e-row.e-selectionbackground td:first-child,
[b-o2xzrywrtl] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-o2xzrywrtl] .assignment-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-o2xzrywrtl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-o2xzrywrtl] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-o2xzrywrtl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-o2xzrywrtl] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-o2xzrywrtl] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-o2xzrywrtl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-o2xzrywrtl] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-o2xzrywrtl] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-o2xzrywrtl] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-o2xzrywrtl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-o2xzrywrtl] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-o2xzrywrtl] {
    font-size: 12px;
}

.column-chooser-list[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-o2xzrywrtl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-o2xzrywrtl]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-o2xzrywrtl]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-o2xzrywrtl] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-o2xzrywrtl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-o2xzrywrtl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-o2xzrywrtl] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-o2xzrywrtl] {
    background: #e1dfdd;
}

.btn-success[b-o2xzrywrtl] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-o2xzrywrtl] {
    background: #0b5c0b;
}

.btn i[b-o2xzrywrtl] {
    font-size: 14px;
}
/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-o2xzrywrtl] .help-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-o2xzrywrtl] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-o2xzrywrtl] {
    margin-bottom: 24px;
    animation: fadeInUp-b-o2xzrywrtl 0.6s ease;
}

/* Info Box */
.info-box[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-o2xzrywrtl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-o2xzrywrtl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-o2xzrywrtl] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-o2xzrywrtl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-o2xzrywrtl] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-o2xzrywrtl] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-o2xzrywrtl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-o2xzrywrtl] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-o2xzrywrtl] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-o2xzrywrtl] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-o2xzrywrtl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-o2xzrywrtl] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-o2xzrywrtl] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-o2xzrywrtl] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-empty-subtitle[b-o2xzrywrtl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-footer-left[b-o2xzrywrtl] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/mobco/attendance/AttendanceMOBCO.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-jvph61c2j3] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jvph61c2j3] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jvph61c2j3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jvph61c2j3] {
    transform: scale(0.98);
}

.page-subtitle[b-jvph61c2j3] {
    display: none;
}

.header-right[b-jvph61c2j3] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jvph61c2j3] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jvph61c2j3] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jvph61c2j3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jvph61c2j3] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-jvph61c2j3] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-jvph61c2j3] .e-grid .e-row {
    height: 28px !important;
}

[b-jvph61c2j3] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-jvph61c2j3] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-jvph61c2j3] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-jvph61c2j3] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-jvph61c2j3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-jvph61c2j3] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-jvph61c2j3] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-jvph61c2j3] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jvph61c2j3] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jvph61c2j3] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   ENHANCED SEARCH BAR STYLING - MATCHING ABSENTS CONTRACTING
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-jvph61c2j3] .e-toolbar .e-textbox.e-input-group,
[b-jvph61c2j3] .e-toolbar .e-input-group.e-control-wrapper,
[b-jvph61c2j3] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jvph61c2j3] .e-toolbar .e-textbox.e-input-group .e-input,
[b-jvph61c2j3] .e-toolbar .e-input-group .e-input,
[b-jvph61c2j3] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-jvph61c2j3] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-jvph61c2j3] .e-toolbar .e-input-group:focus-within,
[b-jvph61c2j3] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-jvph61c2j3] .e-toolbar .e-textbox .e-input-group-icon,
[b-jvph61c2j3] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-jvph61c2j3] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-jvph61c2j3] .e-grid .e-row.e-selectionbackground,
[b-jvph61c2j3] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-jvph61c2j3] .e-grid .e-row.e-selectionbackground:hover,
[b-jvph61c2j3] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-jvph61c2j3] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jvph61c2j3] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-jvph61c2j3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-jvph61c2j3] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-jvph61c2j3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-jvph61c2j3] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-jvph61c2j3] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-jvph61c2j3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-jvph61c2j3] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-jvph61c2j3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jvph61c2j3] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jvph61c2j3] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jvph61c2j3] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jvph61c2j3] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jvph61c2j3] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-jvph61c2j3] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-jvph61c2j3] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-jvph61c2j3] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-jvph61c2j3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-jvph61c2j3] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-jvph61c2j3] {
    font-size: 12px;
}

.column-chooser-list[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-jvph61c2j3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-jvph61c2j3]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-jvph61c2j3]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-jvph61c2j3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-jvph61c2j3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jvph61c2j3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-jvph61c2j3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-jvph61c2j3] {
    background: #e1dfdd;
}

.btn-success[b-jvph61c2j3] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-jvph61c2j3] {
    background: #0b5c0b;
}

.btn i[b-jvph61c2j3] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-jvph61c2j3] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content - matching column chooser */
.step-icon[b-jvph61c2j3] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jvph61c2j3 0.6s ease;
}

/* Info Box */
.info-box[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jvph61c2j3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jvph61c2j3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jvph61c2j3] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-jvph61c2j3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jvph61c2j3] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jvph61c2j3] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jvph61c2j3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-jvph61c2j3] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jvph61c2j3] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jvph61c2j3] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-jvph61c2j3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-jvph61c2j3] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-jvph61c2j3] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-jvph61c2j3] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-footer-left[b-jvph61c2j3] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/mobco/transactions/TransactionsMOBCO.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-50g4a5m7i7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-50g4a5m7i7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-50g4a5m7i7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-50g4a5m7i7] {
    transform: scale(0.98);
}

.header-right[b-50g4a5m7i7] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-50g4a5m7i7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-50g4a5m7i7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-50g4a5m7i7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-50g4a5m7i7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-50g4a5m7i7] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-50g4a5m7i7] .e-grid .e-row {
    height: 28px !important;
}

[b-50g4a5m7i7] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-50g4a5m7i7] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-50g4a5m7i7] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-50g4a5m7i7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-50g4a5m7i7] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-50g4a5m7i7] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-50g4a5m7i7] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-50g4a5m7i7] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-50g4a5m7i7] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-50g4a5m7i7] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group,
[b-50g4a5m7i7] .e-toolbar .e-input-group.e-control-wrapper,
[b-50g4a5m7i7] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Search Input Field */
[b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group .e-input,
[b-50g4a5m7i7] .e-toolbar .e-input-group .e-input,
[b-50g4a5m7i7] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Focus State */
[b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-50g4a5m7i7] .e-toolbar .e-input-group:focus-within,
[b-50g4a5m7i7] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Clear Button Styling */
[b-50g4a5m7i7] .e-toolbar .e-textbox .e-clear-icon,
[b-50g4a5m7i7] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-50g4a5m7i7] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-50g4a5m7i7] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-50g4a5m7i7] .e-toolbar .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-50g4a5m7i7] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Sidebar header, content, footer already defined above */

/* Wizard Step Content */
.wizard-step[b-50g4a5m7i7] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-50g4a5m7i7] {
    margin-bottom: 24px;
    animation: fadeInUp-b-50g4a5m7i7 0.6s ease;
}

/* Info Box */
.info-box[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-50g4a5m7i7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-50g4a5m7i7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-50g4a5m7i7] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-50g4a5m7i7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-50g4a5m7i7] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-50g4a5m7i7] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-50g4a5m7i7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-50g4a5m7i7] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-50g4a5m7i7] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-50g4a5m7i7] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-50g4a5m7i7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-50g4a5m7i7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-50g4a5m7i7] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-50g4a5m7i7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-50g4a5m7i7] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-50g4a5m7i7] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-50g4a5m7i7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-50g4a5m7i7] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-50g4a5m7i7] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-50g4a5m7i7] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-50g4a5m7i7] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-50g4a5m7i7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-50g4a5m7i7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-50g4a5m7i7] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-50g4a5m7i7] {
    background: #e1dfdd;
}

.btn-success[b-50g4a5m7i7] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-50g4a5m7i7] {
    background: #0b5c0b;
}

.btn i[b-50g4a5m7i7] {
    font-size: 14px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-50g4a5m7i7] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-50g4a5m7i7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-50g4a5m7i7] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-50g4a5m7i7] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-50g4a5m7i7] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-50g4a5m7i7] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-50g4a5m7i7]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-50g4a5m7i7]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-50g4a5m7i7]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-50g4a5m7i7]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Devices (320px - 767px) */
@media screen and (max-width: 767px) {

    /* Page Header - Stack Stats */
    .erp-page-header[b-50g4a5m7i7] {
        flex-direction: column;
        gap: 16px;
        padding: 12px 16px;
    }

    .header-left[b-50g4a5m7i7] {
        width: 100%;
    }

    .page-title[b-50g4a5m7i7] {
        font-size: 18px;
    }

    .header-right[b-50g4a5m7i7] {
        width: 100%;
    }

    .stats-container[b-50g4a5m7i7] {
        justify-content: flex-start;
        gap: 12px;
    }

    .stat-card[b-50g4a5m7i7] {
        min-width: auto;
    }

    .stat-value[b-50g4a5m7i7] {
        font-size: 20px;
    }

    .stat-label[b-50g4a5m7i7] {
        font-size: 10px;
    }

    /* Toolbar - Stack Buttons */
    [b-50g4a5m7i7] .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }

    [b-50g4a5m7i7] .e-toolbar .e-toolbar-item {
        margin: 4px;
    }

    /* Search Bar - Full Width */
    [b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid - Reduce Padding */
    .erp-page-content[b-50g4a5m7i7] {
        padding: 8px;
    }

    [b-50g4a5m7i7] .e-grid {
        font-size: 12px;
    }

    [b-50g4a5m7i7] .e-grid .e-headercell {
        padding: 8px 4px;
        font-size: 11px;
    }

    [b-50g4a5m7i7] .e-grid .e-rowcell {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* Wizards - Full Width */
    [b-50g4a5m7i7] .column-chooser-sidebar,
    [b-50g4a5m7i7] .help-wizard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-header[b-50g4a5m7i7] {
        padding: 12px 16px;
    }

    .sidebar-title[b-50g4a5m7i7] {
        font-size: 16px;
    }

    .sidebar-step-content[b-50g4a5m7i7] {
        padding: 16px;
    }

    .step-title[b-50g4a5m7i7] {
        font-size: 16px;
    }

    .step-description[b-50g4a5m7i7] {
        font-size: 13px;
    }

    /* Buttons - Larger Tap Targets */
    .btn[b-50g4a5m7i7] {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .sidebar-close-btn[b-50g4a5m7i7] {
        width: 44px;
        height: 44px;
    }

    /* Column List - Better Spacing */
    .column-item[b-50g4a5m7i7] {
        padding: 14px 12px;
    }

    .column-item input[type="checkbox"][b-50g4a5m7i7] {
        width: 20px;
        height: 20px;
    }

    .column-item label[b-50g4a5m7i7] {
        font-size: 14px;
    }

    /* Feature Items - Stack Icons */
    .feature-item[b-50g4a5m7i7] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .feature-item i[b-50g4a5m7i7] {
        margin-bottom: 8px;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Page Header - Adjust Spacing */
    .erp-page-header[b-50g4a5m7i7] {
        padding: 16px 20px;
    }

    .page-title[b-50g4a5m7i7] {
        font-size: 20px;
    }

    .stats-container[b-50g4a5m7i7] {
        gap: 16px;
    }

    /* Search Bar - Responsive Width */
    [b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group {
        width: 250px !important;
        max-width: 250px !important;
    }

    /* Wizards - Responsive Width */
    [b-50g4a5m7i7] .column-chooser-sidebar,
    [b-50g4a5m7i7] .help-wizard-sidebar {
        width: 500px !important;
        max-width: 90vw !important;
    }

    /* Grid - Adjust Font Size */
    [b-50g4a5m7i7] .e-grid {
        font-size: 13px;
    }

    [b-50g4a5m7i7] .e-grid .e-headercell {
        font-size: 12px;
    }

    [b-50g4a5m7i7] .e-grid .e-rowcell {
        font-size: 13px;
    }
}

/* Desktop Devices (1025px+) */
@media screen and (min-width: 1025px) {
    /* Default styles already optimized for desktop */

    /* Wizards - Fixed Width */
    [b-50g4a5m7i7] .column-chooser-sidebar,
    [b-50g4a5m7i7] .help-wizard-sidebar {
        width: 600px !important;
        max-width: 600px !important;
    }

    /* Search Bar - Fixed Width */
    [b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger Tap Targets */
    .btn[b-50g4a5m7i7],
    .action-link[b-50g4a5m7i7],
    .sidebar-close-btn[b-50g4a5m7i7],
    .help-icon-btn[b-50g4a5m7i7] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger Checkboxes */
    .column-item input[type="checkbox"][b-50g4a5m7i7] {
        width: 22px;
        height: 22px;
    }

    /* Remove Hover Effects (Not Applicable on Touch) */
    .column-item:hover[b-50g4a5m7i7],
    .feature-item:hover[b-50g4a5m7i7],
    .btn:hover[b-50g4a5m7i7] {
        transform: none;
    }
}

/* Landscape Orientation on Mobile */
@media screen and (max-width: 767px) and (orientation: landscape) {

    /* Reduce Header Height */
    .erp-page-header[b-50g4a5m7i7] {
        padding: 8px 16px;
    }

    .page-title[b-50g4a5m7i7] {
        font-size: 16px;
    }

    .stats-container[b-50g4a5m7i7] {
        gap: 8px;
    }

    .stat-value[b-50g4a5m7i7] {
        font-size: 18px;
    }

    /* Wizards - Reduce Height */
    .sidebar-header[b-50g4a5m7i7] {
        padding: 10px 16px;
    }

    .sidebar-step-content[b-50g4a5m7i7] {
        padding: 12px 16px;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper Borders */
    .stat-card[b-50g4a5m7i7],
    .column-item[b-50g4a5m7i7],
    .feature-item[b-50g4a5m7i7] {
        border-width: 0.5px;
    }
}

/* Print Styles */
@media print {

    /* Hide UI Elements */
    .e-toolbar[b-50g4a5m7i7],
    .sidebar-header[b-50g4a5m7i7],
    .sidebar-footer[b-50g4a5m7i7],
    .help-icon-btn[b-50g4a5m7i7] {
        display: none !important;
    }

    /* Optimize Grid for Print */
    .erp-page-content[b-50g4a5m7i7] {
        padding: 0;
    }

    [b-50g4a5m7i7] .e-grid {
        border: 1px solid #000;
    }

    [b-50g4a5m7i7] .e-grid .e-headercell,
    [b-50g4a5m7i7] .e-grid .e-rowcell {
        border: 1px solid #ccc;
        padding: 4px;
    }
}

/* ========================================
   COLUMN CHOOSER - COMPACT & PROFESSIONAL
   Matching Personal Attendance page styling
   ======================================== */
:global(.e-ccdlg)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg)[b-50g4a5m7i7] {
    max-width: 350px !important;
    width: 350px !important;
}

:global(.e-ccdlg .e-dlg-header)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-dlg-header)[b-50g4a5m7i7] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-dlg-content)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-50g4a5m7i7] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-footer-content)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-footer-content)[b-50g4a5m7i7] {
    padding: 8px 14px !important;
}

/* Left-align checkboxes and labels */
:global(.e-ccdlg .e-cc-contentdiv)[b-50g4a5m7i7],
:global(.e-ccdlg .e-dlg-content)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-cc-contentdiv)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-50g4a5m7i7] {
    direction: ltr !important;
    text-align: left !important;
}

:global(.e-ccdlg .e-checkbox-wrapper)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper)[b-50g4a5m7i7] {
    direction: ltr !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
}

:global(.e-ccdlg .e-checkbox-wrapper .e-label)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper .e-label)[b-50g4a5m7i7] {
    padding-left: 8px !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-50g4a5m7i7] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-50g4a5m7i7] {
    color: #e0e0e0;
}

.att-footer-left[b-50g4a5m7i7] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/personal-attendance/PersonalAttendanceDetails.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-ai7spri7fs] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ai7spri7fs] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ai7spri7fs] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ai7spri7fs] {
    transform: scale(0.98);
}

.page-subtitle[b-ai7spri7fs] {
    display: none;
}

.header-right[b-ai7spri7fs] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ai7spri7fs] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-ai7spri7fs] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-ai7spri7fs] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-ai7spri7fs] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ai7spri7fs] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ai7spri7fs] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ai7spri7fs] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-ai7spri7fs] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-ai7spri7fs] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-ai7spri7fs] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ai7spri7fs] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ai7spri7fs] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-ai7spri7fs] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ai7spri7fs] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ai7spri7fs] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group,
[b-ai7spri7fs] .e-toolbar .e-input-group.e-control-wrapper,
[b-ai7spri7fs] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Search Input Field */
[b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group .e-input,
[b-ai7spri7fs] .e-toolbar .e-input-group .e-input,
[b-ai7spri7fs] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Focus State */
[b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-ai7spri7fs] .e-toolbar .e-input-group:focus-within,
[b-ai7spri7fs] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Clear Button Styling */
[b-ai7spri7fs] .e-toolbar .e-textbox .e-clear-icon,
[b-ai7spri7fs] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-ai7spri7fs] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-ai7spri7fs] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-ai7spri7fs] .e-toolbar .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.search-container[b-ai7spri7fs] {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.search-input-wrapper[b-ai7spri7fs] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon[b-ai7spri7fs] {
    position: absolute;
    left: 8px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    pointer-events: none;
}

.search-input-wrapper input[b-ai7spri7fs] {
    padding-left: 28px;
    width: 100%;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-ai7spri7fs] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

.loading-spinner[b-ai7spri7fs] {
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top: 3px solid var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-ai7spri7fs 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin-b-ai7spri7fs {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   ERROR MESSAGE
   ======================================== */
.error-message[b-ai7spri7fs] {
    padding: 12px 16px;
    background: #fef6f6;
    border: 1px solid #d13438;
    border-radius: var(--BEC-borderRadiusMedium);
    color: #d13438;
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-message i[b-ai7spri7fs] {
    font-size: 16px;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-ai7spri7fs] .erp-grid {
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
}

[b-ai7spri7fs] .erp-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

[b-ai7spri7fs] .erp-grid .e-headercelldiv {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

[b-ai7spri7fs] .erp-grid .e-rowcell {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

[b-ai7spri7fs] .erp-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover);
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-ai7spri7fs] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Step Icon */
.step-icon[b-ai7spri7fs] {
    text-align: center;
    margin-bottom: 20px;
}

/* Info Box */
.info-box[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ai7spri7fs] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ai7spri7fs] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ai7spri7fs] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-ai7spri7fs] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ai7spri7fs] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-ai7spri7fs] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ai7spri7fs] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ai7spri7fs] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ai7spri7fs] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ai7spri7fs] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-ai7spri7fs {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-ai7spri7fs] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-ai7spri7fs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-ai7spri7fs] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-ai7spri7fs] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ai7spri7fs] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-ai7spri7fs] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-ai7spri7fs] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-ai7spri7fs] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-ai7spri7fs] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-ai7spri7fs] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-ai7spri7fs] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ai7spri7fs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ai7spri7fs] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ai7spri7fs] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-ai7spri7fs] {
    background: #e1dfdd;
}

.btn-success[b-ai7spri7fs] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-ai7spri7fs] {
    background: #0b5c0b;
}

.btn i[b-ai7spri7fs] {
    font-size: 14px;
}

/* Column List */
.column-list[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-ai7spri7fs] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-ai7spri7fs] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-ai7spri7fs] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-ai7spri7fs] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-ai7spri7fs] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-ai7spri7fs]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-ai7spri7fs]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-ai7spri7fs]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-ai7spri7fs]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Devices (320px - 767px) */
@media screen and (max-width: 767px) {

    /* Page Header - Stack Stats */
    .erp-page-header[b-ai7spri7fs] {
        flex-direction: column;
        gap: 16px;
        padding: 12px 16px;
    }

    .header-left[b-ai7spri7fs] {
        width: 100%;
    }

    .page-title[b-ai7spri7fs] {
        font-size: 18px;
    }

    .header-right[b-ai7spri7fs] {
        width: 100%;
    }

    .stats-container[b-ai7spri7fs] {
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }

    .stat-card[b-ai7spri7fs] {
        min-width: auto;
        flex: 1 1 calc(50% - 6px);
    }

    .stat-value[b-ai7spri7fs] {
        font-size: 20px;
    }

    .stat-label[b-ai7spri7fs] {
        font-size: 10px;
    }

    /* Toolbar - Stack Buttons */
    [b-ai7spri7fs] .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }

    [b-ai7spri7fs] .e-toolbar .e-toolbar-item {
        margin: 4px;
    }

    /* Search Bar - Full Width */
    [b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid - Reduce Padding */
    .erp-page-content[b-ai7spri7fs] {
        padding: 8px;
    }

    [b-ai7spri7fs] .e-grid {
        font-size: 12px;
    }

    [b-ai7spri7fs] .e-grid .e-headercell {
        padding: 8px 4px;
        font-size: 11px;
    }

    [b-ai7spri7fs] .e-grid .e-rowcell {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* Wizards - Full Width */
    [b-ai7spri7fs] .column-chooser-sidebar,
    [b-ai7spri7fs] .help-wizard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-header[b-ai7spri7fs] {
        padding: 12px 16px;
    }

    .sidebar-title[b-ai7spri7fs] {
        font-size: 16px;
    }

    .sidebar-step-content[b-ai7spri7fs] {
        padding: 16px;
    }

    .step-title[b-ai7spri7fs] {
        font-size: 16px;
    }

    .step-description[b-ai7spri7fs] {
        font-size: 13px;
    }

    /* Buttons - Larger Tap Targets */
    .btn[b-ai7spri7fs] {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .sidebar-close-btn[b-ai7spri7fs] {
        width: 44px;
        height: 44px;
    }

    /* Column List - Better Spacing */
    .column-item[b-ai7spri7fs] {
        padding: 14px 12px;
    }

    .column-item input[type="checkbox"][b-ai7spri7fs] {
        width: 20px;
        height: 20px;
    }

    .column-item label[b-ai7spri7fs] {
        font-size: 14px;
    }

    /* Feature Items - Stack Icons */
    .feature-item[b-ai7spri7fs] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .feature-item i[b-ai7spri7fs] {
        margin-bottom: 8px;
    }

    /* Date Filters - Stack Vertically */
    .date-filters[b-ai7spri7fs] {
        flex-direction: column;
        gap: 12px;
    }

    .date-filter-group[b-ai7spri7fs] {
        width: 100%;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Page Header - Adjust Spacing */
    .erp-page-header[b-ai7spri7fs] {
        padding: 16px 20px;
    }

    .page-title[b-ai7spri7fs] {
        font-size: 20px;
    }

    .stats-container[b-ai7spri7fs] {
        gap: 16px;
    }

    /* Search Bar - Responsive Width */
    [b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group {
        width: 250px !important;
        max-width: 250px !important;
    }

    /* Wizards - Responsive Width */
    [b-ai7spri7fs] .column-chooser-sidebar,
    [b-ai7spri7fs] .help-wizard-sidebar {
        width: 500px !important;
        max-width: 90vw !important;
    }

    /* Grid - Adjust Font Size */
    [b-ai7spri7fs] .e-grid {
        font-size: 13px;
    }

    [b-ai7spri7fs] .e-grid .e-headercell {
        font-size: 12px;
    }

    [b-ai7spri7fs] .e-grid .e-rowcell {
        font-size: 13px;
    }
}

/* Desktop Devices (1025px+) */
@media screen and (min-width: 1025px) {
    /* Default styles already optimized for desktop */

    /* Wizards - Fixed Width */
    [b-ai7spri7fs] .column-chooser-sidebar,
    [b-ai7spri7fs] .help-wizard-sidebar {
        width: 600px !important;
        max-width: 600px !important;
    }

    /* Search Bar - Fixed Width */
    [b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger Tap Targets */
    .btn[b-ai7spri7fs],
    .action-link[b-ai7spri7fs],
    .sidebar-close-btn[b-ai7spri7fs] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger Checkboxes */
    .column-item input[type="checkbox"][b-ai7spri7fs] {
        width: 22px;
        height: 22px;
    }

    /* Remove Hover Effects (Not Applicable on Touch) */
    .column-item:hover[b-ai7spri7fs],
    .feature-item:hover[b-ai7spri7fs],
    .btn:hover[b-ai7spri7fs] {
        transform: none;
    }

    /* Toolbar Buttons - Larger */
    [b-ai7spri7fs] .e-toolbar .e-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* Landscape Orientation on Mobile */
@media screen and (max-width: 767px) and (orientation: landscape) {

    /* Reduce Header Height */
    .erp-page-header[b-ai7spri7fs] {
        padding: 8px 16px;
    }

    .page-title[b-ai7spri7fs] {
        font-size: 16px;
    }

    .stats-container[b-ai7spri7fs] {
        gap: 8px;
    }

    .stat-value[b-ai7spri7fs] {
        font-size: 18px;
    }

    /* Wizards - Reduce Height */
    .sidebar-header[b-ai7spri7fs] {
        padding: 10px 16px;
    }

    .sidebar-step-content[b-ai7spri7fs] {
        padding: 12px 16px;
    }

    /* Grid Height - More Space */
    [b-ai7spri7fs] .e-grid {
        height: calc(100vh - 180px) !important;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper Borders */
    .stat-card[b-ai7spri7fs],
    .column-item[b-ai7spri7fs],
    .feature-item[b-ai7spri7fs] {
        border-width: 0.5px;
    }
}

/* Print Styles */
@media print {

    /* Hide UI Elements */
    .e-toolbar[b-ai7spri7fs],
    .sidebar-header[b-ai7spri7fs],
    .sidebar-footer[b-ai7spri7fs],
    .erp-page-header[b-ai7spri7fs] {
        display: none !important;
    }

    /* Optimize Grid for Print */
    .erp-page-content[b-ai7spri7fs] {
        padding: 0;
    }

    [b-ai7spri7fs] .e-grid {
        border: 1px solid #000;
        height: auto !important;
    }

    [b-ai7spri7fs] .e-grid .e-headercell,
    [b-ai7spri7fs] .e-grid .e-rowcell {
        border: 1px solid #ccc;
        padding: 4px;
    }

    /* Show all rows when printing */
    [b-ai7spri7fs] .e-grid .e-pager {
        display: none !important;
    }
}

/* ========================================
   COLUMN CHOOSER SIDEBAR - WIDTH STYLING
   Using multiple selectors for maximum specificity
   ======================================== */
[b-ai7spri7fs] .column-chooser-sidebar.e-sidebar,
[b-ai7spri7fs] .column-chooser-sidebar,
:global(.column-chooser-sidebar.e-sidebar)[b-ai7spri7fs],
:global(.column-chooser-sidebar)[b-ai7spri7fs],
:global(body .column-chooser-sidebar)[b-ai7spri7fs],
:global(body .e-sidebar.column-chooser-sidebar)[b-ai7spri7fs] {
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
}

/* Target the sidebar wrapper */
[b-ai7spri7fs] .e-sidebar-wrapper .column-chooser-sidebar,
:global(.e-sidebar-wrapper .column-chooser-sidebar)[b-ai7spri7fs],
:global(body .e-sidebar-wrapper .column-chooser-sidebar)[b-ai7spri7fs] {
    width: 350px !important;
    max-width: 350px !important;
}

/* Target any sidebar with this class at root level */
:global(.e-sidebar[class*="column-chooser"])[b-ai7spri7fs] {
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
}

/* ========================================
   COLUMN CHOOSER - COMPACT & PROFESSIONAL
   ======================================== */
:global(.e-ccdlg)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg)[b-ai7spri7fs] {
    max-width: 280px !important;
    width: 280px !important;
}

:global(.e-ccdlg .e-dlg-header)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg .e-dlg-header)[b-ai7spri7fs] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-dlg-content)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-ai7spri7fs] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-footer-content)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg .e-footer-content)[b-ai7spri7fs] {
    padding: 8px 14px !important;
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-ai7spri7fs] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-ai7spri7fs] {
    color: #e0e0e0;
}

.att-footer-left[b-ai7spri7fs] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
}

.att-info-box-mt[b-ai7spri7fs] {
    margin-top: 24px;
}
/* /Components/Pages/MainLayout/AttendanceDocs.razor.rz.scp.css */
/* AttendanceDocs - Full-Width Layout Approach */

/* Base Container */
.docs-container[b-x94plshrzr] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--text-primary, #2D3748);
}

/* Documentation Section Styling */
.docs-section[b-x94plshrzr] {
    display: none;
    animation: fade-in-b-x94plshrzr 0.2s ease;
    width: 100%;
}

.docs-section.active[b-x94plshrzr] {
    display: block;
}

@keyframes fade-in-b-x94plshrzr {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.docs-section-header[b-x94plshrzr] {
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    padding: 1rem 1.5rem;
    color: white;
    width: 100%;
}

.docs-section-header h2[b-x94plshrzr] {
    margin: 0;
    font-weight: 600;
    font-size: 1.5rem;
}

.docs-section-content[b-x94plshrzr] {
    padding: 1.25rem 1.5rem;
}

.docs-section-content p[b-x94plshrzr] {
    line-height: 1.5;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #2D3748);
    font-size: 0.9375rem;
}

/* Feature Grid */
.feature-grid[b-x94plshrzr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.feature-card[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #E2E8F0);
}

.feature-card:hover[b-x94plshrzr] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.05));
}

.feature-icon[b-x94plshrzr] {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0.5rem;
}

.report-icon[b-x94plshrzr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3c72'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
}

.dashboard-icon[b-x94plshrzr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3c72'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7v-7zm4-3h2v10h-2V7zm4 6h2v4h-2v-4z'/%3E%3C/svg%3E");
}

.filter-icon[b-x94plshrzr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3c72'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E");
}

.feature-card h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
}

.feature-card p[b-x94plshrzr] {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
    color: var(--text-secondary, #4A5568);
}

/* Report Types */
.report-type-list[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
}

.report-type-item[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 1rem;
    border-left: 3px solid var(--accent-primary, #2B3484);
}

.report-type-item h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
}

.report-type-item p[b-x94plshrzr] {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #4A5568);
}

.report-note[b-x94plshrzr] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background-color: rgba(49, 130, 206, 0.1);
    padding: 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.note-icon[b-x94plshrzr] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233182ce'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.report-note p[b-x94plshrzr] {
    font-size: 0.8125rem;
    margin: 0;
    color: var(--accent-primary, #2B3484);
}

/* Interface Guide */
.interface-section[b-x94plshrzr] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.interface-section h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.5rem;
}

.interface-section h3[b-x94plshrzr]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.interface-section p[b-x94plshrzr] {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.interface-section ul[b-x94plshrzr] {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.interface-section li[b-x94plshrzr] {
    margin-bottom: 0.375rem;
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* Data Interpretation */
.data-section[b-x94plshrzr] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.data-section h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--accent-primary, #2B3484);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.5rem;
}

.data-table[b-x94plshrzr] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color, #E2E8F0);
    font-size: 0.875rem;
}

.data-table th[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    text-align: left;
    padding: 0.625rem 0.875rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.data-table td[b-x94plshrzr] {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-color, #E2E8F0);
    font-size: 0.875rem;
}

.data-table tr:nth-child(even)[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
}

.indicator[b-x94plshrzr] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.indicator.normal[b-x94plshrzr] {
    background-color: #A0AEC0;
}

.indicator.success[b-x94plshrzr] {
    background-color: #48BB78;
}

.indicator.warning[b-x94plshrzr] {
    background-color: #ED8936;
}

.indicator.danger[b-x94plshrzr] {
    background-color: #E53E3E;
}

.data-table ul[b-x94plshrzr] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.data-table li[b-x94plshrzr] {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

/* Filtering */
.filter-section[b-x94plshrzr] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.filter-section h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--accent-primary, #2B3484);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.5rem;
}

.filter-section p[b-x94plshrzr] {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.filter-section ul[b-x94plshrzr] {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.filter-section li[b-x94plshrzr] {
    margin-bottom: 0.375rem;
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* FAQ */
.faq-list[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

:deep(.fluent-accordion-item)[b-x94plshrzr] {
    border: none;
    background-color: transparent;
    width: 100%;
}

:deep(.fluent-accordion-item .fluent-accordion-header-content)[b-x94plshrzr] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary, #2D3748);
}

:deep(.fluent-accordion-item .fluent-accordion-header)[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 4px;
    padding: 0.75rem 1rem;
}

:deep(.fluent-accordion-item .fluent-accordion-header:hover)[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.05);
}

:deep(.fluent-accordion-item[expanded] .fluent-accordion-header)[b-x94plshrzr] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

:deep(.fluent-accordion-item .fluent-accordion-region)[b-x94plshrzr] {
    background-color: white;
    border: 1px solid var(--border-color, #E2E8F0);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content)[b-x94plshrzr] {
    padding: 1rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p)[b-x94plshrzr] {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    color: var(--text-secondary, #4A5568);
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p:last-child)[b-x94plshrzr] {
    margin-bottom: 0;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content ul)[b-x94plshrzr] {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content li)[b-x94plshrzr] {
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Tablet Breakpoint */
@media (min-width: 768px) {
    .docs-section-header[b-x94plshrzr] {
        padding: 1.25rem 2rem;
    }
    
    .docs-section-header h2[b-x94plshrzr] {
        font-size: 1.75rem;
    }
    
    .docs-section-content[b-x94plshrzr] {
        padding: 1.5rem 2rem;
    }
    
    .feature-grid[b-x94plshrzr] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .diagram-content[b-x94plshrzr] {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .diagram-arrow[b-x94plshrzr] {
        transform: rotate(-90deg);
    }
    
    .diagram-box[b-x94plshrzr] {
        width: 30%;
        max-width: none;
    }
    
    .selector-tabs[b-x94plshrzr] {
        justify-content: flex-start;
    }
    
    .columns-grid[b-x94plshrzr] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .filter-columns[b-x94plshrzr] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .stats-item[b-x94plshrzr] {
        flex: 1 0 auto;
    }
    
    .report-type-list[b-x94plshrzr] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Desktop Breakpoint */
@media (min-width: 1024px) {
    .docs-section-header[b-x94plshrzr] {
        padding: 1.5rem 2.5rem;
    }
    
    .docs-section-content[b-x94plshrzr] {
        padding: 2rem 2.5rem;
    }
    
    .interface-mockup[b-x94plshrzr] {
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .mobile-mockup[b-x94plshrzr] {
        max-width: 360px;
    }
    
    .date-presets[b-x94plshrzr] {
        justify-content: flex-start;
    }
    
    .faq-list[b-x94plshrzr] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

/* Large Desktop Breakpoint */
@media (min-width: 1280px) {
    .docs-section-header[b-x94plshrzr] {
        padding: 1.75rem 3rem;
    }
    
    .docs-section-header h2[b-x94plshrzr] {
        font-size: 2rem;
    }
    
    .docs-section-content[b-x94plshrzr] {
        padding: 2.5rem 3rem;
    }
}

/* Overview Diagram */
.overview-diagram[b-x94plshrzr] {
    margin-top: 1.5rem;
    width: 100%;
}

.diagram-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.diagram-content[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;
    background-color: var(--bg-tertiary, #F1F5F9);
}

.diagram-box[b-x94plshrzr] {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #2D3748);
}

.filter-box[b-x94plshrzr] {
    background-color: rgba(49, 130, 206, 0.15);
    border: 1px solid rgba(49, 130, 206, 0.3);
}

.stats-box[b-x94plshrzr] {
    background-color: rgba(72, 187, 120, 0.15);
    border: 1px solid rgba(72, 187, 120, 0.3);
}

.data-box[b-x94plshrzr] {
    background-color: rgba(237, 137, 54, 0.15);
    border: 1px solid rgba(237, 137, 54, 0.3);
}

.diagram-arrow[b-x94plshrzr] {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--border-color, #E2E8F0);
}

/* Report Selector */
.report-selector[b-x94plshrzr] {
    margin-top: 1.5rem;
    width: 100%;
}

.selector-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.selector-tabs[b-x94plshrzr] {
    display: flex;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
    background-color: var(--bg-tertiary, #F1F5F9);
}

.selector-tab[b-x94plshrzr] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.5));
}

.selector-tab.active[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
    border-color: var(--accent-primary, #2B3484);
}

.tab-indicator[b-x94plshrzr] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #CBD5E0;
    margin-right: 0.5rem;
}

.selector-tab.active .tab-indicator[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
}

/* Interface Mockup */
.interface-layout[b-x94plshrzr] {
    margin: 1rem 0 1.5rem;
    width: 100%;
}

.interface-mockup[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.mockup-filter[b-x94plshrzr] {
    height: 50px;
    background-color: white;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mockup-filter[b-x94plshrzr]::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    height: 10px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 4px;
}

.mockup-filter[b-x94plshrzr]::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20%;
    height: 10px;
    background-color: rgba(43, 52, 132, 0.2);
    border-radius: 4px;
}

.mockup-stats[b-x94plshrzr] {
    height: 40px;
    background-color: var(--accent-primary, #2B3484);
    opacity: 0.8;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1rem;
}

.mockup-stats[b-x94plshrzr]::before, 
.mockup-stats[b-x94plshrzr]::after {
    content: '';
    height: 10px;
    background-color: white;
    opacity: 0.7;
    border-radius: 4px;
}

.mockup-stats[b-x94plshrzr]::before {
    width: 60px;
}

.mockup-stats[b-x94plshrzr]::after {
    width: 80px;
}

.mockup-table[b-x94plshrzr] {
    height: 120px;
    background-color: white;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.mockup-table[b-x94plshrzr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: rgba(43, 52, 132, 0.05);
}

.mockup-table[b-x94plshrzr]::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 1rem;
    right: 1rem;
    height: 70px;
    background-image: 
        linear-gradient(to bottom, 
            rgba(226, 232, 240, 0.5) 0%, 
            rgba(226, 232, 240, 0.5) 1px, 
            transparent 1px, 
            transparent 23px,
            rgba(226, 232, 240, 0.5) 23px, 
            rgba(226, 232, 240, 0.5) 24px, 
            transparent 24px, 
            transparent 47px,
            rgba(226, 232, 240, 0.5) 47px, 
            rgba(226, 232, 240, 0.5) 48px);
}

/* Stats Indicators */
.stats-indicators[b-x94plshrzr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.stats-item[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    flex: 1 0 48%;
    min-width: 140px;
}

.stats-icon[b-x94plshrzr] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 4px;
    margin-right: 0.75rem;
    position: relative;
}

.stats-icon.total[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
}

.stats-icon.present[b-x94plshrzr] {
    background-color: rgba(72, 187, 120, 0.1);
}

.stats-icon.late[b-x94plshrzr] {
    background-color: rgba(237, 137, 54, 0.1);
}

.stats-icon.overtime[b-x94plshrzr] {
    background-color: rgba(49, 130, 206, 0.1);
}

.stats-icon.early[b-x94plshrzr] {
    background-color: rgba(229, 62, 62, 0.1);
}

.stats-text[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
}

.stats-label[b-x94plshrzr] {
    font-size: 0.75rem;
    color: var(--text-secondary, #4A5568);
}

.stats-value[b-x94plshrzr] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #2D3748);
}

/* Columns Grid */
.columns-grid[b-x94plshrzr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.column-item[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.05);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    text-align: center;
}

/* Mobile Mockup */
.mobile-mockup[b-x94plshrzr] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: rgba(43, 52, 132, 0.05);
    width: 100%;
    max-width: 360px;
}

.mobile-card[b-x94plshrzr] {
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mobile-card-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.badge-number[b-x94plshrzr] {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
}

.mobile-card-content[b-x94plshrzr] {
    padding: 0.625rem 0.875rem;
}

.mobile-row[b-x94plshrzr] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
}

.mobile-row:last-child[b-x94plshrzr] {
    margin-bottom: 0;
}

.mobile-label[b-x94plshrzr] {
    color: var(--text-secondary, #4A5568);
}

.mobile-value[b-x94plshrzr] {
    font-weight: 500;
}

.mobile-value.delay[b-x94plshrzr] {
    color: #ED8936;
}

/* Filter Mockup */
.filter-mockup[b-x94plshrzr] {
    margin-top: 0.75rem;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
}

.filter-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.filter-content[b-x94plshrzr] {
    padding: 0.75rem 1rem;
}

.filter-group[b-x94plshrzr] {
    margin-bottom: 0.75rem;
}

.filter-group:last-child[b-x94plshrzr] {
    margin-bottom: 0;
}

.filter-label[b-x94plshrzr] {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--text-secondary, #4A5568);
}

.filter-input[b-x94plshrzr] {
    height: 30px;
    background-color: rgba(226, 232, 240, 0.5);
    border-radius: 4px;
}

.filter-date-range[b-x94plshrzr] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.date-preset[b-x94plshrzr] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(226, 232, 240, 0.5);
    border-radius: 4px;
    color: var(--text-secondary, #4A5568);
}

.date-preset.active[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
    color: var(--accent-primary, #2B3484);
    font-weight: 500;
}

/* Data Visuals */
.data-visual[b-x94plshrzr] {
    margin-top: 1rem;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.absent-row[b-x94plshrzr], .trc-row[b-x94plshrzr] {
    display: flex;
    border-bottom: 1px solid var(--border-color, rgba(226, 232, 240, 0.5));
}

.absent-row:last-child[b-x94plshrzr], .trc-row:last-child[b-x94plshrzr] {
    border-bottom: none;
}

.absent-cell[b-x94plshrzr], .trc-cell[b-x94plshrzr] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    flex: 1;
    display: flex;
    align-items: center;
}

.absent-cell.header[b-x94plshrzr], .trc-cell.header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    font-weight: 500;
    font-size: 0.8125rem;
}

/* Search Visual */
.search-visual[b-x94plshrzr] {
    margin-top: 0.75rem;
    width: 100%;
}

.search-box[b-x94plshrzr] {
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    width: 100%;
    max-width: 500px;
}

.search-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A5568'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    margin-right: 0.75rem;
    opacity: 0.5;
}

.search-placeholder[b-x94plshrzr] {
    color: var(--text-secondary, #4A5568);
    opacity: 0.6;
    font-size: 0.875rem;
}

/* Filter Columns */
.filter-columns[b-x94plshrzr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.filter-column[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-column-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 2px;
    margin-right: 0.5rem;
}

.filter-column span[b-x94plshrzr] {
    font-size: 0.875rem;
}

/* Date Presets */
.date-presets[b-x94plshrzr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.date-preset-item[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.date-preset-item.active[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
    border: 1px solid var(--accent-primary, #2B3484);
}

.date-preset-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 2px;
    margin-right: 0.5rem;
}

.date-preset-item span[b-x94plshrzr] {
    font-size: 0.875rem;
}

/* Sort Visual */
.sort-visual[b-x94plshrzr] {
    margin-top: 0.75rem;
    width: 100%;
}

.sort-buttons[b-x94plshrzr] {
    display: flex;
    gap: 0.75rem;
}

.sort-button[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sort-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 2px;
    margin-right: 0.5rem;
}

.sort-button span[b-x94plshrzr] {
    font-size: 0.875rem;
}

/* Date Picker Visual */
.date-picker-visual[b-x94plshrzr] {
    margin-top: 0.75rem;
    background-color: white;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 600px;
}

.date-picker[b-x94plshrzr] {
    display: flex;
    align-items: center;
}

.date-label[b-x94plshrzr] {
    font-size: 0.875rem;
    margin-right: 0.5rem;
    color: var(--text-secondary, #4A5568);
}

.date-input[b-x94plshrzr] {
    width: 120px;
    height: 32px;
    background-color: rgba(226, 232, 240, 0.5);
    border-radius: 4px;
}

.date-apply[b-x94plshrzr] {
    padding: 0.25rem 0.75rem;
    background-color: var(--accent-primary, #2B3484);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}
/* /Components/Pages/MainLayout/Estimation/EstimationDashboard.razor.rz.scp.css */
/* ========================================
   ESTIMATION DASHBOARD
   Microsoft-style compact design
   No header, no toolbar - data focused
   ======================================== */

.dashboard-container[b-4vneec451w] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    overflow: hidden;
}

/* ========================================
   PORTFOLIO SUMMARY BAR
   ======================================== */
.portfolio-bar[b-4vneec451w] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e1e1e1);
    flex-shrink: 0;
}

.portfolio-metric[b-4vneec451w] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
}

.portfolio-metric:first-child[b-4vneec451w] {
    padding-left: 0;
}

.metric-value[b-4vneec451w] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.metric-value.selling[b-4vneec451w] {
    color: var(--BEC-colorPaletteRedForeground1, #c50f1f);
    font-weight: 700;
}

.metric-value.direct[b-4vneec451w] {
    color: var(--BEC-colorPaletteGreenForeground1, #0e7a0d);
}

.metric-value.indirect[b-4vneec451w] {
    color: var(--BEC-colorPaletteBlueForeground1, #0078d4);
}

.metric-value.indirect small[b-4vneec451w] {
    font-size: 11px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.metric-value.ps[b-4vneec451w] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6914);
}

.metric-value.count[b-4vneec451w] {
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.metric-label[b-4vneec451w] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #707070);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.metric-divider[b-4vneec451w] {
    width: 1px;
    height: 36px;
    background: var(--BEC-colorNeutralStroke2, #e1e1e1);
}

/* ========================================
   PROJECTS GRID
   ======================================== */
.projects-grid[b-4vneec451w] {
    flex: 1;
    padding: 12px;
    min-height: 0;
    overflow: hidden;
}

/* Syncfusion Grid Overrides - Compact Style */
[b-4vneec451w] .e-grid {
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1e1e1) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

[b-4vneec451w] .e-grid .e-headercell {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--BEC-colorNeutralForeground2, #616161) !important;
    padding: 8px 12px !important;
}

[b-4vneec451w] .e-grid .e-rowcell {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #f0f0f0) !important;
}

[b-4vneec451w] .e-grid .e-row:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5) !important;
    cursor: pointer;
}

[b-4vneec451w] .e-grid .e-row.e-altrow .e-rowcell {
    background: var(--BEC-colorNeutralBackground2, #fafafa) !important;
}

/* Status Dot */
.status-dot[b-4vneec451w] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.status-healthy[b-4vneec451w] {
    background: var(--BEC-colorPaletteGreenBackground3, #107c10);
}

.status-dot.status-warning[b-4vneec451w] {
    background: var(--BEC-colorPaletteYellowBackground3, #ffaa44);
}

.status-dot.status-critical[b-4vneec451w] {
    background: var(--BEC-colorPaletteRedBackground3, #d13438);
}

/* Margin Badge */
.margin-badge[b-4vneec451w] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.margin-badge.margin-healthy[b-4vneec451w] {
    background: var(--BEC-colorPaletteGreenBackground1, #dff6dd);
    color: var(--BEC-colorPaletteGreenForeground1, #0e7a0d);
}

.margin-badge.margin-warning[b-4vneec451w] {
    background: var(--BEC-colorPaletteYellowBackground1, #fff4ce);
    color: var(--BEC-colorPaletteYellowForeground1, #8a6914);
}

.margin-badge.margin-critical[b-4vneec451w] {
    background: var(--BEC-colorPaletteRedBackground1, #fde7e9);
    color: var(--BEC-colorPaletteRedForeground1, #c50f1f);
}

/* Percent Hint */
.percent-hint[b-4vneec451w] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* Action Button */
.action-btn[b-4vneec451w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #707070);
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-btn:hover[b-4vneec451w] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: white;
}

/* ========================================
   STATES
   ======================================== */
.loading-state[b-4vneec451w],
.error-state[b-4vneec451w],
.empty-state[b-4vneec451w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.spinner[b-4vneec451w] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2, #e1e1e1);
    border-top-color: var(--BEC-colorBrandBackground, #0078d4);
    border-radius: 50%;
    animation: spin-b-4vneec451w 0.8s linear infinite;
}

@keyframes spin-b-4vneec451w {
    to { transform: rotate(360deg); }
}

.error-state[b-4vneec451w] {
    color: var(--BEC-colorPaletteRedForeground1, #c50f1f);
}

.error-state i[b-4vneec451w] {
    font-size: 32px;
}

.retry-btn[b-4vneec451w] {
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 13px;
    cursor: pointer;
}

.retry-btn:hover[b-4vneec451w] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.empty-state i[b-4vneec451w] {
    font-size: 48px;
    opacity: 0.5;
}
/* /Components/Pages/MainLayout/Estimation/ItemCases.razor.rz.scp.css */
/* ========================================
   ITEM CASES ADMINISTRATION
   Following BranchAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-sdzk5y2wc0] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-sdzk5y2wc0] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-sdzk5y2wc0] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-sdzk5y2wc0] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-sdzk5y2wc0] {
    transform: scale(0.98);
}

.header-right[b-sdzk5y2wc0] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-sdzk5y2wc0] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-sdzk5y2wc0] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-sdzk5y2wc0] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-sdzk5y2wc0] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   ======================================== */

/* Toolbar Container */
[b-sdzk5y2wc0] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

/* Toolbar Items */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: var(--BEC-spacingHorizontalXS) !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* Hover Effect */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Active/Pressed State */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

/* Danger Button (Delete) */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* Disabled Button State */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* Toolbar Separator */
[b-sdzk5y2wc0] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* Button Focus State */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-sdzk5y2wc0] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-sdzk5y2wc0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Placeholder Content */
.placeholder-content[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
}

/* ========================================
   GRID STYLING (for future implementation)
   ======================================== */

[b-sdzk5y2wc0] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

[b-sdzk5y2wc0] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-sdzk5y2wc0] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* ========================================
   RESPONSIVE LAYOUT
   ======================================== */

@media (max-width: 1024px) {
    [b-sdzk5y2wc0] .e-toolbar.e-control {
        top: 50px !important;
    }
}

@media (max-width: 768px) {
    .erp-page-header[b-sdzk5y2wc0] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .stats-container[b-sdzk5y2wc0] {
        width: 100%;
        justify-content: space-around;
    }

    [b-sdzk5y2wc0] .e-toolbar.e-control {
        top: 90px !important;
    }
}

@media (max-width: 480px) {
    [b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
}

/* ========================================
   SIDEBAR WIZARD STYLES (Microsoft Pattern)
   ======================================== */

/* Wizard Sidebar Styling */
.sidebar-header[b-sdzk5y2wc0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-sdzk5y2wc0] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-sdzk5y2wc0] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-sdzk5y2wc0] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-sdzk5y2wc0] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-sdzk5y2wc0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-sdzk5y2wc0] {
    max-width: 100%;
    text-align: left;
    padding: 20px;
}

.step-title[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-sdzk5y2wc0] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-sdzk5y2wc0] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
    line-height: 1.6;
}

/* Sidebar Footer */
.sidebar-footer[b-sdzk5y2wc0] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Form Group */
.form-group[b-sdzk5y2wc0] {
    margin-bottom: 20px;
}

.form-label[b-sdzk5y2wc0] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-sdzk5y2wc0]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-sdzk5y2wc0] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-sdzk5y2wc0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Checkbox Wrapper - consistent spacing for checkbox fields */
.checkbox-wrapper[b-sdzk5y2wc0] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

/* ========================================
   MODAL DIALOGS (for confirmations)
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-sdzk5y2wc0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-sdzk5y2wc0 0.2s ease-out;
}

@keyframes fadeIn-b-sdzk5y2wc0 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-content[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-sdzk5y2wc0 0.3s ease-out;
}

.modal-content.modal-sm[b-sdzk5y2wc0] {
    max-width: 400px;
}

@keyframes slideUp-b-sdzk5y2wc0 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-sdzk5y2wc0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-header h3[b-sdzk5y2wc0] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-header h3 i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-header.modal-header-danger[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.modal-header.modal-header-danger h3[b-sdzk5y2wc0],
.modal-header.modal-header-danger h3 i[b-sdzk5y2wc0] {
    color: #dc2626;
}

.modal-header.modal-header-warning[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.modal-header.modal-header-warning h3[b-sdzk5y2wc0],
.modal-header.modal-header-warning h3 i[b-sdzk5y2wc0] {
    color: #d97706;
}

.modal-header.modal-header-success[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.modal-header.modal-header-success h3[b-sdzk5y2wc0],
.modal-header.modal-header-success h3 i[b-sdzk5y2wc0] {
    color: #16a34a;
}

.close-btn[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.close-btn:hover[b-sdzk5y2wc0] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Body */
.modal-body[b-sdzk5y2wc0] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-body p[b-sdzk5y2wc0] {
    margin: 0 0 12px 0;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

.modal-body .text-danger[b-sdzk5y2wc0] {
    color: #dc2626;
    font-size: 13px;
}

/* Modal Footer */
.modal-footer[b-sdzk5y2wc0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Modal Container (alternative to modal-content) */
.modal-container[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-sdzk5y2wc0 0.3s ease-out;
}

.modal-container.modal-sm[b-sdzk5y2wc0] {
    max-width: 500px;
}

.modal-title[b-sdzk5y2wc0] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-sdzk5y2wc0] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

.modal-content-body[b-sdzk5y2wc0] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-sdzk5y2wc0] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-sdzk5y2wc0] {
    color: #d83b01;
}

.warning-note[b-sdzk5y2wc0] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid #d83b01;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-sdzk5y2wc0] {
    color: #d83b01;
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #e8f4fd 0%, #c7e0f4 100%);
    border-left-color: var(--BEC-colorBrandBackground);
}

.warning-note-info i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandBackground);
}

.warning-note-success[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-sdzk5y2wc0] {
    color: #10b981;
}

/* Buttons */
.btn[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn:disabled[b-sdzk5y2wc0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-sdzk5y2wc0] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-danger[b-sdzk5y2wc0] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: #b91c1c;
}

.btn-warning[b-sdzk5y2wc0] {
    background: #d97706;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: #b45309;
}

.btn-success[b-sdzk5y2wc0] {
    background: #16a34a;
    color: white;
}

.btn-success:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: #15803d;
}

.btn-link[b-sdzk5y2wc0] {
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    padding: 4px 8px;
}

.btn-link:hover:not(:disabled)[b-sdzk5y2wc0] {
    text-decoration: underline;
}

.btn-sm[b-sdzk5y2wc0] {
    padding: 4px 10px;
    font-size: 12px;
}

/* Spinner */
.spinner-small[b-sdzk5y2wc0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-sdzk5y2wc0 0.8s linear infinite;
}

@keyframes spin-b-sdzk5y2wc0 {
    to { transform: rotate(360deg); }
}

/* Loading spinner for page */
.loading-spinner[b-sdzk5y2wc0] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-sdzk5y2wc0 0.8s linear infinite;
    margin-bottom: 16px;
}

/* Error Message */
.error-message[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #dc2626;
    text-align: center;
}

.error-message i[b-sdzk5y2wc0] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.error-message p[b-sdzk5y2wc0] {
    margin: 0 0 16px 0;
    font-size: 14px;
}

.retry-btn[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    font-size: 13px;
}

.retry-btn:hover[b-sdzk5y2wc0] {
    background: #b91c1c;
}

/* Badges - Text Only (for Yes/No columns) */
.badge-yes[b-sdzk5y2wc0] {
    color: #16a34a;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-no[b-sdzk5y2wc0] {
    color: #6b7280;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
}

.badge-warning[b-sdzk5y2wc0] {
    color: #d97706;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-neutral[b-sdzk5y2wc0] {
    color: #6b7280;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
}

/* Status Column Badges (with background) */
.badge-active[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
}

.badge-inactive[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #fee2e2;
    color: #dc2626;
}

/* Column Chooser */
.column-chooser-actions[b-sdzk5y2wc0] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-list[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.column-item[b-sdzk5y2wc0] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

/* ========================================
   BADGE STYLES
   ======================================== */
.badge[b-sdzk5y2wc0] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-sdzk5y2wc0] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-sdzk5y2wc0] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-sdzk5y2wc0] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */
.column-chooser-actions[b-sdzk5y2wc0] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-list[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}
/* /Components/Pages/MainLayout/Estimation/LineItems.razor.rz.scp.css */
/* ========================================
   LINE ITEMS (BOQ) ADMINISTRATION
   High-Performance Grid Styling
   
   FEATURES:
   ✅ Sticky Page Header
   ✅ Sticky Action Toolbar
   ✅ Frozen Columns Support
   ✅ Batch Editing Visual Feedback
   ✅ Computed Value Highlighting
   ✅ Item Case Badge Colors
   ✅ Aggregate Footer Styling
   ✅ Pending Changes Banner
   ======================================== */

/* ========================================
   OVERRIDE PARENT SCROLL BEHAVIOR
   This ensures ONLY the grid content scrolls
   ======================================== */
[b-sjc20pm4va] .page-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

[b-sjc20pm4va] .page-content-inner {
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   PAGE CONTAINER - Full Width Layout
   Uses relative positioning for proper layout flow
   ======================================== */
.erp-page-container[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   PAGE HEADER - Sticky at top
   ======================================== */
.erp-page-header[b-sjc20pm4va] {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    min-height: 40px;
}

.header-left[b-sjc20pm4va] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

.help-icon-btn[b-sjc20pm4va] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.header-right[b-sjc20pm4va] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ========================================
   HEADER FINANCIAL SUMMARY - Ultra Compact
   Single line display matching header height
   ======================================== */
.header-financial-summary[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    padding: 2px 8px;
    height: 32px;
}

.header-financial-summary .fin-item[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    min-width: 70px;
    height: 100%;
}

.header-financial-summary .fin-item.project-info[b-sjc20pm4va] {
    flex-direction: row;
    gap: 6px;
    min-width: auto;
    padding-right: 10px;
}

.header-financial-summary .fin-divider[b-sjc20pm4va] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 2px;
}

.header-financial-summary .fin-code[b-sjc20pm4va] {
    font-size: 10px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    padding: 1px 6px;
    border-radius: 3px;
}

.header-financial-summary .fin-name[b-sjc20pm4va] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-financial-summary .fin-label[b-sjc20pm4va] {
    font-size: 8px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
}

.header-financial-summary .fin-value[b-sjc20pm4va] {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.header-financial-summary .fin-value.direct[b-sjc20pm4va] {
    color: #2563eb;
}

.header-financial-summary .fin-value.indirect[b-sjc20pm4va] {
    color: #059669;
}

.header-financial-summary .fin-value.indirect small[b-sjc20pm4va] {
    font-size: 8px;
    font-weight: 500;
    opacity: 0.8;
}

.header-financial-summary .fin-value.ps[b-sjc20pm4va] {
    color: #7c3aed;
}

.header-financial-summary .fin-value.selling[b-sjc20pm4va] {
    color: #dc2626;
}

/* Legacy - kept for compatibility */
.btn-select-project[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-select-project:hover[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-select-project i[b-sjc20pm4va] {
    font-size: 12px;
}

/* ========================================
   NO PROJECT SELECTED STATE
   Full-page prompt to select a project
   ======================================== */
.no-project-selected-container[b-sjc20pm4va] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    position: relative;
    z-index: 1;
    /* Low z-index so sidebar appears above */
}

.no-project-card[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 64px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    box-shadow: var(--BEC-shadow8);
    max-width: 480px;
}

.no-project-icon[b-sjc20pm4va] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground2), var(--BEC-colorNeutralBackground3));
    border-radius: 50%;
    margin-bottom: 24px;
}

.no-project-icon i[b-sjc20pm4va] {
    font-size: 36px;
    color: var(--BEC-colorBrandForeground1);
}

.no-project-card h2[b-sjc20pm4va] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
}

.no-project-card p[b-sjc20pm4va] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 28px 0;
    line-height: 1.5;
}

.btn-select-project-large[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-select-project-large:hover[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow8);
}

.btn-select-project-large i[b-sjc20pm4va] {
    font-size: 16px;
}

/* ========================================
   PROJECT SELECTOR SIDEBAR
   Sidebar UI for selecting projects
   ======================================== */
.project-search-box[b-sjc20pm4va] {
    margin-bottom: 16px;
    pointer-events: auto !important;
}

.form-section[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: auto !important;
}

.projects-list[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 4px;
    pointer-events: auto !important;
}

.loading-projects[b-sjc20pm4va],
.no-projects[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 12px;
}

.loading-projects i[b-sjc20pm4va],
.no-projects i[b-sjc20pm4va] {
    font-size: 32px;
    opacity: 0.6;
}

.project-card[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

.project-card:hover[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.project-card.selected[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground2);
    border-color: var(--BEC-colorBrandStroke1);
    box-shadow: 0 0 0 2px var(--BEC-colorBrandStroke1);
}

.project-card-header[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.project-card-code[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

.project-card .selected-icon[b-sjc20pm4va] {
    color: var(--BEC-colorSuccessForeground1);
    font-size: 14px;
}

.project-card-name[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.project-card-stats[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.project-card-stats i[b-sjc20pm4va] {
    font-size: 10px;
}

.project-card-stats.empty[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground4);
    font-style: italic;
}

/* ========================================
   PROJECT PERCENTAGE CONTROLS BAR
   ADJ% and MARKUP% with proper sizing
   ======================================== */
.project-percentage-bar[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--BEC-colorNeutralBackground1);
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    height: 38px;
}

.pct-label[b-sjc20pm4va] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
}

.pct-divider[b-sjc20pm4va] {
    width: 1px;
    height: 22px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 6px;
}

/* Percentage Input Styling - Proper Size */
[b-sjc20pm4va] .pct-input {
    height: 28px !important;
}

[b-sjc20pm4va] .pct-input .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 28px !important;
    min-height: 28px !important;
}

[b-sjc20pm4va] .pct-input .e-input-group input {
    height: 26px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    text-align: right !important;
}

[b-sjc20pm4va] .pct-input .e-input-group:hover {
    border-color: var(--BEC-colorBrandStroke1) !important;
}

[b-sjc20pm4va] .pct-input .e-input-group:focus-within {
    border-color: var(--BEC-colorBrandStroke1) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandStroke1) !important;
}

[b-sjc20pm4va] .pct-input .e-input-group-icon {
    display: none !important;
}

/* Apply Button - Matching Height */
.btn-apply[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorBrandBackground);
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.btn-apply:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-apply:disabled[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackgroundDisabled);
    color: var(--BEC-colorNeutralForegroundDisabled);
    cursor: not-allowed;
}

.btn-apply i[b-sjc20pm4va] {
    font-size: 12px;
}

/* Legacy - keep for backwards compatibility */
[b-sjc20pm4va] .pct-input-compact {
    height: 22px !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 3px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    min-height: 22px !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group:hover {
    border-color: var(--BEC-colorBrandBackground) !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group input {
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    text-align: center !important;
    padding: 2px 4px !important;
    height: 20px !important;
    line-height: 20px !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group-icon {
    display: none !important;
}

/* Compact Apply Button - Icon only */
.btn-apply-compact[b-sjc20pm4va] {
    background: #059669;
    color: white;
    border: none;
    width: 20px;
    height: 20px;
    font-size: 9px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.btn-apply-compact:hover:not(:disabled)[b-sjc20pm4va] {
    background: #047857;
}

.btn-apply-compact:disabled[b-sjc20pm4va] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-apply-compact i[b-sjc20pm4va] {
    font-size: 9px;
}

.btn-apply-compact .fa-spinner[b-sjc20pm4va] {
    animation: spin-b-sjc20pm4va 0.8s linear infinite;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
}

.stat-card[b-sjc20pm4va] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-sjc20pm4va] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-card.total-direct .stat-value[b-sjc20pm4va] {
    color: #059669;
}

.stat-card.total-selling .stat-value[b-sjc20pm4va] {
    color: #0891b2;
}

.stat-label[b-sjc20pm4va] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-sjc20pm4va] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - Fixed at top of grid, doesn't scroll
   ======================================== */
[b-sjc20pm4va] .e-toolbar.e-control {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 44px !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

[b-sjc20pm4va] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Compact Toolbar - Matches header height */
[b-sjc20pm4va] .compact-toolbar.e-toolbar {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 var(--BEC-spacingHorizontalXXL) !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-items {
    height: 44px !important;
}


[b-sjc20pm4va] .compact-toolbar .e-toolbar-item {
    margin: 0 1px !important;
    height: 44px !important;
    /* Removed display: flex to fix layout issues */
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline/border on toolbar buttons */
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus-visible,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:active,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn.e-focused {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.15s ease !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    transition: color 0.15s ease !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Highlighted Save Button (when pending changes) */
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-icons,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-tbar-btn-text {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Disabled State */
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-sjc20pm4va] .compact-toolbar .e-separator {
    background: var(--BEC-colorNeutralStroke2) !important;
    width: 1px !important;
    height: 18px !important;
    margin: 0 4px !important;
}



/* ========================================
   VIEW TOGGLE BUTTONS - Grid/Pivot Switch
   ======================================== */
[b-sjc20pm4va] .compact-toolbar .view-toggle-active .e-tbar-btn {
    background: var(--BEC-colorBrandBackground2) !important;
    border-radius: 4px !important;
}

[b-sjc20pm4va] .compact-toolbar .view-toggle-active .e-tbar-btn .e-icons,
[b-sjc20pm4va] .compact-toolbar .view-toggle-active .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorBrandForeground1) !important;
    font-weight: 600 !important;
}

/* ========================================
   PIVOT TABLE VIEW - Simple wrapper
   ======================================== */
.pivot-wrapper[b-sjc20pm4va] {
    width: 100%;
    padding: 0;
    background: var(--BEC-colorNeutralBackground1);
}

/* Pivot View - Simple styling without height overrides */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview {
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 4px;
}

/* Pivot Toolbar */
[b-sjc20pm4va] .pivot-wrapper .e-pivot-toolbar {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    padding: 4px 8px !important;
}

/* Pivot Grouping Bar */
[b-sjc20pm4va] .pivot-wrapper .e-grouping-bar {
    background: var(--BEC-colorNeutralBackground3) !important;
}

/* Pivot Header Cells */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-headercell {
    background: var(--BEC-colorNeutralBackground3) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Pivot Row Cells */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-rowcell {
    font-size: 12px !important;
}

/* Pivot Grand Total */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-gtot {
    background: #e8f4fd !important;
    font-weight: 700 !important;
}

/* Pivot Values - Right align numbers */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-valuescontent {
    text-align: right !important;
}

/* Field List Panel */
[b-sjc20pm4va] .e-pivotfieldlist-container {
    font-size: 12px !important;
}

[b-sjc20pm4va] .e-pivotfieldlist-container .e-list-item {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Drill Through Dialog */
[b-sjc20pm4va] .e-drillthrough-dialog {
    max-width: 90vw !important;
}

[b-sjc20pm4va] .e-drillthrough-dialog .e-grid .e-headercell {
    font-size: 11px !important;
}

[b-sjc20pm4va] .e-drillthrough-dialog .e-grid .e-rowcell {
    font-size: 11px !important;
}

/* ========================================
   PENDING CHANGES BANNER - Fixed, doesn't scroll
   ======================================== */
.pending-changes-banner[b-sjc20pm4va] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 2px solid #f59e0b;
    font-size: 13px;
    color: #92400e;
    animation: slideDown-b-sjc20pm4va 0.3s ease-out;
}

.pending-changes-banner i[b-sjc20pm4va] {
    color: #d97706;
    font-size: 16px;
}

.pending-changes-banner strong[b-sjc20pm4va] {
    color: #92400e;
}

.pending-changes-banner .btn[b-sjc20pm4va] {
    padding: 4px 12px;
    font-size: 12px;
}

@keyframes slideDown-b-sjc20pm4va {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* ========================================
   PAGE CONTENT - Full Width
   Fills remaining viewport space
   ======================================== */
.erp-page-content[b-sjc20pm4va] {
    flex: 1 1 0;
    padding: 10px 20px 10px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Loading Overlay */
.loading-overlay[b-sjc20pm4va] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

.loading-spinner[b-sjc20pm4va] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-sjc20pm4va 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-sjc20pm4va {
    to {
        transform: rotate(360deg);
    }
}

/* Error Container */
.error-container[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #dc2626;
    text-align: center;
}

.error-container i[b-sjc20pm4va] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
}

/* ========================================
   HIGH-PERFORMANCE GRID STYLING
   Full Width & Auto-fit Headers
   Grid fills available space with pager at bottom
   ======================================== */
[b-sjc20pm4va] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Fill available height - keeps pager at bottom */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Grid header (column headers) - FIXED at top */
[b-sjc20pm4va] .e-grid .e-gridheader {
    flex: 0 0 auto !important;
    z-index: 10 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid content (data rows) - THIS IS THE ONLY THING THAT SCROLLS */
[b-sjc20pm4va] .e-grid .e-gridcontent {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* Inner content container */
[b-sjc20pm4va] .e-grid .e-gridcontent .e-content {
    overflow: auto !important;
    height: 100% !important;
}

/* Movable content for frozen columns */
[b-sjc20pm4va] .e-grid .e-movablecontent {
    overflow: auto !important;
}

/* Footer (aggregates) - FIXED at bottom */
[b-sjc20pm4va] .e-grid .e-gridfooter {
    flex: 0 0 auto !important;
    z-index: 5 !important;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-top: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Pager - FIXED at very bottom */
[b-sjc20pm4va] .e-grid .e-gridpager {
    flex: 0 0 auto !important;
    z-index: 5 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-sjc20pm4va] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Column header text - no truncation */
[b-sjc20pm4va] .e-grid .e-headercell .e-headercelldiv {
    white-space: nowrap !important;
    overflow: visible !important;
}

[b-sjc20pm4va] .e-grid .e-rowcell {
    font-size: 13px !important;
    padding: 6px 12px !important;
    vertical-align: middle !important;
}

/* Frozen Columns Visual Separator */
[b-sjc20pm4va] .e-grid .e-frozencontent,
[b-sjc20pm4va] .e-grid .e-frozenheader {
    border-right: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Frozen header stays sticky with main header */
[b-sjc20pm4va] .e-grid .e-frozenheader {
    position: sticky !important;
    top: 0 !important;
    z-index: 11 !important;
}

/* Frozen content scrolls with main content but stays left */
[b-sjc20pm4va] .e-grid .e-frozencontent {
    z-index: 2 !important;
}

/* Row Hover */
[b-sjc20pm4va] .e-grid .e-row:hover:not(.e-editedrow) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row */
[b-sjc20pm4va] .e-grid .e-row.e-selectionbackground {
    background: #dbeafe !important;
}

/* Batch Editing - Dirty Cell */
[b-sjc20pm4va] .e-grid .e-updatedtd {
    background: #fef9c3 !important;
    position: relative;
}

[b-sjc20pm4va] .e-grid .e-updatedtd::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-width: 6px;
    border-style: solid;
    border-color: #f59e0b transparent transparent #f59e0b;
}

/* Batch Editing - New Row */
[b-sjc20pm4va] .e-grid .e-insertedrow {
    background: #dcfce7 !important;
}

/* ========================================
   COMPUTED VALUES STYLING
   ======================================== */
.computed-value[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.computed-value.total-value[b-sjc20pm4va] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.computed-value.highlight[b-sjc20pm4va] {
    color: #0891b2;
    font-weight: var(--BEC-fontWeightBold);
}

/* ========================================
   ITEM CASE BADGES
   ======================================== */
.item-case-badge[b-sjc20pm4va] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
}

.item-case-normal[b-sjc20pm4va] {
    background: #e0f2fe;
    color: #0369a1;
}

.item-case-ps[b-sjc20pm4va] {
    background: #fef3c7;
    color: #92400e;
}

.item-case-pc[b-sjc20pm4va] {
    background: #f3e8ff;
    color: #7c3aed;
}

.item-case-dw[b-sjc20pm4va] {
    background: #fee2e2;
    color: #dc2626;
}

.item-case-default[b-sjc20pm4va] {
    background: #f1f5f9;
    color: #475569;
}

/* ========================================
   PACKAGE LEVEL CELLS & CASCADING DROPDOWNS
   ======================================== */
.package-display[b-sjc20pm4va] {
    cursor: help;
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.pk-level-cell[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* Color-code different levels for visual hierarchy */
[b-sjc20pm4va] .e-grid td:has(.pk-level-cell:not(:empty)) {
    background: linear-gradient(90deg, rgba(0, 120, 212, 0.03) 0%, transparent 100%);
}

/* Full path display in edit wizard */
.full-path-display[b-sjc20pm4va] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    min-height: 38px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

/* Cascading dropdown styling - disabled state */
[b-sjc20pm4va] .e-dropdownlist.e-disabled {
    opacity: 0.5;
    background: var(--BEC-colorNeutralBackground3) !important;
}

/* Clear button visible for cascading dropdowns */
[b-sjc20pm4va] .e-dropdownlist .e-clear-icon {
    color: var(--BEC-colorNeutralForeground3);
}

[b-sjc20pm4va] .e-dropdownlist .e-clear-icon:hover {
    color: var(--BEC-colorStatusDangerForeground1);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.badge-active[b-sjc20pm4va] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
}

.badge-inactive[b-sjc20pm4va] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #fee2e2;
    color: #dc2626;
}

/* ========================================
   AGGREGATE FOOTER
   ======================================== */
[b-sjc20pm4va] .e-grid .e-gridfooter {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-top: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-sjc20pm4va] .e-grid .e-summaryrow .e-summarycell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
}

.aggregate-label[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground2);
}

.aggregate-label strong[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground1);
}

.aggregate-total[b-sjc20pm4va] {
    font-weight: var(--BEC-fontWeightBold);
    color: #059669;
}

.aggregate-total.highlight[b-sjc20pm4va] {
    color: #0891b2;
    font-size: 14px;
}

/* ========================================
   SIDEBAR WIZARD STYLES
   Note: Z-index handled globally in layout-global.css
   ======================================== */

/* Sidebar appearance styling */
[b-sjc20pm4va] .assignment-wizard-sidebar {
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid var(--BEC-colorNeutralStroke1, #e0e0e0) !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

[b-sjc20pm4va] .assignment-wizard-sidebar .e-content-animation {
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Wrapper for all sidebar content */
[b-sjc20pm4va] .assignment-wizard-sidebar>.e-sidebar-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-header[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    flex-shrink: 0;
    top: 0;
    z-index: 100;
    pointer-events: auto !important;
    flex-shrink: 0;
}

.sidebar-header h2[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
}

.sidebar-header h2 i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 20px;
}

.sidebar-title[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-sjc20pm4va] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-sjc20pm4va] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-sjc20pm4va] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-sjc20pm4va] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    position: relative;
    pointer-events: auto !important;
}

.sidebar-step-content[b-sjc20pm4va] {
    flex: 1;
    padding: 0;
}

/* ========== WIZARD-SPECIFIC SCROLLING ========== */
/* Import wizard - no vertical scrolling, compact layout */
[b-sjc20pm4va] .import-wizard-sidebar .sidebar-content {
    overflow-y: visible;
}

[b-sjc20pm4va] .import-wizard-sidebar .form-section {
    padding: 0;
}

[b-sjc20pm4va] .import-wizard-sidebar .section-title {
    margin-bottom: 12px;
}

[b-sjc20pm4va] .import-wizard-sidebar .import-instructions {
    margin-bottom: 12px;
}

[b-sjc20pm4va] .import-wizard-sidebar .template-download-section {
    margin: 12px 0;
}

[b-sjc20pm4va] .import-wizard-sidebar .upload-area {
    padding: 16px;
}

[b-sjc20pm4va] .import-wizard-sidebar .import-summary {
    padding: 12px;
    margin-bottom: 12px;
}

[b-sjc20pm4va] .import-wizard-sidebar .preview-grid {
    max-height: none;
}

[b-sjc20pm4va] .import-wizard-sidebar .preview-table {
    max-height: 250px;
    overflow-y: auto;
}

.sidebar-footer[b-sjc20pm4va] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    pointer-events: auto !important;
    flex-shrink: 0;
    z-index: 10;
    margin-top: auto;
}

.sidebar-footer .btn[b-sjc20pm4va] {
    pointer-events: auto !important;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.sidebar-footer .btn-secondary[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.sidebar-footer .btn-secondary:hover[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.sidebar-footer .btn-primary[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: white;
    border: none;
}

.sidebar-footer .btn-primary:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.sidebar-footer .btn-primary:disabled[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackgroundDisabled, #f0f0f0);
    color: var(--BEC-colorNeutralForegroundDisabled, #a0a0a0);
    cursor: not-allowed;
}

/* Close Button */
.close-btn[b-sjc20pm4va] {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground3, #605e5c);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    transition: all 0.2s ease;
}

.close-btn:hover[b-sjc20pm4va] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* Form Elements */
.form-group[b-sjc20pm4va] {
    margin-bottom: 20px;
}

.form-label[b-sjc20pm4va] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-sjc20pm4va]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.section-title[b-sjc20pm4va] {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i[b-sjc20pm4va] {
    color: #0078d4;
}

.checkbox-wrapper[b-sjc20pm4va] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

/* Detail View */
.detail-section[b-sjc20pm4va] {
    margin-bottom: 24px;
}

.detail-grid[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-item[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item.full-width[b-sjc20pm4va] {
    grid-column: span 2;
}

.detail-label[b-sjc20pm4va] {
    font-size: 12px;
    color: #605e5c;
    font-weight: 500;
}

.detail-value[b-sjc20pm4va] {
    font-size: 14px;
    color: #323130;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.detail-value.computed[b-sjc20pm4va] {
    background: #e0f2fe;
    color: #0369a1;
    font-style: italic;
}

.detail-value.highlight[b-sjc20pm4va] {
    background: #dcfce7;
    color: #16a34a;
    font-weight: 600;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */
.modal-overlay[b-sjc20pm4va] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    /* Must be higher than header (1001) and sidebar (99999) */
    animation: fadeIn-b-sjc20pm4va 0.2s ease-out;
}

@keyframes fadeIn-b-sjc20pm4va {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-sjc20pm4va 0.3s ease-out;
    pointer-events: auto;
}

.modal-container.modal-sm[b-sjc20pm4va] {
    max-width: 400px;
}

/* Ensure modal buttons are clickable */
.modal-footer button[b-sjc20pm4va] {
    pointer-events: auto;
    cursor: pointer;
}

@keyframes slideUp-b-sjc20pm4va {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.modal-header[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    font-size: 18px;
    font-weight: 600;
}

.modal-header i[b-sjc20pm4va] {
    font-size: 20px;
}

.modal-danger .modal-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
}

.modal-warning .modal-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #d97706;
}

.modal-success .modal-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #16a34a;
}

.modal-content[b-sjc20pm4va] {
    padding: 20px;
}

.modal-content p[b-sjc20pm4va] {
    margin: 0 0 12px 0;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

.warning-text[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d97706;
    font-size: 13px;
}

.warning-text i[b-sjc20pm4va] {
    font-size: 14px;
}

.modal-footer[b-sjc20pm4va] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-sjc20pm4va] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn:disabled[b-sjc20pm4va] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm[b-sjc20pm4va] {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-primary[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-success[b-sjc20pm4va] {
    background: #16a34a;
    color: white;
}

.btn-success:hover:not(:disabled)[b-sjc20pm4va] {
    background: #15803d;
}

.btn-warning[b-sjc20pm4va] {
    background: #d97706;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-sjc20pm4va] {
    background: #b45309;
}

.btn-danger[b-sjc20pm4va] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-sjc20pm4va] {
    background: #b91c1c;
}

.btn-outline[b-sjc20pm4va] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground2);
}

.btn-outline:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandBackground);
}

/* ========================================
   PERCENTAGES WIZARD - Clean Microsoft-style
   ======================================== */

/* Percentages Wizard - Compact Layout */
.percentages-wizard .pct-content[b-sjc20pm4va] {
    padding: 20px 24px !important;
    overflow: visible !important;
}

.percentages-wizard .pct-description[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.percentages-wizard .pct-section[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 16px;
    overflow: hidden;
}

.percentages-wizard .pct-section-header[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.percentages-wizard .pct-section-body[b-sjc20pm4va] {
    padding: 14px 16px;
}

.percentages-wizard .pct-row[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.percentages-wizard .pct-input-group[b-sjc20pm4va] {
    flex: 1;
    max-width: 140px;
}

.percentages-wizard .pct-input-group[b-sjc20pm4va]  .e-numeric {
    width: 100% !important;
}

.percentages-wizard .btn-apply[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

.percentages-wizard .pct-hint[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 8px;
}

.percentages-wizard .pct-info-box[b-sjc20pm4va] {
    background: linear-gradient(135deg, #e8f4fd 0%, #d6ecfc 100%);
    border: 1px solid #b3d9f7;
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 14px 16px;
    margin-top: 8px;
}

.percentages-wizard .pct-info-title[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: 600;
    color: #0078d4;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.percentages-wizard .pct-info-title i[b-sjc20pm4va] {
    font-size: 14px;
}

.percentages-wizard .pct-info-text[b-sjc20pm4va] {
    font-size: 12px;
    color: #1a5276;
    line-height: 1.6;
}

.percentages-wizard .pct-info-formula[b-sjc20pm4va] {
    font-size: 12px;
    color: #1a5276;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255, 255, 255, 0.5);
    padding: 6px 10px;
    border-radius: 4px;
    margin: 8px 0;
    display: inline-block;
}

.percentages-wizard .sidebar-footer[b-sjc20pm4va] {
    padding: 12px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

/* Legacy styles kept for compatibility */
.section-description[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 8px 0 16px 0;
    line-height: 1.5;
}

.info-box[b-sjc20pm4va] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.05) 0%, rgba(0, 120, 212, 0.1) 100%);
    border: 1px solid rgba(0, 120, 212, 0.2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-top: 24px;
}

.info-box>i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandBackground);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box strong[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground1);
}

.info-box ul[b-sjc20pm4va] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.info-box li[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 4px;
}

/* ========================================
   COLUMN CHOOSER
   ======================================== */
.column-chooser-actions[b-sjc20pm4va] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-chooser-list[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.column-chooser-item[b-sjc20pm4va] {
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
}

/* ========================================
   PROJECT DETAILS WIZARD
   ======================================== */
.project-details-section[b-sjc20pm4va] {
    margin-bottom: 24px;
}

.project-details-section .section-title[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-details-section .section-title i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandBackground);
    font-size: 14px;
}

/* Financial Summary */
.financial-summary[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
}

.summary-row[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.summary-row:last-child[b-sjc20pm4va] {
    border-bottom: none;
}

.summary-row.total-row[b-sjc20pm4va] {
    border-top: 2px solid var(--BEC-colorBrandBackground);
    border-bottom: none;
    margin-top: 8px;
    padding-top: 16px;
    font-weight: 600;
}

.summary-row.ps-row[b-sjc20pm4va] {
    color: #d97706;
}

.summary-label[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

.summary-value[b-sjc20pm4va] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.summary-value.highlight[b-sjc20pm4va] {
    color: #059669;
    font-size: 16px;
}

.percentage-badge[b-sjc20pm4va] {
    display: inline-block;
    background: var(--BEC-colorBrandBackground);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
}

/* Statistics Grid */
.stats-grid[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-box[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-box:hover[b-sjc20pm4va] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-number[b-sjc20pm4va] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--BEC-colorBrandBackground);
    line-height: 1.2;
}

.stat-text[b-sjc20pm4va] {
    display: block;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Empty State */
.empty-state[b-sjc20pm4va] {
    text-align: center;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground3);
}

.empty-state i[b-sjc20pm4va] {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 16px;
    display: block;
}

.empty-state p[b-sjc20pm4va] {
    font-size: 14px;
    margin: 0 0 8px 0;
}

.empty-state small[b-sjc20pm4va] {
    font-size: 12px;
    opacity: 0.7;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    /* Toolbar adjustments for smaller screens */
}

@media (max-width: 768px) {
    .erp-page-header[b-sjc20pm4va] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .stats-container[b-sjc20pm4va] {
        width: 100%;
        justify-content: space-around;
    }

    .form-row[b-sjc20pm4va] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-sjc20pm4va] {
        grid-template-columns: 1fr;
    }

    .detail-item.full-width[b-sjc20pm4va] {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    [b-sjc20pm4va] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    .pending-changes-banner[b-sjc20pm4va] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ========================================
   BULK IMPORT WIZARD STYLES
   ======================================== */

/* Step Indicator */
.import-steps[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.import-steps .step[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.import-steps .step-number[b-sjc20pm4va] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.import-steps .step.active .step-number[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.import-steps .step.completed .step-number[b-sjc20pm4va] {
    background: #16a34a;
    color: white;
}

.import-steps .step-label[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.import-steps .step.active .step-label[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.import-steps .step-line[b-sjc20pm4va] {
    width: 40px;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 8px;
    margin-bottom: 18px;
}

.import-steps .step-line.completed[b-sjc20pm4va] {
    background: #16a34a;
}

/* Import Step Content */
.import-step-content[b-sjc20pm4va] {
    padding: 8px 0;
}

.import-step-content .step-title[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.import-step-content .step-title i[b-sjc20pm4va] {
    font-size: 20px;
    color: var(--BEC-colorBrandBackground);
}

.import-step-content .step-title h3[b-sjc20pm4va] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.import-step-content .step-description[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Template Info Card */
.template-info[b-sjc20pm4va] {
    margin-bottom: 20px;
}

.template-info .info-card[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--BEC-borderRadiusMedium);
}

.template-info .info-card i[b-sjc20pm4va] {
    font-size: 24px;
    color: #16a34a;
}

.template-info .info-card strong[b-sjc20pm4va] {
    display: block;
    font-size: 13px;
    color: #166534;
}

.template-info .info-card span[b-sjc20pm4va] {
    font-size: 11px;
    color: #15803d;
}

/* Template Columns */
.template-columns[b-sjc20pm4va] {
    margin-bottom: 24px;
}

.template-columns h4[b-sjc20pm4va] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 10px;
}

.columns-grid[b-sjc20pm4va] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.col-tag[b-sjc20pm4va] {
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
}

.col-tag.required[b-sjc20pm4va] {
    background: #fef3c7;
    color: #92400e;
}

/* File Upload Area */
.file-upload-area[b-sjc20pm4va] {
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 40px 20px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}

.file-upload-area:hover[b-sjc20pm4va],
.file-upload-area.dragging[b-sjc20pm4va] {
    border-color: var(--BEC-colorBrandBackground);
    background: #f0f9ff;
}

.file-upload-area.has-file[b-sjc20pm4va] {
    border-style: solid;
    border-color: #16a34a;
    background: #f0fdf4;
}

.file-upload-area>i[b-sjc20pm4va] {
    font-size: 40px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 12px;
    display: block;
}

.file-upload-area.has-file>i.file-icon[b-sjc20pm4va] {
    color: #16a34a;
}

.file-upload-area p[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.file-upload-area .file-name[b-sjc20pm4va] {
    font-weight: 600;
    color: #166534;
}

.file-upload-area .file-size[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    display: block;
    margin-bottom: 12px;
}

.file-upload-area span[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.file-upload-area .file-input[b-sjc20pm4va] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-error[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 12px;
    font-size: 12px;
    color: #dc2626;
}

/* Validation Summary */
.validation-summary[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.validation-summary .summary-card[b-sjc20pm4va] {
    padding: 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
}

.validation-summary .summary-card.success[b-sjc20pm4va] {
    background: #f0fdf4;
    border: 1px solid #86efac;
}

.validation-summary .summary-card.warning[b-sjc20pm4va] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.validation-summary .summary-card.error[b-sjc20pm4va] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.validation-summary .summary-card i[b-sjc20pm4va] {
    font-size: 20px;
    margin-bottom: 4px;
}

.validation-summary .summary-card.success i[b-sjc20pm4va] {
    color: #16a34a;
}

.validation-summary .summary-card.warning i[b-sjc20pm4va] {
    color: #d97706;
}

.validation-summary .summary-card.error i[b-sjc20pm4va] {
    color: #dc2626;
}

.validation-summary .count[b-sjc20pm4va] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.validation-summary .summary-card.success .count[b-sjc20pm4va] {
    color: #16a34a;
}

.validation-summary .summary-card.warning .count[b-sjc20pm4va] {
    color: #d97706;
}

.validation-summary .summary-card.error .count[b-sjc20pm4va] {
    color: #dc2626;
}

.validation-summary .label[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Preview Table */
.preview-table-container[b-sjc20pm4va] {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 16px;
}

.preview-table[b-sjc20pm4va] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.preview-table th[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground3);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.preview-table td[b-sjc20pm4va] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.preview-table tr.valid[b-sjc20pm4va] {
    background: #f0fdf4;
}

.preview-table tr.warning[b-sjc20pm4va] {
    background: #fffbeb;
}

.preview-table tr.error[b-sjc20pm4va] {
    background: #fef2f2;
}

.preview-table .desc-cell[b-sjc20pm4va] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Validation Errors */
.validation-errors[b-sjc20pm4va] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 12px;
}

.validation-errors h4[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #dc2626;
    margin: 0 0 8px 0;
}

.validation-errors ul[b-sjc20pm4va] {
    margin: 0;
    padding-left: 20px;
    font-size: 11px;
    color: #991b1b;
}

.validation-errors li[b-sjc20pm4va] {
    margin-bottom: 4px;
}

.validation-errors .more-errors[b-sjc20pm4va] {
    font-size: 11px;
    color: #dc2626;
    font-style: italic;
}

/* Large Button */
.btn-lg[b-sjc20pm4va] {
    padding: 12px 24px;
    font-size: 14px;
}

/* =====================================================
   IMPORT WIZARD STYLES (PackageLevels Pattern)
   ===================================================== */

/* Template Download Section */
.template-download-section[b-sjc20pm4va] {
    margin: 16px 0;
}

.btn-download[b-sjc20pm4va] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px dashed var(--BEC-colorBrandStroke1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorBrandForeground1);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-download:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-style: solid;
}

.btn-download:disabled[b-sjc20pm4va] {
    opacity: 0.7;
    cursor: wait;
}

.btn-download .fa-spin[b-sjc20pm4va] {
    animation: spin-b-sjc20pm4va 1s linear infinite;
}

/* Template Download Success Message */
.template-download-success[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--BEC-borderRadiusMedium);
    color: #059669;
    font-size: 13px;
    font-weight: 500;
    animation: slideIn-b-sjc20pm4va 0.3s ease-out;
}

.template-download-success i[b-sjc20pm4va] {
    font-size: 16px;
    color: #10b981;
}

@keyframes slideIn-b-sjc20pm4va {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* Import Instructions */
.import-instructions[b-sjc20pm4va] {
    margin-bottom: 16px;
}

.instruction-card[b-sjc20pm4va] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 3px solid var(--BEC-colorBrandForeground1);
}

.instruction-card i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
    flex-shrink: 0;
}

.instruction-card ul[b-sjc20pm4va] {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.instruction-card li[b-sjc20pm4va] {
    margin-bottom: 4px;
}

/* Upload Area */
.upload-area[b-sjc20pm4va] {
    margin: 16px 0;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px dashed var(--BEC-colorNeutralStroke1);
}

.selected-file-info[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #dcfce7;
    border-radius: var(--BEC-borderRadiusSmall);
    color: #166534;
}

.selected-file-info i[b-sjc20pm4va] {
    font-size: 16px;
}

/* Import Error Message */
.import-error[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fee2e2;
    border-radius: var(--BEC-borderRadiusSmall);
    color: #b91c1c;
    font-size: 13px;
}

/* Import Summary */
.import-summary[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.import-summary .summary-item[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.import-summary .summary-item.error[b-sjc20pm4va] {
    grid-column: 1 / -1;
    background: #fee2e2;
    color: #b91c1c;
}

.import-summary .summary-label[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.import-summary .summary-value[b-sjc20pm4va] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* Validation Success */
.validation-success[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #dcfce7;
    border-radius: var(--BEC-borderRadiusMedium);
    color: #166534;
    margin-bottom: 16px;
}

.validation-success i[b-sjc20pm4va] {
    font-size: 20px;
}

/* =====================================================
   HELP WIZARD STYLES
   ===================================================== */

/* Help Wizard Sidebar */
.help-wizard-sidebar[b-sjc20pm4va] {
    --help-accent: #3b82f6;
    --help-accent-light: #dbeafe;
    --help-success: #10b981;
    --help-warning: #f59e0b;
    --help-info: #6366f1;
}

.help-content[b-sjc20pm4va] {
    padding: 0 !important;
}

/* Step Indicators */
.help-steps-indicator[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground3) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.help-step[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.help-step.active[b-sjc20pm4va] {
    opacity: 1;
}

.help-step.completed[b-sjc20pm4va] {
    opacity: 0.8;
}

.help-step .step-number[b-sjc20pm4va] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke1);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    transition: all 0.3s ease;
}

.help-step.active .step-number[b-sjc20pm4va] {
    background: var(--help-accent);
    border-color: var(--help-accent);
    color: white;
    transform: scale(1.1);
}

.help-step.completed .step-number[b-sjc20pm4va] {
    background: var(--help-success);
    border-color: var(--help-success);
    color: white;
}

.help-step .step-label[b-sjc20pm4va] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    text-align: center;
}

.help-step.active .step-label[b-sjc20pm4va] {
    color: var(--help-accent);
    font-weight: 600;
}

/* Help Step Content */
.help-step-content[b-sjc20pm4va] {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.help-section[b-sjc20pm4va] {
    margin-bottom: 20px;
}

.help-section:last-child[b-sjc20pm4va] {
    margin-bottom: 0;
}

.help-section h3[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--help-accent-light);
}

.help-section h3 i[b-sjc20pm4va] {
    color: var(--help-accent);
}

.help-section p[b-sjc20pm4va] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 12px 0;
}

/* Column List */
.help-column-list[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-column-item[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border-left: 3px solid var(--help-accent);
}

.help-column-item .column-name[b-sjc20pm4va] {
    font-weight: 600;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    min-width: 100px;
}

.help-column-item .column-desc[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    text-align: right;
}

/* Help Tips */
.help-tips[b-sjc20pm4va] {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.help-tips li[b-sjc20pm4va] {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.help-tips li:last-child[b-sjc20pm4va] {
    border-bottom: none;
}

.help-tips li[b-sjc20pm4va]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--help-success);
    font-weight: bold;
}

/* Formula Cards */
.formula-card[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left: 3px solid var(--help-accent);
}

.formula-card .formula-row[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.formula-card .formula-code[b-sjc20pm4va] {
    background: var(--help-accent);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
}

.formula-card .formula-name[b-sjc20pm4va] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
}

.formula-card .formula-desc[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* Code Example */
.code-example[b-sjc20pm4va] {
    background: #1e293b;
    padding: 12px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 12px 0;
}

.code-example code[b-sjc20pm4va] {
    color: #22d3ee;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.code-explanation[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Formula Box */
.formula-box[b-sjc20pm4va] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 14px 16px;
    margin: 12px 0;
}

.formula-box.special[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fcd34d;
}

.formula-box .formula-title[b-sjc20pm4va] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.formula-box code.formula[b-sjc20pm4va] {
    display: block;
    background: #1e293b;
    color: #22d3ee;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
}

.formula-box p[b-sjc20pm4va] {
    font-size: 12px;
    color: #78350f;
    margin: 10px 0 0 0;
}

/* Formula Exception */
.formula-exception[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fef3c7;
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 10px;
}

.formula-exception i[b-sjc20pm4va] {
    color: #d97706;
}

.formula-exception span[b-sjc20pm4va] {
    font-size: 12px;
    color: #92400e;
    font-weight: 500;
}

/* Item Case Cards */
.item-case-card[b-sjc20pm4va] {
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.item-case-card .case-header[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-weight: 600;
}

.item-case-card.normal .case-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.item-case-card.rateonly .case-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.item-case-card.ps .case-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.item-case-card .case-code[b-sjc20pm4va] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.item-case-card.normal .case-code[b-sjc20pm4va] {
    color: #166534;
}

.item-case-card.rateonly .case-code[b-sjc20pm4va] {
    color: #92400e;
}

.item-case-card.ps .case-code[b-sjc20pm4va] {
    color: #1e40af;
}

.item-case-card .case-badge[b-sjc20pm4va] {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.item-case-card.normal .case-badge[b-sjc20pm4va] {
    background: #166534;
    color: white;
}

.item-case-card .case-badge.warning[b-sjc20pm4va] {
    background: #d97706;
    color: white;
}

.item-case-card .case-badge.info[b-sjc20pm4va] {
    background: #3b82f6;
    color: white;
}

.item-case-card .case-body[b-sjc20pm4va] {
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground1);
}

.item-case-card .case-body p[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.item-case-card .case-body ul[b-sjc20pm4va] {
    margin: 0;
    padding-left: 20px;
}

.item-case-card .case-body li[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 4px;
}

.item-case-card .case-body li strong[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground1);
}

/* Percentage Info */
.percentage-info[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.percentage-item[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.percentage-item .pct-label[b-sjc20pm4va] {
    background: var(--help-info);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

.percentage-item .pct-desc[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

/* Help Footer */
.help-footer[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.help-checkbox[b-sjc20pm4va] {
    flex-shrink: 0;
}

[b-sjc20pm4va] .help-checkbox .e-checkbox-wrapper .e-label {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.help-nav-buttons[b-sjc20pm4va] {
    display: flex;
    gap: 10px;
}

/* ========================================
   NEW DESIGN - VISITOR DASHBOARD STYLE
   ======================================== */
.visitor-dashboard-container[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    background-color: var(--BEC-colorNeutralBackground3);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
}

.dashboard-header[b-sjc20pm4va] {
    background-color: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-title-section[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-right-section[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-icon[b-sjc20pm4va] {
    font-size: 24px;
    display: flex;
    align-items: center;
}

.page-title[b-sjc20pm4va] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.page-subtitle[b-sjc20pm4va] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.header-stats[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding-right: var(--BEC-spacingHorizontalL);
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
}

.header-stat-item[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.header-stat-value[b-sjc20pm4va] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.header-stat-label[b-sjc20pm4va] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Financial Colors */
.header-stat-value.success[b-sjc20pm4va] {
    color: #2563eb;
}

/* Direct */
.header-stat-value.warning[b-sjc20pm4va] {
    color: #059669;
}

/* Indirect */
.header-stat-value.info[b-sjc20pm4va] {
    color: #7c3aed;
}

/* Prov Sum */
.header-stat-value.highlight[b-sjc20pm4va] {
    color: #dc2626;
}

/* Selling */

.header-actions[b-sjc20pm4va] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-icon[b-sjc20pm4va] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-sjc20pm4va] {
    background-color: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-colorBrandBackground);
}

.dashboard-scroll-area[b-sjc20pm4va] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalXXL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalM);
}

/* Grid Card Wrapper */
.grid-section-card[b-sjc20pm4va] {
    background-color: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    /* border: 1px solid var(--BEC-colorNeutralStroke1); */
    flex: 1;
    /* Expand to fill space */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Contain the grid */
}
/* /Components/Pages/MainLayout/Estimation/LineItemsPivot.razor.rz.scp.css */
/* ========================================
   LINE ITEMS PIVOT PAGE
   Dedicated pivot table analysis view
   ======================================== */

.pivot-page-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--BEC-colorNeutralBackground2, #f5f5f5);
}

/* ========================================
   PAGE HEADER - Matching Line Items BOQ
   ======================================== */
.erp-page-header[b-jw4quof5c2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    flex-shrink: 0;
}

.header-left[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-title[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #333);
    margin: 0;
}

.page-title i[b-jw4quof5c2] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.back-btn[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2, #666);
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-btn:hover[b-jw4quof5c2] {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.header-right[b-jw4quof5c2] {
    display: flex;
    align-items: center;
}

/* Financial Summary - Compact single line */
.header-financial-summary[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}

.fin-item[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.fin-item.project-info[b-jw4quof5c2] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--BEC-colorBrandBackground2, #deecf9);
    border-radius: 4px;
}

.fin-code[b-jw4quof5c2] {
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 11px;
}

.fin-name[b-jw4quof5c2] {
    color: var(--BEC-colorNeutralForeground2, #666);
    font-size: 11px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-label[b-jw4quof5c2] {
    font-size: 9px;
    color: var(--BEC-colorNeutralForeground3, #999);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fin-value[b-jw4quof5c2] {
    font-weight: 600;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #333);
}

.fin-value.direct[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.fin-value.indirect[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteBlueForeground1, #0078d4);
}

.fin-value.indirect small[b-jw4quof5c2] {
    font-size: 9px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.fin-value.ps[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6914);
}

.fin-value.selling[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
    font-weight: 700;
}

.fin-divider[b-jw4quof5c2] {
    width: 1px;
    height: 24px;
    background: var(--BEC-colorNeutralStroke2, #e0e0e0);
}

/* ========================================
   MAIN CONTENT
   ======================================== */
.pivot-content[b-jw4quof5c2] {
    flex: 1;
    padding: 12px;
    overflow: auto;
    min-height: 0;
}

/* Loading State */
.loading-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.loading-spinner[b-jw4quof5c2] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-top-color: var(--BEC-colorBrandForeground1, #0078d4);
    border-radius: 50%;
    animation: spin-b-jw4quof5c2 1s linear infinite;
}

@keyframes spin-b-jw4quof5c2 {
    to { transform: rotate(360deg); }
}

/* Error State */
.error-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
}

.error-container i[b-jw4quof5c2] {
    font-size: 48px;
}

/* Empty State */
.empty-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2, #666);
}

.empty-container i[b-jw4quof5c2] {
    font-size: 64px;
    opacity: 0.5;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-jw4quof5c2] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-jw4quof5c2] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: white;
}

.btn-primary:hover[b-jw4quof5c2] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.btn-secondary[b-jw4quof5c2] {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    color: var(--BEC-colorNeutralForeground1, #333);
}

.btn-secondary:hover[b-jw4quof5c2] {
    background: var(--BEC-colorNeutralBackground4, #e0e0e0);
}

/* ========================================
   SYNCFUSION PIVOT OVERRIDES
   ======================================== */
[b-jw4quof5c2] .e-pivotview {
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

[b-jw4quof5c2] .e-pivotview .e-grouping-bar {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0) !important;
    padding: 6px !important;
}

[b-jw4quof5c2] .e-pivotview .e-headercell {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

[b-jw4quof5c2] .e-pivotview .e-gtot {
    background: linear-gradient(135deg, #e8f4fd 0%, #d6ecfc 100%) !important;
    font-weight: 700 !important;
}

[b-jw4quof5c2] .e-pivotview .e-summary {
    background: var(--BEC-colorNeutralBackground2, #f5f5f5) !important;
    font-weight: 600 !important;
}

[b-jw4quof5c2] .e-pivotview .e-valuescontent {
    text-align: right !important;
    font-size: 12px !important;
}

[b-jw4quof5c2] .e-pivotview .e-rowsheader {
    font-size: 12px !important;
}

/* Field List Styling */
[b-jw4quof5c2] .e-pivotfieldlist-wrapper {
    font-size: 12px !important;
}

[b-jw4quof5c2] .e-pivotfieldlist .e-field-list-tree .e-list-text {
    font-size: 12px !important;
}
/* /Components/Pages/MainLayout/Estimation/PackageLevels.razor.rz.scp.css */
/* ========================================
   PACKAGE LEVELS ADMINISTRATION
   Following ItemCases.razor.css pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header
   ✅ Sticky Action Toolbar
   ✅ Sidebar Wizards (MS Outlook/OneDrive style)
   ✅ Modal Dialogs for confirmations
   ✅ Professional styling
   ======================================== */

/* Smooth scrolling */
:global(html)[b-n27yu04t5c] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-n27yu04t5c] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-n27yu04t5c] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-n27yu04t5c] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-n27yu04t5c] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.header-right[b-n27yu04t5c] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
}

.stat-card[b-n27yu04t5c] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-n27yu04t5c] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-n27yu04t5c] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-n27yu04t5c] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR
   ======================================== */
[b-n27yu04t5c] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    min-height: 26px !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-n27yu04t5c] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    opacity: 0.6 !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-n27yu04t5c] {
    flex: 1;
    padding: 10px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-n27yu04t5c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
}

.loading-spinner[b-n27yu04t5c] {
    font-size: 32px;
    color: var(--BEC-colorBrandBackground);
}

.loading-overlay p[b-n27yu04t5c] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Error Container */
.error-container[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}

.error-container i[b-n27yu04t5c] {
    font-size: 48px;
    color: #dc2626;
}

.error-container p[b-n27yu04t5c] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
}

/* Placeholder Content */
.placeholder-content[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.placeholder-icon[b-n27yu04t5c] {
    font-size: 48px;
    color: var(--BEC-colorBrandBackground);
    opacity: 0.5;
}

.placeholder-content h3[b-n27yu04t5c] {
    margin: 0;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.placeholder-content p[b-n27yu04t5c] {
    margin: 0;
    font-size: 14px;
}

.placeholder-badge[b-n27yu04t5c] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
}

/* ========================================
   SIDEBAR WIZARD STYLES
   ======================================== */
[b-n27yu04t5c] .assignment-wizard-sidebar {
    background: var(--BEC-colorNeutralBackground1) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-n27yu04t5c] .assignment-wizard-sidebar .e-content-animation {
    height: 100%;
}

.sidebar-header[b-n27yu04t5c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.sidebar-title[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.sidebar-title i[b-n27yu04t5c] {
    font-size: 18px;
}

.sidebar-close-btn[b-n27yu04t5c] {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.sidebar-close-btn:hover[b-n27yu04t5c] {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-content[b-n27yu04t5c] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.sidebar-step-content[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-footer[b-n27yu04t5c] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM STYLES
   ======================================== */
.form-row[b-n27yu04t5c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.form-group[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-n27yu04t5c] {
    grid-column: 1 / -1;
}

.form-label[b-n27yu04t5c] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-n27yu04t5c]::after {
    content: " *";
    color: #dc2626;
}

.checkbox-wrapper[b-n27yu04t5c] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

/* Info Banner */
.info-banner[b-n27yu04t5c] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #e0f2fe;
    border: 1px solid #0ea5e9;
    border-radius: var(--BEC-borderRadiusMedium);
    color: #0369a1;
    font-size: 13px;
    margin-bottom: 20px;
}

.info-banner i[b-n27yu04t5c] {
    font-size: 16px;
    margin-top: 2px;
}

/* Form Hint */
.form-hint[b-n27yu04t5c] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

/* Auto-Generated Section */
.auto-generated-section[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    margin-top: 20px;
}

.auto-generated-section .section-title[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.auto-generated-section .section-title i[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
}

.auto-field[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.auto-field:last-child[b-n27yu04t5c] {
    border-bottom: none;
    padding-bottom: 0;
}

.auto-label[b-n27yu04t5c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.auto-value[b-n27yu04t5c] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-family: 'Consolas', 'Monaco', monospace;
}

.auto-value.path[b-n27yu04t5c] {
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

/* Parent Info Card */
.parent-info-card[b-n27yu04t5c] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 20px;
    overflow: hidden;
}

.parent-info-header[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #0ea5e9;
    color: white;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.parent-info-header i[b-n27yu04t5c] {
    font-size: 14px;
}

.parent-info-content[b-n27yu04t5c] {
    padding: 12px 16px;
}

.parent-detail[b-n27yu04t5c] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.parent-detail:last-child[b-n27yu04t5c] {
    margin-bottom: 0;
}

.parent-label[b-n27yu04t5c] {
    font-size: 11px;
    color: #0369a1;
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 50px;
    text-transform: uppercase;
}

.parent-value[b-n27yu04t5c] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.parent-value.path[b-n27yu04t5c] {
    font-weight: var(--BEC-fontWeightRegular);
    font-style: italic;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
}

/* Detail View Styles */
.detail-section[b-n27yu04t5c] {
    margin-bottom: 24px;
}

.section-title[b-n27yu04t5c] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.detail-grid[b-n27yu04t5c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-item[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-n27yu04t5c] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-n27yu04t5c] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Column Chooser Styles */
.column-chooser-actions[b-n27yu04t5c] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.column-chooser-list[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-chooser-item[b-n27yu04t5c] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:disabled[b-n27yu04t5c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-n27yu04t5c] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-n27yu04t5c] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-success[b-n27yu04t5c] {
    background: #16a34a;
    color: white;
}

.btn-success:hover:not(:disabled)[b-n27yu04t5c] {
    background: #15803d;
}

.btn-warning[b-n27yu04t5c] {
    background: #d97706;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-n27yu04t5c] {
    background: #b45309;
}

.btn-danger[b-n27yu04t5c] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-n27yu04t5c] {
    background: #b91c1c;
}

.btn-outline[b-n27yu04t5c] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-outline:hover:not(:disabled)[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-sm[b-n27yu04t5c] {
    padding: 4px 10px;
    font-size: 12px;
}

/* ========================================
   MODAL STYLES
   ======================================== */
.modal-overlay[b-n27yu04t5c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-n27yu04t5c 0.2s ease;
}

@keyframes fadeIn-b-n27yu04t5c {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    min-width: 400px;
    max-width: 500px;
    animation: slideIn-b-n27yu04t5c 0.2s ease;
}

@keyframes slideIn-b-n27yu04t5c {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.modal-danger .modal-header[b-n27yu04t5c] {
    background: #fef2f2;
    color: #dc2626;
}

.modal-warning .modal-header[b-n27yu04t5c] {
    background: #fffbeb;
    color: #d97706;
}

.modal-success .modal-header[b-n27yu04t5c] {
    background: #f0fdf4;
    color: #16a34a;
}

.modal-content[b-n27yu04t5c] {
    padding: 20px;
}

.modal-content p[b-n27yu04t5c] {
    margin: 0 0 12px 0;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
}

.warning-text[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d97706 !important;
    font-size: 13px !important;
}

.info-text[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0369a1 !important;
    font-size: 13px !important;
}

.modal-footer[b-n27yu04t5c] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   BADGE STYLES
   ======================================== */
.badge-active[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
}

.badge-inactive[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #fee2e2;
    color: #dc2626;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    text-align: center;
}

.empty-state i[b-n27yu04t5c] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
}

.empty-state h3[b-n27yu04t5c] {
    margin: 0;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.empty-state p[b-n27yu04t5c] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   TREEGRID STYLES
   ======================================== */
[b-n27yu04t5c] .e-treegrid {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

[b-n27yu04t5c] .e-treegrid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-n27yu04t5c] .e-treegrid .e-headercell {
    background: var(--BEC-colorNeutralBackground2) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 8px 12px !important;
}

[b-n27yu04t5c] .e-treegrid .e-rowcell {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-n27yu04t5c] .e-treegrid .e-row:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-n27yu04t5c] .e-treegrid .e-row.e-altrow .e-rowcell {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-n27yu04t5c] .e-treegrid .e-row.e-altrow:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground2Hover) !important;
}

[b-n27yu04t5c] .e-treegrid .e-rowcell.e-selectionbackground {
    background: rgba(0, 120, 212, 0.1) !important;
}

[b-n27yu04t5c] .e-treegrid .e-treegridexpand,
[b-n27yu04t5c] .e-treegrid .e-treegridcollapse {
    color: var(--BEC-colorBrandForeground1) !important;
}

[b-n27yu04t5c] .e-treegrid .e-checkbox-wrapper .e-frame {
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

[b-n27yu04t5c] .e-treegrid .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* TreeGrid Pager */
[b-n27yu04t5c] .e-treegrid .e-pager {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 8px 12px !important;
}

[b-n27yu04t5c] .e-treegrid .e-pager .e-pagercontainer {
    background: transparent !important;
}

/* Level Badge Styles */
.level-badge[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.level-badge.level-1[b-n27yu04t5c] {
    background: #dbeafe;
    color: #1d4ed8;
}

.level-badge.level-2[b-n27yu04t5c] {
    background: #dcfce7;
    color: #16a34a;
}

.level-badge.level-3[b-n27yu04t5c] {
    background: #fef3c7;
    color: #d97706;
}

.level-badge.level-4[b-n27yu04t5c] {
    background: #fce7f3;
    color: #be185d;
}

.level-badge.level-5[b-n27yu04t5c] {
    background: #e0e7ff;
    color: #4338ca;
}

/* Full Path Text */
.full-path-text[b-n27yu04t5c] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-style: italic;
}

/* ========================================
   IMPORT WIZARD STYLES
   ======================================== */

/* Import Instructions Card */
.import-instructions[b-n27yu04t5c] {
    margin-bottom: 20px;
}

.instruction-card[b-n27yu04t5c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 8px;
    border-left: 4px solid #2196f3;
}

.instruction-card i[b-n27yu04t5c] {
    color: #2196f3;
    font-size: 24px;
    flex-shrink: 0;
}

.instruction-card ul[b-n27yu04t5c] {
    margin: 8px 0 0 0;
    padding-left: 20px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
}

.instruction-card ul li[b-n27yu04t5c] {
    margin-bottom: 4px;
}

/* Upload Area */
.upload-area[b-n27yu04t5c] {
    margin: 20px 0;
    padding: 20px;
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.2s;
}

.upload-area:hover[b-n27yu04t5c] {
    border-color: var(--BEC-colorBrandStroke1);
}

.selected-file-info[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground1);
}

.selected-file-info i[b-n27yu04t5c] {
    color: #217346;
    font-size: 20px;
}

/* Import Error */
.import-error[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffebee;
    border-radius: 6px;
    color: #c62828;
    margin-top: 16px;
}

.import-error i[b-n27yu04t5c] {
    flex-shrink: 0;
}

/* Import Summary */
.import-summary[b-n27yu04t5c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 8px;
}

.summary-item[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.summary-item.error .summary-value[b-n27yu04t5c] {
    color: #c62828;
}

.summary-label[b-n27yu04t5c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.summary-value[b-n27yu04t5c] {
    font-size: 24px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

/* Validation Errors */
.validation-errors[b-n27yu04t5c] {
    background: #ffebee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.validation-errors h4[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c62828;
    margin: 0 0 12px 0;
    font-size: 14px;
}

.validation-errors ul[b-n27yu04t5c] {
    margin: 0;
    padding-left: 24px;
    color: #b71c1c;
    font-size: 13px;
}

.validation-errors li[b-n27yu04t5c] {
    margin-bottom: 4px;
}

.validation-errors .more-errors[b-n27yu04t5c] {
    font-style: italic;
    color: #e57373;
}

/* Validation Success */
.validation-success[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: #e8f5e9;
    border-radius: 8px;
    color: #2e7d32;
    margin-bottom: 20px;
}

.validation-success i[b-n27yu04t5c] {
    font-size: 24px;
}

/* Preview Grid */
.preview-grid[b-n27yu04t5c] {
    margin-top: 20px;
}

.preview-grid h4[b-n27yu04t5c] {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.preview-table[b-n27yu04t5c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.preview-table th[b-n27yu04t5c],
.preview-table td[b-n27yu04t5c] {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.preview-table th[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground3);
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    position: sticky;
    top: 0;
}

.preview-table tbody tr:hover[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground2);
}

.preview-table .row-error[b-n27yu04t5c] {
    background: #ffebee;
}

.preview-table .row-error:hover[b-n27yu04t5c] {
    background: #ffcdd2;
}

/* Badges for preview */
.badge-valid[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.badge-error[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #ffebee;
    color: #c62828;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: help;
}

/* Import Results */
.import-results[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.result-icon[b-n27yu04t5c] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.result-icon.success[b-n27yu04t5c] {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}

.result-icon i[b-n27yu04t5c] {
    font-size: 40px;
    color: white;
}

.result-stats[b-n27yu04t5c] {
    text-align: center;
}

.stat-row[b-n27yu04t5c] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground1);
}

.stat-row strong[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-n27yu04t5c] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .form-row[b-n27yu04t5c] {
        grid-template-columns: 1fr;
    }
    
    .detail-grid[b-n27yu04t5c] {
        grid-template-columns: 1fr;
    }
    
    .modal-container[b-n27yu04t5c] {
        min-width: 90%;
        margin: 0 16px;
    }
    
    .import-summary[b-n27yu04t5c] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/MainLayout/FlightTicket/BookingTeam/BookingDashboard.razor.rz.scp.css */
/* ========================================
   BOOKING TEAM DASHBOARD - V3 BEC DESIGN TOKENS
   Uses --BEC-* design tokens from the design system.
   ======================================== */

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}


/* ========================================
   PHASE 2: PAGE HEADER (Sticky) - MATCHING REQUEST DETAIL
   ======================================== */
.erp-page-header[b-22pogpxcos] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
}

/* Header Middle for Filters — removed from wireframe v3 */


.filter-item[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label[b-22pogpxcos] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
}

/* Override Syncfusion Dropdown for header */
[b-22pogpxcos] .filter-item .e-dropdownlist.e-input-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 28px !important;
}

[b-22pogpxcos] .filter-item .e-dropdownlist.e-input-group .e-input {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.page-title[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
    background: none;
    padding: 0;
    border-radius: 0;
}

.help-icon-btn[b-22pogpxcos] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    margin-left: 8px;
    font-size: 14px;
}

/* Stats Cards (Copied from RequestDetail) */
.stats-container[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: none;
    height: auto;
}

.stat-card[b-22pogpxcos] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
}

.stat-card[b-22pogpxcos]::after {
    display: none;
}

/* Remove dashboard separators */

.stat-value[b-22pogpxcos] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-22pogpxcos] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0;
}

.stat-divider[b-22pogpxcos] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LIVE INDICATOR - Minimal Style
   ======================================== */
.live-indicator[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot[b-22pogpxcos] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #107c10;
    animation: pulse-b-22pogpxcos 2s infinite;
}

.live-text[b-22pogpxcos] {
    font-size: 11px;
    font-weight: 600;
    color: #107c10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse-b-22pogpxcos {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

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

/* ========================================
   PHASE 3: ACTION TOOLBAR (Sticky, single row, aligned)
   ======================================== */
[b-22pogpxcos] .e-toolbar.e-control {
    position: sticky !important;
    top: 40px !important;
    z-index: 90 !important;
    background: #FAFAF9 !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* Toolbar inner wrapper - keep items on one row, vertically centered */
[b-22pogpxcos] .e-toolbar .e-toolbar-items {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    flex-wrap: nowrap !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-left,
[b-22pogpxcos] .e-toolbar .e-toolbar-center,
[b-22pogpxcos] .e-toolbar .e-toolbar-right {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
}

/* Toolbar Items - compact height */
[b-22pogpxcos] .e-toolbar .e-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
    color: var(--BEC-colorBrandBackground) !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Primary Button Style in Toolbar */
[b-22pogpxcos] .primary-action-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
}

[b-22pogpxcos] .primary-action-btn .e-tbar-btn .e-icons,
[b-22pogpxcos] .primary-action-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
}

[b-22pogpxcos] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    color: white !important;
}

[b-22pogpxcos] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-22pogpxcos] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Separator - vertically centered */
[b-22pogpxcos] .e-toolbar .e-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: 20px !important;
    margin: 0 8px !important;
    align-self: center !important;
}

/* Search Input - match toolbar row height so it doesn't override */
[b-22pogpxcos] .e-toolbar .e-input-group,
[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-22pogpxcos] .e-toolbar .e-input-group .e-input,
[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-input-group .e-input {
    height: 30px !important;
    line-height: 30px !important;
}

/* ========================================
   PHASE 4: GRID CONTENT - COLOR CODED
   ======================================== */
.erp-page-content[b-22pogpxcos] {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-22pogpxcos] .e-grid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

/* Grid Header - Neutral */
[b-22pogpxcos] .e-grid .e-gridheader {
    background-color: #FAFAF9 !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-22pogpxcos] .e-headercell {
    background-color: #FAFAF9 !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px !important;
}

[b-22pogpxcos] .e-grid .e-headercell .e-headertext {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

/* Grid Rows */
[b-22pogpxcos] .e-grid .e-rowcell {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px !important;
    color: #323130 !important;
    padding: 8px 12px !important;
}

/* Zebra striping */
[b-22pogpxcos] .e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #FAFAFA !important;
}

/* Hover & Selection */
[b-22pogpxcos] .e-grid .e-row:hover .e-rowcell {
    background-color: #F5F5F5 !important;
}

[b-22pogpxcos] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: #EBF3FC !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   CUSTOM TEMPLATE CLASSES
   ======================================== */

/* Text Utilities */
.text-bold[b-22pogpxcos] {
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1);
}

.text-small[b-22pogpxcos] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Traveller Column */
.emp-code-badge[b-22pogpxcos] {
    font-family: monospace;
    font-size: 11px;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorBrandForeground1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--BEC-colorBrandStroke2);
}

.department-text[b-22pogpxcos],
.job-title-text[b-22pogpxcos],
.created-by-text[b-22pogpxcos],
.purpose-text[b-22pogpxcos] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Route */
.route-simple[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
}

.route-simple .city[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground1);
}

.route-simple .arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: 600;
}

/* Stacked Route for Multi-Leg */
.route-stacked[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.route-leg[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.3;
}

.route-leg .city[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    white-space: nowrap;
}

.route-leg .arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* First leg gets accent color */
.route-stacked .route-leg:first-child .arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
}

/* Return leg gets different color */
.route-stacked .route-leg:nth-child(2) .arrow[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
}

.route-arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

/* Status Badges - COMPLETE COLOR MAPPING */
.status-badge[b-22pogpxcos] {
    padding: 3px 12px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 11px;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    min-width: 80px;
}

/* DRAFT */
.status-draft[b-22pogpxcos] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* PENDING / SUBMITTED (Blue/Orange) */
.status-submitted[b-22pogpxcos] {
    background-color: #E6F5FF;
    color: #0078D4;
    border: 1px solid #c7e0f4;
}

.status-pending[b-22pogpxcos] {
    background-color: #FDF6E3;
    color: #9A6603;
    border: 1px solid #FAEBCC;
}

/* Orange-ish for attention */

/* APPROVED / SENT (Green/Teal) */
.status-approved[b-22pogpxcos] {
    background-color: #DFF6DD;
    color: #107C10;
    border: 1px solid #C4EBC3;
}

.status-sent[b-22pogpxcos] {
    background-color: #E0F7FA;
    color: #006064;
    border: 1px solid #B2EBF2;
}

/* QUOTING / RECEIVED (Purple) */
.status-quoted[b-22pogpxcos] {
    background-color: #F3E5F5;
    color: #7B1FA2;
    border: 1px solid #E1BEE7;
}

/* SELECTED / BOOKED / COMPLETED (Strong Blue/Green) */
.status-selected[b-22pogpxcos] {
    background-color: #E3F2FD;
    color: #0D47A1;
    border: 1px solid #BBDEFB;
    font-weight: 700;
}

.status-booked[b-22pogpxcos] {
    background-color: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #C8E6C9;
    font-weight: 700;
}

.status-completed[b-22pogpxcos] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    text-decoration: line-through;
}

/* REJECTED / CANCELLED (Red/Gray) */
.status-rejected[b-22pogpxcos] {
    background-color: #FDE7E9;
    color: #A80000;
    border: 1px solid #F8B0B6;
}

.status-cancelled[b-22pogpxcos] {
    background-color: #F3F2F1;
    color: #A19F9D;
    border: 1px solid #EDEBE9;
}

/* Default */
.status-default[b-22pogpxcos] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
}

/* Text-based column styles */
.location-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

/* Domestic / International badges */
.domestic-badge[b-22pogpxcos] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.intl-badge[b-22pogpxcos] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: #EFF6FC;
    color: #0078D4;
}

.travel-dates-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.flight-class-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.services-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.no-services[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
    font-style: italic;
}

/* Project Column Styles */
.project-name-text[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-custom-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    font-style: italic;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-project[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
}

/* Legacy Service Icons (kept for reference) */
.service-badges[b-22pogpxcos] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.service-icon[b-22pogpxcos] {
    color: var(--BEC-colorNeutralStroke1);
    margin-right: 4px;
    font-size: 13px;
}

.service-icon.active[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    scale: 1.1;
}

/* Attachments */
.attachment-link[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 8px;
    border-radius: 12px;
}

/* ========================================
   UNIFIED DIALOG STYLES — Wireframe v2 tokens
   ======================================== */

/* SfDialog overlay — flat, no blur */
[b-22pogpxcos] .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* SfDialog container */
[b-22pogpxcos] .e-dialog {
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

/* Dialog header — 36px, flat #FAFAF9 */
[b-22pogpxcos] .e-dialog .e-dlg-header-content {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-22pogpxcos] .e-dialog .e-dlg-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    display: flex !important;
    align-items: center !important;
}

[b-22pogpxcos] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    color: #9E9E9E !important;
    box-shadow: none !important;
}

[b-22pogpxcos] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
    background: #F5F5F4 !important;
    color: #242424 !important;
}

/* Dialog body */
[b-22pogpxcos] .e-dialog .e-dlg-content {
    padding: 16px !important;
}

/* Dialog footer — flat #FAFAF9 */
[b-22pogpxcos] .e-dialog .e-footer-content {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-top: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Dialog footer buttons — 28px compact */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-width: auto !important;
    box-shadow: none !important;
}

/* Default button */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-flat {
    background: #FFFFFF !important;
    color: #616161 !important;
    border: 1px solid #E0E0E0 !important;
}

[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-flat:hover {
    background: #F5F5F4 !important;
}

/* Primary button */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-primary {
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-primary:hover {
    background: #106EBE !important;
}

/* Danger button */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-danger {
    background: #A80000 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-danger:hover {
    background: #8B0000 !important;
}

/* Dialog header title row */
.dialog-header-title[b-22pogpxcos] {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #242424;
}

.dialog-header-title i[b-22pogpxcos] {
    font-size: 13px;
    color: #0078D4;
}

.dialog-header-title.warning i[b-22pogpxcos] {
    color: #A80000;
}

/* Dialog content inner */
.dialog-content-inner[b-22pogpxcos] {
    padding: 0;
}

.dialog-content-inner p[b-22pogpxcos] {
    font-size: 13px;
    color: #242424;
    margin: 0 0 12px 0;
}

.export-dialog-hint[b-22pogpxcos] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #616161;
}

.export-dialog-dates[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-dialog-dates .filter-item[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-dialog-dates .filter-item label[b-22pogpxcos] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

.delete-error-message[b-22pogpxcos] {
    color: #A80000;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #FDE7E9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}

.request-summary[b-22pogpxcos] {
    background: #FAFAF9;
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
    font-size: 13px;
    border: 1px solid #EBEBEB;
}

.vendor-list[b-22pogpxcos] {
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    max-height: 300px;
    overflow-y: auto;
}

.vendor-item[b-22pogpxcos] {
    padding: 8px 10px;
    border-bottom: 1px solid #EBEBEB;
    display: flex;
    align-items: center;
}

.vendor-item:last-child[b-22pogpxcos] {
    border-bottom: none;
}

.vendor-item:hover[b-22pogpxcos] {
    background-color: #F5F5F5;
}

.no-vendors[b-22pogpxcos] {
    padding: 16px;
    text-align: center;
    color: #9E9E9E;
    font-size: 13px;
}

/* Loading & Error */
.loading-container[b-22pogpxcos] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.error-container[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #d13438;
}

.btn-retry[b-22pogpxcos] {
    margin-top: 10px;
    padding: 6px 16px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Trip Type Visuals */
.trip-cell[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground1);
}

.flight-class-badge[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground2);
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   HELP DRAWER — Wireframe v2 tokens
   Flat, compact, matches grid toolbar aesthetic
   ======================================== */
.drawer-overlay[b-22pogpxcos] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-22pogpxcos 0.2s ease;
}

.drawer-panel[b-22pogpxcos] {
    background: #FFFFFF;
    width: 460px;
    max-width: 90vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-22pogpxcos 0.25s ease;
}

@keyframes drawerFadeIn-b-22pogpxcos {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-22pogpxcos {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-22pogpxcos] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-22pogpxcos] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-22pogpxcos] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
}

.btn-close-drawer[b-22pogpxcos] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-22pogpxcos] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body */
.drawer-body[b-22pogpxcos] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Drawer footer — flat #FAFAF9 */
.drawer-footer[b-22pogpxcos] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

/* Drawer footer buttons — 28px compact */
.btn-drawer-default[b-22pogpxcos] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    color: #616161;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
}

.btn-drawer-default:hover[b-22pogpxcos] {
    background: #F5F5F4;
}

.btn-drawer-primary[b-22pogpxcos] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: #0078D4;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
}

.btn-drawer-primary:hover[b-22pogpxcos] {
    background: #106EBE;
}

/* Section headers inside drawer */
.d-section[b-22pogpxcos] {
    margin-bottom: 16px;
}

.d-section-hdr[b-22pogpxcos] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-22pogpxcos] {
    font-size: 12px;
    color: #0078D4;
}

/* Step list inside help drawer */
.step-list[b-22pogpxcos] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-item[b-22pogpxcos] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EBEBEB;
}

.step-item:last-child[b-22pogpxcos] {
    border-bottom: none;
}

.step-num[b-22pogpxcos] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0078D4;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.step-text strong[b-22pogpxcos] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    display: block;
    margin-bottom: 2px;
}

.step-text span[b-22pogpxcos] {
    font-size: 12px;
    color: #616161;
}

.step-tip[b-22pogpxcos] {
    background: #FDF6E3;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #9A6603;
    margin-top: 4px;
    display: inline-block;
}


/* ========================================
   EXPORT BUTTON LOADING ANIMATION
   ======================================== */
[b-22pogpxcos] .btn-loading .e-icons {
    animation: spin-b-22pogpxcos 1s linear infinite;
}

@keyframes spin-b-22pogpxcos {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   URGENCY ROW HIGHLIGHTING
   Travel departing within 7 days
   ======================================== */
[b-22pogpxcos] .e-grid .e-row.row-urgent .e-rowcell {
    background-color: #FFF4E5;
    border-left-color: #F7630C;
}

[b-22pogpxcos] .e-grid .e-row.row-urgent:hover .e-rowcell {
    background-color: #FFEDCC;
}

/* Date column styling */
.date-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

/* Remarks column */
.remark-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transport & Hotel notes columns */
.notes-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

/* No data placeholder */
.no-data[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
}

/* Passport column */
.passport-text[b-22pogpxcos] {
    font-family: monospace;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    letter-spacing: 0.3px;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Fixed position to escape overflow:hidden
   Styled as a proper centered modal dialog with search,
   checkboxes, Select All, and OK/Cancel buttons.
   ======================================== */
[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}
/* /Components/Pages/MainLayout/FlightTicket/BookingTeam/FinancialDashboard.razor.rz.scp.css */
/* ==========================================
   Financial Dashboard - Professional Compact
   Microsoft Fluent Design Inspired
   ========================================== */

/* 
   REMOVED :root definitions. 
   Using BEC_Theme.css global variables directly.
*/

.financial-dashboard[b-kmioqz3ody] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
    /* 16px */
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-dashboard-bg);
    /* Use theme gradient/bg */
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-neutralPrimary);
    max-width: 1600px;
    margin: 0 auto;
}

/* HEADER */
.dashboard-header[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    padding: 12px 20px;
    border-radius: var(--BEC-borderRadiusXLarge);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--BEC-depth-4);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Header Middle for Filters */
.header-middle[b-kmioqz3ody] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.filter-controls[b-kmioqz3ody] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--BEC-colorNeutralBackground1);
    padding: 2px 12px;
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.filter-item[b-kmioqz3ody] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-item label[b-kmioqz3ody] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-neutralSecondary);
    text-transform: uppercase;
}

/* Override Syncfusion Dropdown for header */
[b-kmioqz3ody] .filter-item .e-dropdownlist.e-input-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 24px !important;
}

[b-kmioqz3ody] .filter-item .e-dropdownlist.e-input-group .e-input {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

.header-left .page-title[b-kmioqz3ody] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-neutralPrimary);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.header-left .page-title i[b-kmioqz3ody] {
    color: var(--BEC-themePrimary);
}

.header-left .subtitle[b-kmioqz3ody] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-neutralSecondary);
    padding-left: 24px;
    display: none;
}

/* Date Range Override */
[b-kmioqz3ody] .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 4px 8px !important;
}

.header-right[b-kmioqz3ody] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
    align-items: center;
}

.btn-refresh[b-kmioqz3ody],
.btn-export[b-kmioqz3ody] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--BEC-neutralSecondary);
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    transition: all var(--BEC-durationNormal);
    font-size: var(--BEC-fontSizeBase300);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-refresh:hover[b-kmioqz3ody],
.btn-export:hover[b-kmioqz3ody] {
    color: var(--BEC-themePrimary);
    background: var(--BEC-themeLighterAlt);
    border-color: var(--BEC-themeLighter);
}

/* UNIFIED GRID SYSTEM */
.grid-5-col[b-kmioqz3ody] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: 0;
}

.info-card[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    padding: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-depth-4);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    transition: all var(--BEC-durationNormal);
    position: relative;
}

.info-card:hover[b-kmioqz3ody] {
    box-shadow: var(--BEC-depth-8);
    transform: translateY(-1px);
}

.card-top[b-kmioqz3ody] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.card-label[b-kmioqz3ody] {
    font-size: 11px;
    /* Specific compact size */
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-neutralSecondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.card-icon[b-kmioqz3ody] {
    color: var(--BEC-neutralTertiary);
    font-size: 14px;
}

.card-value[b-kmioqz3ody] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-neutralPrimary);
}

/* Status Indicators */
.status-dot[b-kmioqz3ody] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

/* Using Theme Semantic Colors */
.bg-wait[b-kmioqz3ody] {
    background-color: var(--BEC-warningText);
}

.bg-blue[b-kmioqz3ody] {
    background-color: var(--BEC-themePrimary);
}

.bg-green[b-kmioqz3ody] {
    background-color: var(--BEC-successText);
}

.text-success[b-kmioqz3ody] {
    color: var(--BEC-successText);
}

/* CHARTS ROW */
.charts-row[b-kmioqz3ody] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--BEC-spacingHorizontalL);
    height: 320px;
    margin-bottom: 0;
}

.chart-panel[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-depth-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-kmioqz3ody] {
    font-size: var(--BEC-fontSizeBase200);
    /* 12-13px */
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-neutralPrimary);
    margin-bottom: var(--BEC-spacingHorizontalM);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* .chart-viz removed */

/* DATA GRID PANEL */
.grid-panel[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    box-shadow: var(--BEC-depth-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 400px;
}

/* Customizing Syncfusion Grid */
[b-kmioqz3ody] .e-grid {
    border: none;
    font-family: inherit;
}

[b-kmioqz3ody] .e-grid .e-headercell {
    background-color: var(--BEC-colorNeutralBackground1) !important;
    color: var(--BEC-neutralSecondary) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-kmioqz3ody] .e-grid .e-rowcell {
    color: var(--BEC-neutralPrimary) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 8px !important;
}

[b-kmioqz3ody] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--BEC-neutralLighterAlt) !important;
}

/* Loading Overlay */
.loading-overlay[b-kmioqz3ody] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    /* Keep rgba for overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Tabs Styling Override */
[b-kmioqz3ody] .e-tab .e-tab-header {
    background: var(--BEC-neutralLighterAlt);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    border: none;
    background: transparent;
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    color: var(--BEC-neutralSecondary);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase200);
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    border-bottom: 2px solid var(--BEC-themePrimary);
    background: var(--BEC-colorNeutralBackground1);
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-themePrimary);
}
/* /Components/Pages/MainLayout/FlightTicket/BookingTeam/RequestDetail.razor.rz.scp.css */
/* ========================================
   REQUEST DETAIL - OPTION 3 (Visual Split)
   Matches BookingDashboard Header/Toolbar behavior 100%
   ======================================== */

/* ============================================================================
   PROJECT DISPLAY SECTION
   ============================================================================ */

.project-display[b-4p8xqcgl44] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorBrandStroke2);
}

.project-icon-wrapper[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
    flex-shrink: 0;
}

.project-info[b-4p8xqcgl44] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-name[b-4p8xqcgl44] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.project-code[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-family: var(--BEC-fontFamilyMonospace);
}

.project-custom[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.project-custom i[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   PAGE CONTAINER & STICKY BEHAVIOR
   ======================================== */
.erp-page-container[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
}

/* STICKY HEADER */
.erp-page-header[b-4p8xqcgl44] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    /* Ensure non-transparent for detail page readability */
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    min-height: 48px;
}

.page-title[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
}

/* STICKY TOOLBAR (Same logic as Dashboard) */
[b-4p8xqcgl44] .e-toolbar.e-control {
    position: sticky !important;
    top: 60px !important;
    /* Header height + gap */
    z-index: 90 !important;
    background: white !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadowCard) !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

/* Toolbar Items */
[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 8px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Primary Button Style in Toolbar */
[b-4p8xqcgl44] .primary-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
}

[b-4p8xqcgl44] .primary-btn .e-tbar-btn .e-icons,
[b-4p8xqcgl44] .primary-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
}

[b-4p8xqcgl44] .primary-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    color: white !important;
}

[b-4p8xqcgl44] .primary-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4p8xqcgl44] .primary-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Danger Button Style in Toolbar */
[b-4p8xqcgl44] .danger-btn .e-tbar-btn .e-icons,
[b-4p8xqcgl44] .danger-btn .e-tbar-btn .e-tbar-btn-text {
    color: #a4262c !important;
}

[b-4p8xqcgl44] .danger-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4p8xqcgl44] .danger-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ========================================
   SPLIT LAYOUT CONTENT (two scroll areas only)
   ======================================== */
.erp-page-content.content-split-layout[b-4p8xqcgl44] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-top: 8px;
}

/* LEFT SIDE: CONTEXT PANEL (own scroll) */
.context-panel[b-4p8xqcgl44] {
    width: 320px;
    min-width: 320px;
    flex-shrink: 0;
    min-height: 0;
    background: white;
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04);
}

.context-section[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
}

.context-title[b-4p8xqcgl44] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 600;
    margin-bottom: 8px;
}

.context-val-big[b-4p8xqcgl44] {
    font-size: 16px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
}

.sub-text[b-4p8xqcgl44] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

.context-divider[b-4p8xqcgl44] {
    height: 1px;
    background: var(--BEC-colorNeutralStroke2);
    width: 100%;
}

/* ROUTE TIMELINE */
.route-timeline[b-4p8xqcgl44] {
    position: relative;
    padding-left: 20px;
    margin-top: 8px;
}

.route-timeline[b-4p8xqcgl44]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-point[b-4p8xqcgl44] {
    position: relative;
    padding-bottom: 24px;
}

.timeline-point:last-child[b-4p8xqcgl44] {
    padding-bottom: 0;
}

.timeline-point[b-4p8xqcgl44]::after {
    content: '';
    position: absolute;
    left: -19px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    /* Use theme color */
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground);
}

.timeline-point:last-child[b-4p8xqcgl44]::after {
    background: var(--BEC-colorNeutralForeground1);
    /* End point different color */
    box-shadow: 0 0 0 1px var(--BEC-colorNeutralForeground1);
}

.point-name[b-4p8xqcgl44] {
    font-weight: 500;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.2;
}

.point-date[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

/* PER-LEG NOTES (shown under each leg in itinerary) */
.leg-note[b-4p8xqcgl44] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 3px solid var(--BEC-colorBrandStroke1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.4;
    word-break: break-word;
}

.leg-note i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* REQUIREMENTS BADGES */
.requirements-badges[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.req-badge[b-4p8xqcgl44] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.class-badge[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.visa-badge[b-4p8xqcgl44] {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

.hotel-badge[b-4p8xqcgl44] {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffe0b2;
}

.transport-badge[b-4p8xqcgl44] {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.notes-text[b-4p8xqcgl44] {
    font-style: italic;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
    background: var(--BEC-colorNeutralBackground2);
    padding: 12px;
    border-radius: 6px;
}

/* ========================================
   NOTES FROM TRAVELLER (left panel)
   ======================================== */
.notes-from-traveller-section[b-4p8xqcgl44] {
    margin-top: 4px;
}

.traveller-notes-block[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.traveller-note-item[b-4p8xqcgl44] {
    padding: 12px 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 4px solid var(--BEC-colorBrandStroke1);
}

.traveller-note-label[b-4p8xqcgl44] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 6px;
}

.traveller-note-value[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}

/* RIGHT SIDE: QUOTE FEED (own scroll, more compact) */
.quote-feed[b-4p8xqcgl44] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 12px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

.feed-header[b-4p8xqcgl44] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.feed-header h3[b-4p8xqcgl44] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

.feed-count[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
    background: white;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* QUOTE CARD - compact */
.quote-card-large[b-4p8xqcgl44] {
    background: white;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    transition: all 0.2s ease;
    overflow: hidden;
    max-width: 720px;
}

.quote-card-large:hover[b-4p8xqcgl44] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: var(--BEC-colorBrandBackground);
}

.quote-card-large.winner-card[b-4p8xqcgl44] {
    border: 2px solid #107c10;
    background: #f0fdf4;
}

.quote-card-large.winner-card .quote-action-col[b-4p8xqcgl44] {
    background: #e6ffec;
    border-left-color: #107c10;
}

/* Quote Summary Cards (compact list; click View quote for detail) */
.quote-card-summary[b-4p8xqcgl44] {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    max-width: 720px;
    transition: all 0.2s ease;
}

.quote-card-summary:hover[b-4p8xqcgl44] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.quote-card-summary.winner-card[b-4p8xqcgl44] {
    border: 2px solid #107c10;
    background: #f0fdf4;
}

.quote-card-summary.lowest-price-card[b-4p8xqcgl44] {
    border-color: #059669;
}

.quote-summary-main[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.quote-summary-main .vendor-title[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.quote-summary-meta[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.quote-summary-meta .options-count[b-4p8xqcgl44] {
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
}

.quote-summary-meta .price-summary[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.quote-summary-meta .meta-date[b-4p8xqcgl44] {
    font-size: 11px;
    opacity: 0.9;
}

.btn-view-quote[b-4p8xqcgl44] {
    margin-left: auto;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground1);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-view-quote:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* Single-option quote: standalone card (no View quote, Select winner on card) */
.quote-card-standalone[b-4p8xqcgl44] {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    max-width: 720px;
    transition: all 0.2s ease;
}

.quote-card-standalone:hover[b-4p8xqcgl44] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.quote-card-standalone.winner-card[b-4p8xqcgl44] {
    border: 2px solid #107c10;
    background: #f0fdf4;
}

.quote-card-standalone.lowest-price-card[b-4p8xqcgl44] {
    border-color: #059669;
}

.quote-standalone-main[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.quote-standalone-main .vendor-title[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.quote-standalone-meta[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.quote-standalone-meta .price-val[b-4p8xqcgl44] {
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.quote-standalone-meta .meta-date[b-4p8xqcgl44] {
    font-size: 11px;
    opacity: 0.9;
}

.btn-select-winner-standalone[b-4p8xqcgl44] {
    margin-left: auto;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: #107c10;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-select-winner-standalone:hover[b-4p8xqcgl44] {
    background: #0d6b0d;
}

.quote-card-standalone .selected-option-label[b-4p8xqcgl44] {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #107c10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Quote options: side wizard (matches app wizard pattern) */
.quote-wizard-overlay[b-4p8xqcgl44] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: fadeIn-b-4p8xqcgl44 0.2s ease-out;
}

.quote-wizard-panel[b-4p8xqcgl44] {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 95vw;
    height: 100%;
    background: var(--BEC-colorNeutralBackground1, #fff);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: quoteWizardSlideIn-b-4p8xqcgl44 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes quoteWizardSlideIn-b-4p8xqcgl44 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.quote-wizard-header[b-4p8xqcgl44] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    flex-shrink: 0;
}

.quote-wizard-title h2[b-4p8xqcgl44] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-wizard-title .quote-wizard-sub[b-4p8xqcgl44] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.quote-wizard-close[b-4p8xqcgl44] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: var(--BEC-colorNeutralBackground3, #e5e5e5);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.quote-wizard-close:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground1);
}

.quote-wizard-content[b-4p8xqcgl44] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    background: #f9fafb;
}

.quote-wizard-card[b-4p8xqcgl44] {
    margin-bottom: 16px;
}

.quote-wizard-card.wiz-card[b-4p8xqcgl44] {
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
}

.quote-wizard-card .wiz-label[b-4p8xqcgl44] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 10px;
}

.quote-wizard-contact[b-4p8xqcgl44] {
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.quote-wizard-note[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.quote-options-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quote-option-row[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2, #f5f5f5);
    border-radius: 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.option-header-row[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.quote-option-row .option-info[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.quote-option-row.lowest[b-4p8xqcgl44] {
    border-color: #059669;
    background: #ecfdf5;
}

.option-info[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.option-name[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

.option-total[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.option-badge[b-4p8xqcgl44] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #059669;
    background: #dcfce7;
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-select-option[b-4p8xqcgl44] {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: #107c10;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-select-option:hover[b-4p8xqcgl44] {
    background: #0d6b0d;
}

.selected-option-label[b-4p8xqcgl44] {
    font-size: 12px;
    font-weight: 500;
    color: #107c10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.quotation-note-to-traveller .quote-wizard-note[b-4p8xqcgl44],
.quote-wizard-content .booking-notes-from-vendor .quote-wizard-note[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: pre-wrap;
}

.option-meta[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.option-note-block[b-4p8xqcgl44] {
    padding: 8px 0 0;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.option-note-label[b-4p8xqcgl44] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--BEC-colorNeutralForeground2);
}

.option-note-text[b-4p8xqcgl44] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: pre-wrap;
}

.option-legs-block[b-4p8xqcgl44] {
    padding: 8px 0 0;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.option-leg-row[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    margin-bottom: 6px;
}

.option-leg-row .leg-header[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.option-leg-row .leg-dates[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground2);
}

.option-leg-row .leg-cost[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

.option-leg-row .leg-cost-breakdown[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
}

.option-leg-row .leg-cost-item[b-4p8xqcgl44] {
    white-space: nowrap;
}

.option-leg-row .leg-comment[b-4p8xqcgl44] {
    width: 100%;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
    margin-top: 2px;
}

.quote-wizard-content .vendor-company[b-4p8xqcgl44] {
    padding: 10px 14px;
}

.quote-wizard-content .vendor-company-name[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.quote-wizard-content .booking-notes-from-vendor[b-4p8xqcgl44] {
    padding: 12px;
    background: #eff6ff;
    border-radius: 6px;
}

.quote-wizard-content .vendor-attachments-section .vendor-attachments-list[b-4p8xqcgl44],
.quote-wizard-content .booking-documents-section .booking-docs-list[b-4p8xqcgl44] {
    margin-top: 8px;
}

/* Quote Info Column */
.quote-info-col[b-4p8xqcgl44] {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.vendor-title[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-icon[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
}

.quote-specs[b-4p8xqcgl44] {
    display: flex;
    gap: 32px;
}

.spec-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spec-label[b-4p8xqcgl44] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
}

.spec-val[b-4p8xqcgl44] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

.quote-meta[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Quote Action Column */
.quote-action-col[b-4p8xqcgl44] {
    width: 120px;
    min-width: 120px;
    border-left: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background: #faf9f8;
}

.price-display[b-4p8xqcgl44] {
    margin-bottom: 6px;
    text-align: right;
}

.price-val[b-4p8xqcgl44] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    display: block;
}

.price-val.text-muted[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 18px;
}

.action-btn[b-4p8xqcgl44] {
    width: 100%;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.action-btn.select[b-4p8xqcgl44] {
    background: white;
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandBackground);
}

.action-btn.select:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.action-btn.selected[b-4p8xqcgl44] {
    background: #107c10;
    color: white;
    border-color: #107c10;
    cursor: default;
}

.action-btn.disabled[b-4p8xqcgl44] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    cursor: not-allowed;
}


/* Status Pills */
.status-pill[b-4p8xqcgl44] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.quote-status-quoted[b-4p8xqcgl44] {
    background: #e1dfdd;
    color: #242424;
}

.quote-status-selected[b-4p8xqcgl44] {
    background: #107c10;
    color: white;
}

.quote-status-pending[b-4p8xqcgl44] {
    background: white;
    border: 1px solid #ddd;
    color: #888;
}

.meta-date[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* NO QUOTES STATE */
.no-quotes-state[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
    background: white;
    border-radius: 12px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
}

.empty-icon[b-4p8xqcgl44] {
    font-size: 48px;
    color: var(--BEC-colorNeutralStroke2);
    margin-bottom: 16px;
}

.no-quotes-state h3[b-4p8xqcgl44] {
    margin: 0 0 8px 0;
    color: var(--BEC-colorNeutralForeground1);
}

/* HEADER STATS (Copied from Dashboard) */
.stats-container[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card[b-4p8xqcgl44] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4p8xqcgl44] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4p8xqcgl44] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4p8xqcgl44] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* Status colors for header stats */
.stat-value.status-approved[b-4p8xqcgl44] {
    color: #107c10;
}

.stat-value.status-rejected[b-4p8xqcgl44] {
    color: #a4262c;
}

.stat-value.status-pending[b-4p8xqcgl44] {
    color: #f58400;
}

/* ========================================
   CREATED BY (on-behalf booking indicator)
   ======================================== */
.created-by-info[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.created-by-info i[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
}

.created-by-label[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
}

.created-by-name[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   TRAVELLER CONTACT STYLES
   ======================================== */
.traveller-contact[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.contact-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

.contact-item i[b-4p8xqcgl44] {
    width: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

.contact-item a[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
}

.contact-item a:hover[b-4p8xqcgl44] {
    text-decoration: underline;
}

/* Traveller document numbers (passport, iqama) */
.traveller-docs-row[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-docs-row .doc-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-docs-row .doc-item i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.traveller-docs-row .doc-label[b-4p8xqcgl44] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.traveller-docs-row .doc-value[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   TRAVELLER DETAILS GRID
   ======================================== */
.traveller-details-grid[b-4p8xqcgl44] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-details-grid .detail-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traveller-details-grid .detail-label[b-4p8xqcgl44] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.traveller-details-grid .detail-value[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.traveller-details-grid .detail-value.emp-code[b-4p8xqcgl44] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground3);
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
}

.traveller-details-grid .detail-value i[b-4p8xqcgl44] {
    color: var(--BEC-colorPaletteBlueForeground2);
    font-size: 10px;
    margin-right: 4px;
}

/* ========================================
   INFO GRID STYLES
   ======================================== */
.info-grid[b-4p8xqcgl44] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-4p8xqcgl44] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 600;
}

.info-value[b-4p8xqcgl44] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-value i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
}

/* PURPOSE OF TRAVEL (shown in TRIP DETAILS section) */
.purpose-of-travel[b-4p8xqcgl44] {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeBackground3);
}

.purpose-of-travel .info-label[b-4p8xqcgl44] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 4px;
}

.purpose-text[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}

/* ========================================
   ATTACHMENTS STYLES
   ======================================== */
.attachments-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: all 0.2s ease;
}

.attachment-item:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke1);
}

.file-icon[b-4p8xqcgl44] {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.file-icon.fa-file-pdf[b-4p8xqcgl44] {
    color: #e53935;
}

.file-icon.fa-file-word[b-4p8xqcgl44] {
    color: #1976d2;
}

.file-icon.fa-file-excel[b-4p8xqcgl44] {
    color: #43a047;
}

.file-icon.fa-file-image[b-4p8xqcgl44] {
    color: #fb8c00;
}

.file-icon.fa-file-zipper[b-4p8xqcgl44] {
    color: #8e24aa;
}

.file-icon.fa-file[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-info[b-4p8xqcgl44] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.attachment-name[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-meta[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-actions[b-4p8xqcgl44] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.attachment-action[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.view-action[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground3);
}

.view-action:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.download-action[b-4p8xqcgl44] {
    color: #059669;
    background: #ecfdf5;
    border: none;
    cursor: pointer;
}

.download-action:hover[b-4p8xqcgl44] {
    background: #d1fae5;
    color: #047857;
}

button.attachment-action[b-4p8xqcgl44] {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ========================================
   APPROVAL TIMELINE STYLES
   ======================================== */
.approval-timeline[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 4px;
}

.approval-step[b-4p8xqcgl44] {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 20px;
}

.approval-step:last-child[b-4p8xqcgl44] {
    padding-bottom: 0;
}

/* Vertical line connecting steps */
.approval-step:not(:last-child)[b-4p8xqcgl44]::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.step-icon[b-4p8xqcgl44] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    z-index: 1;
    background: white;
}

.approval-approved .step-icon[b-4p8xqcgl44] {
    background: #dcfce7;
    color: #15803d;
    border: 2px solid #15803d;
}

.approval-rejected .step-icon[b-4p8xqcgl44] {
    background: #fee2e2;
    color: #b91c1c;
    border: 2px solid #b91c1c;
}

.approval-pending .step-icon[b-4p8xqcgl44] {
    background: #fef3c7;
    color: #b45309;
    border: 2px solid #b45309;
}

.approval-skipped .step-icon[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    border: 2px solid var(--BEC-colorNeutralStroke2);
}

.approval-default .step-icon[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
    border: 2px solid var(--BEC-colorNeutralStroke2);
}

.step-content[b-4p8xqcgl44] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.step-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.step-name[b-4p8xqcgl44] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
}

.step-action[b-4p8xqcgl44] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
}

.approval-approved .step-action[b-4p8xqcgl44] {
    background: #dcfce7;
    color: #15803d;
}

.approval-rejected .step-action[b-4p8xqcgl44] {
    background: #fee2e2;
    color: #b91c1c;
}

.approval-pending .step-action[b-4p8xqcgl44] {
    background: #fef3c7;
    color: #b45309;
}

.approval-skipped .step-action[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.approval-default .step-action[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
}

.step-details[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.step-approver[b-4p8xqcgl44],
.step-date[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.step-approver i[b-4p8xqcgl44],
.step-date i[b-4p8xqcgl44] {
    font-size: 10px;
}

.step-comments[b-4p8xqcgl44] {
    font-size: 12px;
    font-style: italic;
    color: var(--BEC-colorNeutralForeground2);
    background: var(--BEC-colorNeutralBackground2);
    padding: 8px 10px;
    border-radius: 6px;
    margin-top: 4px;
}

.step-comments i[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
    margin-right: 4px;
}

/* ========================================
   ADDITIONAL QUOTE STATUS STYLES
   ======================================== */
.quote-status-assigned[b-4p8xqcgl44] {
    background: #f3f4f6;
    color: #4b5563;
}

.quote-status-sent[b-4p8xqcgl44] {
    background: #e0f2fe;
    color: #0369a1;
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */
.loading-container[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.error-container[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    padding: 60px;
    text-align: center;
}

.error-container i[b-4p8xqcgl44] {
    font-size: 48px;
    color: #f59e0b;
}

.btn-retry[b-4p8xqcgl44] {
    padding: 10px 20px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-retry:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* ========================================
   EMPTY STATE STYLES
   ======================================== */
.empty-approval-state[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 8px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.empty-approval-state i[b-4p8xqcgl44] {
    font-size: 16px;
}

/* ========================================
   MARKETPLACE MODEL - LOWEST PRICE & WINNER STYLES
   ======================================== */

/* Lowest Price Card Styling */
.quote-card-large.lowest-price-card[b-4p8xqcgl44] {
    border: 2px solid #059669;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    position: relative;
}

.quote-card-large.lowest-price-card .quote-action-col[b-4p8xqcgl44] {
    background: #ecfdf5;
    border-left-color: #059669;
}

.quote-card-large.lowest-price-card:hover[b-4p8xqcgl44] {
    border-color: #047857;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15);
}

/* Price Badges */
.lowest-price-badge[b-4p8xqcgl44],
.winner-badge[b-4p8xqcgl44] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 0 10px 0 10px;
}

.lowest-price-badge[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
}

.lowest-price-badge i[b-4p8xqcgl44] {
    margin-right: 4px;
    font-size: 10px;
}

.winner-badge[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.winner-badge i[b-4p8xqcgl44] {
    margin-right: 4px;
    font-size: 10px;
}

/* Price Display Lowest Price Styling */
.price-display.lowest-price .price-val[b-4p8xqcgl44] {
    color: #059669;
    font-size: 20px;
}

.price-label[b-4p8xqcgl44] {
    display: block;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Select Recommended Button */
.action-btn.select-recommended[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    border-color: #059669;
}

.action-btn.select-recommended:hover[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    color: white;
}

.action-btn.select-recommended i[b-4p8xqcgl44] {
    margin-right: 4px;
    animation: star-pulse-b-4p8xqcgl44 1.5s ease-in-out infinite;
}

@keyframes star-pulse-b-4p8xqcgl44 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Vendor Contact in Quote Card */
.vendor-contact[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.vendor-contact .contact-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vendor-contact .contact-item i[b-4p8xqcgl44] {
    width: 12px;
    font-size: 10px;
}

/* Cost Breakdown Grid */
.quote-cost-breakdown[b-4p8xqcgl44] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
}

.cost-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cost-label[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cost-label i[b-4p8xqcgl44] {
    font-size: 10px;
}

.cost-value[b-4p8xqcgl44] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* Quote Status Pills - Additional */
.quote-status-lowest[b-4p8xqcgl44] {
    background: #dcfce7;
    color: #059669;
}

.quote-status-winner[b-4p8xqcgl44] {
    background: #fef3c7;
    color: #d97706;
}

.quote-status-default[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   SELECT WINNER MODAL
   ======================================== */

.modal-overlay[b-4p8xqcgl44] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-4p8xqcgl44 0.2s ease-out;
}

@keyframes fadeIn-b-4p8xqcgl44 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog[b-4p8xqcgl44] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 480px;
    margin: 20px;
    animation: slideUp-b-4p8xqcgl44 0.3s ease-out;
}

@keyframes slideUp-b-4p8xqcgl44 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3[b-4p8xqcgl44] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
}

.modal-header h3 i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.modal-header .close-btn[b-4p8xqcgl44] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-header .close-btn:hover[b-4p8xqcgl44] {
    background: #f3f4f6;
    color: #111827;
}

.modal-body[b-4p8xqcgl44] {
    padding: 20px;
}

.winner-preview[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.winner-preview .vendor-info[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.winner-preview .vendor-info i[b-4p8xqcgl44] {
    font-size: 20px;
    color: #059669;
}

.winner-preview .vendor-name[b-4p8xqcgl44] {
    font-size: 16px;
    font-weight: 600;
    color: #065f46;
}

.winner-preview .quote-amount[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.winner-preview .quote-amount .label[b-4p8xqcgl44] {
    font-size: 13px;
    color: #047857;
}

.winner-preview .quote-amount .amount[b-4p8xqcgl44] {
    font-size: 18px;
    font-weight: 600;
    color: #065f46;
}

.winner-preview .lowest-badge[b-4p8xqcgl44] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #10b981;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.modal-body .form-group[b-4p8xqcgl44] {
    margin-bottom: 16px;
}

.modal-body .form-group label[b-4p8xqcgl44] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.modal-body .form-group textarea[b-4p8xqcgl44] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    transition: border-color 0.2s;
}

.modal-body .form-group textarea:focus[b-4p8xqcgl44] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.warning-note[b-4p8xqcgl44] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 8px;
    color: #1e40af;
    font-size: 13px;
}

.warning-note i[b-4p8xqcgl44] {
    font-size: 16px;
    color: #3b82f6;
    margin-top: 1px;
}

.modal-footer[b-4p8xqcgl44] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.modal-footer .btn[b-4p8xqcgl44] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.modal-footer .btn-secondary[b-4p8xqcgl44] {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

.modal-footer .btn-secondary:hover:not(:disabled)[b-4p8xqcgl44] {
    background: #f3f4f6;
}

.modal-footer .btn-primary[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.modal-footer .btn-primary:hover:not(:disabled)[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modal-footer .btn:disabled[b-4p8xqcgl44] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Winner Card Highlight */
.quote-card.winner-card[b-4p8xqcgl44] {
    border: 2px solid #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, white 100%);
}

.quote-card.winner-card[b-4p8xqcgl44]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 8px 8px 0 0;
}

/* Change Winner Confirmation Dialog */
.change-winner-dialog[b-4p8xqcgl44] {
    max-width: 500px;
}

.warning-header[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.warning-header h3[b-4p8xqcgl44] {
    color: #92400e;
}

.warning-header h3 i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.warning-content p[b-4p8xqcgl44] {
    margin: 0 0 12px;
    color: #374151;
}

.current-winner-info[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #10b981;
    border-radius: 8px;
    margin-bottom: 16px;
}

.current-winner-info i[b-4p8xqcgl44] {
    color: #f59e0b;
    font-size: 20px;
}

.current-winner-info span[b-4p8xqcgl44] {
    font-size: 16px;
    font-weight: 600;
    color: #065f46;
}

.change-notice[b-4p8xqcgl44] {
    color: #1f2937;
}

.change-notice strong[b-4p8xqcgl44] {
    color: #3b82f6;
}

.modal-footer .btn-warning[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.modal-footer .btn-warning:hover:not(:disabled)[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* ========================================
   VENDOR ATTACHMENTS IN QUOTE CARDS
   ======================================== */
.vendor-attachments-section[b-4p8xqcgl44] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--BEC-colorNeutralStroke2);
}

.attachments-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.attachments-header i[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

.vendor-attachments-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vendor-attachment-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vendor-attachment-item:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground2);
}

.vendor-attachment-item i:first-child[b-4p8xqcgl44] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    width: 18px;
    text-align: center;
}

.vendor-attachment-item .att-name[b-4p8xqcgl44] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.vendor-attachment-item .att-size[b-4p8xqcgl44] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.vendor-attachment-item .download-icon[b-4p8xqcgl44] {
    font-size: 12px;
    color: #059669;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vendor-attachment-item:hover .download-icon[b-4p8xqcgl44] {
    opacity: 1;
}

/* ========================================
   RE-QUOTE DIALOG STYLES
   ======================================== */
.requote-dialog[b-4p8xqcgl44] {
    max-width: 500px;
}

.requote-info[b-4p8xqcgl44] {
    margin-bottom: 16px;
}

.requote-info .info-box[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
    border-radius: 10px;
}

.requote-info .info-box i[b-4p8xqcgl44] {
    font-size: 24px;
    color: #3b82f6;
}

.requote-info .info-box span[b-4p8xqcgl44] {
    color: #1e40af;
    font-size: 14px;
}

.info-note[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border-color: #86efac !important;
}

.info-note i[b-4p8xqcgl44] {
    color: #16a34a !important;
}

.info-note span[b-4p8xqcgl44] {
    color: #166534 !important;
}

/* ========================================
   BOOKING DOCUMENTS SECTION STYLES
   ======================================== */
.booking-documents-section[b-4p8xqcgl44] {
    margin-top: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.booking-documents-section.pending[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-color: #fcd34d;
}

.booking-docs-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 12px;
}

.booking-docs-header i[b-4p8xqcgl44] {
    color: #10b981;
    font-size: 16px;
}

.booking-documents-section.pending .booking-docs-header i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.booking-ref-badge[b-4p8xqcgl44] {
    margin-left: auto;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #93c5fd;
}

.booking-docs-notice[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}

.booking-docs-notice.success[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border: 1px solid #86efac;
}

.booking-docs-notice.success i[b-4p8xqcgl44] {
    color: #16a34a;
}

.booking-docs-notice.pending[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    color: #854d0e;
    border: 1px solid #fcd34d;
}

.booking-docs-notice.pending i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.booking-docs-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-doc-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.booking-doc-item:hover[b-4p8xqcgl44] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Document type color variations */
.booking-doc-item.eticket[b-4p8xqcgl44] {
    border-left: 4px solid #3b82f6;
}

.booking-doc-item.visa[b-4p8xqcgl44] {
    border-left: 4px solid #8b5cf6;
}

.booking-doc-item.hotel[b-4p8xqcgl44] {
    border-left: 4px solid #f97316;
}

.booking-doc-item.transport[b-4p8xqcgl44] {
    border-left: 4px solid #14b8a6;
}

.booking-doc-item.insurance[b-4p8xqcgl44] {
    border-left: 4px solid #22c55e;
}

.booking-doc-item.other[b-4p8xqcgl44] {
    border-left: 4px solid #6b7280;
}

.booking-doc-icon[b-4p8xqcgl44] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.booking-doc-item.eticket .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.booking-doc-item.visa .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #7c3aed;
}

.booking-doc-item.hotel .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    color: #ea580c;
}

.booking-doc-item.transport .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: #0d9488;
}

.booking-doc-item.insurance .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #16a34a;
}

.booking-doc-item.other .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #4b5563;
}

.booking-doc-info[b-4p8xqcgl44] {
    flex: 1;
    min-width: 0;
}

.booking-doc-type[b-4p8xqcgl44] {
    font-weight: 600;
    color: #1e293b;
    font-size: 12px;
    margin-bottom: 1px;
}

.booking-doc-name[b-4p8xqcgl44] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-doc-meta[b-4p8xqcgl44] {
    color: #94a3b8;
    font-size: 11px;
    margin-top: 2px;
}

.booking-download-btn[b-4p8xqcgl44] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.booking-download-btn:hover[b-4p8xqcgl44] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.booking-notes-from-vendor[b-4p8xqcgl44] {
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 8px;
    border: 1px solid #93c5fd;
}

.booking-notes-from-vendor strong[b-4p8xqcgl44] {
    display: block;
    font-size: 11px;
    color: #1e40af;
    margin-bottom: 4px;
}

.booking-notes-from-vendor p[b-4p8xqcgl44] {
    margin: 0;
    font-size: 12px;
    color: #374151;
    line-height: 1.45;
}

/* ========================================
   DATE NEGOTIATION SECTION
   ======================================== */
.negotiation-summary[b-4p8xqcgl44] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.negotiation-summary .summary-item[b-4p8xqcgl44] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

.negotiation-summary .summary-item strong[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground1);
}

.negotiation-summary .summary-item.confirmed[b-4p8xqcgl44] {
    color: #059669;
    font-weight: 500;
}

.negotiation-summary .summary-item.confirmed i[b-4p8xqcgl44] {
    margin-right: 4px;
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkBatchCreate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   BulkBatchCreate — Drawer Layout (560px)
   Scoped CSS · BEC Design Tokens · 8px grid
   ═══════════════════════════════════════════════════════════════ */

/* ── Drawer Overlay & Panel ─────────────────────────────────── */
.drawer-overlay[b-6orpo5klnb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.drawer-panel[b-6orpo5klnb] {
    width: 720px;
    max-width: 92vw;
    height: 100vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-6orpo5klnb 0.25s ease-out;
}

@keyframes drawerSlideIn-b-6orpo5klnb {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Drawer Header (40px) ───────────────────────────────────── */
.drawer-header[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.drawer-header-icon[b-6orpo5klnb] {
    color: #0078D4;
    font-size: 14px;
}

.drawer-header-title[b-6orpo5klnb] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-close-drawer[b-6orpo5klnb] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #616161;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-6orpo5klnb] {
    background: #E0E0E0;
    color: #242424;
}

/* ── Drawer Body (scrollable) ───────────────────────────────── */
.drawer-body[b-6orpo5klnb] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ── Drawer Footer (44px) ───────────────────────────────────── */
.drawer-footer[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    background: #FAFAF9;
    border-top: 1px solid #E0E0E0;
}

/* ── Form Sections ──────────────────────────────────────────── */
.form-section[b-6orpo5klnb] {
    margin-bottom: 24px;
}

.form-section h3[b-6orpo5klnb] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 8px;
}

.form-section h3 i[b-6orpo5klnb] {
    color: #0078D4;
    font-size: 12px;
}

.form-row[b-6orpo5klnb] {
    margin-bottom: 12px;
}

.form-row.split[b-6orpo5klnb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group label[b-6orpo5klnb] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #616161;
    margin-bottom: 4px;
}

.form-group.full[b-6orpo5klnb] {
    grid-column: 1 / -1;
}

.form-hint[b-6orpo5klnb] {
    font-size: 11px;
    color: #9E9E9E;
    margin: 0 0 8px 0;
}

.required[b-6orpo5klnb] {
    color: #D13438;
}

/* ── Travel Date Type Selector ──────────────────────────────── */
.date-type-selector[b-6orpo5klnb] {
    display: flex;
    gap: 16px;
    background: #FAFAF9;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
}

.radio-item[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #616161;
}

.radio-item input[type="radio"][b-6orpo5klnb] {
    width: 14px;
    height: 14px;
    accent-color: #0078D4;
}

/* ── Candidates Template Hint ───────────────────────────────── */
.candidates-template-hint[b-6orpo5klnb] {
    display: flex;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: #EFF6FF;
    border: 1px solid #93C5FD;
    border-radius: 6px;
}

.candidates-template-hint-icon[b-6orpo5klnb] {
    flex-shrink: 0;
    color: #2563EB;
    font-size: 16px;
    margin-top: 2px;
}

.candidates-template-hint-body[b-6orpo5klnb] {
    flex: 1;
}

.candidates-template-hint-title[b-6orpo5klnb] {
    font-size: 12px;
    font-weight: 600;
    color: #1E40AF;
    margin: 0 0 4px 0;
}

.candidates-template-hint-text[b-6orpo5klnb] {
    font-size: 11px;
    color: #616161;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.candidates-template-hint-text strong[b-6orpo5klnb] {
    color: #242424;
}

.candidates-template-hint-steps[b-6orpo5klnb] {
    margin: 0 0 8px 0;
    padding-left: 16px;
    font-size: 11px;
    color: #616161;
    line-height: 1.6;
}

.candidates-template-download[b-6orpo5klnb] {
    margin-top: 4px;
}

.btn-download-template[b-6orpo5klnb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #0078D4;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.btn-download-template:hover:not(:disabled)[b-6orpo5klnb] {
    background: #106EBE;
}

.btn-download-template:disabled[b-6orpo5klnb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-download-template .spinner-small[b-6orpo5klnb] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-6orpo5klnb 0.8s linear infinite;
}

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

/* ── File Attach & Attachments ──────────────────────────────── */
/* ── MS Fluent Upload Dropzone ──────────────────────────────── */
.upload-dropzone[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    border: 2px dashed #D1D1D1;
    border-radius: 6px;
    background: #FAFAF9;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.upload-dropzone:hover[b-6orpo5klnb] {
    border-color: #0078D4;
    background: #F0F6FF;
}

.upload-dropzone-icon[b-6orpo5klnb] {
    font-size: 24px;
    color: #0078D4;
    margin-bottom: 4px;
}

.upload-dropzone-text[b-6orpo5klnb] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

.upload-dropzone-hint[b-6orpo5klnb] {
    font-size: 11px;
    color: #9E9E9E;
}

.upload-file-attached[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F0FFF0;
    border: 1px solid #107C10;
    border-radius: 6px;
}

.upload-file-icon[b-6orpo5klnb] {
    color: #107C10;
    font-size: 16px;
}

.upload-file-name[b-6orpo5klnb] {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: #242424;
}

.upload-file-remove[b-6orpo5klnb] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
}

.upload-file-remove:hover[b-6orpo5klnb] {
    background: #FFE0E0;
    color: #D13438;
}

/* ── Attachment Info Box (matches Excel upload info box) ───── */
.attachment-info-box[b-6orpo5klnb] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #F0F6FF;
    border: 1px solid #C7DFFB;
    border-left: 4px solid #0078D4;
    border-radius: 6px;
    margin-bottom: 12px;
}

.attachment-info-icon[b-6orpo5klnb] {
    color: #0078D4;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.attachment-info-content[b-6orpo5klnb] {
    flex: 1;
}

.attachment-info-title[b-6orpo5klnb] {
    font-size: 13px;
    font-weight: 600;
    color: #0078D4;
    margin: 0 0 6px 0;
}

.attachment-info-text[b-6orpo5klnb] {
    font-size: 12px;
    color: #616161;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.attachment-info-list[b-6orpo5klnb] {
    font-size: 12px;
    color: #616161;
    margin: 0;
    padding-left: 18px;
    line-height: 1.6;
}

/* ── Attachment Type Selector ───────────────────────────────── */
.attachment-type-row[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.attachment-type-label[b-6orpo5klnb] {
    font-size: 12px;
    font-weight: 600;
    color: #323130;
}

.attachment-type-select[b-6orpo5klnb] {
    padding: 5px 10px;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    color: #323130;
    background: #FFFFFF;
    min-width: 120px;
}

.attachment-type-select:focus[b-6orpo5klnb] {
    outline: none;
    border-color: #0078D4;
}

/* ── Attachment Dropzone (reuses .upload-dropzone base) ───── */
.attachment-dropzone[b-6orpo5klnb] {
    margin-bottom: 10px;
}

/* ── Pending Attachments Card ────────────────────────────────── */
.pending-attachments-card[b-6orpo5klnb] {
    margin-top: 10px;
    border: 1px solid #E1E1E1;
    border-radius: 6px;
    background: #FAFAF9;
    overflow: hidden;
}

.pending-attachments-header[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F3F2F1;
    font-size: 12px;
    font-weight: 600;
    color: #323130;
    border-bottom: 1px solid #E1E1E1;
}

.pending-attachments-list[b-6orpo5klnb] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pending-attachments-list li[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid #F0F0F0;
    font-size: 12px;
}

.pending-attachments-list li:last-child[b-6orpo5klnb] {
    border-bottom: none;
}

.pending-file-name[b-6orpo5klnb] {
    flex: 1;
    color: #323130;
    font-weight: 500;
}

.doc-type-badge[b-6orpo5klnb] {
    font-size: 10px;
    padding: 2px 8px;
    background: #E0E7FF;
    color: #4338CA;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Processing Overlay ─────────────────────────────────────── */
.processing-overlay[b-6orpo5klnb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.processing-content[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Read-Only Route Display                         */
/* ════════════════════════════════════════════════════════════ */

.route-readonly[b-6orpo5klnb] {
    background: #F9F9FB;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    padding: 14px 18px;
}

.route-display[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.route-display i[b-6orpo5klnb] {
    color: #0078D4;
}

.route-label[b-6orpo5klnb] {
    font-size: 11px;
    color: #888;
    margin-top: 6px;
}

.route-value[b-6orpo5klnb] {
    font-weight: 600;
    color: #323130;
    font-size: 15px;
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Existing Candidates                             */
/* ════════════════════════════════════════════════════════════ */

.existing-candidates-summary[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #605E5C;
}

.candidate-count-badge[b-6orpo5klnb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    background: #0078D4;
    color: #FFF;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
}

.existing-candidates-list[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    overflow: hidden;
}

.candidate-row-mini[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 12px;
    background: #FAFAF9;
}

.candidate-row-mini:nth-child(even)[b-6orpo5klnb] {
    background: #FFF;
}

.candidate-name[b-6orpo5klnb] {
    font-weight: 500;
    color: #323130;
}

.candidate-passport[b-6orpo5klnb] {
    color: #605E5C;
    font-size: 11px;
}

.candidate-row-more[b-6orpo5klnb] {
    padding: 6px 12px;
    font-size: 11px;
    color: #888;
    font-style: italic;
    background: #F3F2F1;
    text-align: center;
}

.add-candidates-toggle[b-6orpo5klnb] {
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Inline Upload Area                              */
/* ════════════════════════════════════════════════════════════ */

.inline-upload-area[b-6orpo5klnb] {
    margin-top: 10px;
    border: 1px dashed #D2D0CE;
    border-radius: 8px;
    padding: 12px;
    background: #FAFAF9;
}

.upload-drop-area[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-drop-label[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 16px;
    width: 100%;
    text-align: center;
}

.upload-drop-label i[b-6orpo5klnb] {
    font-size: 28px;
    color: #0078D4;
}

.upload-drop-label span[b-6orpo5klnb] {
    font-size: 13px;
    color: #605E5C;
}

.upload-hint[b-6orpo5klnb] {
    font-size: 11px !important;
    color: #A0A0A0 !important;
}

.btn-link-action[b-6orpo5klnb] {
    background: none;
    border: none;
    color: #0078D4;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    font-family: 'Segoe UI', sans-serif;
}

.btn-link-action:hover[b-6orpo5klnb] {
    text-decoration: underline;
}

.upload-preview[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-preview-header[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #323130;
}

.upload-preview-list[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid #EDEBE9;
    border-radius: 4px;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.upload-preview-row[b-6orpo5klnb] {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
    font-size: 12px;
    background: #FFF;
}

.upload-preview-row:nth-child(even)[b-6orpo5klnb] {
    background: #FAFAF9;
}

.upload-preview-more[b-6orpo5klnb] {
    padding: 4px 10px;
    font-size: 11px;
    color: #888;
    font-style: italic;
    text-align: center;
    background: #F3F2F1;
}

.mono[b-6orpo5klnb] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
}

.btn-upload-confirm[b-6orpo5klnb] {
    align-self: flex-end;
    margin-top: 4px;
}

.btn-sm-action[b-6orpo5klnb] {
    background: none;
    border: 1px solid #D2D0CE;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: #323130;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Segoe UI', sans-serif;
}

.btn-sm-action:hover[b-6orpo5klnb] {
    background: #F3F2F1;
    border-color: #C8C6C4;
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Existing Attachments                            */
/* ════════════════════════════════════════════════════════════ */

.existing-attachments-list[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.existing-attachment-row[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #FAFAF9;
    border: 1px solid #EDEBE9;
    border-radius: 4px;
    font-size: 12px;
}

.existing-attachment-row .btn-sm-action[b-6orpo5klnb] {
    padding: 2px 6px;
    font-size: 11px;
}

.edit-attachment-upload[b-6orpo5klnb] {
    margin-top: 8px;
}

.upload-progress-inline[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 12px;
    color: #0078D4;
}

.no-data-text[b-6orpo5klnb] {
    color: #888;
    font-size: 13px;
    font-style: italic;
    margin: 4px 0 8px;
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkBookingDashboard.razor.rz.scp.css */
/* ========================================
   BULK BOOKING DASHBOARD - UNIFIED THEME
   Using BEC_Theme.css Design Tokens (NO HARDCODED VALUES)
   Matches BookingDashboard.razor.css pattern
   ======================================== */

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground2);
    overflow: hidden;
}

/* ========================================
   PHASE 2: PAGE HEADER
   ======================================== */
.erp-page-header[b-quzbmv4vnr] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
}

.page-title[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-quzbmv4vnr] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.breadcrumb-separator[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
    margin-left: var(--BEC-spacingHorizontalXS);
}

.module-badge[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightBold);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground), var(--BEC-colorBrandBackgroundPressed));
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-radius: var(--BEC-borderRadiusMedium);
    letter-spacing: 0.8px;
    margin-left: var(--BEC-spacingHorizontalS);
}

.help-icon-btn[b-quzbmv4vnr] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    margin-left: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    padding: var(--BEC-spacingHorizontalXS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all var(--BEC-durationFast);
}

.help-icon-btn:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
}

/* Header Right - Stats */
.header-right[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
}

.stats-container[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.stat-card[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: var(--BEC-spacingHorizontalXS);
    padding: 0;
}

.stat-value[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-value.total[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray900);
}

.stat-value.draft[b-quzbmv4vnr] {
    color: var(--BEC-colorNeutralForeground3);
}

.stat-value.pending[b-quzbmv4vnr] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.stat-value.quoted[b-quzbmv4vnr] {
    color: var(--BEC-themeSecondary);
}

.stat-value.completed[b-quzbmv4vnr] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.stat-label[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-quzbmv4vnr] {
    width: 1px;
    height: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PHASE 3: ACTION TOOLBAR
   ======================================== */
[b-quzbmv4vnr] .e-toolbar.e-control {
    position: sticky !important;
    top: 40px !important;
    z-index: 90 !important;
    background: #FAFAF9 !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* Toolbar items: constrain height so buttons don't overflow the toolbar */
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-items {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    flex-wrap: nowrap !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-left,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-center,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-right {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
    color: var(--BEC-colorBrandBackground) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: var(--BEC-spacingHorizontalXL) !important;
    margin: 0 var(--BEC-spacingHorizontalS) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-toolbar .e-input-group .e-input,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-input-group .e-input {
    height: 30px !important;
    line-height: 30px !important;
}

/* ========================================
   PHASE 4: GRID CONTENT (Full Width)
   ======================================== */
.erp-page-content[b-quzbmv4vnr] {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Grid fills available space */
[b-quzbmv4vnr] .e-grid {
    flex: 1;
    min-height: 0;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

[b-quzbmv4vnr] .e-grid .e-gridheader {
    background-color: #FAFAF9 !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-quzbmv4vnr] .e-headercell {
    background-color: #FAFAF9 !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px !important;
}

[b-quzbmv4vnr] .e-grid .e-headercell .e-headertext {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

[b-quzbmv4vnr] .e-grid .e-rowcell {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px !important;
    color: #323130 !important;
    padding: 8px 12px !important;
    border-color: var(--BEC-layoutGray100) !important;
}

/* Zebra striping */
[b-quzbmv4vnr] .e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #FAFAFA !important;
}

[b-quzbmv4vnr] .e-grid .e-row:hover .e-rowcell {
    background-color: #F5F5F5 !important;
}

[b-quzbmv4vnr] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: #EBF3FC !important;
    color: var(--BEC-colorBrandForeground2) !important;
}

/* ========================================
   GRID CELL TEMPLATES
   ======================================== */
.id-text[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: #323130;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
}

.batch-name-text[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray900);
    font-weight: var(--BEC-fontWeightMedium);
}

.route-simple[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    font-weight: var(--BEC-fontWeightMedium);
    font-size: var(--BEC-fontSizeBase200);
}

.route-simple .city[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray900);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-simple .arrow[b-quzbmv4vnr] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

.travel-dates-text[b-quzbmv4vnr],
.date-text[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray600);
    font-size: var(--BEC-fontSizeBase200);
}

.pax-count[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-layoutGray900);
    font-family: 'Consolas', monospace;
}

.quote-badge[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusCircular);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase200);
}

.price-text[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.lowest-price-text[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase200);
}

/* SLA Status Badges */
.sla-badge[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusCircular);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase100);
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    min-width: 72px;
}

.sla-ontime[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenBackground2);
}

.sla-warning[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
    border: 1px solid var(--BEC-colorPaletteYellowBackground2);
}

.sla-breached[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
}

.sla-escalated[b-quzbmv4vnr] {
    background-color: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
    font-weight: var(--BEC-fontWeightBold);
}

.no-data[b-quzbmv4vnr] {
    color: var(--BEC-colorNeutralForeground4);
}

/* Status Text — no background pill, text-color only */
.status-badge[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    background: none;
    border: none;
    padding: 0;
}

.status-draft[b-quzbmv4vnr] {
    color: #8A8886;
}

.status-sent[b-quzbmv4vnr] {
    color: #CA5010;
}

.status-quoted[b-quzbmv4vnr] {
    color: #0078D4;
}

.status-approved[b-quzbmv4vnr] {
    color: #107C10;
}

.status-released[b-quzbmv4vnr] {
    color: #0078D4;
}

.status-booked[b-quzbmv4vnr] {
    color: #107C10;
    font-weight: 700;
}

.status-completed[b-quzbmv4vnr] {
    color: #8A8886;
}

.status-cancelled[b-quzbmv4vnr] {
    color: #D13438;
}

.status-default[b-quzbmv4vnr] {
    color: #8A8886;
}

/* ========================================
   INLINE MESSAGE BARS (NO TOASTS)
   ======================================== */
[b-quzbmv4vnr] .fluent-messagebar {
    margin-bottom: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
}

[b-quzbmv4vnr] .fluent-messagebar-error {
    background: var(--BEC-colorPaletteRedBackground1);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
}

/* Loading & Error States */
.loading-container[b-quzbmv4vnr] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.error-container[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--BEC-layoutDangerRed);
    gap: var(--BEC-spacingHorizontalM);
}

.error-container i[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeHero900);
    opacity: 0.6;
}

.btn-retry[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    font-weight: var(--BEC-fontWeightSemibold);
}

.btn-retry:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* ========================================
   DRAWER PANEL — Wireframe v2 flat tokens
   Matches BookingDashboard drawer pattern
   ======================================== */
.drawer-overlay[b-quzbmv4vnr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-quzbmv4vnr 0.2s ease;
}

.drawer-panel[b-quzbmv4vnr] {
    background: #FFFFFF;
    width: 720px;
    max-width: 92vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-quzbmv4vnr 0.25s ease;
}

@keyframes drawerFadeIn-b-quzbmv4vnr {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-quzbmv4vnr {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-quzbmv4vnr] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
}

.btn-close-drawer[b-quzbmv4vnr] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-quzbmv4vnr] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body */
.drawer-body[b-quzbmv4vnr] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Batch details drawer loading state */
.batch-details-loading[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    gap: 12px;
    color: #9E9E9E;
}

.batch-details-loading-spinner[b-quzbmv4vnr] {
    font-size: 20px;
    color: #0078D4;
}

.batch-details-loading-text[b-quzbmv4vnr] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
}

/* Drawer footer — flat #FAFAF9 */
.drawer-footer[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

/* Drawer Sections — flat wireframe pattern */
.d-section[b-quzbmv4vnr] {
    margin-bottom: 16px;
}

.d-section-hdr[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-quzbmv4vnr] {
    font-size: 12px;
    color: #0078D4;
}

/* Attachments section – softer look */
.attachments-section[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
}
.attachments-section-title[b-quzbmv4vnr] {
    margin: 0 0 var(--BEC-spacingHorizontalM) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-layoutGray700) !important;
}
.attachments-section-title i[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray500);
    font-size: var(--BEC-fontSizeBase100);
}

/* ── Attachment Upload Area (matches candidates inline-upload-area) ── */
.att-upload-area[b-quzbmv4vnr] {
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.att-type-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.att-type-label[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
}

.att-type-select[b-quzbmv4vnr] {
    height: 30px;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    padding: 0 8px;
    font-size: 13px;
    color: #242424;
    background: #FFFFFF;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
}

.att-type-select:focus[b-quzbmv4vnr] {
    outline: none;
    border-color: #0078D4;
    box-shadow: 0 0 0 1px #0078D4;
}

/* ── Fluent File Cards ── */
.att-file-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.att-file-card[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.att-file-card:hover[b-quzbmv4vnr] {
    border-color: #D0D0D0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.att-file-icon[b-quzbmv4vnr] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.att-icon-pdf[b-quzbmv4vnr] {
    background: #FDE8E8;
    color: #D13438;
}

.att-icon-img[b-quzbmv4vnr] {
    background: #E8F4FD;
    color: #0078D4;
}

.att-icon-default[b-quzbmv4vnr] {
    background: #F3F2F1;
    color: #616161;
}

.att-file-detail[b-quzbmv4vnr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.att-file-name[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-file-meta[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9E9E9E;
}

.att-file-type-badge[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #F3F2F1;
    color: #616161;
}

.att-file-actions[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.att-vendor-hint[b-quzbmv4vnr] {
    margin: 6px 0 0;
    font-size: 11px;
    color: #9E9E9E;
    display: flex;
    align-items: center;
    gap: 4px;
}

.att-vendor-hint i[b-quzbmv4vnr] {
    font-size: 11px;
    color: #0078D4;
}
.btn-icon-danger[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalS);
    background: transparent;
    border: 1px solid var(--BEC-layoutGray200);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-layoutGray600);
    cursor: pointer;
    flex-shrink: 0;
}
.btn-icon-danger:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Small icon button for per-row actions (non-destructive) */
.btn-icon-action[b-quzbmv4vnr] {
    background: none;
    border: 1px solid var(--BEC-layoutGray200);
    color: var(--BEC-colorBrandForeground1, #0078D4);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    flex-shrink: 0;
    transition: background var(--BEC-durationFast);
}
.btn-icon-action:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackground2, rgba(0, 120, 212, 0.08));
    border-color: var(--BEC-colorBrandForeground1, #0078D4);
}

/* Key-value grid */
.kv-grid[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.kv-label[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kv-value[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

/* Batch description — full-width text below section header */
.batch-description[b-quzbmv4vnr] {
    font-size: 13px;
    color: #616161;
    line-height: 1.5;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBEBEB;
}

/* Full-width key-value row for long text fields */
.kv-full-width[b-quzbmv4vnr] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EBEBEB;
}

.kv-full-width .kv-value[b-quzbmv4vnr] {
    margin-top: 4px;
    line-height: 1.5;
}

/* Cabin class emphasis */
.cabin-class-value[b-quzbmv4vnr] {
    font-weight: 600;
}

/* Deadline highlighting */
.deadline-value[b-quzbmv4vnr] {
    font-weight: 500;
}

.deadline-near[b-quzbmv4vnr] {
    color: #D13438;
    font-weight: 600;
}

/* ========================================
   ROUTE BANNER
   ======================================== */
.route-banner[b-quzbmv4vnr] {
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%);
    color: #fff;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    border-radius: 6px;
}

.route-banner-cities[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.route-banner-city-name[b-quzbmv4vnr] {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.route-banner-arrow[b-quzbmv4vnr] {
    font-size: 15px;
    opacity: 0.7;
}

.route-banner-date[b-quzbmv4vnr] {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.route-banner-date-label[b-quzbmv4vnr] {
    font-size: 10px;
    opacity: 0.7;
    letter-spacing: 0.5px;
}

.route-banner-date-value[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 700;
}

.route-banner-date-sub[b-quzbmv4vnr] {
    font-size: 9px;
    opacity: 0.7;
}

/* ========================================
   3-COLUMN KEY-VALUE GRID
   ======================================== */
.kv-grid-3col[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 16px;
}

.kv-value-mono[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: 600;
}

/* ========================================
   CANDIDATE READINESS CHIPS
   ======================================== */
.readiness-chips-row[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #EBEBEB;
}

.readiness-chip[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #F5F5F4;
    color: #9E9E9E;
}

.readiness-chip-dot[b-quzbmv4vnr] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.readiness-chip-dot.dot-ready[b-quzbmv4vnr] { background: var(--BEC-colorPaletteGreenForeground1, #107C10); }
.readiness-chip-dot.dot-visa[b-quzbmv4vnr] { background: var(--BEC-colorPaletteYellowForeground1, #C19C00); }
.readiness-chip-dot.dot-dropped[b-quzbmv4vnr] { background: var(--BEC-colorPaletteRedForeground1, #D13438); }
.readiness-chip-dot.dot-ticketed[b-quzbmv4vnr] { background: #0078D4; }

/* Active chip states — highlighted when count > 0 */
.readiness-chip.chip-ready-active[b-quzbmv4vnr] { background: #ecfdf5; color: #107C10; }
.readiness-chip.chip-visa-active[b-quzbmv4vnr] { background: #fefce8; color: #C19C00; }
.readiness-chip.chip-dropped-active[b-quzbmv4vnr] { background: #fef2f2; color: #D13438; }
.readiness-chip.chip-ticketed-active[b-quzbmv4vnr] { background: #E8F4FD; color: #0078D4; }

/* ========================================
   VENDOR QUOTE CARDS (redesigned)
   ======================================== */
.vq-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vq-card[b-quzbmv4vnr] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.vq-card:hover[b-quzbmv4vnr] {
    border-color: #B4D6FA;
}

.vq-card-lowest[b-quzbmv4vnr] {
    border-color: #107C10;
}

.vq-card-approved[b-quzbmv4vnr] {
    border-color: #107C10;
    background: #f6fff6;
}

.vq-card-rejected[b-quzbmv4vnr] {
    border-color: #e0e0e0;
    opacity: 0.7;
}

.vq-card-header[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #FAFAF9;
    border-bottom: 1px solid #EBEBEB;
}

.vq-vendor-name[b-quzbmv4vnr] {
    font-size: 14px;
    font-weight: 700;
    color: #242424;
}

.vq-badges[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vq-badge-lowest[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    color: #107C10;
    background: #ecfdf5;
    border: 1px solid #10b981;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vq-badge-approved[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    color: #107C10;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 12px;
}

.vq-badge-rejected[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    color: #D13438;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 12px;
}

.vq-card-body[b-quzbmv4vnr] {
    padding: 12px 14px;
}

.vq-price-row[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.vq-currency[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #616161;
}

.vq-total-price[b-quzbmv4vnr] {
    font-size: 22px;
    font-weight: 800;
    color: #242424;
    font-family: 'Consolas', monospace;
    letter-spacing: -0.5px;
}

.vq-price-breakdown[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.vq-dot[b-quzbmv4vnr] {
    width: 3px;
    height: 3px;
    background: #9E9E9E;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Same price — compact one-liner */
.vq-same-price[b-quzbmv4vnr] {
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #107C10;
    font-weight: 600;
}

.vq-uniform-tag[b-quzbmv4vnr] {
    font-size: 10px;
    background: rgba(16, 124, 16, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Multi-tier price groups */
.vq-groups-summary[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vq-group-line[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: #FAFAF9;
    border-radius: 4px;
    font-size: 12px;
}

.vq-group-pax[b-quzbmv4vnr] {
    color: #616161;
    font-weight: 500;
}

.vq-group-subtotal[b-quzbmv4vnr] {
    font-weight: 700;
    color: #242424;
    font-family: 'Consolas', monospace;
}

/* Flight info */
.vq-flight-info[b-quzbmv4vnr] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #EBEBEB;
    font-size: 12px;
}

.vq-flight-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vq-flight-label[b-quzbmv4vnr] {
    font-size: 10px;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vq-flight-value[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

/* Option notes */
.vq-option-notes[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
    font-style: italic;
    padding: 4px 0;
}

.vq-option-notes i[b-quzbmv4vnr] {
    color: #0078D4;
    margin-right: 4px;
}

/* Vendor notes */
.vq-vendor-notes[b-quzbmv4vnr] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #EBEBEB;
}

.vq-notes-label[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    color: #616161;
    display: block;
    margin-bottom: 4px;
}

.vq-notes-label i[b-quzbmv4vnr] {
    color: #0078D4;
    margin-right: 3px;
}

.vq-notes-text[b-quzbmv4vnr] {
    font-size: 12px;
    color: #242424;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    background: #FAFAF9;
    padding: 6px 10px;
    border-radius: 4px;
}

/* Card actions */
.vq-card-actions[b-quzbmv4vnr] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #EBEBEB;
    background: #FAFAF9;
}

.vq-btn-accept[b-quzbmv4vnr] {
    flex: 1;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    background: #107C10;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s;
}

.vq-btn-accept:hover[b-quzbmv4vnr] {
    background: #0b5e0b;
}

.vq-btn-reject[b-quzbmv4vnr] {
    flex: 1;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    background: #FFFFFF;
    color: #D13438;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s;
}

.vq-btn-reject:hover[b-quzbmv4vnr] {
    background: #fef2f2;
}

/* Approved vendor emphasis */
.approved-vendor-value[b-quzbmv4vnr] {
    color: #0078D4;
    font-weight: 600;
}

/* Candidate / List rows — flat wireframe pattern */
.list-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #EBEBEB;
    font-size: 13px;
}

.list-row:last-child[b-quzbmv4vnr] {
    border-bottom: none;
}

.list-row .name[b-quzbmv4vnr] {
    font-weight: 500;
    color: #242424;
}

.list-row .mono[b-quzbmv4vnr] {
    font-size: 11px;
    color: #9E9E9E;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.mini-badge[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    font-weight: var(--BEC-fontWeightSemibold);
}

.candidate-ready[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteGreenBackground1); 
    color: var(--BEC-colorPaletteGreenForeground1); 
}
.candidate-pending[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteYellowBackground1); 
    color: var(--BEC-colorPaletteYellowForeground1); 
}
.candidate-dropped[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteRedBackground1); 
    color: var(--BEC-colorPaletteRedForeground1); 
}
.candidate-hold[b-quzbmv4vnr] { 
    background: var(--BEC-infoBackground); 
    color: var(--BEC-infoText); 
}
.candidate-ticketed[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteGreenForeground1); 
    color: var(--BEC-colorNeutralForegroundOnBrand); 
}

/* ========================================
   CANDIDATE READINESS BREAKDOWN
   ======================================== */
.readiness-bar[b-quzbmv4vnr] {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--BEC-layoutGray100);
    margin-bottom: 10px;
    gap: 2px;
}

.readiness-seg[b-quzbmv4vnr] {
    min-width: 4px;
    transition: flex 0.3s ease;
}

.seg-ready[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.seg-visa[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteYellowForeground1);
}

.seg-dropped[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedForeground1);
}

.seg-ticketed[b-quzbmv4vnr] {
    background: #0078D4;
}

.readiness-legend[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.readiness-item[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.readiness-dot[b-quzbmv4vnr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-ready[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.dot-visa[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteYellowForeground1);
}

.dot-dropped[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedForeground1);
}

.dot-ticketed[b-quzbmv4vnr] {
    background: #0078D4;
}

.readiness-label[b-quzbmv4vnr] {
    font-size: 11px;
    color: #616161;
    flex: 1;
}

.readiness-count[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
    font-family: 'Consolas', monospace;
}

/* Quote List — wireframe flat pattern */
.quote-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quote-row[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 10px;
    background: #FFFFFF;
    border-radius: 3px;
    gap: 10px;
    border: 1px solid #EBEBEB;
}

.quote-row.lowest[b-quzbmv4vnr] {
    background: #F6FFF6;
    border-color: #107C10;
}

.quote-info[b-quzbmv4vnr] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-name[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

.lowest-tag[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    background: #107C10;
    color: #FFFFFF;
    padding: 1px 6px;
    border-radius: 3px;
}

.quote-status-tag[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-left: var(--BEC-spacingHorizontalXS);
}

/* Vendor quote status: Approved = green, Rejected = red */
.quote-status-tag.approved[b-quzbmv4vnr] {
    background: #dcfce7;
    color: #15803d !important;
    font-weight: 600;
}

.quote-status-tag.rejected[b-quzbmv4vnr] {
    background: #fee2e2;
    color: #b91c1c !important;
    font-weight: 600;
}

.quote-price-group[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.quote-price[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #242424;
}

.per-pax[b-quzbmv4vnr] {
    font-size: 11px;
    color: #9E9E9E;
}

/* Per-passenger prices (flexible pricing quote) */
.quote-seat-prices[b-quzbmv4vnr] {
    width: 100%;
    margin-top: var(--BEC-spacingHorizontalS);
    padding-top: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.quote-seat-prices-label[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.quote-seat-prices-table-wrap[b-quzbmv4vnr] {
    overflow-x: auto;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.quote-seat-prices-table[b-quzbmv4vnr] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--BEC-fontSizeBase200);
}

.quote-seat-prices-table th[b-quzbmv4vnr],
.quote-seat-prices-table td[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    text-align: left;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.quote-seat-prices-table th[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground3);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.quote-seat-prices-table tr:last-child td[b-quzbmv4vnr] {
    border-bottom: none;
}

/* Vendor Notes & Terms in Quote Card */
.vendor-notes-section[b-quzbmv4vnr] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding-top: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.vendor-notes-label[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.vendor-notes-label i[b-quzbmv4vnr] {
    margin-right: 4px;
    color: var(--BEC-colorBrandForeground1);
}

.vendor-notes-text[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    background: var(--BEC-colorNeutralBackground3);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
}

/* Buttons */
.btn-sm-action[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    background: var(--BEC-layoutGray100);
    border: 1px solid var(--BEC-layoutGray200);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    color: var(--BEC-layoutGray900);
    transition: all var(--BEC-durationFast);
}

.btn-sm-action:hover[b-quzbmv4vnr] {
    background: var(--BEC-layoutGray200);
}

.btn-sm-primary[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorBrandBackground);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    cursor: pointer;
}

.btn-sm-primary:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-sm-danger[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    background: transparent;
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-sm-danger:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedBackground1);
}

.btn-link-action[b-quzbmv4vnr] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase200);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS) 0;
    font-weight: var(--BEC-fontWeightMedium);
}

.btn-link-action:hover[b-quzbmv4vnr] {
    text-decoration: underline;
}

/* Drawer footer buttons — 28px compact */
.btn-drawer-default[b-quzbmv4vnr] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    color: #616161;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-drawer-default:hover[b-quzbmv4vnr] {
    background: #F5F5F4;
}

.btn-drawer-primary[b-quzbmv4vnr] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: #0078D4;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-drawer-primary:hover[b-quzbmv4vnr] {
    background: #106EBE;
}

/* Edit button in drawer header */
.btn-edit-drawer[b-quzbmv4vnr] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #0078D4;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-edit-drawer:hover[b-quzbmv4vnr] {
    background: #EFF6FC;
    color: #106EBE;
}

/* Cancel/Danger button in drawer footer */
.btn-drawer-danger[b-quzbmv4vnr] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #A80000;
    background: #FFFFFF;
    color: #A80000;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
}

.btn-drawer-danger:hover[b-quzbmv4vnr] {
    background: #FDE7E9;
}

.form-field[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
}

.form-label .required[b-quzbmv4vnr] {
    color: #A80000;
}

.form-select[b-quzbmv4vnr] {
    height: 32px;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    padding: 0 8px;
    font-size: 13px;
    color: #242424;
    background: #FFFFFF;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.form-select:focus[b-quzbmv4vnr] {
    border-color: #0078D4;
    outline: none;
}

/* Empty Section */
.empty-section[b-quzbmv4vnr] {
    padding: 24px 16px;
    text-align: center;
    color: #616161;
    font-size: 12px;
    background: #FAFAF9;
    border: 1px dashed #EBEBEB;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.empty-section i[b-quzbmv4vnr] {
    font-size: 20px;
    color: #9E9E9E;
}

/* ── Inline Upload Area (embedded in drawer candidates section) ── */
.inline-upload-area[b-quzbmv4vnr] {
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    margin-bottom: 8px;
}

.upload-drop-area[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-drop-label[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px;
    width: 100%;
    border: 2px dashed #C0C0C0;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s;
    background: #FFFFFF;
    text-align: center;
    color: #616161;
    font-size: 12px;
}

.upload-drop-label:hover[b-quzbmv4vnr] {
    border-color: #0078D4;
    background: #F5F9FF;
}

.upload-drop-label i[b-quzbmv4vnr] {
    font-size: 24px;
    color: #0078D4;
}

.upload-hint[b-quzbmv4vnr] {
    font-size: 11px;
    color: #9E9E9E;
}

.upload-preview[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-preview-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.upload-preview-list[b-quzbmv4vnr] {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    background: #FFFFFF;
}

.upload-preview-row[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    font-size: 12px;
    border-bottom: 1px solid #F5F5F5;
}

.upload-preview-row:last-child[b-quzbmv4vnr] {
    border-bottom: none;
}

.upload-preview-more[b-quzbmv4vnr] {
    padding: 5px 10px;
    font-size: 11px;
    color: var(--accent, #1976D2);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.upload-preview-more:hover[b-quzbmv4vnr] {
    color: var(--accent-dark, #1565C0);
    text-decoration: underline;
}

.btn-upload-confirm[b-quzbmv4vnr] {
    margin-top: 4px;
}

/* Step list inside help drawer — flat wireframe pattern */
.step-list[b-quzbmv4vnr] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-item[b-quzbmv4vnr] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EBEBEB;
}

.step-item:last-child[b-quzbmv4vnr] {
    border-bottom: none;
}

.step-num[b-quzbmv4vnr] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0078D4;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.step-text strong[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    display: block;
    margin-bottom: 2px;
}

.step-text span[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
}

.step-tip[b-quzbmv4vnr] {
    background: #FDF6E3;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #9A6603;
    margin-top: 4px;
    display: inline-block;
}

/* Processing Overlay — flat, no blur */
.processing-overlay[b-quzbmv4vnr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.processing-content[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 32px 48px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #E0E0E0;
}

.processing-content span[b-quzbmv4vnr] {
    font-weight: 500;
    color: #616161;
    font-size: 13px;
}

/* Export dialog (optional date range) */
.export-dialog-hint[b-quzbmv4vnr] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #616161;
}

.export-dialog-dates[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-dialog-dates .filter-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-dialog-dates .filter-item label[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

/* ========================================
   UNIFIED DIALOG STYLES — Wireframe v2 tokens
   ======================================== */

/* SfDialog overlay — flat, no blur */
[b-quzbmv4vnr] .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* SfDialog container */
[b-quzbmv4vnr] .e-dialog {
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

/* Dialog header — 36px, flat #FAFAF9 */
[b-quzbmv4vnr] .e-dialog .e-dlg-header-content {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-dialog .e-dlg-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    display: flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    color: #9E9E9E !important;
    box-shadow: none !important;
}

[b-quzbmv4vnr] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
    background: #F5F5F4 !important;
    color: #242424 !important;
}

/* Dialog body */
[b-quzbmv4vnr] .e-dialog .e-dlg-content {
    padding: 16px !important;
}

/* Dialog footer — flat #FAFAF9 */
[b-quzbmv4vnr] .e-dialog .e-footer-content {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-top: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* ── RFQ Tracking ── */
.rfq-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rfq-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #EBEBEB;
}

.rfq-item-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rfq-status-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.rfq-status-tag.pending[b-quzbmv4vnr] { background: #f0f0f0; color: #616161; }
.rfq-status-tag.submitted[b-quzbmv4vnr] { background: #E8F4FD; color: #0078D4; }
.rfq-status-tag.approved[b-quzbmv4vnr] { background: #DFF6DD; color: #107C10; }
.rfq-status-tag.rejected[b-quzbmv4vnr] { background: #FDE7E9; color: #D13438; }
.rfq-status-tag.expired[b-quzbmv4vnr] { background: #FFF4CE; color: #797673; }

.rfq-new-badge[b-quzbmv4vnr] {
    font-size: 9px;
    font-weight: 700;
    background: #0078D4;
    color: #fff;
    padding: 0 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.rfq-updated-badge[b-quzbmv4vnr] {
    font-size: 9px;
    font-weight: 700;
    background: #FFB900;
    color: #242424;
    padding: 0 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.rfq-meta[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #616161;
}

.rfq-meta i[b-quzbmv4vnr] {
    margin-right: 3px;
    font-size: 10px;
}

.rfq-sla[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rfq-sla i[b-quzbmv4vnr] { font-size: 11px; }
.rfq-sla.ok[b-quzbmv4vnr] { color: #107C10; }
.rfq-sla.warning[b-quzbmv4vnr] { color: #C19C00; }
.rfq-sla.urgent[b-quzbmv4vnr] { color: #D13438; animation: rfq-pulse-b-quzbmv4vnr 1.5s ease-in-out infinite; }

@keyframes rfq-pulse-b-quzbmv4vnr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.rfq-indicators[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
}

.rfq-ind-received[b-quzbmv4vnr] { color: #107C10; }
.rfq-ind-won[b-quzbmv4vnr] { color: #C19C00; }
.rfq-ind-rejected[b-quzbmv4vnr] { color: #D13438; }
.rfq-ind-expired[b-quzbmv4vnr] { color: #797673; }
.rfq-ind-count[b-quzbmv4vnr] { color: #616161; }

/* Dialog footer buttons — 28px compact */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-width: auto !important;
    box-shadow: none !important;
}

/* Default button */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-flat {
    background: #FFFFFF !important;
    color: #616161 !important;
    border: 1px solid #E0E0E0 !important;
}

[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-flat:hover {
    background: #F5F5F4 !important;
}

/* Primary button */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-primary {
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-primary:hover {
    background: #106EBE !important;
}

/* Danger button */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-danger {
    background: #A80000 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-danger:hover {
    background: #8B0000 !important;
}

/* Dialog header title row */
.dialog-header-title[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #242424;
}

.dialog-header-title i[b-quzbmv4vnr] {
    font-size: 13px;
    color: #0078D4;
}

.dialog-header-title.warning i[b-quzbmv4vnr] {
    color: #A80000;
}

/* Dialog content inner */
.dialog-content-inner[b-quzbmv4vnr] {
    padding: 0;
}

.dialog-content-inner p[b-quzbmv4vnr] {
    font-size: 13px;
    color: #242424;
    margin: 0 0 12px 0;
}

/* ========================================
   DRAWER TAB NAVIGATION
   ======================================== */
.drawer-tabs[b-quzbmv4vnr] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 16px;
    padding: 0;
}

.drawer-tab[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #9E9E9E;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.drawer-tab:hover[b-quzbmv4vnr] {
    color: #616161;
}

.drawer-tab.active[b-quzbmv4vnr] {
    color: #0078D4;
    border-bottom-color: #0078D4;
}

.drawer-tab i[b-quzbmv4vnr] {
    font-size: 12px;
}

.tab-count[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #E8E8E8;
    color: #616161;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.drawer-tab.active .tab-count[b-quzbmv4vnr] {
    background: #0078D4;
    color: #FFFFFF;
}

/* ========================================
   ACTIVITY HISTORY TIMELINE
   ======================================== */
.history-timeline[b-quzbmv4vnr] {
    position: relative;
    padding-left: 24px;
}

.history-timeline[b-quzbmv4vnr]::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #E0E0E0;
    border-radius: 1px;
}

.timeline-entry[b-quzbmv4vnr] {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.timeline-entry:last-child[b-quzbmv4vnr] {
    padding-bottom: 0;
}

.timeline-dot[b-quzbmv4vnr] {
    position: absolute;
    left: -24px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-dot i[b-quzbmv4vnr] {
    font-size: 9px;
    color: #9E9E9E;
}

.timeline-content[b-quzbmv4vnr] {
    flex: 1;
    min-width: 0;
}

.timeline-action[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #323130;
    line-height: 1.3;
}

.timeline-description[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
    margin-top: 2px;
    line-height: 1.4;
}

.timeline-meta[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 11px;
    color: #9E9E9E;
}

.timeline-user i[b-quzbmv4vnr] {
    margin-right: 3px;
    font-size: 10px;
}

.timeline-time[b-quzbmv4vnr] {
    white-space: nowrap;
}

/* ========================================
   SLA ALERT BADGE (Header Stats)
   ======================================== */
.sla-alert-card[b-quzbmv4vnr] {
    position: relative;
}

.stat-value.sla-alert[b-quzbmv4vnr] {
    color: #D13438;
    font-weight: 700;
}

.stat-label .sla-icon[b-quzbmv4vnr] {
    color: #D13438;
    font-size: 10px;
    margin-right: 2px;
}

/* ── Ticket Cards ── */
.ticket-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.ticket-card[b-quzbmv4vnr] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--divider, #E0E0E0);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s ease;
}

.ticket-card:hover[b-quzbmv4vnr] {
    border-color: var(--brand, #0078D4);
}

.ticket-card-top[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ticket-passenger[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.ticket-passenger-name[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-primary, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-passport[b-quzbmv4vnr] {
    font-size: 11px;
    color: var(--fg-secondary, #616161);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: 0.5px;
}

.ticket-verified[b-quzbmv4vnr] {
    font-size: 11px;
    color: #107C10;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ticket-unverified[b-quzbmv4vnr] {
    font-size: 11px;
    color: #797775;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ticket-flight[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--fg-secondary, #616161);
}

.ticket-airline[b-quzbmv4vnr] {
    font-weight: 600;
    color: var(--fg-primary, #242424);
}

.ticket-flight-num[b-quzbmv4vnr] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: 0.3px;
}

.ticket-route[b-quzbmv4vnr] {
    color: var(--fg-primary, #242424);
}

.ticket-schedule[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--fg-secondary, #616161);
}

.ticket-schedule i[b-quzbmv4vnr] {
    font-size: 11px;
    margin-right: 4px;
    color: var(--brand, #0078D4);
}

.ticket-details[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--fg-secondary, #616161);
}

.ticket-card-bottom[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--divider, #E0E0E0);
    margin-top: 2px;
}

.ticket-price[b-quzbmv4vnr] {
    font-weight: 700;
    font-size: 13px;
    color: var(--fg-primary, #242424);
}

.ticket-price-breakdown[b-quzbmv4vnr] {
    font-size: 11px;
    color: var(--fg-secondary, #616161);
    font-weight: 400;
    margin-left: 4px;
}

.ticket-uploaded[b-quzbmv4vnr] {
    font-size: 11px;
    color: var(--fg-secondary, #616161);
}

.ticket-docs-sub-header[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-secondary, #616161);
    padding: 8px 0 4px;
    border-top: 1px solid var(--divider, #E0E0E0);
    margin-top: 4px;
}

.btn-verify-all[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--brand, #0078D4);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.btn-verify-all:hover[b-quzbmv4vnr] {
    background: #106EBE;
}

.btn-verify-all:disabled[b-quzbmv4vnr] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Amendments --- */
.amendment-list[b-quzbmv4vnr] { display: flex; flex-direction: column; gap: 8px; }

.amendment-item[b-quzbmv4vnr] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
}

.amendment-header[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.amendment-number[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-primary, #242424);
}

.amendment-type-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.amendment-type-tag.status-pending[b-quzbmv4vnr] { background: #fff3cd; color: #856404; }
.amendment-type-tag.status-processing[b-quzbmv4vnr] { background: #cce5ff; color: #004085; }
.amendment-type-tag.status-completed[b-quzbmv4vnr] { background: #d4edda; color: #155724; }
.amendment-type-tag.status-rejected[b-quzbmv4vnr] { background: #f8d7da; color: #721c24; }
.amendment-type-tag.status-cancelled[b-quzbmv4vnr] { background: #e2e3e5; color: #383d41; }

.amendment-type[b-quzbmv4vnr] {
    font-size: 12px;
    color: var(--brand, #0078D4);
    margin-bottom: 4px;
}

.amendment-desc[b-quzbmv4vnr] {
    font-size: 13px;
    color: var(--fg-primary, #242424);
    margin-bottom: 6px;
    line-height: 1.4;
}

.amendment-values[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: var(--bg-secondary, #FAFAF9);
    border-radius: 6px;
}

.amendment-val-old[b-quzbmv4vnr] {
    color: #dc3545;
    text-decoration: line-through;
}

.amendment-arrow[b-quzbmv4vnr] {
    color: #6c757d;
    font-size: 10px;
}

.amendment-val-new[b-quzbmv4vnr] {
    color: #28a745;
    font-weight: 600;
}

.amendment-candidate[b-quzbmv4vnr] {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}

.amendment-fee[b-quzbmv4vnr] {
    font-size: 12px;
    margin-bottom: 4px;
}

.fee-accepted[b-quzbmv4vnr] { color: #28a745; margin-left: 6px; font-size: 11px; }
.fee-rejected[b-quzbmv4vnr] { color: #dc3545; margin-left: 6px; font-size: 11px; }

.amendment-vendor-notes[b-quzbmv4vnr] {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 4px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.amendment-meta[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Amendment Form */
.amendment-form[b-quzbmv4vnr] { display: flex; flex-direction: column; gap: 12px; }
.amendment-form .form-group[b-quzbmv4vnr] { display: flex; flex-direction: column; gap: 4px; }
.amendment-form .form-group label[b-quzbmv4vnr] { font-size: 12px; font-weight: 600; color: var(--fg-primary, #242424); }
.amendment-form .required[b-quzbmv4vnr] { color: #dc3545; }
.amendment-form .form-row[b-quzbmv4vnr] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amendment-form .form-select[b-quzbmv4vnr],
.amendment-form .form-control[b-quzbmv4vnr] {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
}
.amendment-form textarea.form-control[b-quzbmv4vnr] { resize: vertical; min-height: 60px; }

/* ======================================================================
   CANCELLATIONS SECTION
   ====================================================================== */

.cancellation-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cancellation-item[b-quzbmv4vnr] {
    border: 1px solid var(--border-light, #E0E0E0);
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-primary, #FFFFFF);
    transition: box-shadow 0.15s ease;
}

.cancellation-item:hover[b-quzbmv4vnr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cancellation-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cancellation-number[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand, #0078D4);
}

.cancellation-status-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.cancellation-status-tag.status-pending[b-quzbmv4vnr] { background: #fff3cd; color: #856404; }
.cancellation-status-tag.status-processing[b-quzbmv4vnr] { background: #cce5ff; color: #004085; }
.cancellation-status-tag.status-completed[b-quzbmv4vnr] { background: #d4edda; color: #155724; }
.cancellation-status-tag.status-rejected[b-quzbmv4vnr] { background: #f8d7da; color: #721c24; }
.cancellation-status-tag.status-cancelled[b-quzbmv4vnr] { background: #e2e3e5; color: #383d41; }

.cancellation-passenger[b-quzbmv4vnr] {
    font-size: 13px;
    color: var(--fg-primary, #242424);
    margin-bottom: 4px;
}

.cancellation-ticket[b-quzbmv4vnr] {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
}

.cancellation-type[b-quzbmv4vnr] {
    font-size: 12px;
    color: var(--brand, #0078D4);
    margin-bottom: 4px;
}

.cancellation-reason[b-quzbmv4vnr] {
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.cancellation-financials[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding: 8px;
    background: var(--bg-secondary, #FAFAF9);
    border-radius: 6px;
    margin-bottom: 8px;
}

.fin-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fin-label[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fin-value[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-primary, #242424);
}

.fin-penalty .fin-value[b-quzbmv4vnr] {
    color: #dc3545;
}

.fin-refund .fin-value[b-quzbmv4vnr] {
    color: #28a745;
}

.fin-pct .fin-value[b-quzbmv4vnr] {
    color: #856404;
}

.cancellation-refund-status[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.refund-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.refund-pending[b-quzbmv4vnr] { background: #fff3cd; color: #856404; }
.refund-processed[b-quzbmv4vnr] { background: #d4edda; color: #155724; }
.refund-partial[b-quzbmv4vnr] { background: #cce5ff; color: #004085; }
.refund-rejected[b-quzbmv4vnr] { background: #f8d7da; color: #721c24; }

.refund-ref[b-quzbmv4vnr] {
    font-size: 11px;
    color: #6c757d;
}

.cancellation-meta[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ======================================================================
   VENDOR PERFORMANCE DIALOG
   ====================================================================== */

.vp-loading[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6c757d;
    font-size: 13px;
}

.vp-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vp-card[b-quzbmv4vnr] {
    border: 1px solid var(--border-light, #E0E0E0);
    border-radius: 8px;
    padding: 16px;
    background: var(--bg-primary, #FFFFFF);
    transition: box-shadow 0.15s ease;
}

.vp-card:hover[b-quzbmv4vnr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vp-card-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vp-vendor-name[b-quzbmv4vnr] {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-primary, #242424);
}

.vp-rating[b-quzbmv4vnr] {
    display: flex;
    gap: 2px;
    font-size: 13px;
}

.vp-rating .fa-solid.fa-star[b-quzbmv4vnr] {
    color: #f5a623;
}

.vp-rating .fa-regular.fa-star[b-quzbmv4vnr] {
    color: #d0d0d0;
}

.vp-metrics[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.vp-metric[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--bg-secondary, #FAFAF9);
    border-radius: 6px;
}

.vp-metric-label[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.vp-metric-value[b-quzbmv4vnr] {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg-primary, #242424);
}

.vp-metric-value.metric-good[b-quzbmv4vnr] { color: #28a745; }
.vp-metric-value.metric-warn[b-quzbmv4vnr] { color: #e0a800; }
.vp-metric-value.metric-bad[b-quzbmv4vnr] { color: #dc3545; }

.vp-stats-row[b-quzbmv4vnr] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.vp-stat[b-quzbmv4vnr] {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vp-stat-won[b-quzbmv4vnr] {
    color: #28a745;
    font-weight: 600;
}

.vp-stat-breach[b-quzbmv4vnr] {
    color: #dc3545;
    font-weight: 600;
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkCandidateList.razor.rz.scp.css */
/* ===== Drawer Structure ===== */
.drawer-overlay[b-8vakaume1e] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.drawer-panel[b-8vakaume1e] {
    width: 560px;
    max-width: 92vw;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    animation: drawerSlideIn-b-8vakaume1e 0.25s ease-out;
}

.drawer-header[b-8vakaume1e] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.drawer-header-icon[b-8vakaume1e] {
    font-size: 14px;
    color: #0078D4;
}

.drawer-header-title[b-8vakaume1e] {
    font-size: 14px;
    font-weight: 600;
    color: #242424;
}

.drawer-header-subtitle[b-8vakaume1e] {
    font-size: 12px;
    color: #616161;
    margin-left: auto;
    margin-right: 8px;
    font-family: 'Consolas', 'Courier New', monospace;
}

.btn-close-drawer[b-8vakaume1e] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #616161;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color 0.15s, color 0.15s;
}

.btn-close-drawer:hover[b-8vakaume1e] {
    background: #E0E0E0;
    color: #242424;
}

/* ===== Step Indicator ===== */
.step-indicator[b-8vakaume1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.step[b-8vakaume1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-num[b-8vakaume1e] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #E0E0E0;
    color: #9E9E9E;
}

.step.active .step-num[b-8vakaume1e] {
    background: #0078D4;
    color: #FFFFFF;
}

.step.completed .step-num[b-8vakaume1e] {
    background: #107C10;
    color: #FFFFFF;
}

.step-label[b-8vakaume1e] {
    font-size: 12px;
    color: #9E9E9E;
}

.step.active .step-label[b-8vakaume1e] {
    color: #0078D4;
    font-weight: 600;
}

.step.completed .step-label[b-8vakaume1e] {
    color: #107C10;
}

.step-connector[b-8vakaume1e] {
    width: 24px;
    height: 1px;
    background: #E0E0E0;
    margin: 0 4px;
    margin-bottom: 18px;
}

/* ===== Drawer Body ===== */
.drawer-body[b-8vakaume1e] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Drawer Footer ===== */
.drawer-footer[b-8vakaume1e] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    background: #FAFAF9;
    border-top: 1px solid #E0E0E0;
}

[b-8vakaume1e] .btn-drawer-default {
    font-size: 13px !important;
    height: 30px !important;
}

[b-8vakaume1e] .btn-drawer-primary {
    font-size: 13px !important;
    height: 30px !important;
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
}

[b-8vakaume1e] .btn-drawer-primary:hover {
    background: #106EBE !important;
}

/* ===== Filters Bar ===== */
.filters-bar[b-8vakaume1e] {
    background: #FFFFFF;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-group[b-8vakaume1e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label[b-8vakaume1e] {
    font-size: 12px;
    font-weight: 500;
    color: #616161;
    white-space: nowrap;
}

/* ===== Grid Card ===== */
.grid-card[b-8vakaume1e] {
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    padding: 1px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.loading-state[b-8vakaume1e] {
    padding: 40px;
    text-align: center;
    color: #616161;
}

/* ===== Status Badges ===== */
.status-badge[b-8vakaume1e] {
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-badge.pending[b-8vakaume1e] {
    background: #FFF4CE;
    color: #835C00;
}

.status-badge.booked[b-8vakaume1e] {
    background: #DFF6DD;
    color: #0E700E;
}

.status-badge.cancelled[b-8vakaume1e] {
    background: #FDE7E9;
    color: #C4314B;
}

/* ===== Action Buttons ===== */
.action-buttons[b-8vakaume1e] {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.btn-icon[b-8vakaume1e] {
    background: none;
    border: none;
    color: #616161;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
    font-size: 13px;
}

.btn-icon:hover[b-8vakaume1e] {
    background: #F0F0F0;
    color: #0078D4;
}

/* ===== Candidate Detail Overlay (above drawer) ===== */
.detail-overlay[b-8vakaume1e] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1060;
    display: flex;
    justify-content: flex-end;
}

.detail-panel[b-8vakaume1e] {
    width: 440px;
    max-width: 85vw;
    height: 100%;
    background: #FFFFFF;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    animation: drawerSlideIn-b-8vakaume1e 0.2s ease-out;
}

.detail-header[b-8vakaume1e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #E0E0E0;
    background: #FAFAF9;
}

.detail-header h2[b-8vakaume1e] {
    font-size: 14px;
    font-weight: 600;
    color: #242424;
    margin: 0;
}

.detail-body[b-8vakaume1e] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-section h3[b-8vakaume1e] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}

.detail-grid[b-8vakaume1e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.detail-field[b-8vakaume1e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-8vakaume1e] {
    font-size: 11px;
    color: #9E9E9E;
    font-weight: 500;
}

.detail-value[b-8vakaume1e] {
    font-size: 13px;
    color: #242424;
}

/* ===== Animation ===== */
@keyframes drawerSlideIn-b-8vakaume1e {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkCandidateUpload.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   BulkCandidateUpload — Drawer Layout (560px)
   Scoped CSS · BEC Design Tokens · 8px grid
   ═══════════════════════════════════════════════════════════════ */

/* ── Drawer Overlay & Panel ─────────────────────────────────── */
.drawer-overlay[b-dgqk9hqxs5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.drawer-panel[b-dgqk9hqxs5] {
    width: 720px;
    max-width: 92vw;
    height: 100vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-dgqk9hqxs5 0.25s ease-out;
}

@keyframes drawerSlideIn-b-dgqk9hqxs5 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Drawer Header (40px) ───────────────────────────────────── */
.drawer-header[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.drawer-header-icon[b-dgqk9hqxs5] {
    color: #0078D4;
    font-size: 14px;
}

.drawer-header-title[b-dgqk9hqxs5] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-close-drawer[b-dgqk9hqxs5] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #616161;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-dgqk9hqxs5] {
    background: #E0E0E0;
    color: #242424;
}

/* ── Step Indicator ─────────────────────────────────────────── */
.step-indicator[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 0;
}

.step[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9E9E9E;
    white-space: nowrap;
}

.step.active[b-dgqk9hqxs5] {
    color: #0078D4;
    font-weight: 600;
}

.step.completed[b-dgqk9hqxs5] {
    color: #107C10;
}

.step-num[b-dgqk9hqxs5] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid #9E9E9E;
    color: #9E9E9E;
    flex-shrink: 0;
}

.step.active .step-num[b-dgqk9hqxs5] {
    border-color: #0078D4;
    background: #0078D4;
    color: #FFFFFF;
}

.step.completed .step-num[b-dgqk9hqxs5] {
    border-color: #107C10;
    background: #107C10;
    color: #FFFFFF;
}

.step-label[b-dgqk9hqxs5] {
    font-size: 12px;
}

.step-connector[b-dgqk9hqxs5] {
    width: 24px;
    height: 1px;
    background: #E0E0E0;
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Drawer Body (scrollable) ───────────────────────────────── */
.drawer-body[b-dgqk9hqxs5] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ── Drawer Footer (44px) ───────────────────────────────────── */
.drawer-footer[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    background: #FAFAF9;
    border-top: 1px solid #E0E0E0;
}

/* ── Upload Card ────────────────────────────────────────────── */
.upload-card[b-dgqk9hqxs5] {
    background: #FAFAF9;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
}

.upload-card.minimized[b-dgqk9hqxs5] {
    padding: 10px 16px;
}

.card-header[b-dgqk9hqxs5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.upload-card.minimized .card-header[b-dgqk9hqxs5] {
    margin-bottom: 0;
}

.card-header h3[b-dgqk9hqxs5] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header h3 i[b-dgqk9hqxs5] {
    color: #0078D4;
    font-size: 12px;
}

/* ── Drop Zone ──────────────────────────────────────────────── */
.drop-zone[b-dgqk9hqxs5] {
    border: 2px dashed #D1D1D1;
    border-radius: 6px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
}

.drop-zone i[b-dgqk9hqxs5] {
    font-size: 32px;
    color: #9E9E9E;
}

.drop-zone p[b-dgqk9hqxs5] {
    font-size: 12px;
    color: #616161;
    margin: 0;
    text-align: center;
}

.btn-browse[b-dgqk9hqxs5] {
    background: #0078D4;
    color: #FFFFFF;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}

.btn-browse:hover[b-dgqk9hqxs5] {
    background: #106EBE;
}

.btn-browse input[b-dgqk9hqxs5] {
    display: none;
}

.file-hint[b-dgqk9hqxs5] {
    font-size: 11px;
    color: #9E9E9E;
}

/* ── File Summary (after selection) ─────────────────────────── */
.file-summary[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    padding: 8px 12px;
    border-radius: 4px;
}

.file-icon[b-dgqk9hqxs5] {
    width: 24px;
    height: 24px;
    background: #107C10;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.file-info .count[b-dgqk9hqxs5] {
    font-weight: 700;
    color: #107C10;
    font-size: 14px;
    margin-right: 4px;
}

.file-info .label[b-dgqk9hqxs5] {
    color: #107C10;
    font-size: 12px;
}

/* ── Template Download ──────────────────────────────────────── */
.template-download[b-dgqk9hqxs5] {
    margin-top: 12px;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #F0F0F0;
    font-size: 12px;
    color: #9E9E9E;
}

.template-download p[b-dgqk9hqxs5] {
    margin: 0 0 4px 0;
}

.btn-link[b-dgqk9hqxs5] {
    color: #0078D4;
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.btn-link:hover:not(:disabled)[b-dgqk9hqxs5] {
    text-decoration: underline;
}

.btn-link:disabled[b-dgqk9hqxs5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-reset[b-dgqk9hqxs5] {
    background: none;
    border: none;
    color: #9E9E9E;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-reset:hover[b-dgqk9hqxs5] {
    color: #0078D4;
}

/* ── Preview Card ───────────────────────────────────────────── */
.preview-card[b-dgqk9hqxs5] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 12px;
}

.grid-container[b-dgqk9hqxs5] {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #E0E0E0;
}

/* ── Processing Overlay ─────────────────────────────────────── */
.processing-overlay[b-dgqk9hqxs5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.processing-content[b-dgqk9hqxs5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/DateNegotiationTimeline.razor.rz.scp.css */
/* ============================================================================
   Date Negotiation Timeline Styles
   ============================================================================ */

.negotiation-timeline-container[b-4jld7lorib] {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Loading State */
.timeline-loading[b-4jld7lorib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-secondary, #6b7280);
}

.timeline-loading .spinner[b-4jld7lorib] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-4jld7lorib 1s linear infinite;
}

@keyframes spin-b-4jld7lorib {
    to { transform: rotate(360deg); }
}

/* Empty State */
.timeline-empty[b-4jld7lorib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-secondary, #9ca3af);
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
}

.timeline-empty i[b-4jld7lorib] {
    font-size: 32px;
    opacity: 0.5;
}

/* Header */
.timeline-header[b-4jld7lorib] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.timeline-stats[b-4jld7lorib] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.timeline-stats .stat[b-4jld7lorib] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 20px;
    color: var(--text-primary, #374151);
}

.timeline-stats .stat i[b-4jld7lorib] {
    color: var(--primary-color, #3b82f6);
}

.timeline-stats .stat.rejected i[b-4jld7lorib] {
    color: #ef4444;
}

.timeline-stats .stat.confirmed[b-4jld7lorib] {
    background: #dcfce7;
    color: #166534;
}

.timeline-stats .stat.confirmed i[b-4jld7lorib] {
    color: #22c55e;
}

/* Timeline Entries */
.timeline-entries[b-4jld7lorib] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.timeline-entries[b-4jld7lorib]::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color, #e5e7eb);
}

.timeline-entry[b-4jld7lorib] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    position: relative;
}

.timeline-entry:last-child[b-4jld7lorib] {
    padding-bottom: 0;
}

/* Entry Icon */
.entry-icon[b-4jld7lorib] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--border-color, #e5e7eb);
    z-index: 1;
    font-size: 16px;
}

.timeline-entry.blue .entry-icon[b-4jld7lorib] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.timeline-entry.green .entry-icon[b-4jld7lorib] {
    border-color: #22c55e;
    color: #22c55e;
    background: #f0fdf4;
}

.timeline-entry.red .entry-icon[b-4jld7lorib] {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.timeline-entry.orange .entry-icon[b-4jld7lorib] {
    border-color: #f97316;
    color: #f97316;
    background: #fff7ed;
}

.timeline-entry.gray .entry-icon[b-4jld7lorib] {
    border-color: #9ca3af;
    color: #9ca3af;
    background: #f9fafb;
}

/* Entry Content */
.entry-content[b-4jld7lorib] {
    flex: 1;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.entry-header[b-4jld7lorib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.entry-type[b-4jld7lorib] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1f2937);
}

.entry-time[b-4jld7lorib] {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

.entry-actor[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.actor-badge[b-4jld7lorib] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.actor-badge.vendor[b-4jld7lorib] {
    background: #dbeafe;
    color: #1d4ed8;
}

.actor-badge.traveler[b-4jld7lorib] {
    background: #fef3c7;
    color: #92400e;
}

.actor-badge.system[b-4jld7lorib] {
    background: #e5e7eb;
    color: #4b5563;
}

.entry-message[b-4jld7lorib] {
    background: white;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
    font-style: italic;
    margin-bottom: 12px;
    border-left: 3px solid var(--border-color, #d1d5db);
}

.entry-message i[b-4jld7lorib] {
    color: #9ca3af;
    margin-right: 6px;
    font-size: 11px;
}

/* Options Grid */
.entry-options[b-4jld7lorib] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.option-card[b-4jld7lorib] {
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
    position: relative;
    transition: all 0.2s;
}

.option-card.recommended[b-4jld7lorib] {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px #22c55e;
}

.option-card.selected[b-4jld7lorib] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.recommended-badge[b-4jld7lorib] {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #22c55e;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.recommended-badge i[b-4jld7lorib] {
    margin-right: 4px;
}

.option-date[b-4jld7lorib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.option-date strong[b-4jld7lorib] {
    font-size: 14px;
    color: var(--text-primary, #1f2937);
}

.days-diff[b-4jld7lorib] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.days-diff.plus[b-4jld7lorib] {
    background: #fef3c7;
    color: #92400e;
}

.days-diff.minus[b-4jld7lorib] {
    background: #dbeafe;
    color: #1d4ed8;
}

.days-diff.same[b-4jld7lorib] {
    background: #e5e7eb;
    color: #4b5563;
}

.option-flight[b-4jld7lorib] {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.option-flight .airline[b-4jld7lorib] {
    font-weight: 500;
}

.option-flight .flight-number[b-4jld7lorib] {
    margin-left: 6px;
    color: #9ca3af;
}

.option-time[b-4jld7lorib] {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

.option-time i[b-4jld7lorib] {
    margin-right: 4px;
    color: #9ca3af;
}

.option-time i:last-of-type[b-4jld7lorib] {
    margin-left: 12px;
}

.option-price[b-4jld7lorib] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color, #e5e7eb);
    font-size: 13px;
    color: #059669;
}

.selected-badge[b-4jld7lorib] {
    margin-top: 8px;
    padding: 4px 8px;
    background: #3b82f6;
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* Accepted Option */
.accepted-option[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #dcfce7;
    border-radius: 6px;
    font-size: 13px;
    color: #166534;
}

.accepted-option i[b-4jld7lorib] {
    color: #22c55e;
}

.accepted-option .flight[b-4jld7lorib] {
    margin-left: auto;
    color: #15803d;
    font-weight: 500;
}

/* Email Info */
.entry-email[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
}

.entry-email i[b-4jld7lorib] {
    color: #9ca3af;
}

.entry-email .cc[b-4jld7lorib] {
    color: #6b7280;
}

/* Amber color for counter-proposal events */
.timeline-entry.amber .entry-icon[b-4jld7lorib] {
    border-color: #f59e0b;
    color: #f59e0b;
    background: #fffbeb;
}

/* Counter-Proposal Styles */
.entry-counter-proposal[b-4jld7lorib] {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    border-radius: 8px;
}

.counter-proposal-header[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #92400E;
    margin-bottom: 12px;
}

.suggestion-cards[b-4jld7lorib] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.suggestion-card[b-4jld7lorib] {
    flex: 1;
    min-width: 140px;
    max-width: 180px;
    padding: 12px;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.suggestion-card.preferred[b-4jld7lorib] {
    border-color: #F59E0B;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.suggestion-card.accepted[b-4jld7lorib] {
    border-color: #10B981;
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
}

.preferred-badge[b-4jld7lorib] {
    display: inline-block;
    padding: 2px 8px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    margin-bottom: 8px;
}

.suggestion-date[b-4jld7lorib] {
    font-size: 16px;
    color: #1F2937;
    margin: 8px 0;
}

.suggestion-meta[b-4jld7lorib] {
    font-size: 11px;
    color: #6B7280;
}

.suggestion-meta .flexible[b-4jld7lorib] {
    color: #059669;
}

.suggestion-meta .fixed[b-4jld7lorib] {
    color: #DC2626;
}

.suggestion-note[b-4jld7lorib] {
    margin-top: 8px;
    padding: 8px;
    background: #F3F4F6;
    border-radius: 4px;
    font-size: 11px;
    color: #4B5563;
    text-align: left;
}

.suggestion-card .accepted-badge[b-4jld7lorib] {
    margin-top: 8px;
    padding: 4px 8px;
    background: #10B981;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.vendor-accepted-suggestion[b-4jld7lorib] {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border: 1px solid #10B981;
    border-radius: 8px;
    color: #065F46;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-accepted-suggestion i[b-4jld7lorib] {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-entries[b-4jld7lorib]::before {
        left: 15px;
    }
    
    .entry-icon[b-4jld7lorib] {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 14px;
    }
    
    .entry-options[b-4jld7lorib] {
        grid-template-columns: 1fr;
    }
    
    .entry-header[b-4jld7lorib] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .suggestion-cards[b-4jld7lorib] {
        flex-direction: column;
    }
    
    .suggestion-card[b-4jld7lorib] {
        max-width: 100%;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/DateProposalForm.razor.rz.scp.css */
/* ============================================================================
   Date Proposal Form Styles
   ============================================================================ */

.date-proposal-form[b-fxopxfr1i5] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Header */
.proposal-header[b-fxopxfr1i5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    user-select: none;
    transition: background 0.2s;
}

.proposal-header:hover[b-fxopxfr1i5] {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

.header-left[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-left i:first-child[b-fxopxfr1i5] {
    font-size: 12px;
    color: #92400e;
    width: 12px;
}

.header-icon[b-fxopxfr1i5] {
    font-size: 16px;
    color: #d97706;
}

.header-title[b-fxopxfr1i5] {
    font-weight: 600;
    color: #92400e;
    font-size: 14px;
}

.header-badge .option-count[b-fxopxfr1i5] {
    background: #d97706;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.header-badge .optional-tag[b-fxopxfr1i5] {
    color: #92400e;
    font-size: 12px;
    opacity: 0.7;
}

/* Body */
.proposal-body[b-fxopxfr1i5] {
    padding: 16px;
    background: white;
    border-top: 1px solid #fcd34d;
}

/* Info Banner */
.info-banner[b-fxopxfr1i5] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #fef9e7;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #92400e;
}

.info-banner i[b-fxopxfr1i5] {
    color: #d97706;
    margin-top: 2px;
}

.info-banner strong[b-fxopxfr1i5] {
    display: block;
    margin-bottom: 4px;
}

/* Original Dates */
.original-dates[b-fxopxfr1i5] {
    background: #f3f4f6;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}

.original-dates .label[b-fxopxfr1i5] {
    color: #6b7280;
    margin-right: 8px;
}

.original-dates .date[b-fxopxfr1i5] {
    font-weight: 600;
    color: #1f2937;
}

/* Form Groups */
.form-group[b-fxopxfr1i5] {
    margin-bottom: 16px;
}

.form-group label[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.form-group label i[b-fxopxfr1i5] {
    color: #6b7280;
    font-size: 12px;
}

.message-input[b-fxopxfr1i5] {
    min-height: 80px;
}

/* Urgency Options */
.urgency-options[b-fxopxfr1i5] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.urgency-option[b-fxopxfr1i5] {
    flex: 1;
    min-width: 140px;
    cursor: pointer;
}

.urgency-option input[b-fxopxfr1i5] {
    display: none;
}

.option-content[b-fxopxfr1i5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s;
}

.urgency-option:hover .option-content[b-fxopxfr1i5] {
    border-color: #d1d5db;
    background: #f3f4f6;
}

.urgency-option.selected .option-content[b-fxopxfr1i5] {
    border-color: #d97706;
    background: #fef3c7;
}

.option-content i[b-fxopxfr1i5] {
    font-size: 20px;
    color: #6b7280;
}

.urgency-option.selected .option-content i[b-fxopxfr1i5] {
    color: #d97706;
}

.option-content.urgent i[b-fxopxfr1i5] {
    color: #dc2626;
}

.option-label[b-fxopxfr1i5] {
    font-weight: 600;
    font-size: 13px;
    color: #374151;
}

.option-desc[b-fxopxfr1i5] {
    font-size: 11px;
    color: #6b7280;
}

/* Options Section */
.options-section[b-fxopxfr1i5] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.section-header[b-fxopxfr1i5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h4[b-fxopxfr1i5] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h4 i[b-fxopxfr1i5] {
    color: #d97706;
}

.add-option-btn[b-fxopxfr1i5] {
    --background: #f3f4f6;
    --color: #374151;
}

/* No Options */
.no-options[b-fxopxfr1i5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    font-size: 13px;
}

.no-options i[b-fxopxfr1i5] {
    font-size: 32px;
    opacity: 0.5;
}

/* Options List */
.options-list[b-fxopxfr1i5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Option Card */
.option-card[b-fxopxfr1i5] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.option-card.recommended[b-fxopxfr1i5] {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px #22c55e;
}

.option-header[b-fxopxfr1i5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.option-card.recommended .option-header[b-fxopxfr1i5] {
    background: #f0fdf4;
}

.option-number[b-fxopxfr1i5] {
    font-weight: 600;
    font-size: 12px;
    color: #4b5563;
    text-transform: uppercase;
}

.option-actions[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommend-toggle[b-fxopxfr1i5] {
    cursor: pointer;
}

.recommend-toggle input[b-fxopxfr1i5] {
    display: none;
}

.recommend-toggle i[b-fxopxfr1i5] {
    font-size: 16px;
    color: #d1d5db;
    transition: color 0.2s;
}

.recommend-toggle:hover i[b-fxopxfr1i5] {
    color: #fbbf24;
}

.recommend-toggle input:checked + i[b-fxopxfr1i5] {
    color: #22c55e;
}

.remove-btn[b-fxopxfr1i5] {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: #9ca3af;
    font-size: 14px;
}

.remove-btn:hover[b-fxopxfr1i5] {
    color: #ef4444;
}

/* Option Form */
.option-form[b-fxopxfr1i5] {
    padding: 14px;
}

.form-row[b-fxopxfr1i5] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-row:last-child[b-fxopxfr1i5] {
    margin-bottom: 0;
}

.form-row .form-group[b-fxopxfr1i5] {
    flex: 1;
    margin-bottom: 0;
}

.price-group[b-fxopxfr1i5] {
    max-width: 180px;
}

/* Price Note */
.price-note[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    background: #f0f9ff;
    border-radius: 6px;
    font-size: 12px;
    color: #0369a1;
}

.price-note i[b-fxopxfr1i5] {
    color: #0ea5e9;
}

/* Responsive */
@media (max-width: 768px) {
    .urgency-options[b-fxopxfr1i5] {
        flex-direction: column;
    }
    
    .urgency-option[b-fxopxfr1i5] {
        min-width: auto;
    }
    
    .form-row[b-fxopxfr1i5] {
        flex-direction: column;
    }
    
    .price-group[b-fxopxfr1i5] {
        max-width: none;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/DateProposalResponsePanel.razor.rz.scp.css */
/* ============================================================================
   Date Proposal Response Panel - FLUENT BLUE THEME
   ============================================================================
   Design: Compact, fast, one-tap date selection
   Theme: Fluent Blue (matching booking dashboard)
   Updated: 2025-12-21
   ============================================================================ */

.proposal-response-panel[b-z9usryt0ka] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: linear-gradient(135deg, #EFF6FC 0%, #DEECF9 100%);
    border: 2px solid #0078D4;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.proposal-response-panel.expired[b-z9usryt0ka] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-color: #9ca3af;
}

/* Loading State */
.panel-loading[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #0078D4;
}

.panel-loading .spinner[b-z9usryt0ka],
.chip-spinner[b-z9usryt0ka] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-z9usryt0ka 0.8s linear infinite;
    display: inline-block;
}

.panel-loading .spinner[b-z9usryt0ka] {
    width: 20px;
    height: 20px;
    border-color: #DEECF9;
    border-top-color: #0078D4;
}

@keyframes spin-b-z9usryt0ka {
    to { transform: rotate(360deg); }
}

/* Empty & Expired States */
.panel-empty[b-z9usryt0ka],
.panel-expired[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #6b7280;
    font-size: 14px;
}

.panel-empty[b-z9usryt0ka] {
    color: #059669;
    background: #ecfdf5;
    border-radius: 8px;
}

.panel-empty i[b-z9usryt0ka],
.panel-expired i[b-z9usryt0ka] {
    font-size: 18px;
}

/* ===== COMPACT HEADER ===== */
.panel-header-simple[b-z9usryt0ka] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.header-title[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #0078D4;
}

.header-title i[b-z9usryt0ka] {
    color: #106EBE;
}

.header-timer[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #0078D4;
    background: rgba(255,255,255,0.7);
    padding: 4px 10px;
    border-radius: 12px;
}

.header-timer.urgent[b-z9usryt0ka] {
    background: #fecaca;
    color: #dc2626;
    font-weight: 600;
    animation: pulse-b-z9usryt0ka 2s infinite;
}

@keyframes pulse-b-z9usryt0ka {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== VENDOR MESSAGE - COMPACT ===== */
.vendor-message-simple[b-z9usryt0ka] {
    background: rgba(255,255,255,0.7);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #4b5563;
    font-style: italic;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.vendor-message-simple i[b-z9usryt0ka] {
    color: #0078D4;
    font-size: 10px;
    margin-top: 3px;
}

/* ===== ONE-TAP DATE OPTIONS ===== */
.date-options-simple[b-z9usryt0ka] {
    background: white;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.options-label[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 12px;
}

.options-label i[b-z9usryt0ka] {
    color: #3b82f6;
}

/* ===== DATE CHIPS - ONE TAP ===== */
.date-chips-container[b-z9usryt0ka] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.date-chip[b-z9usryt0ka] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 80px;
}

.date-chip:hover:not(:disabled)[b-z9usryt0ka] {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3);
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.date-chip:active:not(:disabled)[b-z9usryt0ka] {
    transform: translateY(-1px);
}

.date-chip:disabled[b-z9usryt0ka] {
    opacity: 0.6;
    cursor: not-allowed;
}

.date-chip.recommended[b-z9usryt0ka] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #22c55e;
}

.date-chip.recommended:hover:not(:disabled)[b-z9usryt0ka] {
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.date-chip.processing[b-z9usryt0ka] {
    pointer-events: none;
}

.chip-diff[b-z9usryt0ka] {
    font-size: 14px;
    font-weight: 700;
    color: #0369a1;
}

.date-chip.recommended .chip-diff[b-z9usryt0ka] {
    color: #15803d;
}

.chip-date[b-z9usryt0ka] {
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    margin-top: 2px;
}

.date-chip.recommended .chip-date[b-z9usryt0ka] {
    color: #166534;
}

.chip-day[b-z9usryt0ka] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}

.chip-badge[b-z9usryt0ka] {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 14px;
}

/* ===== FLIGHT DETAILS TOGGLE ===== */
.flight-details-toggle[b-z9usryt0ka] {
    margin-top: 12px;
    text-align: center;
}

.toggle-btn[b-z9usryt0ka] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
}

.toggle-btn:hover[b-z9usryt0ka] {
    color: #3b82f6;
}

.flight-details-expanded[b-z9usryt0ka] {
    margin-top: 10px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 12px;
}

.flight-detail-row[b-z9usryt0ka] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
}

.flight-detail-row:last-child[b-z9usryt0ka] {
    border-bottom: none;
}

.fdr-date[b-z9usryt0ka] {
    font-weight: 600;
    color: #1e40af;
    min-width: 100px;
}

.fdr-airline[b-z9usryt0ka] {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fdr-airline i[b-z9usryt0ka] {
    color: #0ea5e9;
}

.fdr-time[b-z9usryt0ka] {
    color: #4b5563;
}

/* ===== COUNTER-PROPOSAL SECTION ===== */
.counter-proposal-section[b-z9usryt0ka] {
    margin-top: 4px;
}

.none-work-btn[b-z9usryt0ka] {
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.none-work-btn:hover[b-z9usryt0ka] {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

/* ===== COUNTER-PROPOSAL PANEL ===== */
.counter-proposal-panel[b-z9usryt0ka] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
}

.cp-header[b-z9usryt0ka] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.cp-close[b-z9usryt0ka] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
}

.cp-close:hover[b-z9usryt0ka] {
    color: #64748b;
}

.cp-label[b-z9usryt0ka] {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-bottom: 8px;
}

/* ===== QUICK DATE CHIPS FOR COUNTER-PROPOSAL ===== */
.cp-quick-dates[b-z9usryt0ka] {
    margin-bottom: 12px;
}

.cp-date-chips[b-z9usryt0ka] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cp-chip[b-z9usryt0ka] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    min-width: 65px;
}

.cp-chip:hover[b-z9usryt0ka] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.cp-chip.selected[b-z9usryt0ka] {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

.cp-chip.selected i[b-z9usryt0ka] {
    color: #22c55e;
    margin-top: 2px;
}

.cp-chip.custom[b-z9usryt0ka] {
    flex-direction: row;
    gap: 5px;
}

.cp-chip.custom.active[b-z9usryt0ka] {
    background: #DEECF9;
    border-color: #0078D4;
}

.cp-chip-date[b-z9usryt0ka] {
    font-size: 10px;
    color: #64748b;
}

.cp-chip.selected .cp-chip-date[b-z9usryt0ka] {
    color: #3b82f6;
}

/* ===== CUSTOM DATE PICKER ===== */
.cp-custom-picker[b-z9usryt0ka] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    background: #EFF6FC;
    border-radius: 8px;
}

.cp-custom-picker input[type="date"][b-z9usryt0ka] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

.cp-add-custom[b-z9usryt0ka] {
    padding: 8px 14px;
    background: #0078D4;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cp-add-custom:hover:not(:disabled)[b-z9usryt0ka] {
    background: #106EBE;
}

.cp-add-custom:disabled[b-z9usryt0ka] {
    background: #d1d5db;
    cursor: not-allowed;
}

/* ===== SELECTED DATES ===== */
.cp-selected-dates[b-z9usryt0ka] {
    margin-bottom: 12px;
}

.cp-selected-chips[b-z9usryt0ka] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-selected-chip[b-z9usryt0ka] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #dbeafe;
    border-radius: 16px;
    font-size: 12px;
    color: #1e40af;
}

.cp-remove[b-z9usryt0ka] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    line-height: 1;
}

.cp-remove:hover[b-z9usryt0ka] {
    color: #dc2626;
}

/* ===== REASON TEXTAREA ===== */
.cp-reason[b-z9usryt0ka] {
    margin-bottom: 12px;
    position: relative;
}

.cp-reason textarea[b-z9usryt0ka] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    resize: none;
    font-family: inherit;
}

.cp-reason textarea:focus[b-z9usryt0ka] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.cp-char-count[b-z9usryt0ka] {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 10px;
    color: #94a3b8;
}

/* ===== SUBMIT BUTTON ===== */
.cp-actions[b-z9usryt0ka] {
    margin-bottom: 10px;
}

.cp-submit[b-z9usryt0ka] {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.cp-submit:hover:not(.disabled):not(:disabled)[b-z9usryt0ka] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.cp-submit.disabled[b-z9usryt0ka],
.cp-submit:disabled[b-z9usryt0ka] {
    background: #d1d5db;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===== NOTICE ===== */
.cp-notice[b-z9usryt0ka] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: #f0f9ff;
    border-radius: 6px;
    font-size: 11px;
    color: #0369a1;
    line-height: 1.4;
}

.cp-notice i[b-z9usryt0ka] {
    margin-top: 1px;
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .proposal-response-panel[b-z9usryt0ka] {
        padding: 12px;
    }

    .panel-header-simple[b-z9usryt0ka] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .date-chips-container[b-z9usryt0ka] {
        justify-content: center;
    }

    .date-chip[b-z9usryt0ka] {
        min-width: 70px;
        padding: 10px 12px;
    }

    .chip-date[b-z9usryt0ka] {
        font-size: 14px;
    }

    .flight-detail-row[b-z9usryt0ka] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cp-date-chips[b-z9usryt0ka] {
        justify-content: center;
    }
}
/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/MessageDialog.razor.rz.scp.css */
/* ============================================================================
   Message Dialog - Microsoft Fluent Design Pattern
   ============================================================================
   A beautiful, centered modal dialog for displaying messages
   Inspired by Microsoft Fluent UI design system
   ============================================================================ */

/* Overlay */
.message-dialog-overlay[b-nf69f7kg7l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn-b-nf69f7kg7l 0.2s ease-out;
}

@keyframes fadeIn-b-nf69f7kg7l {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.message-dialog[b-nf69f7kg7l] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    animation: slideUp-b-nf69f7kg7l 0.3s ease-out;
}

@keyframes slideUp-b-nf69f7kg7l {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================================
   Icon Header Section
   ============================================================================ */

.dialog-icon-container[b-nf69f7kg7l] {
    display: flex;
    justify-content: center;
    padding: 32px 24px 16px 24px;
}

.dialog-icon[b-nf69f7kg7l] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconBounce-b-nf69f7kg7l 0.5s ease-out 0.1s both;
}

@keyframes iconBounce-b-nf69f7kg7l {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.dialog-icon i[b-nf69f7kg7l] {
    font-size: 36px;
}

/* Error Type */
.message-dialog.type-error .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fecaca;
}

.message-dialog.type-error .dialog-icon i[b-nf69f7kg7l] {
    color: #dc2626;
}

/* Success Type */
.message-dialog.type-success .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #bbf7d0;
}

.message-dialog.type-success .dialog-icon i[b-nf69f7kg7l] {
    color: #16a34a;
}

/* Warning Type */
.message-dialog.type-warning .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #fde68a;
}

.message-dialog.type-warning .dialog-icon i[b-nf69f7kg7l] {
    color: #d97706;
}

/* Info Type */
.message-dialog.type-info .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #bfdbfe;
}

.message-dialog.type-info .dialog-icon i[b-nf69f7kg7l] {
    color: #2563eb;
}

/* ============================================================================
   Content Section
   ============================================================================ */

.dialog-content[b-nf69f7kg7l] {
    padding: 0 32px 24px 32px;
    text-align: center;
}

.dialog-title[b-nf69f7kg7l] {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.dialog-message[b-nf69f7kg7l] {
    margin: 0 0 16px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

/* Details Section */
.dialog-details[b-nf69f7kg7l] {
    margin-top: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    text-align: left;
}

.details-header[b-nf69f7kg7l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.details-header i[b-nf69f7kg7l] {
    font-size: 14px;
}

.details-text[b-nf69f7kg7l] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    word-break: break-word;
}

/* Suggestions Section */
.dialog-suggestions[b-nf69f7kg7l] {
    margin-top: 20px;
    padding: 16px;
    background: #f0f9ff;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
    text-align: left;
}

.suggestions-label[b-nf69f7kg7l] {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1e40af;
}

.suggestions-list[b-nf69f7kg7l] {
    margin: 0;
    padding-left: 20px;
    list-style-type: none;
}

.suggestions-list li[b-nf69f7kg7l] {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
}

.suggestions-list li[b-nf69f7kg7l]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: 600;
}

.suggestions-list li:last-child[b-nf69f7kg7l] {
    margin-bottom: 0;
}

/* ============================================================================
   Action Buttons Section
   ============================================================================ */

.dialog-actions[b-nf69f7kg7l] {
    display: flex;
    gap: 12px;
    padding: 20px 32px 28px 32px;
    justify-content: center;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-nf69f7kg7l],
.btn-secondary[b-nf69f7kg7l] {
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 120px;
}

.btn-secondary[b-nf69f7kg7l] {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-nf69f7kg7l] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Primary Button - Type Specific Colors */
.btn-primary.type-error[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
}

.btn-primary.type-error:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-primary.type-success[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
}

.btn-primary.type-success:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.btn-primary.type-warning[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
}

.btn-primary.type-warning:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.btn-primary.type-info[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
}

.btn-primary.type-info:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 480px) {
    .message-dialog-overlay[b-nf69f7kg7l] {
        padding: 16px;
    }

    .message-dialog[b-nf69f7kg7l] {
        max-width: 100%;
        border-radius: 16px;
    }

    .dialog-icon-container[b-nf69f7kg7l] {
        padding: 24px 20px 12px 20px;
    }

    .dialog-icon[b-nf69f7kg7l] {
        width: 64px;
        height: 64px;
    }

    .dialog-icon i[b-nf69f7kg7l] {
        font-size: 30px;
    }

    .dialog-content[b-nf69f7kg7l] {
        padding: 0 20px 20px 20px;
    }

    .dialog-title[b-nf69f7kg7l] {
        font-size: 18px;
    }

    .dialog-message[b-nf69f7kg7l] {
        font-size: 14px;
    }

    .dialog-actions[b-nf69f7kg7l] {
        padding: 16px 20px 24px 20px;
        flex-direction: column;
    }

    .btn-primary[b-nf69f7kg7l],
    .btn-secondary[b-nf69f7kg7l] {
        width: 100%;
        min-width: auto;
    }
}

/* ============================================================================
   Dark Mode Support (Optional - follows system preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .message-dialog[b-nf69f7kg7l] {
        background: #1f2937;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    .dialog-title[b-nf69f7kg7l] {
        color: #f9fafb;
    }

    .dialog-message[b-nf69f7kg7l] {
        color: #d1d5db;
    }

    .dialog-details[b-nf69f7kg7l] {
        background: #374151;
    }

    .details-header[b-nf69f7kg7l] {
        color: #9ca3af;
    }

    .details-text[b-nf69f7kg7l] {
        color: #e5e7eb;
    }

    .dialog-suggestions[b-nf69f7kg7l] {
        background: #1e3a5f;
        border-left-color: #3b82f6;
    }

    .suggestions-label[b-nf69f7kg7l] {
        color: #93c5fd;
    }

    .suggestions-list li[b-nf69f7kg7l] {
        color: #e5e7eb;
    }

    .dialog-actions[b-nf69f7kg7l] {
        background: #111827;
        border-top-color: #374151;
    }

    .btn-secondary[b-nf69f7kg7l] {
        background: #374151;
        color: #f9fafb;
        border-color: #4b5563;
    }

    .btn-secondary:hover[b-nf69f7kg7l] {
        background: #4b5563;
        border-color: #6b7280;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/TravelerSuggestionResponsePanel.razor.rz.scp.css */
/* ============================================================================
   Traveler Suggestion Response Panel Styles
   ============================================================================ */

.suggestion-response-panel[b-o91u6iogfw] {
    background: linear-gradient(135deg, #FDF4FF 0%, #FAF5FF 100%);
    border: 2px solid #A855F7;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Panel Header */
.panel-header[b-o91u6iogfw] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.header-icon[b-o91u6iogfw] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.header-content h3[b-o91u6iogfw] {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #581C87;
}

.header-content p[b-o91u6iogfw] {
    margin: 0;
    font-size: 13px;
    color: #7C3AED;
}

/* Loading State */
.panel-loading[b-o91u6iogfw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #7C3AED;
}

.panel-loading .spinner[b-o91u6iogfw] {
    width: 32px;
    height: 32px;
    border: 3px solid #E9D5FF;
    border-top-color: #A855F7;
    border-radius: 50%;
    animation: spin-b-o91u6iogfw 1s linear infinite;
}

/* Empty State */
.panel-empty[b-o91u6iogfw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #9CA3AF;
}

.panel-empty i[b-o91u6iogfw] {
    font-size: 32px;
    opacity: 0.5;
}

/* Suggestions Grid */
.suggestions-grid[b-o91u6iogfw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Suggestion Card */
.suggestion-card[b-o91u6iogfw] {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
}

.suggestion-card:hover[b-o91u6iogfw] {
    border-color: #A855F7;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

.suggestion-card.preferred[b-o91u6iogfw] {
    border-color: #F59E0B;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}

.suggestion-card.selected[b-o91u6iogfw] {
    border-color: #10B981;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Preferred Ribbon */
.preferred-ribbon[b-o91u6iogfw] {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Card Date Display */
.card-date[b-o91u6iogfw] {
    margin: 20px 0 12px 0;
}

.card-date .date-value[b-o91u6iogfw] {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1;
}

.card-date .date-month[b-o91u6iogfw] {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

/* Card Meta */
.card-meta[b-o91u6iogfw] {
    margin-bottom: 12px;
}

.card-meta .badge[b-o91u6iogfw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 20px;
}

.card-meta .badge.flexible[b-o91u6iogfw] {
    background: #D1FAE5;
    color: #065F46;
}

.card-meta .badge.fixed[b-o91u6iogfw] {
    background: #FEE2E2;
    color: #991B1B;
}

/* Card Note */
.card-note[b-o91u6iogfw] {
    background: #F3F4F6;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #4B5563;
    text-align: left;
    margin-bottom: 12px;
    font-style: italic;
}

.card-note i[b-o91u6iogfw] {
    color: #9CA3AF;
    margin-right: 4px;
    font-size: 10px;
}

/* Accept Button */
.btn-accept[b-o91u6iogfw] {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
}

.btn-accept:hover:not(:disabled)[b-o91u6iogfw] {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-1px);
}

.btn-accept.confirming[b-o91u6iogfw] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    animation: pulse-b-o91u6iogfw 1.5s infinite;
}

@keyframes pulse-b-o91u6iogfw {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.btn-accept:disabled[b-o91u6iogfw] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Confirmation Bar */
.confirmation-bar[b-o91u6iogfw] {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid #10B981;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.confirm-message[b-o91u6iogfw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #065F46;
    margin-bottom: 12px;
}

.confirm-message i[b-o91u6iogfw] {
    color: #10B981;
}

.confirm-actions[b-o91u6iogfw] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-o91u6iogfw] {
    padding: 10px 20px;
    border: 1px solid #D1D5DB;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4B5563;
    transition: all 0.2s;
}

.btn-cancel:hover:not(:disabled)[b-o91u6iogfw] {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.btn-confirm[b-o91u6iogfw] {
    padding: 10px 24px;
    border: none;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    transition: all 0.2s;
}

.btn-confirm:hover:not(:disabled)[b-o91u6iogfw] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-confirm:disabled[b-o91u6iogfw],
.btn-cancel:disabled[b-o91u6iogfw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-sm[b-o91u6iogfw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-o91u6iogfw 1s linear infinite;
}

/* Panel Footer */
.panel-footer[b-o91u6iogfw] {
    text-align: center;
}

.divider[b-o91u6iogfw] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.divider[b-o91u6iogfw]::before,
.divider[b-o91u6iogfw]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #D1D5DB;
}

.divider span[b-o91u6iogfw] {
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
}

.btn-propose-different[b-o91u6iogfw] {
    padding: 12px 24px;
    border: 2px dashed #9CA3AF;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6B7280;
    transition: all 0.2s;
}

.btn-propose-different:hover:not(:disabled)[b-o91u6iogfw] {
    border-color: #A855F7;
    color: #A855F7;
    background: rgba(168, 85, 247, 0.05);
}

.btn-propose-different:disabled[b-o91u6iogfw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.footer-note[b-o91u6iogfw] {
    margin-top: 12px;
    font-size: 12px;
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.footer-note i[b-o91u6iogfw] {
    color: #F59E0B;
}

/* Animations */
@keyframes spin-b-o91u6iogfw {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .suggestions-grid[b-o91u6iogfw] {
        grid-template-columns: 1fr 1fr;
    }
    
    .confirm-actions[b-o91u6iogfw] {
        flex-direction: column;
    }
    
    .btn-confirm[b-o91u6iogfw],
    .btn-cancel[b-o91u6iogfw] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .suggestions-grid[b-o91u6iogfw] {
        grid-template-columns: 1fr;
    }
    
    .panel-header[b-o91u6iogfw] {
        flex-direction: column;
        text-align: center;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/Logistics/LogisticsDashboard.razor.rz.scp.css */
/* ========================================
   LOGISTICS DASHBOARD - V3 BEC DESIGN TOKENS
   Uses --BEC-* design tokens from the design system.
   ======================================== */

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}


/* ========================================
   PAGE HEADER (Sticky)
   ======================================== */
.erp-page-header[b-nv45pxmb3v] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
}

.page-title[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-nv45pxmb3v] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Stats Cards */
.stats-container[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: none;
    height: auto;
}

.stat-card[b-nv45pxmb3v] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
}

.stat-value[b-nv45pxmb3v] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-nv45pxmb3v] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0;
}

.stat-divider[b-nv45pxmb3v] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LIVE INDICATOR
   ======================================== */
.live-indicator[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot[b-nv45pxmb3v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #107c10;
    animation: pulse-b-nv45pxmb3v 2s infinite;
}

.live-text[b-nv45pxmb3v] {
    font-size: 11px;
    font-weight: 600;
    color: #107c10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse-b-nv45pxmb3v {

    0%,
    100% {
        padding: 0;
    }

    /* Reset */
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

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

/* ========================================
   ACTION TOOLBAR (Sticky Floating)
   ======================================== */
[b-nv45pxmb3v] .e-toolbar.e-control {
    position: sticky !important;
    top: 40px !important;
    z-index: 90 !important;
    background: #FAFAF9 !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* Toolbar inner wrapper - keep items on one row, vertically centered */
[b-nv45pxmb3v] .e-toolbar .e-toolbar-items {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    flex-wrap: nowrap !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-left,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-center,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-right {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
}

/* Toolbar Items - compact height */
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
    color: var(--BEC-colorBrandBackground) !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Primary Button Style in Toolbar */
[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
}

[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn .e-icons,
[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
}

[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    color: white !important;
}

[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Separator - vertically centered */
[b-nv45pxmb3v] .e-toolbar .e-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: 20px !important;
    margin: 0 8px !important;
    align-self: center !important;
}

/* Search Input - match toolbar row height */
[b-nv45pxmb3v] .e-toolbar .e-input-group,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-nv45pxmb3v] .e-toolbar .e-input-group .e-input,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-input-group .e-input {
    height: 30px !important;
    line-height: 30px !important;
}

/* ========================================
   GRID CONTENT
   ======================================== */
.erp-page-content[b-nv45pxmb3v] {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-nv45pxmb3v] .e-grid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

/* Grid Header - Neutral */
[b-nv45pxmb3v] .e-grid .e-gridheader {
    background-color: #FAFAF9 !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-nv45pxmb3v] .e-headercell {
    background-color: #FAFAF9 !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px !important;
}

/* Grid Rows */
[b-nv45pxmb3v] .e-rowcell {
    font-size: 13px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 8px 12px !important;
}

/* Font consistency — match BookingDashboard */
[b-nv45pxmb3v] .e-grid .e-rowcell {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    color: #323130;
}

[b-nv45pxmb3v] .e-grid .e-headercell .e-headertext {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

/* Zebra striping */
[b-nv45pxmb3v] .e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #FAFAFA !important;
}

/* Hover & Selection */
[b-nv45pxmb3v] .e-grid .e-row:hover .e-rowcell {
    background-color: #F5F5F5 !important;
}

[b-nv45pxmb3v] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: #EBF3FC !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   CUSTOM BADGES & ICONS
   ======================================== */
.status-badge[b-nv45pxmb3v] {
    padding: 3px 12px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 11px;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    min-width: 80px;
}

/* Status Colors */
.status-pending[b-nv45pxmb3v] {
    background-color: #FDF6E3;
    color: #9A6603;
    border: 1px solid #FAEBCC;
}

.status-progress[b-nv45pxmb3v] {
    background-color: #E6F5FF;
    color: #0078D4;
    border: 1px solid #c7e0f4;
}

.status-completed[b-nv45pxmb3v] {
    background-color: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #C8E6C9;
}

/* Requirements column: only required icons shown; active = clearly colored */
.requirements-empty[b-nv45pxmb3v] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.req-icon[b-nv45pxmb3v] {
    font-size: var(--BEC-fontSizeBase300);
    margin-right: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground3);
}

.req-icon:last-child[b-nv45pxmb3v] {
    margin-right: 0;
}

.req-icon-active[b-nv45pxmb3v] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.req-icon.active[b-nv45pxmb3v] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

/* ========================================
   SIDE DRAWER — Wireframe v2 tokens
   Flat, compact, matches grid toolbar aesthetic
   ======================================== */
.drawer-overlay[b-nv45pxmb3v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-nv45pxmb3v 0.2s ease;
}

.drawer-panel[b-nv45pxmb3v] {
    background: #FFFFFF;
    width: 460px;
    max-width: 90vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-nv45pxmb3v 0.25s ease;
}

@keyframes drawerFadeIn-b-nv45pxmb3v {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-nv45pxmb3v {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-nv45pxmb3v] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-nv45pxmb3v] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-close-drawer[b-nv45pxmb3v] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-nv45pxmb3v] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body */
.drawer-body[b-nv45pxmb3v] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Drawer footer — 44px flat #FAFAF9 */
.drawer-footer[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

/* Drawer footer buttons — 28px compact */
.btn-drawer-default[b-nv45pxmb3v] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    color: #616161;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
}

.btn-drawer-default:hover[b-nv45pxmb3v] {
    background: #F5F5F4;
}

.btn-drawer-primary[b-nv45pxmb3v] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: #0078D4;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-drawer-primary:hover[b-nv45pxmb3v] {
    background: #106EBE;
}

/* Section headers inside drawer */
.d-section[b-nv45pxmb3v] {
    margin-bottom: 16px;
}

.d-section-hdr[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-nv45pxmb3v] {
    font-size: 12px;
    color: #0078D4;
}

/* Key-value grid */
.kv-grid[b-nv45pxmb3v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.kv-label[b-nv45pxmb3v] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kv-value[b-nv45pxmb3v] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

/* Form fields — match wireframe v2 tokens */
.f-group[b-nv45pxmb3v] {
    margin-bottom: 12px;
}

.f-label[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
    margin-bottom: 4px;
    display: block;
}

.f-row[b-nv45pxmb3v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Syncfusion inputs inside drawer — 32px height */
[b-nv45pxmb3v] .drawer-body .e-input-group,
[b-nv45pxmb3v] .drawer-body .e-input-group.e-control-wrapper {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 3px !important;
    font-size: 13px !important;
}

[b-nv45pxmb3v] .drawer-body .e-input-group .e-input,
[b-nv45pxmb3v] .drawer-body .e-input-group.e-control-wrapper .e-input {
    height: 30px !important;
    font-size: 13px !important;
}

[b-nv45pxmb3v] .drawer-body .e-input-group.e-multi-line-input,
[b-nv45pxmb3v] .drawer-body .e-input-group.e-multi-line-input.e-control-wrapper {
    height: auto !important;
    min-height: 64px !important;
}

[b-nv45pxmb3v] .drawer-body .e-input-group.e-multi-line-input .e-input {
    height: auto !important;
    min-height: 56px !important;
}



/* Grid action button */
.btn[b-nv45pxmb3v] {
    padding: 4px 12px;
    border-radius: 3px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    border: none;
    transition: all 0.15s ease;
}

.btn-primary[b-nv45pxmb3v] {
    background: #0078D4;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-primary:hover[b-nv45pxmb3v] {
    background: #106EBE;
}

.btn-sm[b-nv45pxmb3v] {
    padding: 3px 10px;
    font-size: 11px;
}

.loading-container[b-nv45pxmb3v] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* ========================================
   GRID HORIZONTAL LINES
   ======================================== */
[b-nv45pxmb3v] .e-grid.e-gridhorizontallines .e-rowcell {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

/* ========================================
   NEW COLUMN STYLES
   ======================================== */
.provider-text[b-nv45pxmb3v],
.hotel-text[b-nv45pxmb3v] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   EXPORT DIALOG — Updated tokens
   ======================================== */
.export-dialog-hint[b-nv45pxmb3v] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #616161;
}

.export-dialog-dates[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-dialog-dates .filter-item[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-dialog-dates .filter-item label[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

/* ========================================
   SfDialog overrides — flat, no blur
   Matches BookingDashboard unified pattern
   ======================================== */
[b-nv45pxmb3v] .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[b-nv45pxmb3v] .e-dialog {
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

/* Dialog header — 36px, flat #FAFAF9 */
[b-nv45pxmb3v] .e-dialog .e-dlg-header-content {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-nv45pxmb3v] .e-dialog .e-dlg-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    display: flex !important;
    align-items: center !important;
}

[b-nv45pxmb3v] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    color: #9E9E9E !important;
    box-shadow: none !important;
}

[b-nv45pxmb3v] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
    background: #F5F5F4 !important;
    color: #242424 !important;
}

/* Dialog body */
[b-nv45pxmb3v] .e-dialog .e-dlg-content {
    padding: 16px !important;
}

/* Dialog footer — flat #FAFAF9 */
[b-nv45pxmb3v] .e-dialog .e-footer-content {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-top: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Dialog footer buttons — 28px compact */
[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-width: auto !important;
    box-shadow: none !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-flat {
    background: #FFFFFF !important;
    color: #616161 !important;
    border: 1px solid #E0E0E0 !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-flat:hover {
    background: #F5F5F4 !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-primary {
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-primary:hover {
    background: #106EBE !important;
}

/* Dialog header title */
.dialog-header-title[b-nv45pxmb3v] {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #242424;
}

.dialog-header-title i[b-nv45pxmb3v] {
    font-size: 13px;
    color: #0078D4;
}

.dialog-content-inner[b-nv45pxmb3v] {
    padding: 0;
}

.dialog-content-inner p[b-nv45pxmb3v] {
    font-size: 13px;
    color: #242424;
    margin: 0 0 12px 0;
}

/* ========================================
   KV-GRID — Full-width span for email
   ======================================== */
.kv-span-2[b-nv45pxmb3v] {
    grid-column: 1 / -1;
}

.kv-value-email[b-nv45pxmb3v] {
    word-break: break-all;
    color: #0078D4;
    font-size: 12px;
}

/* ========================================
   NOTIFICATION SECTION — Checkbox styling
   ======================================== */
[b-nv45pxmb3v] .drawer-body .e-checkbox-wrapper {
    font-size: 13px !important;
    color: #242424 !important;
}

[b-nv45pxmb3v] .drawer-body .e-checkbox-wrapper .e-label {
    font-size: 12px !important;
    color: #616161 !important;
    font-weight: 500 !important;
}

/* ========================================
   ACTIVITY LOG — Minimal timeline
   ======================================== */
.timeline[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 10px;
}

.timeline-item[b-nv45pxmb3v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding-bottom: 12px;
}

.timeline-item:last-child[b-nv45pxmb3v] {
    padding-bottom: 0;
}

/* Vertical connector line between dots */
.timeline-item:not(:last-child)[b-nv45pxmb3v]::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 0;
    width: 1px;
    background: #E0E0E0;
}

.timeline-dot[b-nv45pxmb3v] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0078D4;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px #0078D4;
    flex-shrink: 0;
    margin-top: 2px;
}

.timeline-content[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.timeline-label[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

.timeline-date[b-nv45pxmb3v] {
    font-size: 11px;
    color: #9E9E9E;
    font-weight: 400;
}
/* /Components/Pages/MainLayout/FlightTicket/TravelRequest/MyTravelRequests.razor.rz.scp.css */
/* ========================================
   MY TRAVEL REQUESTS - V3 TIMELINE
   Uses BEC_Theme.css Design Tokens (global :root)
   ======================================== */

/* NOTE: --BEC-* tokens are defined globally in BEC_Theme.css.
   Do NOT redefine them here — Blazor CSS isolation scopes :root
   as :root[b-xxx] which never matches <html>. */

.erp-page-container[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground2);
    overflow: hidden;
}

/* ========================================
   UNIFIED HEADER (Matching BookingDashboard)
   ======================================== */
.erp-page-header[b-t7sgks9wo5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    min-height: 48px;
}

.page-title[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground);
    font-size: 16px;
}

.breadcrumb[b-t7sgks9wo5] {
    font-weight: normal;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    margin-left: 8px;
}

.header-actions[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========================================
   SPLIT LAYOUT
   ======================================== */
.page-content[b-t7sgks9wo5] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* TIMELINE PANE — full width (drawer is overlay) */
.timeline-pane[b-t7sgks9wo5] {
    flex: 1;
    background: var(--BEC-colorNeutralBackground2);
    padding: 30px 40px;
    overflow-y: auto;
}

.timeline-wrapper[b-t7sgks9wo5] {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 100px;
    /* Space for scrolling */
}

/* Empty/Loading States for Timeline */
.center-state[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.empty-icon[b-t7sgks9wo5] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #e1dfdd;
}


/* TIMELINE ITEMS GRID */
.timeline-item[b-t7sgks9wo5] {
    display: grid;
    grid-template-columns: 100px 40px 1fr;
    /* Date | Line | Card */
    gap: 0;
    margin-bottom: 24px;
    cursor: pointer;
}

/* COL 1: DATE (Single Line) */
.t-date-col[b-t7sgks9wo5] {
    text-align: right;
    padding-right: 16px;
    padding-top: 16px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
}

/* COL 2: LINE & DOT */
.t-line-col[b-t7sgks9wo5] {
    position: relative;
    display: flex;
    justify-content: center;
}

.t-line-col[b-t7sgks9wo5]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -24px;
    /* Extend to next item */
    width: 2px;
    background: #e1dfdd;
    z-index: 0;
}

.timeline-item:last-child .t-line-col[b-t7sgks9wo5]::before {
    height: 100%;
    display: none;
    /* Stop line at last item */
}

.t-dot[b-t7sgks9wo5] {
    width: 14px;
    height: 14px;
    background: white;
    border: 2px solid var(--BEC-colorBrandBackground);
    border-radius: 50%;
    z-index: 1;
    margin-top: 16px;
    /* Align with top of card text */
    box-shadow: 0 0 0 4px var(--BEC-colorNeutralBackground2);
    transition: all 0.2s;
}

/* Selected State */
.timeline-item.selected .t-dot[b-t7sgks9wo5] {
    background: var(--BEC-colorBrandBackground);
    transform: scale(1.3);
    box-shadow: 0 0 0 6px rgba(0, 120, 212, 0.2);
}

/* COL 3: CARD */
.t-card-col[b-t7sgks9wo5] {
    padding-top: 0;
    padding-left: 8px;
}

.time-card[b-t7sgks9wo5] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    padding: 16px 20px;
    transition: all 0.2s ease;
    position: relative;
}

.time-card[b-t7sgks9wo5]::before {
    /* Triangle arrow */
    content: '';
    position: absolute;
    left: -6px;
    top: 20px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    z-index: 0;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.05);
}

.timeline-item.selected .time-card[b-t7sgks9wo5] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 8px 16px rgba(0, 120, 212, 0.15);
    transform: translateX(4px);
}

/* CARD CONTENT */
.tc-header[b-t7sgks9wo5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.tc-title[b-t7sgks9wo5] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-route-arrow[b-t7sgks9wo5] {
    color: #bbb;
    font-size: 12px;
}

.tc-meta[b-t7sgks9wo5] {
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.legs-indicator[b-t7sgks9wo5] {
    color: #8764b8;
    font-weight: 500;
}

.legs-indicator i[b-t7sgks9wo5] {
    margin-right: 3px;
}

/* ========================================
   STATUS TIMELINE
   ======================================== */
.status-timeline[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    font-size: 11px;
}

.detail-timeline[b-t7sgks9wo5] {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
    font-size: 12px;
}

.timeline-step[b-t7sgks9wo5] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.timeline-arrow[b-t7sgks9wo5] {
    margin: 0 2px;
    font-size: 10px;
}

/* Timeline Colors - Completed (Green) */
.step-green[b-t7sgks9wo5] {
    color: #107c10;
}

.arrow-green[b-t7sgks9wo5] {
    color: #107c10;
}

/* Timeline Colors - Current Step Highlight */
.step-current[b-t7sgks9wo5] {
    font-weight: 700;
}

/* Timeline Colors - Pending/Orange */
.step-orange[b-t7sgks9wo5] {
    color: #ca5010;
}

/* Timeline Colors - Blue (Awaiting Quotes) */
.step-blue[b-t7sgks9wo5] {
    color: #0078d4;
}

/* Timeline Colors - Purple (Reviewing Quotes) */
.step-purple[b-t7sgks9wo5] {
    color: #8764b8;
}

/* Timeline Colors - Teal (Selected) */
.step-teal[b-t7sgks9wo5] {
    color: #038387;
}

/* Timeline Colors - Dark Green (Completed) */
.step-darkgreen[b-t7sgks9wo5] {
    color: #0b6a0b;
}

/* Timeline Colors - Gray (Future/Inactive) */
.step-gray[b-t7sgks9wo5] {
    color: #a19f9d;
}

.arrow-gray[b-t7sgks9wo5] {
    color: #d2d0ce;
}

/* Timeline Colors - Red (Rejected/Cancelled) */
.step-red[b-t7sgks9wo5] {
    color: #a80000;
}

/* STATUS BADGES */
.status-pill[b-t7sgks9wo5] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-draft[b-t7sgks9wo5] {
    background: #f3f2f1;
    color: #605e5c;
}

.badge-status-submitted[b-t7sgks9wo5] {
    background: #e6f5ff;
    color: #0078d4;
}

.badge-status-pending[b-t7sgks9wo5] {
    background: #fff4ce;
    color: #5d5a58;
}

/* Warning color */
.badge-status-approved[b-t7sgks9wo5] {
    background: #dff6dd;
    color: #107c10;
}

.badge-status-rejected[b-t7sgks9wo5] {
    background: #fde7e9;
    color: #a80000;
}

.badge-status-cancelled[b-t7sgks9wo5] {
    background: #f3f2f1;
    color: #a19f9d;
    text-decoration: line-through;
}

/* Date Change Re-Approval Pending - Orange/Amber */
.badge-status-reapproval[b-t7sgks9wo5] {
    background: #fff3cd;
    color: #856404;
}


/* ========================================
   DRAWER PANEL — Overlay pattern
   Copied from BulkBookingDashboard (proven working)
   ======================================== */
.drawer-overlay[b-t7sgks9wo5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-t7sgks9wo5 0.2s ease;
}

.drawer-panel[b-t7sgks9wo5] {
    background: #FFFFFF;
    width: 460px;
    max-width: 90vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-t7sgks9wo5 0.25s ease;
}

@keyframes drawerFadeIn-b-t7sgks9wo5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-t7sgks9wo5 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-t7sgks9wo5] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-id-badge[b-t7sgks9wo5] {
    display: inline-block;
    background: #f3f2f1;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: #616161;
    flex-shrink: 0;
}

.status-badge[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.btn-close-drawer[b-t7sgks9wo5] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-t7sgks9wo5] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body — scrollable */
.drawer-body[b-t7sgks9wo5] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Drawer footer — flat #FAFAF9 */
.drawer-footer[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

.dp-footer-spacer[b-t7sgks9wo5] {
    flex: 1;
}

/* ========================================
   DRAWER SECTIONS — flat wireframe pattern
   (matches BulkBookingDashboard .d-section)
   ======================================== */
.d-section[b-t7sgks9wo5] {
    margin-bottom: 16px;
}

.d-section-hdr[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-t7sgks9wo5] {
    font-size: 12px;
    color: #0078D4;
}

.d-section-hdr.clickable[b-t7sgks9wo5] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.2s;
}

.d-section-hdr.clickable:hover[b-t7sgks9wo5] {
    color: #0078D4;
}

.d-section-hdr .toggle-icon[b-t7sgks9wo5] {
    margin-left: auto;
    font-size: 11px;
    color: #9E9E9E;
}

/* ========================================
   KEY-VALUE GRID — matches BulkBookingDashboard
   ======================================== */
.kv-grid[b-t7sgks9wo5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.kv-label[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kv-value[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

.kv-full-width[b-t7sgks9wo5] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EBEBEB;
}

.kv-full-width .kv-value[b-t7sgks9wo5] {
    margin-top: 4px;
    line-height: 1.5;
}

/* ========================================
   STATUS STEPS — compact inline
   ======================================== */
.dp-status-steps[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    font-size: 12px;
}

.dp-step[b-t7sgks9wo5] {
    font-weight: 500;
}

.dp-step-arrow[b-t7sgks9wo5] {
    margin: 0 2px;
    font-size: 10px;
}

/* ========================================
   ITINERARY LEGS — compact, 3 lines max
   ======================================== */
.itin-leg[b-t7sgks9wo5] {
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #FAFAF9;
}

.itin-leg:last-child[b-t7sgks9wo5] {
    margin-bottom: 0;
}

.itin-leg-hdr[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.itin-leg-num[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: white;
    background: #0078D4;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.itin-leg-route[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
}

.itin-leg-dates[b-t7sgks9wo5] {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #616161;
    margin-bottom: 4px;
}

.itin-leg-tags[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.itin-tag[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
}

.itin-tag.class-tag[b-t7sgks9wo5] {
    color: #616161;
    background: #F0F0F0;
}

.itin-tag.svc-tag[b-t7sgks9wo5] {
    color: #0078D4;
    background: #E6F2FF;
}

/* ========================================
   LIST ROWS — matches BulkBookingDashboard
   ======================================== */
.list-row[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #EBEBEB;
    font-size: 13px;
}

.list-row:last-child[b-t7sgks9wo5] {
    border-bottom: none;
}

.list-row .name[b-t7sgks9wo5] {
    font-weight: 500;
    color: #242424;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row .mono[b-t7sgks9wo5] {
    font-size: 11px;
    color: #9E9E9E;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.doc-icon[b-t7sgks9wo5] {
    font-size: 14px;
    flex-shrink: 0;
}

.doc-icon.fa-file-pdf[b-t7sgks9wo5] { color: #e81123; }
.doc-icon.fa-file-word[b-t7sgks9wo5] { color: #2b579a; }
.doc-icon.fa-file-excel[b-t7sgks9wo5] { color: #217346; }
.doc-icon.fa-file-image[b-t7sgks9wo5] { color: #0078d4; }
.doc-icon.fa-file[b-t7sgks9wo5] { color: #666; }

/* ========================================
   ATTACHMENT ITEMS — requester documents
   ======================================== */
.att-item[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.att-item:hover[b-t7sgks9wo5] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.1);
}

.att-icon[b-t7sgks9wo5] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    flex-shrink: 0;
}

.att-icon i[b-t7sgks9wo5] {
    font-size: 16px;
}

.att-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.att-name[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-meta[b-t7sgks9wo5] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
    display: flex;
    gap: 8px;
}

.att-meta span + span[b-t7sgks9wo5]::before {
    content: "·";
    margin-right: 8px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-download-btn[b-t7sgks9wo5] {
    flex-shrink: 0;
    border-radius: 4px !important;
    transition: color 0.2s ease, background 0.2s ease;
}

.att-download-btn:hover[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground) !important;
    background: rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   APPROVAL TIMELINE — vertical steps
   ======================================== */
.approval-timeline[b-t7sgks9wo5] {
    padding: 4px 0 0 0;
}

.atl-step[b-t7sgks9wo5] {
    display: flex;
    gap: 10px;
    position: relative;
}

.atl-step:last-child .atl-line[b-t7sgks9wo5] {
    display: none;
}

.atl-line-col[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
}

.atl-dot[b-t7sgks9wo5] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #D1D5DB;
    background: #fff;
    z-index: 1;
}

.atl-dot.dot-approved[b-t7sgks9wo5] {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.atl-dot.dot-rejected[b-t7sgks9wo5] {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.atl-dot.dot-submitted[b-t7sgks9wo5] {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.atl-dot.dot-current[b-t7sgks9wo5] {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    animation: pulse-dot-b-t7sgks9wo5 2s ease-in-out infinite;
}

.atl-dot.dot-pending[b-t7sgks9wo5] {
    background: #fff;
    border-color: #D1D5DB;
}

@keyframes pulse-dot-b-t7sgks9wo5 {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25); }
}

.atl-line[b-t7sgks9wo5] {
    width: 2px;
    flex: 1;
    background: #E5E7EB;
    min-height: 16px;
}

.atl-step.step-done .atl-line[b-t7sgks9wo5] {
    background: #10b981;
}

.atl-content[b-t7sgks9wo5] {
    flex: 1;
    padding-bottom: 14px;
}

.atl-header[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.atl-step-name[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

.atl-date[b-t7sgks9wo5] {
    font-size: 11px;
    color: #9E9E9E;
}

.atl-approver[b-t7sgks9wo5] {
    font-size: 12px;
    color: #616161;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.atl-approver i[b-t7sgks9wo5] {
    font-size: 10px;
    color: #9E9E9E;
}

.atl-action[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}

.atl-action.action-approved[b-t7sgks9wo5] {
    color: #10b981;
    background: #ecfdf5;
}

.atl-action.action-rejected[b-t7sgks9wo5] {
    color: #ef4444;
    background: #fef2f2;
}

.atl-action.action-submitted[b-t7sgks9wo5] {
    color: #3b82f6;
    background: #eff6ff;
}

.atl-action.action-waiting[b-t7sgks9wo5] {
    color: #f59e0b;
    background: #fffbeb;
}

.atl-comment[b-t7sgks9wo5] {
    font-size: 11px;
    font-style: italic;
    color: #616161;
    background: #F5F5F4;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* ========================================
   NOTES TEXT
   ======================================== */
.notes-text[b-t7sgks9wo5] {
    font-size: 13px;
    color: #616161;
    line-height: 1.5;
}



/* ========================================
   VENDOR DOCUMENTS SECTION
   ======================================== */
.vendor-documents-section[b-t7sgks9wo5] {
    margin-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    padding-top: 12px;
}

.vendor-docs-header[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-docs-header i[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground);
}

.vendor-doc-item[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.vendor-doc-item:hover[b-t7sgks9wo5] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.1);
}

.vendor-doc-icon[b-t7sgks9wo5] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.vendor-doc-icon i[b-t7sgks9wo5] {
    font-size: 16px;
}

.vendor-doc-icon i.fa-file-pdf[b-t7sgks9wo5] {
    color: #e81123;
}

.vendor-doc-icon i.fa-file-word[b-t7sgks9wo5] {
    color: #2b579a;
}

.vendor-doc-icon i.fa-file-excel[b-t7sgks9wo5] {
    color: #217346;
}

.vendor-doc-icon i.fa-file-image[b-t7sgks9wo5] {
    color: #0078d4;
}

.vendor-doc-icon i.fa-file[b-t7sgks9wo5] {
    color: #666;
}

.vendor-doc-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.vendor-doc-name[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vendor-doc-meta[b-t7sgks9wo5] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

.vendor-download-btn[b-t7sgks9wo5] {
    flex-shrink: 0;
}

.vendor-download-btn:hover[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground) !important;
    background: rgba(0, 120, 212, 0.1) !important;
}

/* File Icon Colors */
.pdf-icon[b-t7sgks9wo5] {
    color: #e81123 !important;
}

.word-icon[b-t7sgks9wo5] {
    color: #2b579a !important;
}

.excel-icon[b-t7sgks9wo5] {
    color: #217346 !important;
}

.image-icon[b-t7sgks9wo5] {
    color: #0078d4 !important;
}

.archive-icon[b-t7sgks9wo5] {
    color: #7b613c !important;
}

.default-icon[b-t7sgks9wo5] {
    color: #666 !important;
}

/* ========================================
   BOOKING DOCUMENTS SECTION
   ======================================== */

.booking-documents-section[b-t7sgks9wo5] {
    margin-top: 16px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #10b981;
}

.booking-docs-header[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 700;
    color: #065f46;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-docs-header i[b-t7sgks9wo5] {
    color: #10b981;
}

.booking-ref-badge[b-t7sgks9wo5] {
    margin-left: auto;
    background: #10b981;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.booking-docs-notice[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #065f46;
}

.booking-docs-notice i[b-t7sgks9wo5] {
    color: #10b981;
    font-size: 16px;
}

.booking-docs-list[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-doc-item[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #d1fae5;
    transition: all 0.2s;
}

.booking-doc-item:hover[b-t7sgks9wo5] {
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.booking-doc-icon[b-t7sgks9wo5] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    flex-shrink: 0;
}

/* Document type specific colors */
.booking-doc-item.eticket .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
}

.booking-doc-item.visa .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #5b21b6;
}

.booking-doc-item.hotel .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    color: #c2410c;
}

.booking-doc-item.transport .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: #0f766e;
}

.booking-doc-item.insurance .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #be185d;
}

.booking-doc-item.other .booking-doc-icon[b-t7sgks9wo5] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.booking-doc-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.booking-doc-type[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.booking-doc-name[b-t7sgks9wo5] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-doc-meta[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.booking-doc-meta .doc-pnr[b-t7sgks9wo5] {
    color: #0078d4;
    font-weight: 500;
}

.booking-download-btn[b-t7sgks9wo5] {
    --accent-fill-rest: #10b981;
    --accent-fill-hover: #059669;
    --accent-fill-active: #047857;
    flex-shrink: 0;
}

/* ========================================
   ON-BEHALF BADGE (traveller identity on cards)
   ======================================== */
.on-behalf-badge[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: #1d4ed8;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.on-behalf-badge i[b-t7sgks9wo5] {
    font-size: 10px;
    color: #3b82f6;
    flex-shrink: 0;
}

/* ========================================
   DATE NEGOTIATION STYLES
   ======================================== */

/* Badge on timeline cards */
.date-negotiation-badge[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    animation: pulse-badge-b-t7sgks9wo5 2s ease-in-out infinite;
}

.date-negotiation-badge i[b-t7sgks9wo5] {
    font-size: 12px;
    color: #d97706;
}

@keyframes pulse-badge-b-t7sgks9wo5 {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
}

/* Date confirmed notice */
.date-confirmed-notice[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 13px;
    font-weight: 500;
}

.date-confirmed-notice i[b-t7sgks9wo5] {
    font-size: 18px;
    color: #22c55e;
}

/* ========================================
   REQUEST OVERVIEW SECTION (LEGACY — replaced by kv-grid)
   ======================================== */

/* ========================================
   ENHANCED DATE CONFIRMED CARD
   ======================================== */
.date-confirmed-card[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.confirmed-header[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #a7f3d0;
}

.confirmed-header i[b-t7sgks9wo5] {
    font-size: 24px;
    color: #10b981;
}

.confirmed-header span[b-t7sgks9wo5] {
    font-size: 16px;
    font-weight: 700;
    color: #065f46;
}

.confirmed-details[b-t7sgks9wo5] {
    background: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.confirmed-date-row[b-t7sgks9wo5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0fdf4;
}

.confirmed-date-row:last-child[b-t7sgks9wo5] {
    border-bottom: none;
}

.confirmed-label[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.confirmed-value[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.confirmed-value.highlight-date[b-t7sgks9wo5] {
    color: #059669;
    font-size: 14px;
    background: #d1fae5;
    padding: 4px 10px;
    border-radius: 4px;
}

.confirmed-footer[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #047857;
    font-weight: 500;
}

.confirmed-footer i[b-t7sgks9wo5] {
    color: #10b981;
    font-size: 14px;
}

/* ========================================
   ENHANCED ITINERARY SECTION (LEGACY — replaced by .itin-leg)
   ======================================== */

/* Passport Profile Styles */
.passport-pill[b-t7sgks9wo5] {
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.passport-pill:hover[b-t7sgks9wo5] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.passport-pill.warning[b-t7sgks9wo5] {
    background: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fdba74 !important;
}

.passport-pill.success[b-t7sgks9wo5] {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #86efac !important;
}

.passport-form[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Dialog z-index: no longer needed — drawer closes before dialogs appear */

/* ========================================
   FOOTER BUTTON STYLES
   ======================================== */
[b-t7sgks9wo5] .btn-edit-blue .e-btn {
    color: #0078D4;
    border-color: #0078D4;
}

[b-t7sgks9wo5] .btn-resubmit-amber .e-btn {
    color: #ca5010;
    border-color: #ca5010;
}

/* ========================================
   LOGISTICS SECTION
   ======================================== */
.logistics-sub-hdr[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #5B5FC7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 16px 2px;
    margin-top: 4px;
}

/* ========================================
   ITINERARY LEG EXTRA DETAILS
   ======================================== */
.itin-leg-extra[b-t7sgks9wo5] {
    border-top: 1px dashed #E8E6E3;
    padding-top: 6px;
    margin-top: 6px;
}

.itin-extra-row[b-t7sgks9wo5] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 1px 0;
}

.itin-extra-label[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 600;
    color: #8A8886;
    text-transform: uppercase;
    min-width: 80px;
    flex-shrink: 0;
}

.itin-extra-value[b-t7sgks9wo5] {
    font-size: 12px;
    color: #323130;
}

/* ========================================
   APPROVAL STATUS LINE
   ======================================== */
.approval-status-line[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #856404;
    background: #fff8e1;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #ffe082;
}

.approval-status-line i[b-t7sgks9wo5] {
    font-size: 11px;
    color: #f59e0b;
}

/* ========================================
   APPROVAL CHAIN (compact approver list)
   ======================================== */
.approval-current-step[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #0369a1;
    background: #f0f9ff;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #bae6fd;
    margin-bottom: 10px;
}

.approval-current-step i[b-t7sgks9wo5] {
    font-size: 11px;
    color: #0284c7;
}

.approval-chain[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ac-row[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.ac-row:hover[b-t7sgks9wo5] {
    background: #f5f5f4;
}

.ac-icon[b-t7sgks9wo5] {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ac-row.ac-approved .ac-icon[b-t7sgks9wo5] { color: #16a34a; }
.ac-row.ac-rejected .ac-icon[b-t7sgks9wo5] { color: #dc2626; }
.ac-row.ac-waiting .ac-icon[b-t7sgks9wo5]  { color: #d97706; }
.ac-row.ac-pending .ac-icon[b-t7sgks9wo5]  { color: #a8a29e; }

.ac-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.ac-name[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #1c1917;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-step-label[b-t7sgks9wo5] {
    font-size: 11px;
    color: #78716c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-status[b-t7sgks9wo5] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ac-badge[b-t7sgks9wo5] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}

.ac-badge-approved[b-t7sgks9wo5] {
    background: #dcfce7;
    color: #15803d;
}

.ac-badge-rejected[b-t7sgks9wo5] {
    background: #fee2e2;
    color: #b91c1c;
}

.ac-badge-waiting[b-t7sgks9wo5] {
    background: #fef3c7;
    color: #92400e;
    animation: pulse-soft 2s ease-in-out infinite;
}

.ac-badge-pending[b-t7sgks9wo5] {
    background: #f5f5f4;
    color: #78716c;
}

.ac-date[b-t7sgks9wo5] {
    font-size: 11px;
    color: #a8a29e;
}

@@keyframes pulse-soft {
    0%[b-t7sgks9wo5], 100%[b-t7sgks9wo5] { opacity: 1; }
    50%[b-t7sgks9wo5] { opacity: 0.6; }
}

/* ========================================
   TRAVEL NOTES
   ======================================== */
.travel-note-block[b-t7sgks9wo5] {
    background: #FAFAF9;
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.travel-note-block:last-child[b-t7sgks9wo5] {
    margin-bottom: 0;
}

.travel-note-label[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}

.travel-note-text[b-t7sgks9wo5] {
    font-size: 13px;
    font-style: italic;
    color: #616161;
    line-height: 1.5;
    white-space: pre-line;
}

/* ========================================
   AUDIT TRAIL
   ======================================== */
.audit-trail[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    margin-top: 12px;
    border-top: 1px solid #EBEBEB;
}

.audit-line[b-t7sgks9wo5] {
    font-size: 11px;
    color: #9E9E9E;
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-line i[b-t7sgks9wo5] {
    font-size: 10px;
    color: #BDBDBD;
    width: 14px;
    text-align: center;
}
/* /Components/Pages/MainLayout/FlightTicket/TravelRequest/TravelRequestWizard.razor.rz.scp.css */
/* ========================================
   TRAVEL REQUEST SPLIT-VIEW CSS
   ======================================== */

/* ========================================
   PROJECT SELECTION VALIDATION STYLING
   ======================================== */
/* Inline validation error styling for project selection fields */

.validation-error[b-aui3v7vria] {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px #d13438 !important;
}

.validation-error-message[b-aui3v7vria] {
    color: #d13438;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    line-height: 1.4;
}

.validation-error-message i[b-aui3v7vria] {
    font-size: 14px;
    flex-shrink: 0;
}

/* Apply validation error styling to Syncfusion components */
[b-aui3v7vria] .validation-error.e-input-group {
    border-color: #d13438 !important;
}

[b-aui3v7vria] .validation-error.e-input-group:focus-within {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px #d13438 !important;
}

[b-aui3v7vria] .validation-error.e-input-group .e-input {
    color: var(--BEC-colorNeutralForeground1);
}

[b-aui3v7vria] .validation-error.e-dropdownlist {
    border-color: #d13438 !important;
}

[b-aui3v7vria] .validation-error.e-dropdownlist:focus-within {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px #d13438 !important;
}

/* Full-height wrapper: fills layout content area (sidebar open/closed) */
.erp-page-container.full-height[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wizard-container[b-aui3v7vria] {
    background-color: var(--BEC-colorNeutralBackground2);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Loading Overlay */
.loading-overlay[b-aui3v7vria] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content[b-aui3v7vria] {
    text-align: center;
}

.loading-spinner[b-aui3v7vria] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-aui3v7vria 0.8s linear infinite;
    margin: 0 auto 16px;
}

.loading-content p[b-aui3v7vria] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* Submitting overlay - higher z-index to cover dialogs */
.submitting-overlay[b-aui3v7vria] {
    z-index: 10001;
    background: rgba(255, 255, 255, 0.95);
}

/* 1. TOP BAR - Title + context pills only */
.wizard-header-card[b-aui3v7vria] {
    flex: 0 0 auto;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium) 0 0;
    padding: 6px 14px 8px;
    margin: 6px 16px 0;
    display: flex;
    align-items: center;
}

.wizard-header-inner.wizard-header-single-row[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    width: 100%;
}

.wizard-header-card-title[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.wizard-header-card-title .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 15px;
}



.wizard-header-inner[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.header-left[b-aui3v7vria] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.header-breadcrumbs[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-right: 12px;
}

.header-title-text[b-aui3v7vria] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* User Info Styling - pills wrap; all visible with sidebar open/closed */
.header-user-info[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    min-width: 0;
}

.user-pill[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 12px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.user-pill .e-icons[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.u-text[b-aui3v7vria] {
    font-weight: 500;
}

.date-pill[b-aui3v7vria] {
    padding: 0 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-phone-pill[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    max-width: 200px;
}

.traveller-phone-pill .traveller-phone-input[b-aui3v7vria] {
    width: 120px;
    min-width: 90px;
    flex: 1;
}

.traveller-phone-pill[b-aui3v7vria]  .e-input {
    padding: 4px 8px;
    font-size: 12px;
    background: transparent;
}



.traveller-choice-segmented[b-aui3v7vria] {
    display: inline-flex;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

.traveller-choice-segmented .choice-btn[b-aui3v7vria] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.traveller-choice-segmented .choice-btn:hover:not(:disabled)[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.traveller-choice-segmented .choice-btn.active[b-aui3v7vria] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.traveller-choice-segmented .choice-btn:disabled[b-aui3v7vria] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Traveller Section (below header, above workspace) ─── */
/* Legacy class kept for reference - now uses .traveller-bar + .traveller-panel inside right panel */
.traveller-section[b-aui3v7vria] {
    padding: 10px 16px 12px;
    margin: 0 16px 6px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-top: none;
    border-radius: 0 0 var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium);
}

/* Traveller inline — no box, sits directly on right panel background */
.traveller-inline[b-aui3v7vria] {
    padding: 0 24px 14px;
}

.traveller-inline-header[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tb-label[b-aui3v7vria] {
    font-size: 12px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.tb-label .e-icons[b-aui3v7vria] {
    font-size: 13px;
}

/* Company Employee row — 3 fields: search, code (narrow), phone */
.traveller-emp-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr;
    gap: 12px;
}

/* Sub-group labels */
.panel-section-label[b-aui3v7vria] {
    font-size: 10px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.panel-section-label:not(:first-child)[b-aui3v7vria] {
    margin-top: 12px;
}

/* 3-column grid for guest fields */
.panel-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 900px) {
    .panel-row[b-aui3v7vria],
    .traveller-emp-row[b-aui3v7vria] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Readonly field style */
[b-aui3v7vria] .readonly-field .e-input {
    background: var(--BEC-colorNeutralBackground2) !important;
}

.traveller-section-header[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.traveller-section-title[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.traveller-section-title .e-icons[b-aui3v7vria] {
    font-size: 14px;
}

.traveller-section-body[b-aui3v7vria] {
    /* container for fields */
}

.traveller-fields-row[b-aui3v7vria] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.traveller-field[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
}

.traveller-field.grow[b-aui3v7vria] {
    flex: 1;
}

.traveller-field.phone-field[b-aui3v7vria] {
    width: 220px;
    flex: 0 0 220px;
}

.traveller-field-label[b-aui3v7vria] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-required[b-aui3v7vria] {
    color: #d13438;
    font-weight: normal;
}

.field-optional[b-aui3v7vria] {
    font-weight: 400;
    text-transform: none;
    color: var(--BEC-colorNeutralForeground3);
    letter-spacing: 0;
}

/* Guest fields container */
.guest-fields-container[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guest-group-label[b-aui3v7vria] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    margin-top: 4px;
}

.guest-fields-row[b-aui3v7vria] {
    display: grid;
    gap: 12px;
}

.guest-fields-row.identity-row[b-aui3v7vria] {
    grid-template-columns: 2fr 2fr 1.5fr;
}

.guest-fields-row.documents-row[b-aui3v7vria] {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 900px) {
    .guest-fields-row.identity-row[b-aui3v7vria],
    .guest-fields-row.documents-row[b-aui3v7vria] {
        grid-template-columns: 1fr 1fr;
    }
    .traveller-fields-row[b-aui3v7vria] {
        flex-wrap: wrap;
    }
    .traveller-field.phone-field[b-aui3v7vria] {
        flex: 1 1 180px;
    }
}


/* Override DatePicker to look flat inside the pill */
[b-aui3v7vria] .borderless-datepicker.e-input-group {
    border: none !important;
    background: transparent !important;
}

[b-aui3v7vria] .borderless-datepicker .e-input {
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 0 !important;
}


/* 2. WORKSPACE (Split View) - takes almost all vertical space; flight form gets the room */
.workspace[b-aui3v7vria] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0 16px 10px;
}

/* === LEFT PANEL: Itinerary & Global Actions - flexible width when sidebar open === */
.left-panel[b-aui3v7vria] {
    width: 320px;
    min-width: 280px;
    max-width: 380px;
    background: var(--BEC-colorNeutralBackground2);
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.left-panel-header[b-aui3v7vria] {
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
}

.panel-title[b-aui3v7vria] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

/* List Area */
.flight-list-container[b-aui3v7vria] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ENRICHED FLIGHT CARD */
.flight-card-item[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.flight-card-item:hover[b-aui3v7vria] {
    border-color: var(--BEC-colorNeutralStroke3);
    transform: translateY(-1px);
}

.flight-card-item.active[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackgroundAlpha);
    box-shadow: 0 0 0 1px var(--BEC-colorBrandForeground1);
}

/* Updated Flight Card Layout */
.flight-route-grid[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    width: 100%;
}

.route-point[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    max-width: 40%;
}

.point-date[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

.route-arrow-col[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
}

.city-name[b-aui3v7vria] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-arrow[b-aui3v7vria] {
    /* Legacy override or reuse if needed */
    font-size: 14px;
}

/* Remove or hide old detail row since dates are now in grid */
.card-details-row[b-aui3v7vria] {
    display: none;
}

.detail-icon[b-aui3v7vria] {
    display: none;
}

.card-badges-row[b-aui3v7vria] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.class-badge[b-aui3v7vria] {
    font-size: 10px;
    background: var(--BEC-colorNeutralBackground3);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* Requirement Badges */
.req-badge[b-aui3v7vria] {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
}

.req-badge.visa[b-aui3v7vria] {
    background-color: #0ea5e9;
}

/* Sky Blue */
.req-badge.hotel[b-aui3v7vria] {
    background-color: #f59e0b;
}

/* Amber */
/* Emerald */
.req-badge.car[b-aui3v7vria] {
    background-color: #10b981;
}

.req-badge.attach[b-aui3v7vria] {
    background-color: #64748b;
    /* Slate Gray */
    padding: 2px 4px;
    /* Slightly tighter padding for icon */
}

/* ============================================================================
   LEG PROJECT DISPLAY (in My Flights panel)
   ============================================================================ */
.leg-project-display[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorBrandStroke2);
}

.leg-project-display .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.leg-project-display .project-text[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.leg-project-display .required-badge[b-aui3v7vria] {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #d13438;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.active-indicator[b-aui3v7vria] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--BEC-colorBrandForeground1);
}


/* Left Panel Footer - always visible; all buttons in one clear row */
.left-panel-footer[b-aui3v7vria] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* === RIGHT PANEL: Editor Canvas === */
.right-panel[b-aui3v7vria] {
    flex: 1;
    min-height: 0;
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.right-panel-body[b-aui3v7vria] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.editor-header[b-aui3v7vria] {
    padding: 10px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 2px;
}

.editor-title[b-aui3v7vria] {
    font-size: 15px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.editor-subtitle[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.editor-content[b-aui3v7vria] {
    padding: 16px 24px 20px;
    max-width: 100%;
    width: 100%;
}

/* Form Layout - two columns; spread out so origin/destination/notes are visible with minimal scroll */
.form-grid-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-grid-row.three-col[b-aui3v7vria] {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
    .form-grid-row[b-aui3v7vria] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
    .form-grid-row.three-col[b-aui3v7vria] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gf-label[b-aui3v7vria] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
}

/* Flight Details section title */
.section-title[b-aui3v7vria] {
    font-size: 13px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0 24px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.section-title .e-icons[b-aui3v7vria] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

/* Schedule & Project row — flex-based for adaptive column count */
.schedule-project-row[b-aui3v7vria] {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    align-items: flex-start;
}

.schedule-project-row .form-group[b-aui3v7vria] {
    flex: 1;
    min-width: 0;
}

.schedule-project-row .form-group.project-group[b-aui3v7vria] {
    flex: 1.2;
}

.schedule-project-row .form-group.or-btn-group[b-aui3v7vria] {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 1px;
}

/* Other / Select toggle button */
.or-btn[b-aui3v7vria] {
    padding: 7px 14px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground2);
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.or-btn:hover:not(:disabled)[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandStroke1);
    color: var(--BEC-colorBrandForeground1);
}

.or-btn:disabled[b-aui3v7vria] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Visa note in footer */
.visa-note[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.visa-note .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

.visa-note a[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: underline;
}

.visa-note a:hover[b-aui3v7vria] {
    text-decoration: none;
}

@media (max-width: 640px) {
    .schedule-project-row[b-aui3v7vria] {
        flex-wrap: wrap;
    }
    .schedule-project-row .form-group[b-aui3v7vria] {
        flex: 1 1 200px;
    }
}

/* Attachments Panel in Right Side */
.attachments-section-panel[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: 8px;
    padding: 16px;
}

.attach-header-row[b-aui3v7vria] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.hint-text[b-aui3v7vria] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.upload-area-flex[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.uploaded-chips[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.no-files-text[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.file-chip.white[b-aui3v7vria] {
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--BEC-colorNeutralForeground1);
}

.pointer[b-aui3v7vria] {
    cursor: pointer;
}


/* Empty State */
.empty-state-panel[b-aui3v7vria] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

/* Additional Services: Fluent 2 checkbox-tag pills */
.req-pills[b-aui3v7vria] {
    display: flex;
    gap: 8px;
}

.req-pill[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    -webkit-user-select: none;
}

.req-pill:hover:not(.disabled)[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.req-pill.active[b-aui3v7vria] {
    background: var(--BEC-colorBrandBackground2);
    border-color: var(--BEC-colorBrandStroke1);
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.req-pill .e-icons[b-aui3v7vria] {
    font-size: 15px;
}

/* Field helper text (for Purpose/Notes alignment) */
.field-helper-text[b-aui3v7vria] {
    display: block;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 4px;
    line-height: 1.4;
}

/* Visa Info Note */
.visa-note-info[b-aui3v7vria] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 12px;
}

.visa-note-info a:hover[b-aui3v7vria] {
    text-decoration: none;
}

.submit-bar[b-aui3v7vria] {
    padding: 10px 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--BEC-colorNeutralBackground1);
    flex-shrink: 0;
}

/* Syncfusion Input Overrides for "Clean" Look in Panel */
[b-aui3v7vria] .e-input-group {
    border-radius: 6px !important;
}

/* Uploader Fixes */
[b-aui3v7vria] .compact-uploader-btn {
    display: inline-block;
    width: auto !important;
}

[b-aui3v7vria] .compact-uploader-btn .e-upload {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    width: auto !important;
    /* Forces button width only */
}

[b-aui3v7vria] .compact-uploader-btn .e-file-select-wrap {
    padding: 0 !important;
    min-height: auto !important;
    border: none !important;
}

[b-aui3v7vria] .compact-uploader-btn .e-upload-browse-btn {
    margin: 0 !important;
}

[b-aui3v7vria] .compact-uploader-btn .e-upload-files {
    display: none !important;
    /* We use custom chips */
}


/* ========================================
   ENHANCED ATTACHMENT SECTION
   Butter-smooth UX with validation
   ======================================== */

.attachments-section-panel[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.attachments-section-panel .attach-header-row[b-aui3v7vria] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.attachments-section-panel .gf-label[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.attach-count[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 400;
}

/* Drop Zone */
.attachment-drop-zone[b-aui3v7vria] {
    position: relative;
    border: 2px dashed var(--BEC-colorNeutralStroke3);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
}

.attachment-drop-zone:hover[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackgroundAlpha);
}

.attachment-drop-zone.uploading[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    opacity: 0.7;
    pointer-events: none;
}

.attachment-drop-zone.drag-over[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackgroundAlpha);
    transform: scale(1.01);
}

/* Upload trigger area - clickable */
.upload-trigger-area[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px;
    width: 100%;
    min-height: 80px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

.upload-trigger-area:hover[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
}

.upload-trigger-area p[b-aui3v7vria] {
    margin: 0;
    font-size: 13px;
}

.upload-trigger-area small[b-aui3v7vria] {
    font-size: 11px;
    opacity: 0.8;
}

.drop-zone-hint[b-aui3v7vria] {
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

.drop-zone-hint p[b-aui3v7vria] {
    margin: 8px 0 4px 0;
    font-size: 12px;
    font-weight: 500;
}

.drop-zone-hint small[b-aui3v7vria] {
    font-size: 10px;
    opacity: 0.8;
}

/* Attachment Uploader Override */
[b-aui3v7vria] .attachment-uploader {
    width: 100%;
}

[b-aui3v7vria] .attachment-uploader .e-upload {
    border: none !important;
    background: transparent !important;
}

[b-aui3v7vria] .attachment-uploader .e-file-select-wrap {
    border: none !important;
    padding: 0 !important;
    min-height: auto !important;
}

[b-aui3v7vria] .attachment-uploader .e-upload-browse-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

[b-aui3v7vria] .attachment-uploader .e-upload-browse-btn:hover {
    background: var(--BEC-colorBrandForeground1) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[b-aui3v7vria] .attachment-uploader .e-upload-files {
    display: none !important;
}

/* Visually hidden - accessible but invisible */
.visually-hidden[b-aui3v7vria],
[b-aui3v7vria] .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Native InputFile Styling - Hide default input, show custom button */
.file-upload-label[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.file-upload-label .browse-button[b-aui3v7vria] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.file-upload-label:hover .browse-button[b-aui3v7vria] {
    background: var(--BEC-colorBrandForeground1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.file-upload-label .browse-text[b-aui3v7vria] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* File List */
.attachment-file-list[b-aui3v7vria] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.attachment-file-item[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    transition: all 0.2s ease;
    animation: slideIn-b-aui3v7vria 0.3s ease;
}

@keyframes slideIn-b-aui3v7vria {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.attachment-file-item:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorNeutralStroke3);
}

.attachment-file-item.invalid[b-aui3v7vria] {
    background: #fef2f2;
    border-color: #fecaca;
}

.attachment-file-item.uploading[b-aui3v7vria] {
    background: #eff6ff;
    border-color: #93c5fd;
}

.attachment-file-item.uploaded[b-aui3v7vria] {
    background: #f0fdf4;
    border-color: #86efac;
}

.attachment-file-item.failed[b-aui3v7vria] {
    background: #fef2f2;
    border-color: #fecaca;
}

.file-icon[b-aui3v7vria] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: 6px;
    font-size: 16px;
}

.file-icon .text-danger[b-aui3v7vria] {
    color: #dc2626;
}

.file-icon .text-primary[b-aui3v7vria] {
    color: #2563eb;
}

.file-icon .text-success[b-aui3v7vria] {
    color: #16a34a;
}

.file-icon .text-warning[b-aui3v7vria] {
    color: #d97706;
}

.file-info[b-aui3v7vria] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-name[b-aui3v7vria] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta[b-aui3v7vria] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.file-error[b-aui3v7vria] {
    color: #dc2626;
    font-weight: 500;
}

.file-uploading[b-aui3v7vria] {
    color: #2563eb;
    font-weight: 500;
}

.file-success[b-aui3v7vria] {
    color: #16a34a;
    font-weight: 500;
}

.file-actions[b-aui3v7vria] {
    display: flex;
    align-items: center;
}

.file-view-btn[b-aui3v7vria],
.file-remove-btn[b-aui3v7vria] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.2s ease;
}

.file-view-btn:hover[b-aui3v7vria] {
    background: #e0f2fe;
    color: #0284c7;
}

.file-remove-btn:hover[b-aui3v7vria] {
    background: #fee2e2;
    color: #dc2626;
}

.file-actions[b-aui3v7vria] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Existing Attachments Section (Edit Mode) */
.existing-attachments-section[b-aui3v7vria],
.new-attachments-section[b-aui3v7vria] {
    margin-bottom: 12px;
}

.section-label[b-aui3v7vria] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 8px;
}

.attachment-file-item.existing[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorNeutralStroke1);
}

.attachment-file-item.existing .file-icon[b-aui3v7vria] {
    background: #e0f2fe;
}

.attachment-file-item.existing .file-icon .e-icons[b-aui3v7vria] {
    color: #0284c7;
}

.attachment-file-item.deleting[b-aui3v7vria] {
    opacity: 0.6;
    pointer-events: none;
}

/* Compact Drop Zone Hint (when files exist) */
.drop-zone-hint.compact[b-aui3v7vria] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 12px;
}

.drop-zone-hint.compact .e-icons[b-aui3v7vria] {
    font-size: 14px;
}

/* Upload Spinner */
.upload-spinner[b-aui3v7vria] {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-aui3v7vria 0.8s linear infinite;
}

@keyframes spin-b-aui3v7vria {
    to {
        transform: rotate(360deg);
    }
}

/* Upload Info Bar */
.upload-info-bar[b-aui3v7vria] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: center;
}

.upload-info-bar small[b-aui3v7vria] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Progress Bar (for future use) */
.upload-progress[b-aui3v7vria] {
    height: 3px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.upload-progress-bar[b-aui3v7vria] {
    height: 100%;
    background: var(--BEC-colorBrandForeground1);
    transition: width 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .attachments-section-panel[b-aui3v7vria] {
        padding: 10px;
    }

    .attachment-drop-zone[b-aui3v7vria] {
        padding: 12px;
    }

    .attachment-file-item[b-aui3v7vria] {
        padding: 6px 10px;
    }
}

/* ========================================
   MS DESIGN PATTERN DIALOGS
   Clean, Enterprise-Grade, User-Friendly
   ======================================== */

/* Dialog Header Styles */
.dialog-header[b-aui3v7vria] {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-header.error[b-aui3v7vria] {
    color: #dc2626;
}

.dialog-header.success[b-aui3v7vria] {
    color: #16a34a;
}

.dialog-header.confirm[b-aui3v7vria] {
    color: #f59e0b;
}

/* Dialog Content Styles */
.dialog-content[b-aui3v7vria] {
    padding: 8px 0;
}

.dialog-content p[b-aui3v7vria] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
}

/* Dialog Footer Styles */
.dialog-footer[b-aui3v7vria] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Override Syncfusion Dialog for cleaner look */
[b-aui3v7vria] .error-dialog .e-dlg-header-content,
[b-aui3v7vria] .success-dialog .e-dlg-header-content,
[b-aui3v7vria] .confirm-dialog .e-dlg-header-content {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding-bottom: 12px;
}

[b-aui3v7vria] .error-dialog .e-footer-content,
[b-aui3v7vria] .success-dialog .e-footer-content,
[b-aui3v7vria] .confirm-dialog .e-footer-content {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    padding-top: 12px;
}

/* Disabled State for Requirement Pills */
.req-pill.disabled[b-aui3v7vria] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Passport Profile Styles */
.passport-pill[b-aui3v7vria] {
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.passport-pill:hover[b-aui3v7vria] {
    background: var(--BEC-colorBrandForeground1) !important;
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.passport-form[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.passport-form .form-group[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ========================================
   POLICY ACKNOWLEDGMENT DIALOG - ASSET PROTECTION V2 (GRID)
   ======================================== */
[b-aui3v7vria] .policy-dialog.fixed-dialog {
    max-height: 95vh !important;
    border-radius: 8px;
    overflow: hidden;
    /* Prevent dialog itself from scrolling */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Ensure the Syncfusion Dialog content area takes full height */
[b-aui3v7vria] .policy-dialog .e-dlg-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* HEADER STYLING */
[b-aui3v7vria] .policy-dialog .e-dlg-header-content {
    background: #1e293b !important;
    /* Authoritative Dark Slate */
    border-bottom: 1px solid #334155;
    padding: 16px 24px !important;
    flex-shrink: 0;
}

[b-aui3v7vria] .policy-dialog .dialog-header {
    display: none;
    /* Hide default wrapper if any */
}

.dialog-header-custom[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-text-en[b-aui3v7vria] {
    color: white;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.header-text-ar[b-aui3v7vria] {
    color: #cbd5e1;
    /* Slate 300 */
    font-size: 15px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* MAIN WRAPPER */
.policy-dialog-wrapper[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    /* Pure White - Professional Clean Look */
}

/* SCROLL AREA - The only thing that scrolls */
.policy-scroll-area[b-aui3v7vria] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Gaps handled by padding/border of rows */
    background: #ffffff;
}

/* GRID SYSTEM */
.policy-grid-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Equal split */
    gap: 32px;
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
}

.policy-grid-row:last-child[b-aui3v7vria] {
    border-bottom: none;
}

/* HIGHLIGHTED ROWS */
.highlight-red[b-aui3v7vria] {
    background: #fef2f2;
    /* Red 50 */
    border-left: 4px solid #dc2626;
    border-right: 4px solid #dc2626;
    /* Symmetric border for bilingual */
    border-bottom: 1px solid #fecaca;
    padding: 20px;
    margin: 12px -20px;
    /* Pull out to compensate padding */
    border-radius: 4px;
}

.highlight-amber[b-aui3v7vria] {
    background: #fffbeb;
    /* Amber 50 */
    border-left: 4px solid #d97706;
    border-right: 4px solid #d97706;
    border-bottom: 1px solid #fcd34d;
    padding: 20px;
    margin: 12px -20px;
    border-radius: 4px;
}

/* Airport Reminders — Blue Info Highlight */
.highlight-blue[b-aui3v7vria] {
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    border-right: 4px solid #2563eb;
    border-bottom: 1px solid #93c5fd;
    padding: 20px;
    margin: 12px -20px;
    border-radius: 4px;
}

.highlight-blue h5[b-aui3v7vria] {
    color: #1e40af;
}

.highlight-blue .policy-cell.en[b-aui3v7vria] {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.highlight-blue .reminder-list[b-aui3v7vria] {
    padding-left: 18px;
    margin: 8px 0 0;
}

.highlight-blue .reminder-list li[b-aui3v7vria] {
    font-size: 13px;
    line-height: 1.8;
    color: #1e3a5f;
    margin-bottom: 4px;
}

.highlight-blue .reminder-list li:last-child[b-aui3v7vria] {
    color: #991b1b;
    margin-top: 4px;
}

/* TYPOGRAPHY IN CELLS */
.policy-cell[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.policy-cell.en[b-aui3v7vria] {
    padding-right: 16px;
    border-right: 1px solid #e2e8f0;
    /* Separator line */
}

.policy-cell.ar[b-aui3v7vria] {
    padding-left: 16px;
    /* Arabic font */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Special Case for Highlighted Rows: Remove internal border if background handles separation */
.highlight-red .policy-cell.en[b-aui3v7vria],
.highlight-amber .policy-cell.en[b-aui3v7vria] {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

/* HEADERS & TEXT */
.policy-cell h5[b-aui3v7vria] {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    color: #1e293b;
    /* Brand Dark */
}

.highlight-red h5[b-aui3v7vria] {
    color: #991b1b;
}

.highlight-amber h5[b-aui3v7vria] {
    color: #92400e;
}

.policy-cell p[b-aui3v7vria],
.policy-cell li[b-aui3v7vria] {
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
    margin: 0;
}

.policy-cell ul[b-aui3v7vria] {
    padding-left: 18px;
    margin: 4px 0;
}

.policy-cell a[b-aui3v7vria] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

/* OATH BOX */
.oath-box-row[b-aui3v7vria] {
    margin-top: 24px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.oath-text[b-aui3v7vria] {
    font-style: italic;
    font-weight: 500;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}

/* FOOTER ACTIONS */
.policy-footer-actions[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Checkbox left, Buttons right */
    width: 100%;
}

.policy-error-badge[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fee2e2;
    color: #dc2626;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 12px;
}

[b-aui3v7vria] .policy-checkbox-authoritative label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* SCROLLBAR CUSTOMIZATION */
.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar {
    width: 10px;
}

.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 6px;
    border: 3px solid #f1f5f9;
}

.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .policy-grid-row[b-aui3v7vria] {
        grid-template-columns: 1fr;
        /* Stack vertically on small screens */
        gap: 16px;
    }

    .policy-cell.en[b-aui3v7vria] {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 16px;
        padding-right: 0;
    }

    .policy-cell.ar[b-aui3v7vria] {
        padding-left: 0;
    }
}

/* SAFETY: Ensure Primary Button Text is White */
[b-aui3v7vria] .policy-dialog .e-footer-content .e-btn.e-primary {
    color: #ffffff !important;
    fill: #ffffff !important;
    /* For icons if any */
}

/* ========================================
   COMPACT ATTACHMENT ICON BUTTON
   ======================================== */

.footer-button-row[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Submit button wrapper - fills remaining space after attachment icon */
.footer-button-row .submit-btn-wrapper[b-aui3v7vria] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Ensure the button inside fills the wrapper */
.footer-button-row .submit-btn-wrapper .e-btn[b-aui3v7vria] {
    width: 100%;
}

.attachment-icon-btn[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 38px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.attachment-icon-btn:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.attachment-icon-btn:active[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1Pressed);
}

.attachment-icon-btn .e-icons[b-aui3v7vria] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.attachment-icon-btn:hover .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
}

.attachment-badge[b-aui3v7vria] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

/* ========================================
   ATTACHMENTS DIALOG STYLING
   ======================================== */

.attachments-dialog-content[b-aui3v7vria] {
    padding: 16px;
    max-height: 480px;
    overflow-y: auto;
}

/* Bilingual instruction text inside attachments dialog */
.attachment-instructions[b-aui3v7vria] {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    border-left: 3px solid var(--BEC-colorBrandForeground1);
}

.attachment-instructions p[b-aui3v7vria] {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-instructions p[dir="rtl"][b-aui3v7vria] {
    text-align: right;
    margin-bottom: 4px;
}

.attachment-instructions p[lang="en"][b-aui3v7vria] {
    text-align: left;
}

.attachment-dialog-count[b-aui3v7vria] {
    margin-left: auto;
    background: var(--BEC-colorBrandBackground);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

[b-aui3v7vria] .attachments-dialog .e-dlg-header-content {
    padding: 12px 16px !important;
}

[b-aui3v7vria] .attachments-dialog .e-dlg-content {
    padding: 0 !important;
}

.attachments-dialog-content .attachment-drop-zone[b-aui3v7vria] {
    min-height: 80px;
    margin-bottom: 0;
}

.attachments-dialog-content .upload-trigger-area[b-aui3v7vria] {
    padding: 16px;
}

.attachments-dialog-content .section-label[b-aui3v7vria] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.attachments-dialog-content .attachment-file-list[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachments-dialog-content .attachment-file-item[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    transition: background 0.15s ease;
}

.attachments-dialog-content .attachment-file-item:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.attachments-dialog-content .file-icon[b-aui3v7vria] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: 4px;
    flex-shrink: 0;
}

.attachments-dialog-content .file-info[b-aui3v7vria] {
    flex-grow: 1;
    min-width: 0;
}

.attachments-dialog-content .file-name[b-aui3v7vria] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachments-dialog-content .file-meta[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.attachments-dialog-content .file-actions[b-aui3v7vria] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.attachments-dialog-content .file-view-btn[b-aui3v7vria],
.attachments-dialog-content .file-remove-btn[b-aui3v7vria] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.attachments-dialog-content .file-view-btn:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
}

.attachments-dialog-content .file-remove-btn:hover[b-aui3v7vria] {
    background: #fee2e2;
}

.attachments-dialog-content .file-remove-btn .e-icons[b-aui3v7vria] {
    color: #dc2626;
}

.attachments-dialog-content .file-success[b-aui3v7vria] {
    color: #16a34a;
}

.attachments-dialog-content .file-uploading[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
}

.attachments-dialog-content .file-error[b-aui3v7vria] {
    color: #dc2626;
}
/* /Components/Pages/MainLayout/FlightTicket/VendorPortal/VendorDashboard.razor.rz.scp.css */
/* ============================================================================
   Vendor Portal - GDS / Flight System Theme
   Uses BEC_Theme.css variables with GDS-specific overrides for this component
   ============================================================================ */

/* ============================================================================
   Outer Layout Structure (Replaces MainLayout)
   Component-scoped GDS design variables referencing BEC_Theme.css
   ============================================================================ */

.vendor-app-container[b-nva36r8d3x] {
    /* === GDS-Specific Design Tokens (Component Scope) === */
    /* These extend BEC_Theme for the GDS flight system aesthetic */

    /* Backgrounds - mapped to BEC theme neutrals */
    --bg-body: var(--BEC-colorNeutralBackground3, #FAF9F8);
    --bg-surface: var(--BEC-colorNeutralBackground1, #ffffff);
    --bg-dark: #1e293b;
    /* GDS dark slate - unique to vendor portal */
    --bg-sidebar: #0f172a;
    /* GDS sidebar - unique to vendor portal */

    /* Text - mapped to BEC theme */
    --text-primary: var(--BEC-colorNeutralForeground1, #323130);
    --text-secondary: var(--BEC-colorNeutralForeground3, #605E5C);
    --text-inverse: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);

    /* Brand - GDS uses sky blue for flight system aesthetic */
    --brand-primary: #0078D4;
    /* Fluent Blue - enterprise theme */
    --brand-secondary: #106EBE;
    /* Blue accent */

    /* Borders - mapped to BEC theme */
    --border-color: var(--BEC-colorNeutralStroke1, #EDEBE9);
    --border-light: var(--BEC-colorNeutralBackground4, #f0f0f0);

    /* GDS Status Colors - Aviation industry standard */
    --status-req-bg: var(--BEC-colorPaletteRedBackground1, #fdf3f4);
    --status-req-text: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    --status-qtd-bg: #e0f2fe;
    /* Sky blue tint - quoted */
    --status-qtd-text: #0284c7;
    --status-tkt-bg: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
    --status-tkt-text: var(--BEC-colorPaletteGreenForeground1, #107c10);
    --status-won-bg: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
    --status-won-text: var(--BEC-colorPaletteGreenForeground1, #107c10);
    --status-lost-bg: var(--BEC-colorNeutralBackground4, #f0f0f0);
    --status-lost-text: var(--BEC-colorNeutralForeground3, #616161);
    --status-warn: #facc15;
    /* Yellow warning color */

    /* Typography - mapped to BEC theme */
    --font-main: var(--BEC-fontFamilyBase, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif);
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Shadows - mapped to BEC theme */
    --shadow-sm: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
    --shadow-md: var(--BEC-shadow4, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14));

    /* === Layout === */
    display: flex;
    height: 100vh;
    font-family: var(--font-main);
    color: var(--text-primary);
    overflow: hidden;
    background: var(--bg-body);
}

/* 1. SIDEBAR (Slim GDS Style) */
.gds-sidebar[b-nva36r8d3x] {
    width: 64px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    z-index: 50;
    flex-shrink: 0;
}

.sidebar-logo[b-nva36r8d3x] {
    width: 40px;
    height: 40px;
    background: var(--brand-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    margin-bottom: 40px;
}

.nav-item[b-nva36r8d3x] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    border: none;
    background: none;
    font-size: 16px;
}

.nav-item:hover[b-nva36r8d3x] {
    background: #f1f5f9;
    color: var(--brand-primary);
}

.nav-item.active[b-nva36r8d3x] {
    background: #e0f2fe;
    color: var(--brand-primary);
}

/* 2. MAIN CONTENT AREA */
.content-wrapper[b-nva36r8d3x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 3. TOP BAR */
.gds-topbar[b-nva36r8d3x] {
    height: 48px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.topbar-title[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.topbar-title .vendor-greeting[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.topbar-title .vendor-portal-title[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 500;
    margin: 0;
    color: var(--text-secondary);
}

.topbar-title h1.vendor-portal-title[b-nva36r8d3x] {
    display: block;
}

.vendor-initials[b-nva36r8d3x] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0078D4;
    color: var(--text-inverse, #fff);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-main);
}

.command-bar[b-nva36r8d3x] {
    flex: 1;
    max-width: 520px;
    margin: 0 16px;
    position: relative;
}

/* 4. WORKSPACE / GRID AREA - Maximize vertical space */
.workspace-area[b-nva36r8d3x] {
    flex: 1;
    padding: 10px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Vendor Dashboard wrapper - ensure it fills available space */
.vendor-dashboard[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.flight-board-container[b-nva36r8d3x] {
    background: var(--bg-surface);
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    border-left: none;
    border-right: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
}

/* Board Header → replaced by .tab-bar */
.board-header[b-nva36r8d3x] {
    display: none;
}

/* Tab Bar — Clean bottom-border style (wireframe) */
.tab-bar[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    background: var(--bg-surface);
    gap: 0;
    flex-shrink: 0;
}

.tab-bar-tabs[b-nva36r8d3x] {
    display: flex;
    gap: 0;
    flex: 1;
}

.tab[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.tab:hover[b-nva36r8d3x] {
    color: var(--text-primary);
}

.tab.active[b-nva36r8d3x] {
    color: #0078D4;
    border-bottom-color: #0078D4;
}

.tab-count[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 700;
    background: #F3F2F1;
    color: var(--text-secondary);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.tab.active .tab-count[b-nva36r8d3x] {
    background: #DEECF9;
    color: #0078D4;
}

.tab-badge[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 700;
    background: #D13438;
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    margin-inline-start: 4px;
    animation: badge-pop-b-nva36r8d3x 0.25s ease-out;
}

@keyframes badge-pop-b-nva36r8d3x {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.tab-bar-actions[b-nva36r8d3x] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Grid Info Bar — item count + last refreshed */
.grid-info-bar[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    color: #605E5C;
}

.grid-info-bar strong[b-nva36r8d3x] {
    color: #323130;
    font-weight: 600;
}

.last-refreshed-text[b-nva36r8d3x] {
    font-size: 11px;
    color: var(--text-secondary, #605E5C);
    font-weight: 400;
    white-space: nowrap;
    margin-right: 4px;
}

/* ============================================================================
   SYNCFUSION PAGER — Compact Fluent Style
   ============================================================================ */
[b-nva36r8d3x] .e-grid .e-gridpager {
    border-top: 1px solid var(--border-color);
    background: #FAF9F8;
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--font-main);
}

[b-nva36r8d3x] .e-grid .e-pagercontainer {
    background: transparent;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-numericitem,
[b-nva36r8d3x] .e-grid .e-gridpager .e-first,
[b-nva36r8d3x] .e-grid .e-gridpager .e-prev,
[b-nva36r8d3x] .e-grid .e-gridpager .e-next,
[b-nva36r8d3x] .e-grid .e-gridpager .e-last {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    border-radius: 4px;
    margin: 0 2px;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-currentitem {
    background: #0078D4 !important;
    color: #fff !important;
    border-radius: 4px;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-numericitem:hover {
    background: #DEECF9;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-parentmsgbar {
    font-size: 11px;
    color: #605E5C;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-pagesizes {
    font-size: 11px;
}

.filter-tabs[b-nva36r8d3x] {
    display: none;
}

/* Custom Tab Styling using ::deep for SfTab override if needed, or custom buttons */
.filter-tab-btn[b-nva36r8d3x] {
    display: none;
}

/* ============================================================================
   SYNCFUSION GRID OVERRIDES (The "Hybrid" Approach)
   ============================================================================ */

/* Reset generic grid styles to be flatter */
[b-nva36r8d3x] .e-grid {
    font-family: var(--font-main);
}

[b-nva36r8d3x] .e-grid .e-gridheader {
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

[b-nva36r8d3x] .e-grid .e-headercell {
    background-color: #F3F2F1 !important;
    color: #605E5C !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px !important;
}

/* Hide filter icons for clean headers (wireframe) */
[b-nva36r8d3x] .e-grid .e-filtermenudiv,
[b-nva36r8d3x] .e-grid .e-icon-filter {
    display: none !important;
}

[b-nva36r8d3x] .e-grid .e-rowcell {
    font-size: 13px;
    color: var(--text-primary);
    padding: 5px 10px !important;
}

[b-nva36r8d3x] .e-grid .e-row:hover .e-rowcell {
    background-color: #DEECF9 !important;
    cursor: pointer;
}

/* Zebra striping */
[b-nva36r8d3x] .e-grid .e-altrow .e-rowcell {
    background-color: #FAFAFA !important;
}

[b-nva36r8d3x] .e-grid .e-altrow:hover .e-rowcell {
    background-color: #DEECF9 !important;
}

/* Specific Cell Content Styling */
.cell-pnr[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 600;
    color: #0078D4;
    font-size: 12px;
}

.cell-route[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cell-route .code[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
}

.cell-route .arrow[b-nva36r8d3x] {
    color: #A19F9D;
    font-size: 11px;
}

.cell-trip-type[b-nva36r8d3x] {
    font-size: 11px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: #605E5C;
    font-weight: 600;
    text-transform: uppercase;
}

.cell-trip-type.trip-badge-roundtrip[b-nva36r8d3x] {
    color: #0078D4;
}

/* Status Badges — Wireframe: plain colored text, no pill backgrounds */
/* ============================================================================
   TEXT-ONLY STATUS (Wireframe Style) - No pill backgrounds
   ============================================================================ */
.btn-pill[b-nva36r8d3x] {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 0;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-transform: none;
    text-decoration: none;
    min-width: auto;
    background: transparent;
    color: #605E5C;
}

/* 1. PRIMARY (Quote - text link style) */
.btn-pill.primary[b-nva36r8d3x] {
    background: transparent;
    color: #0078D4;
    box-shadow: none;
    font-weight: 700;
}

.btn-pill.primary:hover[b-nva36r8d3x] {
    box-shadow: none;
    transform: none;
    text-decoration: underline;
    color: #106EBE;
}

/* 2. INFO / SECONDARY (Propose/View - text link style) */
.btn-pill.info[b-nva36r8d3x] {
    background: transparent;
    color: #0078D4;
    box-shadow: none;
    font-weight: 600;
}

.btn-pill.info:hover[b-nva36r8d3x] {
    box-shadow: none;
    transform: none;
    text-decoration: underline;
    color: #106EBE;
}

/* 3. SUCCESS (Upload - text link style) */
.btn-pill.success[b-nva36r8d3x] {
    background: transparent;
    color: #107C10;
    box-shadow: none;
    font-weight: 600;
}

.btn-pill.success:hover[b-nva36r8d3x] {
    box-shadow: none;
    transform: none;
    text-decoration: underline;
    color: #0B6A0B;
}

/* 4. CLOSED / DISABLED (muted text) */
.btn-pill.closed[b-nva36r8d3x] {
    background-color: transparent;
    color: #A19F9D;
    box-shadow: none;
    cursor: default;
    font-weight: 600;
    border: none;
}

/* 5. OUTLINE (View / secondary action - text link) */
.btn-pill.outline[b-nva36r8d3x] {
    background: transparent;
    color: #605E5C;
    border: none;
    box-shadow: none;
    font-weight: 400;
}

.btn-pill.outline:hover[b-nva36r8d3x] {
    background: transparent;
    border-color: transparent;
    color: #323130;
    text-decoration: underline;
}

/* 6. WITHDRAW (error red text link) */
.btn-pill.withdraw-btn[b-nva36r8d3x] {
    background: transparent;
    color: #D13438;
    box-shadow: none;
    font-weight: 600;
    border: none;
}

.btn-pill.withdraw-btn:hover[b-nva36r8d3x] {
    text-decoration: underline;
    color: #A4262C;
}

/* --- STATUS BADGES (Text-only, no backgrounds) --- */
.status-badge[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
}

.status-badge.req[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.req {
    background-color: transparent;
    color: #D13438;
}

.status-badge.qtd[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.qtd {
    background-color: transparent;
    color: #0078D4;
}

.status-badge.won[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.won {
    background-color: transparent;
    color: #107C10;
}

.status-badge.rejected[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.rejected {
    background-color: transparent;
    color: #D13438;
}

.status-badge.closed[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.closed {
    background-color: transparent;
    color: #A19F9D;
}

/* My Quotes: tickets booked by another vendor - muted text */
.status-text-large.booked[b-nva36r8d3x],
[b-nva36r8d3x] .status-text-large.booked {
    background-color: transparent;
    color: #A19F9D;
    font-weight: 600;
    padding: 0;
    border-radius: 0;
}

.status-badge.waiting[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.waiting {
    background-color: transparent;
    color: #FFB900;
    border: none;
}

/* Status text for history grid (text-only, no backgrounds) */
.status-text-large[b-nva36r8d3x] {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-text-large.won[b-nva36r8d3x] { color: #107C10; }
.status-text-large.lost[b-nva36r8d3x] { color: #D13438; }
.status-text-large.pend[b-nva36r8d3x] { color: #FFB900; }

/* ============================================================================
   SIDE WIZARD PANEL (Replacing .slide-panel)
   ============================================================================ */

.wizard-overlay[b-nva36r8d3x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    transition: opacity 0.3s;
}

.wizard-panel[b-nva36r8d3x] {
    position: absolute;
    top: 0;
    right: 0;
    width: 580px;
    height: 100%;
    background: var(--bg-surface);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-nva36r8d3x 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

@keyframes slideIn-b-nva36r8d3x {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.wizard-header[b-nva36r8d3x] {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F3F2F1;
    min-height: 48px;
}

.wizard-title h2[b-nva36r8d3x] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.wizard-title .sub[b-nva36r8d3x] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.wizard-content[b-nva36r8d3x] {
    flex: 1;
    padding: 12px 16px;
    overflow-y: auto;
    background: #FFFFFF;
}

.wiz-card[b-nva36r8d3x] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}

.wiz-label[b-nva36r8d3x] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wiz-route[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.route-line[b-nva36r8d3x] {
    flex: 1;
    height: 1px;
    background: var(--border-color);
    position: relative;
    margin: 0 8px;
}

/* Form Controls matching GDS */
.form-row[b-nva36r8d3x] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.gds-input-group[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevent flex overflow */
}

.gds-input-group label[b-nva36r8d3x] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #A19F9D;
    margin-bottom: 4px;
    text-transform: uppercase;
}

[b-nva36r8d3x] .gds-input {
    font-family: var(--font-main);
    font-size: 13px;
    border-radius: 4px;
}

.field-hint[b-nva36r8d3x] {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

.quote-option-card[b-nva36r8d3x] {
    border-left: 3px solid var(--brand-primary);
}

.add-option-btn[b-nva36r8d3x] { margin-right: 8px; }
.remove-option-btn[b-nva36r8d3x] { font-size: 12px; }

/* ============================================================================
   STATS BAR - Compact Single Row Design
   ============================================================================ */
.stats-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 20px;
}

.stat-card[b-nva36r8d3x] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    transition: box-shadow 0.15s;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none;
}

.stat-card:hover[b-nva36r8d3x] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stat-icon[b-nva36r8d3x] {
    display: none;
}

/* Specific Card Colors - icons hidden */
.stat-opportunities .stat-icon[b-nva36r8d3x],
.stat-quotes .stat-icon[b-nva36r8d3x],
.stat-wins .stat-icon[b-nva36r8d3x],
.stat-etickets .stat-icon[b-nva36r8d3x],
.stat-revenue .stat-icon[b-nva36r8d3x] {
    display: none;
}

.stat-content[b-nva36r8d3x] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.stat-value[b-nva36r8d3x] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    flex-shrink: 0;
}

.stat-label[b-nva36r8d3x] {
    font-size: 11px;
    color: #605E5C;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-sub[b-nva36r8d3x] {
    font-size: 10px;
    color: #A19F9D;
    margin-left: auto;
    flex-shrink: 0;
}

.stat-badge.new[b-nva36r8d3x] {
    color: #107C10;
    font-weight: 600;
    font-size: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.stat-badge.warning[b-nva36r8d3x] {
    color: #FFB900;
    font-weight: 600;
    font-size: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Responsive: Stack stats on smaller screens */
@media (max-width: 1400px) {
    .stats-grid[b-nva36r8d3x] {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .stat-card[b-nva36r8d3x] {
        padding: 6px 10px;
    }
}

@media (max-width: 900px) {
    .stats-grid[b-nva36r8d3x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* FIX BUTTON BORDERS */
button[b-nva36r8d3x] {
    border-style: solid;
    outline: none !important;
}

/* Toolbar Buttons - Refresh/Export */
[b-nva36r8d3x] .toolbar-btn {
    height: 32px;
    font-size: 12px;
    border: 1px solid #EDEBE9 !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-radius: 4px;
    padding: 0 12px;
    gap: 6px;
}

[b-nva36r8d3x] .toolbar-btn:hover {
    background: #f8fafc !important;
    color: var(--brand-primary) !important;
}

[b-nva36r8d3x] .toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-action-sm[b-nva36r8d3x] {
    border: 1px solid var(--border-color);
}

.btn-action-sm.primary[b-nva36r8d3x] {
    border: 1px solid var(--brand-primary);
}

.btn-action-sm.secondary[b-nva36r8d3x] {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #0ea5e9;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-action-sm.secondary:hover[b-nva36r8d3x] {
    background: #0ea5e9;
    color: white;
    border-color: #0ea5e9;
}

.btn-action-sm.secondary i[b-nva36r8d3x] {
    font-size: 10px;
}

/* ============================================================================
   ACTION COLUMN - Unified Design
   ============================================================================ */
.action-cell[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

/* Action Buttons (QUOTE, PROPOSE) */
.action-btn[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 70px;
}

.action-btn.primary[b-nva36r8d3x] {
    background: var(--brand-primary);
    color: white;
    border: none;
}

.action-btn.primary:hover[b-nva36r8d3x] {
    background: #0284c7;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.3);
}

.action-btn.outline[b-nva36r8d3x] {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}

.action-btn.outline:hover[b-nva36r8d3x] {
    background: var(--brand-primary);
    color: white;
}

/* Action Text (CLOSED, QUOTED) - No background, just muted text */
.action-text-closed[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.action-text-quoted[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wizard-header button[b-nva36r8d3x],
.nav-item[b-nva36r8d3x] {
    border: none;
}

.wizard-header button:last-child[b-nva36r8d3x] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* ============================================================================
   SEARCH BOX OVERRIDES
   ============================================================================ */
[b-nva36r8d3x] .gds-search-box.e-input-group {
    background: #F3F2F1 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    height: 32px;
    font-family: var(--font-mono);
}

[b-nva36r8d3x] .gds-search-box .e-input::placeholder {
    font-size: 12px;
}

[b-nva36r8d3x] .gds-search-box.e-input-group.e-input-focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}

[b-nva36r8d3x] .gds-search-box .e-input {
    font-size: 13px !important;
    color: var(--text-primary) !important;
    padding-left: 10px !important;
}

[b-nva36r8d3x] .gds-search-box .e-clear-icon {
    color: var(--text-secondary);
}

/* ============================================================================
   BULK BOOKING STYLES
   ============================================================================ */

/* Bulk Stat Card */
.stat-bulk .stat-icon[b-nva36r8d3x] {
    display: none;
}

.stat-bulk.has-new[b-nva36r8d3x] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    animation: pulse-border-b-nva36r8d3x 2s ease-in-out infinite;
}

@keyframes pulse-border-b-nva36r8d3x {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }
}

/* Bulk Tab Button */
.filter-tab-btn.bulk[b-nva36r8d3x] {
    position: relative;
}

.filter-tab-btn.bulk .new-badge[b-nva36r8d3x] {
    background: #ef4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 700;
}

/* Cell Batch ID */
.cell-batch[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cell-batch .batch-id[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 700;
    color: #2563eb;
    font-size: 13px;
}

.cell-batch .new-indicator[b-nva36r8d3x] {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-b-nva36r8d3x 2s infinite;
}

@keyframes pulse-b-nva36r8d3x {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Date Range Display */
.cell-date-range .date-range[b-nva36r8d3x] {
    font-family: inherit;
    font-size: 12px;
    color: var(--text-secondary);
}

.cell-date-range .date-flexible[b-nva36r8d3x] {
    font-size: 12px;
    color: #d97706;
}

.cell-date-range .date-flexible i[b-nva36r8d3x] {
    margin-right: 4px;
}

/* Pax Count */
.pax-count[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

/* Deadline */
.deadline[b-nva36r8d3x] {
    font-family: inherit;
    font-size: 12px;
    color: var(--text-secondary);
}

.deadline.urgent[b-nva36r8d3x] {
    color: #ef4444;
    font-weight: 600;
}

/* Bulk Quote Panel */
.bulk-quote-panel[b-nva36r8d3x] {
    width: 650px;
}

.batch-info-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.batch-info-grid .info-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-info-grid .info-item .label[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 600;
    color: #A19F9D;
    text-transform: uppercase;
}

.batch-info-grid .info-item .value[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.batch-info-grid .info-item .value.highlight[b-nva36r8d3x] {
    color: #2563eb;
    font-size: 18px;
}

.batch-info-grid .info-item .value.urgent[b-nva36r8d3x] {
    color: #ef4444;
}

/* Large Input for Price */
[b-nva36r8d3x] .large-input .e-input {
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono) !important;
}

/* Flight Option Row */
.flight-option-row[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    margin-top: 12px;
}

.flight-option-row:first-of-type[b-nva36r8d3x] {
    margin-top: 0;
}

/* GDS Input Style */
input.gds-input[b-nva36r8d3x],
textarea.gds-input[b-nva36r8d3x],
select.gds-input[b-nva36r8d3x] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--text-primary);
    background: white;
    transition: border-color 0.2s;
}

input.gds-input:focus[b-nva36r8d3x],
textarea.gds-input:focus[b-nva36r8d3x],
select.gds-input:focus[b-nva36r8d3x] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}

/* Bulk RFQ Details Panel */
.bulk-rfq-details-panel[b-nva36r8d3x] {
    width: 550px;
}

/* Quote Summary Card */
.quote-summary-card[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.quote-summary-card .quote-main[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.quote-summary-card .quote-total[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.quote-summary-card .quote-label[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--text-secondary);
}

.quote-summary-card .quote-value[b-nva36r8d3x] {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.quote-summary-card .quote-value.total[b-nva36r8d3x] {
    font-size: 20px;
    color: #059669;
}

.quote-summary-card .quote-meta[b-nva36r8d3x] {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Status banner success */
.status-banner.success[b-nva36r8d3x] {
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Link Style Action Button (Upload) */
.btn-upload-link[b-nva36r8d3x] {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-weight: 700;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
}

.btn-upload-link:hover[b-nva36r8d3x] {
    background: #e0f2fe;
    text-decoration: underline;
}

/* Loading Panel Centering */
.loading-panel[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    min-height: 200px;
    gap: 12px;
    color: var(--text-secondary);
}

/* Full-page dashboard loading state */
.dashboard-loading[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    gap: 16px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.dashboard-loading p[b-nva36r8d3x] {
    font-size: 14px;
    margin: 0;
}

/* Welcome empty state for new vendors */
.welcome-empty-state[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    padding: 48px 24px;
}

.welcome-empty-state h3[b-nva36r8d3x] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
}

.welcome-empty-state p[b-nva36r8d3x] {
    font-size: 14px;
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

/* Bulk Quote Wizard loading state (batch + candidates + pricing options) */
.bulk-quote-wizard-loading[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 24px;
    gap: 16px;
    color: var(--text-secondary);
}

.bulk-quote-loading-spinner[b-nva36r8d3x] {
    font-size: 32px;
    color: var(--brand-primary);
}

.bulk-quote-loading-text[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ============================================================================
   DATE SELECTION CHIPS
   ============================================================================ */

/* Quick Date Chip Button */
.date-chip[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-family: var(--font-main);
}

.date-chip:hover[b-nva36r8d3x] {
    border-color: var(--brand-primary);
    background: #f0f9ff;
}

.date-chip.selected[b-nva36r8d3x] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.date-chip.selected:hover[b-nva36r8d3x] {
    background: #0284c7;
    border-color: #0284c7;
}

/* Selected Date Display Chip */
.selected-date-chip[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0369a1;
    gap: 0;
}

.selected-date-chip .remove-date-btn[b-nva36r8d3x] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 4px;
    font-size: 11px;
    transition: all 0.2s;
}

.selected-date-chip .remove-date-btn:hover[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

/* Custom Date Picker Override */
[b-nva36r8d3x] .custom-datepicker .e-input-group {
    border: 2px solid var(--border-color) !important;
    border-radius: 6px !important;
    height: 40px;
}

[b-nva36r8d3x] .custom-datepicker .e-input-group.e-input-focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

[b-nva36r8d3x] .custom-datepicker .e-input {
    font-size: 13px !important;
    font-family: var(--font-main) !important;
}

/* ============================================================================
   NEGOTIATION STATUS COLUMN
   Shows date negotiation status with action states
   ============================================================================ */

.negotiation-cell[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.negotiation-badge[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.negotiation-badge i[b-nva36r8d3x] {
    font-size: 10px;
}

/* Badge Color Variants */
.negotiation-badge.badge-warning[b-nva36r8d3x] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.negotiation-badge.badge-danger[b-nva36r8d3x] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.negotiation-badge.badge-success[b-nva36r8d3x] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.negotiation-badge.badge-secondary[b-nva36r8d3x] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.negotiation-badge.badge-info[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

/* Retry Email Button */
.btn-retry-email[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px;
}

.btn-retry-email:hover[b-nva36r8d3x] {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
    transform: rotate(180deg);
}

.btn-retry-email:active[b-nva36r8d3x] {
    transform: rotate(180deg) scale(0.9);
}

/* Blocked Button (Date negotiation) */
.btn-action-sm.blocked[b-nva36r8d3x] {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    cursor: not-allowed;
    opacity: 0.8;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-action-sm.blocked i[b-nva36r8d3x] {
    font-size: 9px;
}

/* Status Badge Extensions */
.status-badge.blocked[b-nva36r8d3x] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* ============================================================================
   CLICKABLE SECTION HEADER (for Negotiation History toggle)
   ============================================================================ */
.section-header.clickable[b-nva36r8d3x] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
    border-radius: 6px;
    padding: 8px;
    margin: -8px;
    margin-bottom: 8px;
}

.section-header.clickable:hover[b-nva36r8d3x] {
    background-color: rgba(0, 120, 212, 0.08);
}

.section-header .toggle-icon[b-nva36r8d3x] {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

/* ============================================================================
   SLIDE PANEL - Side Drawer Style
   ============================================================================ */

.slide-panel-overlay[b-nva36r8d3x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-nva36r8d3x 0.2s ease-out;
}

@keyframes fadeIn-b-nva36r8d3x {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.slide-panel[b-nva36r8d3x] {
    position: fixed;
    top: 0;
    right: 0;
    width: 580px;
    max-width: 95vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideInPanel-b-nva36r8d3x 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInPanel-b-nva36r8d3x {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.slide-panel-header[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #F3F2F1;
    color: #323130;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #EDEBE9;
    min-height: 48px;
}

.slide-panel-header .panel-title[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slide-panel-header .panel-title i[b-nva36r8d3x] {
    font-size: 16px;
    color: #605E5C;
}

.slide-panel-header .panel-title h2[b-nva36r8d3x] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.slide-panel-header .request-badge[b-nva36r8d3x] {
    background: #EDEBE9;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #323130;
}

.slide-panel-header .close-btn[b-nva36r8d3x] {
    background: transparent;
    border: none;
    color: #605E5C;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
}

.slide-panel-header .close-btn:hover[b-nva36r8d3x] {
    background: #EDEBE9;
}

.slide-panel-body[b-nva36r8d3x] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: #FAF9F8;
}

.slide-panel-footer[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #F3F2F1;
    border-top: 1px solid #EDEBE9;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ============================================================================
   BOOKING DOCUMENTS PANEL
   ============================================================================ */

.booking-docs-info-banner[b-nva36r8d3x] {
    display: flex;
    gap: 24px;
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.booking-docs-info-banner .info-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-docs-info-banner .info-item i[b-nva36r8d3x] {
    font-size: 18px;
    color: #0ea5e9;
    width: 36px;
    height: 36px;
    background: #e0f2fe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-docs-info-banner .info-item .label[b-nva36r8d3x] {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.booking-docs-info-banner .info-item .value[b-nva36r8d3x] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.upload-instructions[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.upload-instructions i[b-nva36r8d3x] {
    color: #3b82f6;
    font-size: 18px;
    margin-top: 2px;
}

.upload-instructions strong[b-nva36r8d3x] {
    display: block;
    color: #1e40af;
    margin-bottom: 4px;
}

.upload-instructions p[b-nva36r8d3x] {
    margin: 0;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

.panel-section[b-nva36r8d3x] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.panel-section .section-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.panel-section .section-header i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 16px;
}

.panel-section .section-header h3[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.panel-section .section-header .count-badge[b-nva36r8d3x] {
    background: #0ea5e9;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

/* Upload Form */
.upload-form .form-row[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.upload-form .form-group[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
}

.upload-form .form-group label[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.upload-form .form-select[b-nva36r8d3x],
.upload-form .form-input[b-nva36r8d3x] {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.upload-form .form-select:focus[b-nva36r8d3x],
.upload-form .form-input:focus[b-nva36r8d3x] {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.bulk-ticket-size-error[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #fee2e2;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 500;
}

.bulk-ticket-size-error i[b-nva36r8d3x] {
    flex-shrink: 0;
}

/* Bulk Ticket Upload Panel — Download Section */
.download-section[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-section .download-description[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--BEC-text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

/* Bulk Ticket Upload Panel — Info Banner */
.upload-info-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--BEC-info-bg, #e8f4fd);
    border: 1px solid var(--BEC-info-border, #0078d4);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 16px;
}

.upload-info-banner span[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--BEC-text-primary, #1e293b);
}

/* Bulk Ticket Upload Panel — File List Item */
.file-list-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--BEC-surface, #ffffff);
    border: 1px solid var(--BEC-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}

.file-list-item:last-child[b-nva36r8d3x] {
    margin-bottom: 0;
}

.file-list-item:hover[b-nva36r8d3x] {
    border-color: var(--BEC-border-hover, #cbd5e1);
}

.file-list-item .doc-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-list-item .doc-name[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--BEC-text-secondary, #94a3b8);
}

.remove-file-btn[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-text-secondary, #94a3b8);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.remove-file-btn:hover[b-nva36r8d3x] {
    background: var(--BEC-danger-bg, #fee2e2);
    color: var(--BEC-danger, #b91c1c);
}

.upload-zone[b-nva36r8d3x] {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-zone:hover[b-nva36r8d3x] {
    border-color: #0ea5e9;
    background: #f0f9ff;
}

.upload-zone input[type="file"][b-nva36r8d3x] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-zone-content[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.upload-zone-content i[b-nva36r8d3x] {
    font-size: 32px;
    color: #94a3b8;
}

.upload-zone-content span[b-nva36r8d3x] {
    color: #64748b;
    font-size: 14px;
}

.upload-zone-content .file-types[b-nva36r8d3x] {
    font-size: 12px;
    color: #94a3b8;
}

.upload-progress[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f0f9ff;
    border-radius: 6px;
    margin-top: 12px;
}

.upload-progress span[b-nva36r8d3x] {
    font-size: 13px;
    color: #0369a1;
}

/* Uploaded Documents List */
.uploaded-docs-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doc-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    transition: all 0.2s;
}

.doc-item:hover[b-nva36r8d3x] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.doc-item .doc-icon[b-nva36r8d3x] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.doc-item .doc-icon.pdf[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

.doc-item .doc-icon.doc[b-nva36r8d3x] {
    background: #dbeafe;
    color: #2563eb;
}

.doc-item .doc-icon.image[b-nva36r8d3x] {
    background: #d1fae5;
    color: #059669;
}

.doc-item .doc-icon.default[b-nva36r8d3x] {
    background: #f1f5f9;
    color: #64748b;
}

.doc-item .doc-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
}

.doc-item .doc-info .doc-name[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-item .doc-info .doc-meta[b-nva36r8d3x] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.doc-item .doc-type-badge[b-nva36r8d3x] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dbeafe;
    color: #1d4ed8;
}

.doc-item .doc-type-badge.eticket[b-nva36r8d3x] {
    background: #d1fae5;
    color: #047857;
}

.doc-item .doc-actions[b-nva36r8d3x] {
    display: flex;
    gap: 6px;
}

.doc-item .doc-actions button[b-nva36r8d3x] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
}

.doc-item .doc-actions .btn-view[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0284c7;
}

.doc-item .doc-actions .btn-view:hover[b-nva36r8d3x] {
    background: #bae6fd;
}

.doc-item .doc-actions .btn-delete[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

.doc-item .doc-actions .btn-delete:hover[b-nva36r8d3x] {
    background: #fecaca;
}

.no-docs-message[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px;
    color: #94a3b8;
    text-align: center;
}

.no-docs-message i[b-nva36r8d3x] {
    font-size: 32px;
    opacity: 0.5;
}

.no-docs-message span[b-nva36r8d3x] {
    font-size: 13px;
}

/* Loading Section */
.loading-section[b-nva36r8d3x] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
    color: #64748b;
}

/* Email Note */
.email-note[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 14px 16px;
    border-radius: 8px;
}

.email-note i[b-nva36r8d3x] {
    color: #059669;
    font-size: 16px;
    margin-top: 2px;
}

.email-note strong[b-nva36r8d3x] {
    display: block;
    color: #047857;
    margin-bottom: 6px;
    font-size: 13px;
}

.email-note ul[b-nva36r8d3x] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: #065f46;
    line-height: 1.6;
}

/* Submission Warning */
.submission-warning[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.submission-warning i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 16px;
}

.submission-warning span[b-nva36r8d3x] {
    font-size: 13px;
    color: #92400e;
}

/* Empty Documents State */
.empty-docs-state[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    color: #94a3b8;
    text-align: center;
}

.empty-docs-state i[b-nva36r8d3x] {
    font-size: 40px;
    opacity: 0.4;
    color: #cbd5e1;
}

.empty-docs-state span[b-nva36r8d3x] {
    font-size: 14px;
    color: #64748b;
}

.empty-docs-state .hint[b-nva36r8d3x] {
    font-size: 12px;
    color: #94a3b8;
}

/* Uploaded Document Item - Enhanced */
.uploaded-doc-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
    margin-bottom: 10px;
}

.uploaded-doc-item:last-child[b-nva36r8d3x] {
    margin-bottom: 0;
}

.uploaded-doc-item:hover[b-nva36r8d3x] {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.uploaded-doc-item.eticket[b-nva36r8d3x] {
    border-left: 3px solid #059669;
    background: linear-gradient(to right, #f0fdf4, #ffffff);
}

.uploaded-doc-item .doc-icon[b-nva36r8d3x] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #64748b;
}

.uploaded-doc-item.eticket .doc-icon[b-nva36r8d3x] {
    background: #d1fae5;
    color: #059669;
}

.uploaded-doc-item .doc-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
}

.uploaded-doc-item .doc-info .doc-name[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 6px;
}

.uploaded-doc-item .doc-info .doc-meta[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.uploaded-doc-item .doc-meta .doc-type-badge[b-nva36r8d3x] {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dbeafe;
    color: #1d4ed8;
}

.uploaded-doc-item.eticket .doc-meta .doc-type-badge[b-nva36r8d3x] {
    background: #d1fae5;
    color: #047857;
}

.uploaded-doc-item .doc-meta .booking-ref[b-nva36r8d3x] {
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
}

.uploaded-doc-item .doc-meta .doc-size[b-nva36r8d3x] {
    font-size: 11px;
    color: #94a3b8;
}

.uploaded-doc-item .doc-actions[b-nva36r8d3x] {
    display: flex;
    gap: 8px;
}

.uploaded-doc-item .doc-actions .action-btn[b-nva36r8d3x] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
}

.uploaded-doc-item .doc-actions .action-btn.download[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0284c7;
}

.uploaded-doc-item .doc-actions .action-btn.download:hover[b-nva36r8d3x] {
    background: #bae6fd;
}

.uploaded-doc-item .doc-actions .action-btn.delete[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

.uploaded-doc-item .doc-actions .action-btn.delete:hover[b-nva36r8d3x] {
    background: #fecaca;
}

/* Notes Textarea */
.notes-textarea[b-nva36r8d3x] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.notes-textarea:focus[b-nva36r8d3x] {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.notes-textarea[b-nva36r8d3x]::placeholder {
    color: #94a3b8;
}

/* Warning Banner */
.warning-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.warning-banner i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 16px;
}

.warning-banner span[b-nva36r8d3x] {
    font-size: 13px;
    color: #92400e;
    font-weight: 500;
}

/* ============================================================================
   VIEW QUOTE PANEL & REQUEST DETAILS PANEL STYLES
   ============================================================================ */

/* Loading Panel State */
.loading-panel[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
    color: #64748b;
}

.loading-panel span[b-nva36r8d3x] {
    font-size: 14px;
}

/* Quote Status Banners */
.quote-status-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 500;
}

.quote-status-banner.winner[b-nva36r8d3x] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fbbf24;
    color: #92400e;
}

.quote-status-banner.winner i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 18px;
}

.quote-status-banner.closed[b-nva36r8d3x] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.quote-status-banner.closed i[b-nva36r8d3x] {
    color: #94a3b8;
}

/* Info Grid */
.info-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-grid .info-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-grid .info-item .info-label[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-grid .info-item .info-value[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

/* Candidates list in Bulk RFQ details */
.candidates-empty-msg[b-nva36r8d3x] {
    margin: 0;
    padding: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.candidates-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.candidate-card[b-nva36r8d3x] {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.candidate-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.candidate-num[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    min-width: 28px;
}

.candidate-name[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.candidate-meta[b-nva36r8d3x] {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.candidate-meta span + span[b-nva36r8d3x]::before {
    content: " · ";
    color: #94a3b8;
}

.candidate-notes[b-nva36r8d3x] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    color: #475569;
}

.candidate-notes .notes-label[b-nva36r8d3x] {
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

.candidate-details-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 16px;
    margin-top: 8px;
}

.candidate-detail-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.candidate-detail-item .detail-label[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.candidate-detail-item .detail-value[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    font-family: var(--font-mono, monospace);
}

/* Bulk quote: per-seat pricing table */
.seat-prices-table-wrap[b-nva36r8d3x] {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.seat-prices-table[b-nva36r8d3x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.seat-prices-table th[b-nva36r8d3x],
.seat-prices-table td[b-nva36r8d3x] {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.seat-prices-table th[b-nva36r8d3x] {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
    position: sticky;
    top: 0;
}

.seat-prices-table tbody tr:hover[b-nva36r8d3x] {
    background: #f8fafc;
}

.seat-prices-table td:first-child[b-nva36r8d3x] {
    width: 40px;
    color: #64748b;
    font-weight: 600;
}

/* Slide Panel Title (alternative class name) */
.slide-panel-title[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slide-panel-title i[b-nva36r8d3x] {
    font-size: 16px;
    color: #605E5C;
}

.slide-panel-title span[b-nva36r8d3x] {
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.slide-panel-title .request-badge[b-nva36r8d3x] {
    background: #EDEBE9;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #323130;
}

/* Bulk RFQ & View Quote specific panel widths */
.bulk-rfq-details-panel[b-nva36r8d3x],
.view-quote-panel[b-nva36r8d3x] {
    width: 640px;
}

/* Alternative Close Button Class */
.slide-panel-close[b-nva36r8d3x] {
    background: transparent;
    border: none;
    color: #605E5C;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
}

.slide-panel-close:hover[b-nva36r8d3x] {
    background: #EDEBE9;
}

/* Alternative Loading State */
.panel-loading[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
    color: #64748b;
}

.panel-loading p[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
}

/* Status Banners */
.status-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
}

.status-banner.success[b-nva36r8d3x] {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #047857;
}

.status-banner.success i[b-nva36r8d3x] {
    color: #059669;
    font-size: 18px;
}

.status-banner.warning[b-nva36r8d3x] {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.status-banner.warning i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 18px;
}

.status-banner.info[b-nva36r8d3x] {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0369a1;
}

.status-banner.info i[b-nva36r8d3x] {
    color: #0284c7;
    font-size: 18px;
}

/* ============================================================================
   REQUEST DETAILS PANEL - FLIGHT LEGS
   ============================================================================ */

/* Panel Header — Wireframe pattern */
.panel-header[b-nva36r8d3x] {
    padding: 0 20px;
    background: #F3F2F1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #EDEBE9;
    min-height: 48px;
}

.panel-header .panel-title[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
}

.panel-header .panel-close[b-nva36r8d3x] {
    background: transparent;
    border: none;
    color: #605E5C;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
    line-height: 1;
}

.panel-header .panel-close:hover[b-nva36r8d3x] {
    background: #EDEBE9;
}

/* Panel Section Title — Wireframe pattern */
.panel-section-title[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 700;
    color: #605E5C;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid #EDEBE9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-section-title .count-badge[b-nva36r8d3x] {
    background: #0ea5e9;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

.panel-section-title.clickable[b-nva36r8d3x] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
    border-radius: 4px;
    padding: 8px;
    margin: -8px -8px 12px;
}

.panel-section-title.clickable:hover[b-nva36r8d3x] {
    background-color: rgba(0, 120, 212, 0.08);
}

.panel-section-title .toggle-icon[b-nva36r8d3x] {
    margin-left: auto;
    font-size: 11px;
    color: #605E5C;
}

/* Key-Value Grid — Wireframe pattern */
.kv-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.kv-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kv-item.full-width[b-nva36r8d3x] {
    grid-column: 1 / -1;
}

.kv-label[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 600;
    color: #A19F9D;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kv-value[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: #323130;
}

.kv-value.pre-line[b-nva36r8d3x] {
    white-space: pre-line;
}

/* Leg Section — Wireframe simplified */
.leg-section[b-nva36r8d3x] {
    background: #ffffff;
    border: 1px solid #EDEBE9;
    border-radius: 4px;
    overflow: hidden;
}

.leg-section .leg-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #F3F2F1;
}

.leg-section .leg-header .leg-number[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    color: #323130;
}

.leg-section .leg-header .flight-class[b-nva36r8d3x] {
    font-size: 11px;
    background: #EDEBE9;
    padding: 3px 8px;
    border-radius: 4px;
    color: #605E5C;
}

.leg-section .kv-grid[b-nva36r8d3x] {
    padding: 12px 16px;
}

/* Panel Footer — Wireframe pattern */
.panel-footer[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #F3F2F1;
    border-top: 1px solid #EDEBE9;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Panel Form Group — Wireframe pattern */
.panel-form-group[b-nva36r8d3x] {
    margin-bottom: 8px;
}

.panel-form-label[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 600;
    color: #605E5C;
    display: block;
    margin-bottom: 4px;
}

.panel-form-label .required[b-nva36r8d3x] {
    color: #d13438;
}

/* Panel Input Row — side-by-side grid */
.panel-input-row[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Panel Input — matching wireframe */
.panel-input[b-nva36r8d3x] {
    width: 100%;
    height: 32px;
    border: 1px solid #C8C6C4;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    font-family: inherit;
    color: #323130;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s;
}

.panel-input:focus[b-nva36r8d3x] {
    border-color: #0078D4;
    box-shadow: 0 0 0 1px #0078D4;
}

/* Quote Total — footer summary */
.quote-total[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 120, 212, 0.06);
    border-radius: 4px;
}

.quote-total-label[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 600;
    color: #605E5C;
    text-transform: uppercase;
}

.quote-total-value[b-nva36r8d3x] {
    font-size: 18px;
    font-weight: 700;
    color: #0078D4;
}

.legs-container[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leg-card-panel[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.leg-card-panel .leg-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #F3F2F1;
    color: #323130;
}

.leg-card-panel .leg-header .leg-number[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leg-card-panel .leg-header .flight-class[b-nva36r8d3x] {
    font-size: 11px;
    background: #EDEBE9;
    padding: 3px 8px;
    border-radius: 4px;
    color: #605E5C;
}

.leg-card-panel .route-display[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    gap: 16px;
}

.leg-card-panel .route-display .city[b-nva36r8d3x] {
    flex: 1;
    text-align: center;
}

.leg-card-panel .route-display .city.origin[b-nva36r8d3x] {
    text-align: left;
}

.leg-card-panel .route-display .city.destination[b-nva36r8d3x] {
    text-align: right;
}

.leg-card-panel .route-display .city .city-name[b-nva36r8d3x] {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.leg-card-panel .route-display .city .country-name[b-nva36r8d3x] {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.leg-card-panel .route-display .route-line[b-nva36r8d3x] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 150px;
}

.leg-card-panel .route-display .route-line .line[b-nva36r8d3x] {
    flex: 1;
    height: 2px;
    background: #cbd5e1;
}

.leg-card-panel .route-display .route-line i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 14px;
}

.leg-card-panel .leg-details[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.leg-card-panel .leg-details .detail-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leg-card-panel .leg-details .detail-item label[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.leg-card-panel .leg-details .detail-item span[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

/* Dates Row */
.dates-row[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
    gap: 16px;
}

/* ============================================================================
   WON BULK BATCHES — Post-Win Workflow
   ============================================================================ */

/* Won Bulk Batches Section */
.won-bulk-section[b-nva36r8d3x] {
    margin-top: 20px;
    border-top: 2px solid #e2e8f0;
    padding-top: 16px;
}

.won-bulk-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 10px;
}

.won-bulk-header h3[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.won-bulk-header h3 i[b-nva36r8d3x] {
    color: #d4a017;
}

.won-bulk-count[b-nva36r8d3x] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.batch-link[b-nva36r8d3x] {
    color: #0284c7;
    cursor: pointer;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
}

.batch-link:hover[b-nva36r8d3x] {
    text-decoration: underline;
}

/* Won Batch Details Panel */
.won-batch-panel[b-nva36r8d3x] {
    width: 580px;
}

.won-detail-section[b-nva36r8d3x] {
    margin-bottom: 20px;
}

.won-detail-section h4[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.won-detail-section h4 i[b-nva36r8d3x] {
    color: #0284c7;
    font-size: 13px;
}

.won-detail-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.won-detail-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.won-detail-label[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.won-detail-value[b-nva36r8d3x] {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
}

/* SLA Section */
.sla-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    border-left: 3px solid #e2e8f0;
}

.sla-item.sla-on-time[b-nva36r8d3x] {
    border-left-color: #22c55e;
}

.sla-item.sla-warning[b-nva36r8d3x] {
    border-left-color: #eab308;
}

.sla-item.sla-breached[b-nva36r8d3x] {
    border-left-color: #ef4444;
}

.sla-item.sla-escalated[b-nva36r8d3x] {
    border-left-color: #dc2626;
}

.sla-type[b-nva36r8d3x] {
    font-weight: 600;
    color: #1e293b;
    min-width: 100px;
}

.sla-deadline[b-nva36r8d3x] {
    color: #64748b;
}

.sla-remaining[b-nva36r8d3x] {
    color: #64748b;
    flex: 1;
}

.sla-status-badge[b-nva36r8d3x] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.sla-badge-on-time[b-nva36r8d3x] {
    background: #dcfce7;
    color: #166534;
}

.sla-badge-warning[b-nva36r8d3x] {
    background: #fef9c3;
    color: #854d0e;
}

.sla-badge-breached[b-nva36r8d3x] {
    background: #fee2e2;
    color: #991b1b;
}

.sla-badge-escalated[b-nva36r8d3x] {
    background: #fee2e2;
    color: #7f1d1d;
}

/* Manifest & Ticket Table */
.manifest-table-wrapper[b-nva36r8d3x] {
    overflow-x: auto;
}

.manifest-table[b-nva36r8d3x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.manifest-table th[b-nva36r8d3x] {
    background: #f8fafc;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.manifest-table td[b-nva36r8d3x] {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.manifest-table tr:hover td[b-nva36r8d3x] {
    background: #f8fafc;
}

.passport-cell[b-nva36r8d3x] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.empty-hint[b-nva36r8d3x] {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    padding: 8px 0;
    line-height: 1.5;
}

.loading-center[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #64748b;
    font-size: 13px;
}

.dates-row .date-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.dates-row .date-item i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 12px;
}

/* Services Tags */
.services-tags[b-nva36r8d3x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.service-tag[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.service-tag.visa[b-nva36r8d3x] {
    background: #fef3c7;
    color: #92400e;
}

.service-tag.hotel[b-nva36r8d3x] {
    background: #dbeafe;
    color: #1e40af;
}

.service-tag.transport[b-nva36r8d3x] {
    background: #d1fae5;
    color: #047857;
}

.service-tag i[b-nva36r8d3x] {
    font-size: 10px;
}

/* Empty Message */
.empty-message[b-nva36r8d3x] {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
    font-size: 14px;
    font-style: italic;
}

/* Attachments List */
.attachments-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

.attachment-item.clickable[b-nva36r8d3x] {
    cursor: pointer;
}

.attachment-item.clickable:hover[b-nva36r8d3x] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.attachment-item i.fa-file[b-nva36r8d3x] {
    font-size: 20px;
    color: #64748b;
    width: 24px;
    text-align: center;
}

.attachment-item i.fa-file.pdf[b-nva36r8d3x] {
    color: #dc2626;
}

.attachment-item i.fa-file.doc[b-nva36r8d3x] {
    color: #2563eb;
}

.attachment-item i.fa-file.image[b-nva36r8d3x] {
    color: #059669;
}

.attachment-item .file-name[b-nva36r8d3x] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-item .file-size[b-nva36r8d3x] {
    font-size: 11px;
    color: #94a3b8;
}

.attachment-item .download-btn[b-nva36r8d3x] {
    background: #e0f2fe;
    border: none;
    color: #0284c7;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.2s;
}

.attachment-item .download-btn:hover[b-nva36r8d3x] {
    background: #bae6fd;
}

.attachment-item .download-btn:disabled[b-nva36r8d3x] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading state when opening attachment (eye button) */
.attachments-loading[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 13px;
    color: #0284c7;
}

.attachments-list.loading[b-nva36r8d3x] {
    pointer-events: none;
    opacity: 0.7;
}

/* Counter Proposal Section */
.counter-proposal-section[b-nva36r8d3x] {
    border: 2px solid #fbbf24;
    background: linear-gradient(to bottom, #fffbeb, #ffffff);
}

/* ============================================================================
   VIEW QUOTE PANEL - QUOTE DETAILS
   ============================================================================ */

.quote-legs-view[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quote-leg-view-card[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.quote-leg-view-card .leg-view-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #F3F2F1;
    color: #323130;
}

.quote-leg-view-card .leg-badge[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #323130;
}

.quote-leg-view-card .leg-class-badge[b-nva36r8d3x] {
    font-size: 11px;
    background: #EDEBE9;
    padding: 3px 10px;
    border-radius: 4px;
    color: #605E5C;
}

.quote-leg-view-card .route-display[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 20px;
    background: white;
}

.quote-leg-view-card .route-point[b-nva36r8d3x] {
    text-align: center;
}

.quote-leg-view-card .route-point .city-name[b-nva36r8d3x] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.quote-leg-view-card .route-arrow[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 16px;
}

.quote-leg-view-card .dates-display[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
}

.quote-leg-view-card .dates-display .date-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.quote-leg-view-card .dates-display .date-item i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 12px;
}

.quote-costs-grid[b-nva36r8d3x] {
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.cost-row[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.cost-row:last-child[b-nva36r8d3x] {
    border-bottom: none;
}

.cost-row.total[b-nva36r8d3x] {
    border-bottom: none;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid #0ea5e9;
}

.cost-label[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.cost-label i[b-nva36r8d3x] {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.cost-value[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.cost-value.total-amount[b-nva36r8d3x] {
    font-size: 16px;
    color: #0078D4;
}

.leg-comment[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 20px;
    background: #fffbeb;
    border-top: 1px solid #fcd34d;
    font-size: 13px;
    color: #92400e;
}

.leg-comment i[b-nva36r8d3x] {
    color: #d97706;
    margin-top: 2px;
}

/* Quote Grand Total */
.quote-grand-total[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #DEECF9;
    border-radius: 4px;
    margin-top: 12px;
    color: #323130;
    border: 1px solid #0078D4;
}

.quote-grand-total .total-label[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 600;
}

.quote-grand-total .total-amount[b-nva36r8d3x] {
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #0078D4;
}

/* Comments Display */
.comments-display[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.comments-display p[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

/* Quote Details panel: traveller notes & option blocks */
.notes-block[b-nva36r8d3x] { padding: 12px 0; }
.note-item[b-nva36r8d3x] { margin-bottom: 12px; }
.note-item:last-child[b-nva36r8d3x] { margin-bottom: 0; }
.note-label[b-nva36r8d3x] { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.note-value[b-nva36r8d3x] { margin: 0; font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.quotation-note-text[b-nva36r8d3x] { margin: 0; padding: 12px 0; font-size: 14px; color: #334155; line-height: 1.6; }
.quote-option-block[b-nva36r8d3x] { border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; margin-bottom: 16px; background: #fafbfc; }
.quote-option-block:last-of-type[b-nva36r8d3x] { margin-bottom: 0; }
.quote-option-header[b-nva36r8d3x] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.quote-option-header .option-title[b-nva36r8d3x] { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.option-airlines[b-nva36r8d3x] { font-size: 12px; color: var(--text-secondary); }
.option-note-block[b-nva36r8d3x] { margin-bottom: 10px; }
.option-note-label[b-nva36r8d3x] { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.option-note-text[b-nva36r8d3x] { margin: 4px 0 0 0; font-size: 13px; line-height: 1.5; }
.option-total-row[b-nva36r8d3x] { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; font-size: 14px; }
.option-total-row strong[b-nva36r8d3x] { color: var(--brand-primary); }

/* ============================================================================
   SUBMIT QUOTE – validation error highlights
   ============================================================================ */
.quote-leg-has-error.wiz-card[b-nva36r8d3x] {
    border: 1px solid var(--status-req-text, #bc2f32);
    background: var(--status-req-bg, #fdf3f4);
}

.quote-field-has-error .quote-field-error-message[b-nva36r8d3x],
.gds-input-group.quote-field-has-error .quote-field-error-message[b-nva36r8d3x] {
    display: block;
    font-size: 12px;
    color: var(--status-req-text, #bc2f32);
    margin-top: 4px;
    font-weight: 500;
}

[b-nva36r8d3x] .quote-field-error.e-input,
[b-nva36r8d3x] .quote-field-error.e-numerictextbox,
[b-nva36r8d3x] input.quote-field-error,
[b-nva36r8d3x] .e-datepicker.quote-field-error {
    border-color: var(--status-req-text, #bc2f32) !important;
    background-color: #fff8f8 !important;
}

/* ============================================================================
   SLIDE PANEL RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .slide-panel[b-nva36r8d3x] {
        width: 100%;
        max-width: 100%;
    }

    .booking-docs-info-banner[b-nva36r8d3x] {
        flex-direction: column;
        gap: 12px;
    }

    .upload-form .form-row[b-nva36r8d3x] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-nva36r8d3x] {
        grid-template-columns: 1fr;
    }

    .leg-card-panel .leg-details[b-nva36r8d3x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Amendment Cards ── */
.amendment-card[b-nva36r8d3x] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.amendment-header[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.amendment-type[b-nva36r8d3x] {
    font-weight: 600;
    font-size: 13px;
    color: #92400e;
}

.amendment-date[b-nva36r8d3x] {
    font-size: 11px;
    color: #78716c;
}

.amendment-candidate[b-nva36r8d3x] {
    font-size: 12px;
    color: #57534e;
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.amendment-description[b-nva36r8d3x] {
    font-size: 12px;
    color: #44403c;
    margin: 4px 0 8px;
    line-height: 1.4;
}

.amendment-change[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin: 8px 0;
    padding: 6px 10px;
    background: #f5f5f4;
    border-radius: 6px;
}

.amendment-change .change-from[b-nva36r8d3x] {
    color: #dc2626;
    text-decoration: line-through;
}

.amendment-change .change-to[b-nva36r8d3x] {
    color: #16a34a;
    font-weight: 600;
}

.amendment-actions[b-nva36r8d3x] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* ── Amendment Dialog Styles ── */
.amendment-response-toggle[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.radio-label[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
}

.radio-label input[type="radio"][b-nva36r8d3x] {
    accent-color: #2563eb;
}

.form-group[b-nva36r8d3x] {
    margin-bottom: 12px;
}

.form-group label[b-nva36r8d3x] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.form-input[b-nva36r8d3x] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-nva36r8d3x] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.form-textarea[b-nva36r8d3x] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-textarea:focus[b-nva36r8d3x] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* ============================================================================
   EDIT QUOTE MODAL
   ============================================================================ */

.edit-quote-panel[b-nva36r8d3x] {
    width: 640px;
    max-width: 95vw;
}

.edit-quote-error-banner[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 4px;
    background: #fdf3f4;
    border: 1px solid #d13438;
    color: #d13438;
    font-size: 13px;
    margin-bottom: 12px;
}

.edit-quote-info-note[b-nva36r8d3x] {
    padding: 8px 12px;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 12px;
}

.edit-quote-leg-subtotal[b-nva36r8d3x] {
    text-align: right;
    margin-top: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--brand-primary, #0078d4);
}

.edit-quote-option-total[b-nva36r8d3x] {
    text-align: right;
    padding: 8px 16px 12px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary, #323130);
    border-top: 1px solid #EDEBE9;
}

.edit-quote-summary[b-nva36r8d3x] {
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    margin-bottom: 12px;
}

/* ============================================================================
   VIEW QUOTE PANEL — ADDITIONAL STYLES
   ============================================================================ */

.quote-option-card[b-nva36r8d3x] {
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 12px;
}

.option-header[b-nva36r8d3x] {
    padding: 10px 16px;
    margin: 0;
    border-bottom: 1px solid #EDEBE9;
}

.option-note[b-nva36r8d3x] {
    padding: 8px 16px;
    font-size: 13px;
    color: #605E5C;
    background: #F3F2F1;
}

.option-note-label[b-nva36r8d3x] {
    font-weight: 600;
}

.option-legs[b-nva36r8d3x] {
    padding: 12px 16px;
}

.leg-comment[b-nva36r8d3x] {
    padding: 6px 16px 10px;
    font-size: 12px;
    color: #605E5C;
}

.fw-bold[b-nva36r8d3x] {
    font-weight: 700;
}

.option-total-row[b-nva36r8d3x] {
    padding: 8px 16px;
    background: #F3F2F1;
    border-top: 1px solid #EDEBE9;
}

.total-flex[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
}

.grand-total-row[b-nva36r8d3x] {
    background: #F3F2F1;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 8px;
}

.grand-total-label[b-nva36r8d3x],
.grand-total-value[b-nva36r8d3x] {
    font-weight: 700;
    font-size: 14px;
}

.kv-value.muted[b-nva36r8d3x] {
    color: #A19F9D;
    font-size: 12px;
}

.kv-label.muted[b-nva36r8d3x] {
    color: #C8C6C4;
}

.service-flags[b-nva36r8d3x] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.leg-section > .service-flags[b-nva36r8d3x] {
    padding: 4px 16px;
}

.service-flag[b-nva36r8d3x] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.service-flag.visa[b-nva36r8d3x] {
    color: #0078d4;
    background: #eff6ff;
}

.service-flag.hotel[b-nva36r8d3x] {
    color: #7c3aed;
    background: #f5f3ff;
}

.service-flag.transport[b-nva36r8d3x] {
    color: #0d9488;
    background: #f0fdfa;
}

.attachment-meta[b-nva36r8d3x] {
    display: block;
    font-size: 11px;
    color: #A19F9D;
    margin-top: 2px;
}

/* ============================================================================
   DIALOG STYLES — Withdraw, Acknowledge, Confirm Dialogs
   ============================================================================ */

/* Context info block inside dialogs */
.dialog-context-info[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.dialog-context-info.acknowledge-context[b-nva36r8d3x] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* Warning message inside withdraw dialogs */
.dialog-warning-message[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #991b1b;
    line-height: 1.5;
}

.dialog-warning-message > span:first-child[b-nva36r8d3x] {
    flex-shrink: 0;
    font-size: 16px;
}

/* Required field marker */
.field-required[b-nva36r8d3x] {
    color: #dc2626;
    font-weight: 700;
}

/* Danger action button (withdraw, delete) */
[b-nva36r8d3x] .danger-action-btn {
    --accent-fill-rest: #dc2626;
    --accent-fill-hover: #b91c1c;
    --accent-fill-active: #991b1b;
}

/* Withdraw dialog specific */
.withdraw-dialog[b-nva36r8d3x]  fluent-dialog {
    max-width: 520px;
}

/* Acknowledge dialog specific */
.acknowledge-dialog[b-nva36r8d3x]  fluent-dialog {
    max-width: 520px;
}

/* Email notification banner (Booking Docs panel) */
.email-notification-banner[b-nva36r8d3x] {
    background: #e8f4fd;
    border: 1px solid #0078d4;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: #323130;
    line-height: 1.5;
}

.email-notification-title[b-nva36r8d3x] {
    color: #0078d4;
}

.email-notification-list[b-nva36r8d3x] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

/* ============================================================================
   AUDIT-FIX — Grid & Panel Utility Classes (Panels 8-10, 12-13)
   ============================================================================ */

.grid-action-cell[b-nva36r8d3x] {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.quotes-count[b-nva36r8d3x] {
    color: var(--BEC-colorNeutralForeground3, #64748b);
    font-weight: 600;
}

.mono-text[b-nva36r8d3x] {
    font-family: inherit;
}

.panel-error-container[b-nva36r8d3x] {
    padding: var(--BEC-spacingHorizontalL);
}

.kv-item-full[b-nva36r8d3x] {
    grid-column: 1 / -1;
}

.bulk-quote-total-container[b-nva36r8d3x] {
    background: var(--BEC-success-bg, #ecfdf5);
    border: 1px solid var(--BEC-success-border, #10b981);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.bulk-quote-total-inner[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bulk-quote-total[b-nva36r8d3x] {
    font-size: 24px;
    font-weight: 800;
    color: var(--BEC-colorStatusSuccess, #059669);
    font-family: var(--font-mono);
}

.bulk-quote-total-label[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--BEC-colorStatusSuccess, #065f46);
}

.candidates-scroll-list[b-nva36r8d3x] {
    max-height: 400px;
    overflow-y: auto;
}

/* ============================================================================
   ATTACHMENT CARDS — Microsoft Outlook/Teams Inspired Design
   ============================================================================ */

.attachment-card-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachment-card-list.loading[b-nva36r8d3x] {
    pointer-events: none;
    opacity: 0.7;
}

.attachment-card[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.attachment-card:hover[b-nva36r8d3x] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke1Hover, #cbd5e1);
    box-shadow: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
}

.attachment-card.clickable[b-nva36r8d3x] {
    cursor: pointer;
}

/* File type icon — CSS-only, no FontAwesome */
.attachment-card-icon[b-nva36r8d3x] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-main);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

.attachment-card-icon.file-pdf[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteRedBackground1, #fef2f2);
    color: var(--BEC-colorPaletteRedForeground1, #dc2626);
    border: 1px solid var(--BEC-colorPaletteRedBorder1, #fecaca);
}

.attachment-card-icon.file-pdf[b-nva36r8d3x]::after {
    content: "PDF";
}

.attachment-card-icon.file-doc[b-nva36r8d3x] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.attachment-card-icon.file-doc[b-nva36r8d3x]::after {
    content: "DOC";
}

.attachment-card-icon.file-xls[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteGreenBackground1, #f0fdf4);
    color: var(--BEC-colorPaletteGreenForeground1, #16a34a);
    border: 1px solid #bbf7d0;
}

.attachment-card-icon.file-xls[b-nva36r8d3x]::after {
    content: "XLS";
}

.attachment-card-icon.file-img[b-nva36r8d3x] {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #e9d5ff;
}

.attachment-card-icon.file-img[b-nva36r8d3x]::after {
    content: "IMG";
}

.attachment-card-icon.file-zip[b-nva36r8d3x] {
    background: #fefce8;
    color: #ca8a04;
    border: 1px solid #fde68a;
}

.attachment-card-icon.file-zip[b-nva36r8d3x]::after {
    content: "ZIP";
}

.attachment-card-icon.file-generic[b-nva36r8d3x] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
    color: var(--BEC-colorNeutralForeground3, #605E5C);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
}

.attachment-card-icon.file-generic[b-nva36r8d3x]::after {
    content: "FILE";
}

/* Info section */
.attachment-card-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attachment-card-name[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-card-meta[b-nva36r8d3x] {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Download button */
.attachment-card-download[b-nva36r8d3x] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #0078D4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.attachment-card-download:hover[b-nva36r8d3x] {
    background: #DEECF9;
    border-color: #0078D4;
}

.attachment-card-download:disabled[b-nva36r8d3x] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bulk-pricing-toggle[b-nva36r8d3x] {
    gap: 24px;
    margin-top: 12px;
    align-items: flex-start;
}

.bulk-form-gap-lg[b-nva36r8d3x] {
    gap: 16px;
    margin-top: 12px;
}

.bulk-form-gap-md[b-nva36r8d3x] {
    gap: 12px;
    margin-top: 12px;
}

.bulk-form-gap-sm[b-nva36r8d3x] {
    gap: 12px;
    margin-top: 8px;
}

.bulk-form-mt[b-nva36r8d3x] {
    margin-top: 12px;
}

.bulk-flex-header[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bulk-footer-total-label[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
}

.bulk-footer-total-value[b-nva36r8d3x] {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}

.bulk-footer-total-wrap[b-nva36r8d3x] {
    text-align: right;
    flex: 1;
    margin-right: 20px;
}

/* ============================================================================
   QUOTE GROUPS — Unified pricing + flight per group
   ============================================================================ */

.quote-groups-header[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.quote-groups-subtitle[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

.quote-group-card[b-nva36r8d3x] {
    background: var(--BEC-colorNeutralBackground2, #f8fafc);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
    position: relative;
    transition: border-color 0.15s;
}

.quote-group-card:hover[b-nva36r8d3x] {
    border-color: var(--BEC-colorBrandStroke1, #0078D4);
}

.quote-group-card-header[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.quote-group-number[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #0078D4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quote-group-remove[b-nva36r8d3x] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    transition: all 0.15s;
}

.quote-group-remove:hover[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteRedBackground1, #fef2f2);
    border-color: var(--BEC-colorPaletteRedBorder1, #fecaca);
    color: var(--BEC-colorPaletteRedForeground1, #dc2626);
}

.quote-group-subtotal[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--BEC-colorNeutralStroke1, #e2e8f0);
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

.quote-group-subtotal-value[b-nva36r8d3x] {
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-family: var(--font-mono, monospace);
}

/* Allocation bar */
.quote-allocation-bar[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.quote-allocation-bar.valid[b-nva36r8d3x] {
    background: var(--BEC-success-bg, #ecfdf5);
    border: 1px solid var(--BEC-success-border, #10b981);
    color: var(--BEC-colorStatusSuccess, #059669);
}

.quote-allocation-bar.invalid[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteYellowBackground2, #fefce8);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1, #fde68a);
    color: var(--BEC-colorPaletteYellowForeground1, #ca8a04);
}

.quote-allocation-delta[b-nva36r8d3x] {
    font-weight: 600;
}

.quote-allocation-check[b-nva36r8d3x] {
    font-weight: 700;
    font-size: 16px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/ChatInput.razor.rz.scp.css */
/* =============================================================================
   ChatInput.razor.css — Redesigned Input Area (BEC Design System)
   ==============================================================================
   Centered column (same max-width as message list) with a rounded input box.
   Layout: textarea on top (full width), horizontal toolbar row below.
   Toolbar: future action buttons on the left, send button on the far right.
   Textarea expands up to 10 rows with invisible scrollbar.
   ============================================================================== */

/* ===== Input Container (centered to match message list column) ===== */
.input-area[b-66q58phheb] {
    position: relative;
    padding: 8px 16px 8px 16px;
    background: transparent;
    border-top: none;
    flex-shrink: 0;
    width: 100%;
}

/* ===== Input Box — Vertical layout: textarea on top, toolbar row below ===== */
.input-box[b-66q58phheb] {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 4px 0;
    box-shadow: none;
    transition: none;
}

/* Focus: no blue border — instead a lifted shadow gives a subtle "pop up" feel */
.input-box:focus-within[b-66q58phheb] {
    border-color: transparent;
    box-shadow: none;
}

/* ===== Textarea (full width, expands up to 10 rows, invisible scrollbar) ===== */
.input-textarea[b-66q58phheb] {
    width: 100%;
    min-height: 24px;
    max-height: 220px; /* Safety cap — JS autoResizeTextarea handles dynamic sizing up to MaxTextareaRows */
    padding: 4px 0;
    border: none;
    border-radius: 0;
    font-family: var(--BEC-fontFamilyBase);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    resize: none;
    overflow-y: auto;
    line-height: 20px;
    background: transparent;
}

/* Invisible scrollbar — content still scrolls, no visible track */
.input-textarea[b-66q58phheb]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.input-textarea[b-66q58phheb] {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.input-textarea:focus[b-66q58phheb] {
    outline: none;
    border: none;
}

.input-textarea[b-66q58phheb]::placeholder {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.input-textarea:disabled[b-66q58phheb] {
    background: transparent;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== Attachment Strip — Square cards above textarea, horizontal scroll ===== */
.attachment-strip[b-66q58phheb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.attachment-strip[b-66q58phheb]::-webkit-scrollbar {
    display: none;
}

/* ===== Square Attachment Card ===== */
.att-card[b-66q58phheb] {
    display: flex;
    flex-direction: column;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 1.5px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: #fff;
    overflow: hidden;
    cursor: default;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.att-card:hover[b-66q58phheb] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

/* Smaller card when >5 files attached */
.att-card.att-card-sm[b-66q58phheb] {
    width: 90px;
    height: 90px;
}

.att-card.att-card-sm .att-card-name[b-66q58phheb] {
    font-size: 10px;
}

.att-card.att-card-sm .att-card-size[b-66q58phheb] {
    font-size: 9px;
}

.att-card.att-card-sm .att-card-status[b-66q58phheb] {
    font-size: 9px;
    padding: 4px 6px;
}

/* Card body: file name + size centered */
.att-card-body[b-66q58phheb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 10px 0 10px;
    text-align: center;
}

.att-card-name[b-66q58phheb] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    line-height: 1.3;
}

.att-card-size[b-66q58phheb] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    margin-top: 2px;
    display: block;
}

/* Image thumbnail inside card */
.att-card-thumb[b-66q58phheb] {
    padding: 4px;
}

.att-card-thumb-img[b-66q58phheb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Progress bar inside card body */
.att-card-progress[b-66q58phheb] {
    width: 60%;
    height: 3px;
    background: var(--BEC-colorNeutralBackground5, #e8e8e8);
    border-radius: 2px;
    margin: 6px auto 0 auto;
    overflow: hidden;
}

.att-card-progress-fill[b-66q58phheb] {
    height: 100%;
    width: 0%;
    background: var(--BEC-colorBrandBackground, #0078d4);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* Bottom status strip */
.att-card-status[b-66q58phheb] {
    padding: 5px 8px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Status variants */
.att-card.status-uploaded[b-66q58phheb] {
    border-color: var(--BEC-colorSuccessBorder1, #107c10);
}

.att-card.status-uploaded .att-card-status[b-66q58phheb] {
    color: var(--BEC-colorSuccessBorder1, #107c10);
}

.att-card.status-uploading[b-66q58phheb] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
}

.att-card.status-uploading .att-card-status[b-66q58phheb] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.att-card.status-failed[b-66q58phheb] {
    border-color: var(--BEC-colorErrorBorder1, #a4262c);
    background: rgba(255, 59, 48, 0.04); /* red whisper across the whole card so the failed state reads at a glance, not just on a thin border */
}

.att-card.status-failed .att-card-status[b-66q58phheb] {
    color: var(--BEC-colorErrorBorder1, #a4262c);
}

/* UPLOAD-A1+A5 (2026-05-28, Brain): always-visible error band.
   Previously the only feedback on a failed upload was:
     1. A red border (easy to miss when 5 chips are stacked),
     2. The word "Failed" in red (no reason WHY),
     3. ErrorMessage in `title="..."` — hover only, invisible on first look,
     4. A FluentUI toast that silently swallows itself when the circuit is gone.
   Result: user sees red, panics, removes the file, tries again, same result,
   gives up. Now the actual reason ("File too large", "Session expired",
   "Already in your library — open from workspace instead", etc.) renders
   inline. Apple-class: hairline above, soft red bg, tabular text, accessible. */
.att-card-error-band[b-66q58phheb] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid rgba(164, 38, 44, 0.18);
    background: rgba(255, 59, 48, 0.06);
    color: #8b1c20;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    border-radius: 0 0 8px 8px;
    word-break: break-word;
}

.att-card-error-band i[b-66q58phheb] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 11px;
    color: var(--BEC-colorErrorBorder1, #a4262c);
}

.att-card-error-band .att-card-error-text[b-66q58phheb] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Smaller variant when chips collapse to compact mode */
.att-card.att-card-sm .att-card-error-band[b-66q58phheb] {
    font-size: 10px;
    padding: 5px 8px;
}

@media (prefers-reduced-motion: reduce) {
    .att-card.status-failed[b-66q58phheb] {
        background: rgba(255, 59, 48, 0.08); /* slightly stronger tint so reduced-motion users still get the at-a-glance failure signal without animation */
    }
}

/* Remove button — top-right corner, appears on hover */
.att-card-remove[b-66q58phheb] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 2;
}

.att-card:hover .att-card-remove[b-66q58phheb] {
    opacity: 1;
}

.att-card-remove:hover[b-66q58phheb] {
    background: var(--BEC-colorErrorBorder1, #a4262c);
}

/* ===== Toolbar Row — Single horizontal line: spacer left, buttons right ===== */
.input-toolbar[b-66q58phheb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    margin-top: 8px;
    min-height: 32px;
}

/* Left side of toolbar — counter, disclaimer, file-limit warning */
.toolbar-left[b-66q58phheb] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Right side: attach + send on the SAME horizontal row, side by side */
.toolbar-actions[b-66q58phheb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== Action Button — Shared circle style for attach & send ===== */
.action-btn[b-66q58phheb] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.action-btn:disabled[b-66q58phheb] {
    opacity: 0.35;
    cursor: not-allowed;
}

.action-btn i[b-66q58phheb] {
    font-size: 12px;
}

/* ===== Attach Button — No background, gray icon, blue on hover ===== */
.attach-btn[b-66q58phheb] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #8a8886);
}

.attach-btn:hover:not(:disabled)[b-66q58phheb] {
    background: transparent;
    color: var(--BEC-colorBrandBackground, #0078d4);
    transform: none;
}

/* ===== Views Panel Button — bordered pill (matches concept v2) ===== */
.views-panel-btn[b-66q58phheb] {
    width: auto;
    height: auto;
    padding: 5px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 11px;
    font-weight: 500;
}

.views-panel-btn:hover[b-66q58phheb] {
    border-color: #1a1a1a;
    color: #1a1a1a;
    background: #fff;
}

.views-panel-btn.views-panel-active[b-66q58phheb] {
    border-color: #0071e3;
    color: #0071e3;
    background: #fff;
}

.views-btn-label[b-66q58phheb] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.ws-panel-badge[b-66q58phheb] {\n    position: absolute;\n    top: -5px;\n    right: -5px;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    border-radius: 8px;\n    background: #c4314b;\n    color: #fff;\n    font-size: 0.6rem;\n    font-weight: 700;\n    line-height: 16px;\n    text-align: center;\n    pointer-events: none;\n}\n\n/* ===== Toolbar Separator — visual divider between button groups ===== */
.toolbar-sep[b-66q58phheb] {
    display: block;
    width: 1px;
    height: 20px;
    background: #e0e0e0;
    margin: 0 4px;
    flex-shrink: 0;
}

/* ===== Send Button — Brand-colored circle ===== */
.send-btn[b-66q58phheb] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
    animation: bec-btn-morph-in-b-66q58phheb 0.2s ease-out;
}

.send-btn:hover:not(:disabled)[b-66q58phheb] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
    transform: scale(1.08);
}

/* "Sending…" — briefly shown after click, before State.IsProcessing flips. */
.send-btn-sending[b-66q58phheb] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    opacity: 0.85;
    cursor: progress;
}
.send-btn-sending:hover[b-66q58phheb] {
    transform: none;
}

/* ===== Stop Button — Same size as send, red background with stop icon ===== */
.stop-btn[b-66q58phheb] {
    background: var(--BEC-colorErrorForeground1, #d13438);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
    animation: bec-btn-morph-in-b-66q58phheb 0.2s ease-out;
    transition: opacity 0.18s ease;
}

.stop-btn:hover:not(:disabled)[b-66q58phheb] {
    background: var(--BEC-colorErrorForeground2, #a4262c);
    transform: scale(1.08);
}

/* Knife-in-butter §6 — Stop is rendered but visually softened during the
   500ms double-click protection window right after Send→Stop morph. The
   .stop-arming class is toggled by ChatInput.razor.cs while !_stopButtonArmed.
   Greying it AND disabling click prevents the user from accidentally
   stopping the reply they just sent with a too-fast second click. */
.stop-btn.stop-arming[b-66q58phheb] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Knife-in-butter §5 — fade-in keyframe for the Send/Stop morph.
   When `@if (IsProcessing)` flips and the buttons swap DOM nodes, the
   incoming one animates in over 200ms instead of snapping. Subtle but
   the difference between "cheap" and "alive" software. */
@keyframes bec-btn-morph-in-b-66q58phheb {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===== Counter + Disclaimer (inside toolbar-left) ===== */
.input-counter[b-66q58phheb] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    white-space: nowrap;
}

.input-disclaimer[b-66q58phheb] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= MIGRATED INLINE STYLES ================= */

.chat-file-hidden[b-66q58phheb] {
    display: none;
}

/* ===== Drop-Zone Overlay ===== */
.drop-overlay[b-66q58phheb] {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0, 120, 212, 0.08);
    border: 2px dashed var(--BEC-colorBrandBackground, #0078d4);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.input-area.drop-active .drop-overlay[b-66q58phheb] {
    display: flex;
}

.drop-overlay-content[b-66q58phheb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--BEC-colorBrandBackground, #0078d4);
    font-size: 14px;
    font-weight: 600;
}

.drop-overlay-content i[b-66q58phheb] {
    font-size: 28px;
}

/* ===== File Counter Badge ===== */
.chip-counter[b-66q58phheb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    background: var(--BEC-colorNeutralBackground4, #e1dfdd);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Toolbar Limit Warning ===== */
.toolbar-limit-warning[b-66q58phheb] {
    font-size: 11px;
    color: var(--BEC-colorWarningForeground1, #d83b01);
    font-weight: 500;
    white-space: nowrap;
}

/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/ChatPanel.razor.rz.scp.css */
/* =============================================================================
   ChatPanel.razor.css — Message List + Input Layout
   ==============================================================================
   Content is constrained to a centered column (max 760px) with equal whitespace
   on both sides, matching modern AI chat UIs (ChatGPT, Claude, Cursor).
   ============================================================================== */

.chat-panel[b-ddt9ui50al] {
    --agent-content-width: 820px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ===== Scrollable Message Area =====
   Centered column: max-width constrains messages, margin auto centers them.
   Bottom padding bumped to 36px (was 20) so the agent's final word has
   visible breathing room above the composer — no longer feels cramped. */
.message-list[b-ddt9ui50al] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 36px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: auto;
    max-width: var(--agent-content-width, 820px);
    width: 100%;
    margin: 0 auto;
}

/* Light visible scrollbar for chat messages */
.message-list[b-ddt9ui50al]::-webkit-scrollbar {
    width: 5px;
}

.message-list[b-ddt9ui50al]::-webkit-scrollbar-track {
    background: transparent;
}

.message-list[b-ddt9ui50al]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}

.message-list[b-ddt9ui50al] {
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: #c0c0c0 transparent;     /* Firefox */
}

/* ===== Welcome Screen (Apple-inspired typewriter) =====
   Centered vertically in the available space, with tight padding and an
   overflow guard so the message-list never grows a scrollbar on the welcome
   surface. The marquee inside still has its own overflow:hidden, so the only
   way to spill out of the message-list would be the container itself —
   capping it here removes the stray scroll handle the user was seeing. */
.welcome-container[b-ddt9ui50al] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 40px;
    overflow: hidden;
    animation: welcomeFadeIn-b-ddt9ui50al 0.4s ease-out;
}

.welcome-greeting[b-ddt9ui50al] {
    font-size: 40px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: 0;
    text-align: center;
    min-height: 44px;
}

.welcome-tagline[b-ddt9ui50al] {
    font-size: 17px;
    font-weight: 400;
    /* A11y (Moment-01 F3): explicit accessible grey — Foreground3 (#86868b ≈ 3.5:1)
       fails WCAG AA for 17px body text. #5d5d62 ≈ 5.3:1 on #fff. */
    color: #5d5d62;
    letter-spacing: -0.2px;
    text-align: center;
    margin: 8px 0 14px 0;
    min-height: 24px;
}

/* ===== Capability Auto-Scroll ===== */
.cap-scroll-wrap[b-ddt9ui50al] {
    position: relative;
    height: 180px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.cap-scroll-wrap.visible[b-ddt9ui50al] {
    opacity: 1;
    transform: translateY(0);
}

.cap-scroll-track[b-ddt9ui50al] {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: scrollUp-b-ddt9ui50al 28s linear infinite;
    will-change: transform;
}

.cap-line[b-ddt9ui50al] {
    display: block;
    font-size: 16px;
    font-weight: 400;
    /* A11y (Moment-01 F3): #aeaeb2 ≈ 2.4:1 fails WCAG AA badly. #6e6e73 ≈ 4.6:1 on #fff. */
    color: #6e6e73;
    letter-spacing: -0.2px;
    text-align: center;
    padding: 9px 0;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

/* Top gradient fade */
.cap-scroll-wrap[b-ddt9ui50al]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to top, transparent 0%, var(--BEC-colorNeutralBackground1, #fff) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Bottom gradient fade */
.cap-scroll-wrap[b-ddt9ui50al]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(to bottom, transparent 0%, var(--BEC-colorNeutralBackground1, #fff) 100%);
    pointer-events: none;
    z-index: 1;
}

@keyframes scrollUp-b-ddt9ui50al {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes blink-b-ddt9ui50al {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes welcomeFadeIn-b-ddt9ui50al {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* §37: Honor user motion preference — matches the pattern used elsewhere
   in the app (MessageBubble, WorkspaceFilePreview, etc.). */
@media (prefers-reduced-motion: reduce) {
    .welcome-container[b-ddt9ui50al] {
        animation: none;
    }
    /* Moment-01 F2: freeze the infinite capability marquee + reveal it statically
       (the typewriter is also short-circuited JS-side via matchMedia). */
    .cap-scroll-track[b-ddt9ui50al] {
        animation: none;
    }
    .cap-scroll-wrap[b-ddt9ui50al] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Individual Steps (rendered inside expanded status surface) ===== */
.tool-steps-list[b-ddt9ui50al] {
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.tool-step[b-ddt9ui50al] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    position: relative;
}

/* Vertical connector line between steps */
.tool-step:not(:last-child)[b-ddt9ui50al]::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 20px;
    bottom: -4px;
    width: 1px;
    background: var(--BEC-colorNeutralBorder1, #e0e0e0);
}

.tool-step-icon[b-ddt9ui50al] {
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    z-index: 1;
    margin-top: 2px;
}

.tool-step.completed .tool-step-icon[b-ddt9ui50al] {
    color: var(--BEC-colorStatusSuccessForeground1, #107c10);
}

.tool-step.active .tool-step-icon[b-ddt9ui50al] {
    color: #f5a623;
}

.tool-step.pending .tool-step-icon[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

/* ===== Queue Collapse (inside composer) ===== */
.queue-collapse[b-ddt9ui50al] {
    margin: 2px 0 8px;
    border-radius: 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    background: var(--BEC-colorNeutralBackground2, #faf9f8);
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    font-size: 12px;
}

.queue-collapse summary[b-ddt9ui50al] {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    cursor: pointer;
}

.queue-collapse summary[b-ddt9ui50al]::-webkit-details-marker {
    display: none;
}

.queue-collapse-left[b-ddt9ui50al] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.queue-collapse i[b-ddt9ui50al] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 12px;
}

.queue-collapse-preview[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground3, #8a8886);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.queue-collapse-list[b-ddt9ui50al] {
    margin: 0;
    padding: 0 12px 10px 30px;
    display: grid;
    gap: 6px;
}

.queue-collapse-item[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.queue-collapse-text[b-ddt9ui50al] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-step.failed .tool-step-icon[b-ddt9ui50al] {
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.tool-step.pending .tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.tool-step.failed .tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    white-space: normal;
    word-break: break-word;
}

.tool-step.active .tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-weight: 500;
}

/* ===== ERROR BANNER — sole chat error UI =====
   Lives above the composer, matched to the composer-shell geometry
   (max-width, border-radius, shadow) so the layout reads as one stack. */
.error-banner-strip[b-ddt9ui50al] {
    max-width: var(--agent-content-width, 820px);
    width: 100%;
    margin: 0 auto 10px;
    padding: 0 24px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.agent-error-banner[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Match composer-shell geometry exactly for visual balance */
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-left: 3px solid var(--BEC-colorErrorForeground1, #dc2626);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.45;
    animation: errorSlideIn-b-ddt9ui50al 0.25s ease-out;
}

.agent-error-banner i.fa-triangle-exclamation[b-ddt9ui50al] {
    font-size: 16px;
    color: var(--BEC-colorErrorForeground1, #dc2626);
    flex-shrink: 0;
}

.agent-error-banner .agent-error-banner__text[b-ddt9ui50al] {
    flex: 1;
    min-width: 0;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.agent-error-banner .agent-error-banner__retry[b-ddt9ui50al] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.agent-error-banner .agent-error-banner__retry:hover[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground2, #f6f6f6);
    border-color: var(--BEC-colorNeutralStroke1, #cbcbcb);
}

.error-dismiss[b-ddt9ui50al] {
    background: none;
    border: none;
    color: var(--BEC-colorNeutralForeground3, #707070);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0.6;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.error-dismiss:hover[b-ddt9ui50al] {
    opacity: 1;
    background: var(--BEC-colorNeutralBackground2, #f6f6f6);
}

@keyframes errorSlideIn-b-ddt9ui50al {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== AUTO-APPROVED INFO BANNER (reconnect notification) ===== */
.auto-approved-banner[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--BEC-colorWarningBackground1, #fff8e1);
    color: var(--BEC-colorWarningForeground1, #8a6d3b);
    border: 1px solid var(--BEC-colorWarningBorder1, #ffe082);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.4;
    animation: errorSlideIn-b-ddt9ui50al 0.25s ease-out;
}

.auto-approved-banner i.fa-circle-info[b-ddt9ui50al] {
    font-size: 15px;
    color: var(--BEC-colorWarningForeground1, #f59e0b);
    flex-shrink: 0;
}

.auto-approved-dismiss[b-ddt9ui50al] {
    background: none;
    border: none;
    color: var(--BEC-colorWarningForeground1, #8a6d3b);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.auto-approved-dismiss:hover[b-ddt9ui50al] {
    opacity: 1;
    background: color-mix(in srgb, var(--BEC-colorWarningForeground1, #8a6d3b) 8%, transparent);
}

/* ===== Unified Composer Dock (strips + input fused into one card) ===== */
.composer-dock[b-ddt9ui50al] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 8px;
}

.jump-latest-btn[b-ddt9ui50al] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #d1d1d1);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.jump-latest-btn:hover[b-ddt9ui50al] {
    transform: translateY(-1px);
    background: var(--BEC-colorNeutralBackground2, #f6f6f6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* U-009: Accented style when pill shows unread count */
.jump-latest-btn--unread[b-ddt9ui50al] {
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
    border-color: var(--BEC-colorBrandStroke1, #0f6cbd);
    color: var(--BEC-colorBrandForeground1, #0f6cbd);
}

.jump-latest-btn--unread:hover[b-ddt9ui50al] {
    background: var(--BEC-colorBrandBackground2Hover, #d6e6fc);
}

.composer-shell[b-ddt9ui50al] {
    width: 100%;
    max-width: var(--agent-content-width, 820px);
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.composer-shell:focus-within[b-ddt9ui50al] {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ===== U-013: Archive Cap Banner ===== */
.bec-archive-banner[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 0 8px 8px;
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground4, #f0f4f8);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    font-size: 0.8em;
    color: var(--BEC-colorNeutralForeground2, #616161);
    line-height: 1.4;
}

.bec-archive-banner__icon[b-ddt9ui50al] {
    flex-shrink: 0;
    font-size: 1.1em;
}

.bec-archive-banner__text[b-ddt9ui50al] {
    flex: 1;
    min-width: 0;
}

.bec-archive-banner__text strong[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== U-014: Time-Bucket Turn Separators ===== */
.bec-turn-separator[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 4px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--BEC-colorNeutralBackground1, #fff);
}

.bec-turn-separator[b-ddt9ui50al]::before,
.bec-turn-separator[b-ddt9ui50al]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--BEC-colorNeutralStroke2, #e0e0e0);
}

.bec-turn-separator__label[b-ddt9ui50al] {
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3, #888);
    white-space: nowrap;
}

/* ===== Responsive — Mobile ===== */
@media (max-width: 480px) {
    .welcome-greeting[b-ddt9ui50al] {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

    .welcome-tagline[b-ddt9ui50al] {
        font-size: 15px;
    }

    .cap-scroll-wrap[b-ddt9ui50al] {
        width: 100%;
    }
}

/* ===== U-015: Edit-Resend Confirmation Dialog ===== */
.edit-confirm-backdrop[b-ddt9ui50al] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: edit-confirm-fadein-b-ddt9ui50al 0.15s ease-out;
}

.edit-confirm-dialog[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e0e0e0);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: edit-confirm-scalein-b-ddt9ui50al 0.15s ease-out;
}

.edit-confirm-title[b-ddt9ui50al] {
    margin: 0 0 12px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1a1a1a);
}

.edit-confirm-body[b-ddt9ui50al] {
    margin: 0 0 20px;
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2, #4a4a4a);
}

.edit-confirm-actions[b-ddt9ui50al] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.edit-confirm-cancel[b-ddt9ui50al] {
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d0d0d0);
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground1, #333);
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 500;
}

.edit-confirm-cancel:hover[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.edit-confirm-submit[b-ddt9ui50al] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--BEC-colorStatusDangerBackground3, #dc3545);
    color: #fff;
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 600;
}

.edit-confirm-submit:hover[b-ddt9ui50al] {
    background: var(--BEC-colorStatusDangerBackground3Hover, #c82333);
}

@keyframes edit-confirm-fadein-b-ddt9ui50al {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes edit-confirm-scalein-b-ddt9ui50al {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .edit-confirm-backdrop[b-ddt9ui50al],
    .edit-confirm-dialog[b-ddt9ui50al] { animation: none; }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/MessageBubble.razor.rz.scp.css */
/* =============================================================================
   MessageBubble.razor.css — Unified Message Layout (BEC Design System)
   ==============================================================================
   Both user and assistant messages use identical left-aligned layout:
   Avatar + Name + Time (header), Content with left padding (body).

   AGENT MARKDOWN CSS: Comprehensive Fluent Design 2 specification (V2)
   covering 35 content types rendered by Markdig.
   Source spec: .cursor/rules/50-ui-design/Agent Reply Format.html
   ============================================================================== */

/* ===== Message Container ===== */
.msg[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    /* P9-S (2026-05-21): slowed from 0.2s → 0.32s for a softer, more
       elegant entrance that matches the slowed shimmer timing. */
    animation: messageIn-b-8d9pxpk6hu 0.32s ease-out;
    position: relative;
}

/* ===== Knife-in-butter §1 — Thinking indicator during warmup =====
   Three navy dots breathing in sequence inside the streaming bubble before
   the first chunk arrives. Replaces the silent empty bubble that used to
   appear for 3-8s during memory loading / planner phases. Disappears
   naturally when DisplayContent becomes non-empty (Blazor removes via @if).
   ============================================================================== */
[b-8d9pxpk6hu] .bec-thinking-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px 4px;
    height: 18px;
}
/* Trailing variant — shown after first chunk arrives so the user keeps
   seeing visible activity even during silent inter-chunk gaps. Quieter
   than the warmup dots so it doesn't compete with the streaming text. */
[b-8d9pxpk6hu] .bec-thinking-indicator.bec-thinking-trailing {
    margin-top: 2px;
    height: 10px;
    padding: 2px 0 0;
    opacity: 0.55;
}
[b-8d9pxpk6hu] .bec-thinking-trailing .bec-thinking-dot {
    width: 4px;
    height: 4px;
    background: #6b7280;
}
[b-8d9pxpk6hu] .bec-thinking-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a1f8f;
    opacity: 0.25;
    animation: bec-thinking-breath-b-8d9pxpk6hu 1.2s ease-in-out infinite;
}
[b-8d9pxpk6hu] .bec-thinking-dot:nth-child(1) { animation-delay: 0s; }
[b-8d9pxpk6hu] .bec-thinking-dot:nth-child(2) { animation-delay: 0.18s; }
[b-8d9pxpk6hu] .bec-thinking-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes bec-thinking-breath-b-8d9pxpk6hu {
    0%, 60%, 100% { opacity: 0.20; transform: scale(0.85); }
    30%           { opacity: 1.0;  transform: scale(1); }
}

/* Phase 3.5: Role-based alignment */
.bec-msg-user[b-8d9pxpk6hu] {
    margin-left: auto;
    align-items: flex-end;
    max-width: 85%;
}

.bec-msg-agent[b-8d9pxpk6hu] {
    margin-right: auto;
    align-items: flex-start;
    width: 100%;
}

/* Per-turn spacing handled by ChatPanel .message-list gap: 20px */
.bec-msg[b-8d9pxpk6hu] {
    /* No additional margin — parent flex gap provides spacing */
}

.msg-queued[b-8d9pxpk6hu] {
    opacity: 0.58;
}

@keyframes messageIn-b-8d9pxpk6hu {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Header Row: avatar + name + time ===== */
.msg-header[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Phase 3.5: Header alignment per role */
.bec-msg-user .msg-header[b-8d9pxpk6hu] { justify-content: flex-end; }
.bec-msg-agent .msg-header[b-8d9pxpk6hu] { justify-content: flex-start; }

.msg-avatar[b-8d9pxpk6hu] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar[b-8d9pxpk6hu] {
    background: transparent;
}

.user-avatar i[b-8d9pxpk6hu] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.ai-avatar[b-8d9pxpk6hu] {
    background: transparent;
}

.ai-avatar i[b-8d9pxpk6hu] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.msg-sender-name[b-8d9pxpk6hu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.msg-sender-user[b-8d9pxpk6hu] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.msg-time[b-8d9pxpk6hu] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== Body: content with left padding aligned under name ===== */
.msg-body[b-8d9pxpk6hu] {
    padding-left: 0;
}

/* =============================================================================
   Phase 3.5 — Bordered User Bubble / Borderless Agent Design
   ============================================================================= */

/* ===== User Bubble (bordered, right-aligned, tail corner bottom-right) ===== */
.bec-user-bubble[b-8d9pxpk6hu] {
    background: #fff;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e5e7eb);
    border-radius: 12px 12px 4px 12px;
    padding: 10px 14px;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    text-align: left;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    word-break: break-word;
}

/* ===== Agent Body — NO bubble (borderless, transparent) ===== */
.bec-agent-body[b-8d9pxpk6hu] {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 0.875rem;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    width: 100%;
}

/* ===== Status Pill (tool outcome indicator) ===== */
.bec-status-pill[b-8d9pxpk6hu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #6e6e73);
    background: var(--BEC-colorNeutralBackground3, #f3f4f6);
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.bec-pill-icon[b-8d9pxpk6hu] {
    color: #10b981;
    font-weight: 700;
}

.bec-msg-separator[b-8d9pxpk6hu] {
    border: none;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #f0f0f2);
    margin: 0 0 10px 0;
    width: 100%;
}

/* ===== Action Buttons — hover/focus-within revealed ===== */
.bec-msg-actions[b-8d9pxpk6hu] {
    margin-top: 6px;
    opacity: 0;
    transition: opacity 150ms ease-out;
    display: flex;
    gap: 6px;
}

.bec-msg:hover .bec-msg-actions[b-8d9pxpk6hu],
.bec-msg:focus-within .bec-msg-actions[b-8d9pxpk6hu] {
    opacity: 1;
}

.bec-msg-edit-btn[b-8d9pxpk6hu],
.bec-msg-copy-btn[b-8d9pxpk6hu],
.bec-msg-regenerate-btn[b-8d9pxpk6hu] {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground2, #6e6e73);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.bec-msg-edit-btn:hover[b-8d9pxpk6hu],
.bec-msg-copy-btn:hover[b-8d9pxpk6hu],
.bec-msg-regenerate-btn:hover[b-8d9pxpk6hu] {
    background: rgba(0, 0, 0, 0.08);
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
}

/* prefers-reduced-motion — disable fade */
@media (prefers-reduced-motion: reduce) {
    .bec-msg-actions[b-8d9pxpk6hu] {
        transition: none;
    }
}

/* Remove left accent from agent body (Phase 3.5 supersedes) */
.msg-assistant .msg-body[b-8d9pxpk6hu] {
    padding-left: 0;
    border-left: none;
}


/* =============================================================================
   AGENT MARKDOWN RENDERING — Complete Fluent Design 2 Specification
   =============================================================================
   Everything below ::deep .msg-content targets Markdig-rendered HTML.
   Covers 35 content types with defensive edge cases.
   All colors use explicit fallbacks (no dependency on CSS variable resolution).
   ============================================================================= */

/* ===== #0 Container ===== */
.msg-content[b-8d9pxpk6hu] {
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--BEC-colorNeutralForeground1, #242424);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: 0.01em;
}

/* RTL support — browser auto-detects direction based on content */
.msg-content[dir="auto"][b-8d9pxpk6hu] {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Prevent first/last child extra margin */
[b-8d9pxpk6hu] .msg-content > *:first-child { margin-top: 0 !important; }
[b-8d9pxpk6hu] .msg-content > *:last-child  { margin-bottom: 0 !important; }

/* ===== #1 Paragraphs ===== */
[b-8d9pxpk6hu] .msg-content p {
    margin: 0 0 14px 0;
    line-height: 1.7;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-8d9pxpk6hu] .msg-content p:last-child {
    margin-bottom: 0;
}

/* ===== #2 Headings (h1–h6) — clean markdown render (VS Code / GitHub style) =====
   Dark neutral text, h1/h2 with a subtle bottom rule. No navy, no left bars,
   no uppercase — render the agent's markdown like a plain .md preview. */
[b-8d9pxpk6hu] .msg-content h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f2328;
    margin: 28px 0 14px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #d1d9e0;
}

[b-8d9pxpk6hu] .msg-content h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2328;
    margin: 24px 0 10px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #d8dee4;
}

[b-8d9pxpk6hu] .msg-content h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2328;
    margin: 20px 0 8px 0;
}

[b-8d9pxpk6hu] .msg-content h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2328;
    margin: 16px 0 8px 0;
}

[b-8d9pxpk6hu] .msg-content h5 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2328;
    margin: 16px 0 8px 0;
}

[b-8d9pxpk6hu] .msg-content h6 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #656d76;
    margin: 12px 0 8px 0;
}

/* ===== #3 Bold — BEC navy emphasis for in-body strong ===== */
[b-8d9pxpk6hu] .msg-content strong {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1a1a1a);
}

/* Strong inside body paragraphs/lists/blockquotes — emphasis is conveyed by WEIGHT,
   not color. Bold no longer renders in BEC navy (that read like a hyperlink and made
   replies look like a highlighter explosion). It inherits the neutral body text color,
   so a corporate reply stays calm and scannable. Color is reserved for actual links. */
[b-8d9pxpk6hu] .msg-content p strong,
[b-8d9pxpk6hu] .msg-content li strong,
[b-8d9pxpk6hu] .msg-content blockquote strong {
    color: inherit;
    font-weight: 600;
}
[b-8d9pxpk6hu] .msg-content h1 strong,
[b-8d9pxpk6hu] .msg-content h2 strong,
[b-8d9pxpk6hu] .msg-content h3 strong,
[b-8d9pxpk6hu] .msg-content h4 strong,
[b-8d9pxpk6hu] .msg-content h5 strong,
[b-8d9pxpk6hu] .msg-content h6 strong {
    color: inherit;
}

/* ===== #4 Italic ===== */
[b-8d9pxpk6hu] .msg-content em {
    font-style: italic;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-8d9pxpk6hu] .msg-content strong em,
[b-8d9pxpk6hu] .msg-content em strong {
    font-weight: 600;
    font-style: italic;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== #5 Ordered Lists — Enhanced spacing like Gemini ===== */
[b-8d9pxpk6hu] .msg-content ol {
    margin: 10px 0 14px 0;
    padding-left: 24px;
    padding-inline-start: 24px;
    padding-inline-end: 0;
    list-style-type: decimal;
}

[b-8d9pxpk6hu] .msg-content ol li {
    margin-bottom: 6px;
    padding-left: 6px;
    line-height: 1.7;
}

[b-8d9pxpk6hu] .msg-content ol li::marker {
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-weight: 600;
    font-size: 13px;
}

/* ===== #6 Unordered Lists — Enhanced spacing like Gemini ===== */
[b-8d9pxpk6hu] .msg-content ul {
    margin: 10px 0 14px 0;
    padding-left: 22px;
    padding-inline-start: 22px;
    padding-inline-end: 0;
    list-style-type: disc;
}

[b-8d9pxpk6hu] .msg-content ul li {
    margin-bottom: 6px;
    padding-left: 6px;
    line-height: 1.7;
}

[b-8d9pxpk6hu] .msg-content ul li::marker {
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 10px;
}

/* ===== #7 Nested Lists ===== */
[b-8d9pxpk6hu] .msg-content ul ul,
[b-8d9pxpk6hu] .msg-content ol ol,
[b-8d9pxpk6hu] .msg-content ul ol,
[b-8d9pxpk6hu] .msg-content ol ul {
    margin: 4px 0 4px 0;
}

/* Bullet progression: disc → circle → square */
[b-8d9pxpk6hu] .msg-content ul ul          { list-style-type: circle; }
[b-8d9pxpk6hu] .msg-content ul ul ul       { list-style-type: square; }
[b-8d9pxpk6hu] .msg-content ul ul ul ul    { list-style-type: disc; }

/* Number progression: decimal → lower-alpha → lower-roman */
[b-8d9pxpk6hu] .msg-content ol ol          { list-style-type: lower-alpha; }
[b-8d9pxpk6hu] .msg-content ol ol ol       { list-style-type: lower-roman; }
[b-8d9pxpk6hu] .msg-content ol ol ol ol    { list-style-type: decimal; }

/* Mixed nesting */
[b-8d9pxpk6hu] .msg-content ol ul  { list-style-type: disc; }
[b-8d9pxpk6hu] .msg-content ul ol  { list-style-type: decimal; }
[b-8d9pxpk6hu] .msg-content ol ul ul { list-style-type: circle; }
[b-8d9pxpk6hu] .msg-content ul ol ol { list-style-type: lower-alpha; }

/* ===== #8 Tables — BEC editorial style (parity with .bec-document table) =====
   Navy 2px top accent rule + transparent uppercase headers + navy 2px bottom
   closure under the last data row. Matches the document-preview look so a
   table in chat reads like a corporate report table, not a data-app grid. */
[b-8d9pxpk6hu] .msg-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
    line-height: 1.4;
    border: none;
    border-top: 2px solid #0a1f8f;
    border-radius: 0;
    overflow: hidden;
}

[b-8d9pxpk6hu] .msg-content thead {
    background: transparent;
}

[b-8d9pxpk6hu] .msg-content thead th {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #555555;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    background: transparent;
    white-space: normal;
    word-break: break-word;
}

/* Markdig alignment via style="text-align: ..." */
[b-8d9pxpk6hu] .msg-content th[style*="text-align: center"],
[b-8d9pxpk6hu] .msg-content td[style*="text-align: center"] {
    text-align: center;
}

[b-8d9pxpk6hu] .msg-content th[style*="text-align: right"],
[b-8d9pxpk6hu] .msg-content td[style*="text-align: right"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-8d9pxpk6hu] .msg-content tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    color: #1a1a1a;
    vertical-align: top;
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}

/* Navy 2px closure under the final data row — the BEC table "frame closer"
   that says "this is the end of the dataset" (parity with DocumentCSS). */
[b-8d9pxpk6hu] .msg-content tbody tr:last-child td {
    border-bottom: 2px solid #0a1f8f;
}

/* Zebra striping for scannability */
[b-8d9pxpk6hu] .msg-content tbody tr:nth-child(even) {
    background: rgba(244, 244, 244, 0.5);
}

/* Hover row — faint navy tint */
[b-8d9pxpk6hu] .msg-content tbody tr:hover {
    background: rgba(10, 31, 143, 0.04);
    transition: background 0.12s ease;
}

/* Table scroll wrapper — contains horizontal overflow for wide tables */
[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 520px;
    margin: 12px 0;
    border-radius: 6px;
    max-width: 100%;
}

[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper table {
    margin: 0;
}

/* Sticky table headers — stay visible when scrolling long tables */
[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
    box-shadow: 0 1px 0 0 var(--BEC-colorNeutralStroke1, #D1D1D1);
}

/* ===== #9 Code Blocks (multi-line) — BEC corporate code treatment =====
   Near-black background + thin BEC navy outline as a brand cue.
   Language label remains top-right (modern, github-like). */
[b-8d9pxpk6hu] .msg-content pre {
    background: #1d1d1f;
    color: #d4d4d8;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.55;
    padding: 16px;
    margin: 16px 0;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid rgba(10, 31, 143, 0.35);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(255,255,255,0.02) inset;
    position: relative;
    -moz-tab-size: 4;
    tab-size: 4;
}

[b-8d9pxpk6hu] .msg-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    font-size: inherit;
    color: inherit;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}

/* ===== Prism.js token palette — Material "Palenight" tuned for BEC dark code bg =====
   Wired in agent-chat.js → injectCopyButtons() which calls Prism.highlightElement
   on each <pre> <code>. Token classes (`.token.keyword`, `.token.string`, etc.)
   are added by Prism. Idempotent via the `bec-prism-done` marker class. */
[b-8d9pxpk6hu] .msg-content pre code .token.comment,
[b-8d9pxpk6hu] .msg-content pre code .token.prolog,
[b-8d9pxpk6hu] .msg-content pre code .token.cdata,
[b-8d9pxpk6hu] .msg-content pre code .token.doctype { color: #6e7280; font-style: italic; }

[b-8d9pxpk6hu] .msg-content pre code .token.keyword,
[b-8d9pxpk6hu] .msg-content pre code .token.boolean,
[b-8d9pxpk6hu] .msg-content pre code .token.constant,
[b-8d9pxpk6hu] .msg-content pre code .token.atrule,
[b-8d9pxpk6hu] .msg-content pre code .token.builtin { color: #82aaff; }

[b-8d9pxpk6hu] .msg-content pre code .token.string,
[b-8d9pxpk6hu] .msg-content pre code .token.char,
[b-8d9pxpk6hu] .msg-content pre code .token.attr-value,
[b-8d9pxpk6hu] .msg-content pre code .token.inserted { color: #c3e88d; }

[b-8d9pxpk6hu] .msg-content pre code .token.number,
[b-8d9pxpk6hu] .msg-content pre code .token.symbol,
[b-8d9pxpk6hu] .msg-content pre code .token.entity,
[b-8d9pxpk6hu] .msg-content pre code .token.url { color: #f78c6c; }

[b-8d9pxpk6hu] .msg-content pre code .token.function,
[b-8d9pxpk6hu] .msg-content pre code .token.class-name,
[b-8d9pxpk6hu] .msg-content pre code .token.namespace { color: #ffcb6b; }

[b-8d9pxpk6hu] .msg-content pre code .token.operator,
[b-8d9pxpk6hu] .msg-content pre code .token.punctuation { color: #89ddff; }

[b-8d9pxpk6hu] .msg-content pre code .token.regex,
[b-8d9pxpk6hu] .msg-content pre code .token.important,
[b-8d9pxpk6hu] .msg-content pre code .token.variable { color: #ff5370; }

[b-8d9pxpk6hu] .msg-content pre code .token.tag,
[b-8d9pxpk6hu] .msg-content pre code .token.deleted { color: #f07178; }

[b-8d9pxpk6hu] .msg-content pre code .token.attr-name,
[b-8d9pxpk6hu] .msg-content pre code .token.property { color: #ffcb6b; }

[b-8d9pxpk6hu] .msg-content pre code .token.selector { color: #c792ea; }

/* Code block scrollbar */
[b-8d9pxpk6hu] .msg-content pre::-webkit-scrollbar {
    height: 6px;
}

[b-8d9pxpk6hu] .msg-content pre::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBorderInverted, #2D2D30);
}

[b-8d9pxpk6hu] .msg-content pre::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

/* Language label — small caps, BEC-tinted grey so it whispers brand */
[b-8d9pxpk6hu] .msg-content pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', sans-serif);
    font-size: 10px;
    font-weight: 600;
    color: #8a91c9;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    pointer-events: none;
}

/* When a code block has a language label, push it left so it doesn't overlap the copy button */
[b-8d9pxpk6hu] .msg-content pre[data-lang]::before {
    right: 40px;
}

/* ===== #9b Per-Block Copy Buttons (injected by JS) ===== */
[b-8d9pxpk6hu] .msg-content .block-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    z-index: 2;
    padding: 0;
}

[b-8d9pxpk6hu] .msg-content pre:hover .block-copy-btn,
[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper:hover .block-copy-btn {
    opacity: 1;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn.copied {
    color: #4ade80;
    opacity: 1;
}

/* Table copy button — light theme variant (tables have white/light background) */
[b-8d9pxpk6hu] .msg-content .block-copy-btn-table {
    background: rgba(0, 0, 0, 0.04);
    color: #999;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn-table:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn-table.copied {
    color: #16a34a;
}

/* ===== #9c Code Block Folding (collapse >400px, injected by JS) ===== */
/* Gradient fade overlay inside collapsed code block */
[b-8d9pxpk6hu] .msg-content .code-fold-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--BEC-colorNeutralBackgroundInverted, #1B1B1F));
    pointer-events: none;
    border-radius: 0 0 6px 6px;
}

/* Toggle button below the code block */
[b-8d9pxpk6hu] .msg-content .code-fold-toggle {
    display: block;
    width: 100%;
    padding: 8px;
    background: var(--BEC-colorNeutralBorderInverted, #2D2D30);
    border: none;
    border-radius: 0 0 6px 6px;
    color: #A0A0A0;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', sans-serif);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    margin-top: -6px;
    margin-bottom: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-8d9pxpk6hu] .msg-content .code-fold-toggle:hover {
    background: #3D3D40;
    color: #E0E0E0;
}

/* ===== #10 Inline Code — BEC-tinted chip =====
   Makes paths/identifiers/flags scannable without shouting. */
/* Inline code — NEUTRAL, not a branded blue pill. A normal markdown renderer shows inline
   code as subtle monospace, not blue text on a blue background. This keeps the agent's reply
   clean even when it wraps a term in backticks (no garish blue on every column/file name). */
[b-8d9pxpk6hu] .msg-content code {
    background: var(--BEC-colorNeutralBackground3, #f3f4f6);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'SF Mono', monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    word-break: break-word;
}

/* Reset for code inside pre */
[b-8d9pxpk6hu] .msg-content pre code {
    white-space: pre;
    word-break: normal;
}

/* ===== #11 Blockquotes — BEC navy accent rule + soft tinted background =====
   Parity with `.bec-document blockquote` in DocumentCSS. */
[b-8d9pxpk6hu] .msg-content blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    background: #f8f9fc;
    border-left: 3px solid #0a1f8f;
    border-radius: 0 6px 6px 0;
    color: #4a4a4a;
    font-size: 13.5px;
    font-style: normal;
}

[b-8d9pxpk6hu] .msg-content blockquote p {
    margin-bottom: 4px;
}

[b-8d9pxpk6hu] .msg-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Nested blockquotes */
[b-8d9pxpk6hu] .msg-content blockquote blockquote {
    margin: 8px 0;
    background: var(--BEC-colorNeutralBackground4, #ebebeb);
}

[b-8d9pxpk6hu] .msg-content blockquote blockquote blockquote {
    background: var(--BEC-colorNeutralBackground5, #e0e0e0);
}

/* ===== #11b GitHub-Flavored Alert Blocks (> [!NOTE], > [!WARNING], etc.) ===== */
/* Markdig AlertBlocks: <div class="markdown-alert markdown-alert-{type}"> */
/* Design: subtle, professional — muted backgrounds, thin left accent, no loud colors */
[b-8d9pxpk6hu] .msg-content .markdown-alert {
    margin: 14px 0;
    padding: 14px 18px;
    border-left: 3px solid;
    border-radius: 4px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-8d9pxpk6hu] .msg-content .markdown-alert p {
    margin-bottom: 6px;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert p:last-child {
    margin-bottom: 0;
}

/* Title row — icon + label */
[b-8d9pxpk6hu] .msg-content .markdown-alert-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Hide Markdig-generated SVG icons (stripped by sanitizer anyway, defense-in-depth) */
[b-8d9pxpk6hu] .msg-content .markdown-alert-title svg {
    display: none;
}

/* CSS-generated icons via ::before — works even after SVG sanitization */
[b-8d9pxpk6hu] .msg-content .markdown-alert-title::before {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── NOTE (BEC navy — brand-aligned info) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-note {
    border-left-color: #0a1f8f;
    background: #eef0ff;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-note .markdown-alert-title {
    color: #0a1f8f;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-note .markdown-alert-title::before {
    content: "ℹ";
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    color: #0a1f8f;
}

/* ── TIP (muted teal) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-tip {
    border-left-color: #0D9488;
    background: #F0FDFA;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-tip .markdown-alert-title {
    color: #0F766E;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-tip .markdown-alert-title::before {
    content: "💡";
}

/* ── IMPORTANT (muted indigo) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-important {
    border-left-color: #6366F1;
    background: #F5F3FF;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-important .markdown-alert-title {
    color: #4F46E5;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-important .markdown-alert-title::before {
    content: "📌";
}

/* ── WARNING (muted amber) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-warning {
    border-left-color: #D97706;
    background: #FFFBEB;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-warning .markdown-alert-title {
    color: #B45309;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-warning .markdown-alert-title::before {
    content: "⚠️";
}

/* ── CAUTION (muted rose) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-caution {
    border-left-color: #E11D48;
    background: #FFF1F2;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-caution .markdown-alert-title {
    color: #BE123C;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-caution .markdown-alert-title::before {
    content: "⛔";
}

/* ===== #11c Collapsible Details/Summary ===== */
/* Agent is instructed to use <details><summary>Title</summary>content</details> */
/* for long optional content. Style them as Fluent disclosure cards. */
[b-8d9pxpk6hu] .msg-content details {
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-8d9pxpk6hu] .msg-content details[open] {
    border-color: var(--BEC-colorNeutralBorder2, #D1D5DB);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[b-8d9pxpk6hu] .msg-content details summary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #374151);
    background: var(--BEC-colorNeutralBackground3, #F9FAFB);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
}

[b-8d9pxpk6hu] .msg-content details summary:hover {
    background: var(--BEC-colorNeutralBackground4, #F3F4F6);
}

[b-8d9pxpk6hu] .msg-content details summary::before {
    content: "▶";
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #9CA3AF);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

[b-8d9pxpk6hu] .msg-content details[open] > summary::before {
    transform: rotate(90deg);
}

/* Remove browser default marker */
[b-8d9pxpk6hu] .msg-content details summary::-webkit-details-marker {
    display: none;
}

/* Content inside details gets consistent padding */
[b-8d9pxpk6hu] .msg-content details > *:not(summary) {
    margin-left: 16px;
    margin-right: 16px;
}

[b-8d9pxpk6hu] .msg-content details > p:first-of-type {
    margin-top: 12px;
}

[b-8d9pxpk6hu] .msg-content details > *:last-child {
    margin-bottom: 12px;
}

/* Tables inside details — full width minus padding */
[b-8d9pxpk6hu] .msg-content details > .table-scroll-wrapper,
[b-8d9pxpk6hu] .msg-content details > table {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
}

/* ===== #12 Links — BEC navy with subtle underline (parity with DocumentCSS) ===== */
[b-8d9pxpk6hu] .msg-content a {
    color: #0a1f8f;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(10, 31, 143, 0.30);
    transition: border-color 0.15s ease, color 0.15s ease;
    word-break: break-word;
}

[b-8d9pxpk6hu] .msg-content a:hover {
    color: #0a1f8f;
    border-bottom-color: #0a1f8f;
}

[b-8d9pxpk6hu] .msg-content a:active {
    color: #061767;
}

/* ===== #12b Report Download Links (📄 file.docx) ===== */
[b-8d9pxpk6hu] .msg-content a.report-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 4px 0;
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-radius: 8px;
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: none;
    word-break: normal;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-8d9pxpk6hu] .msg-content a.report-download-link:hover {
    background: var(--BEC-colorNeutralBackground4, #EBEBEB);
    border-color: var(--BEC-colorBrandForeground1, #0F6CBD);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: var(--BEC-colorBrandForeground2, #115EA3);
    border-bottom: none;
}

[b-8d9pxpk6hu] .msg-content a.report-download-link:active {
    background: var(--BEC-colorNeutralBackground5, #E0E0E0);
}

/* ===== #13 Horizontal Rules — fade-edge gradient (BEC document divider) ===== */
[b-8d9pxpk6hu] .msg-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #d0d0d0 30%,
        #d0d0d0 70%,
        transparent 100%
    );
    margin: 28px 0;
}

/* ===== #14 Task Lists (checkboxes) ===== */
[b-8d9pxpk6hu] .msg-content ul:has(> li > input[type="checkbox"]) {
    list-style: none;
    padding-left: 4px;
}

[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    margin-bottom: 0;
}

[b-8d9pxpk6hu] .msg-content li > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--BEC-colorNeutralStroke1, #D1D1D1);
    border-radius: 4px;
    margin-top: 2px;
    cursor: default;
    position: relative;
    background: var(--BEC-colorNeutralBackground1, #FFFFFF);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

[b-8d9pxpk6hu] .msg-content li > input[type="checkbox"]:checked {
    background: #0a1f8f;
    border-color: #0a1f8f;
}

[b-8d9pxpk6hu] .msg-content li > input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Faded strikethrough on a checked task's text — the visual cue that says
   "done, archived in spirit, still here for the record." */
[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]:checked) {
    color: #6e6e73;
}
[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]:checked)::after {
    /* Use a wrapping pseudo so we don't strike through the checkbox itself */
}
[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]:checked) > *:not(input) {
    text-decoration: line-through;
    text-decoration-color: rgba(110, 110, 115, 0.4);
}

/* ===== #15 Strikethrough ===== */
[b-8d9pxpk6hu] .msg-content del,
[b-8d9pxpk6hu] .msg-content s {
    text-decoration: line-through;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-decoration-color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== #16 Highlighted Text (==highlight==) — amber underline effect ===== */
[b-8d9pxpk6hu] .msg-content mark {
    background: linear-gradient(transparent 60%, rgba(255, 159, 10, 0.32) 60%);
    color: inherit;
    padding: 0 2px;
    border-radius: 1px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ===== #17 Definition Lists ===== */
[b-8d9pxpk6hu] .msg-content dl {
    margin: 12px 0;
}

[b-8d9pxpk6hu] .msg-content dt {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin-top: 12px;
    font-size: 14px;
}

[b-8d9pxpk6hu] .msg-content dt:first-child {
    margin-top: 0;
}

[b-8d9pxpk6hu] .msg-content dd {
    margin: 4px 0 0 16px;
    margin-inline-start: 16px;
    padding-left: 12px;
    padding-inline-start: 12px;
    border-left: 2px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-inline-start: 2px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-inline-end: none;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ===== #18 Footnotes ===== */
[b-8d9pxpk6hu] .msg-content .footnote-ref a,
[b-8d9pxpk6hu] .msg-content sup a[href^="#fn"],
[b-8d9pxpk6hu] .msg-content a.footnote-ref {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    text-decoration: none;
    vertical-align: super;
    line-height: 0;
    padding: 0 2px;
}

[b-8d9pxpk6hu] .msg-content .footnotes,
[b-8d9pxpk6hu] .msg-content section.footnotes,
[b-8d9pxpk6hu] .msg-content div.footnotes {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    font-size: 12.5px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-8d9pxpk6hu] .msg-content .footnotes ol {
    padding-left: 20px;
    padding-inline-start: 20px;
}

[b-8d9pxpk6hu] .msg-content .footnotes li {
    margin-bottom: 4px;
}

[b-8d9pxpk6hu] .msg-content .footnotes li p {
    display: inline;
    margin: 0;
}

[b-8d9pxpk6hu] .msg-content .footnote-backref,
[b-8d9pxpk6hu] .msg-content a[href^="#fnref"],
[b-8d9pxpk6hu] .msg-content a.footnote-backref {
    text-decoration: none;
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    margin-left: 4px;
    margin-inline-start: 4px;
    font-size: 11px;
}

/* ===== #19 Images ===== */
[b-8d9pxpk6hu] .msg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    display: block;
}

[b-8d9pxpk6hu] .msg-content img + em,
[b-8d9pxpk6hu] .msg-content figure figcaption {
    display: block;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-align: center;
    margin-top: 4px;
    font-style: normal;
}

[b-8d9pxpk6hu] .msg-content figure {
    margin: 12px 0;
}

/* ===== #20 Subscript & Superscript ===== */
[b-8d9pxpk6hu] .msg-content sub {
    font-size: 0.75em;
    vertical-align: sub;
    line-height: 0;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-8d9pxpk6hu] .msg-content sup {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

/* ===== #23 Abbreviations (<abbr>) ===== */
[b-8d9pxpk6hu] .msg-content abbr,
[b-8d9pxpk6hu] .msg-content abbr[title] {
    text-decoration: underline dotted;
    text-decoration-color: var(--BEC-colorNeutralForeground3, #9e9e9e);
    text-underline-offset: 3px;
    cursor: help;
    font-variant: none;
}

[b-8d9pxpk6hu] .msg-content abbr[title]:hover {
    text-decoration-color: var(--BEC-colorBrandForeground1, #0F6CBD);
}

/* ===== #24 Emoji ===== */
[b-8d9pxpk6hu] .msg-content .emoji,
[b-8d9pxpk6hu] .msg-content img.emoji {
    height: 1.1em;
    width: 1.1em;
    vertical-align: -0.1em;
    display: inline;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* ===== #27 Keyboard Keys (<kbd>) ===== */
[b-8d9pxpk6hu] .msg-content kbd {
    display: inline-block;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 4px 8px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground2, #FAFAFA);
    border: 1px solid var(--BEC-colorNeutralStroke1, #D1D1D1);
    border-bottom-width: 2px;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    white-space: nowrap;
    vertical-align: baseline;
}

[b-8d9pxpk6hu] .msg-content kbd kbd {
    border: none;
    padding: 0;
    box-shadow: none;
    background: none;
    font-weight: 600;
    border-bottom-width: 0;
}

/* ===== #29 Long Unbroken Text (defensive) ===== */
[b-8d9pxpk6hu] .msg-content td,
[b-8d9pxpk6hu] .msg-content th {
    overflow-wrap: break-word;
    word-break: break-word;
}

[b-8d9pxpk6hu] .msg-content a[href*="://"] {
    word-break: break-all;
}

/* ===== #34 Details / Summary (collapsible) ===== */
[b-8d9pxpk6hu] .msg-content details {
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground2, #FAFAFA);
    overflow: hidden;
}

[b-8d9pxpk6hu] .msg-content details summary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s ease;
}

[b-8d9pxpk6hu] .msg-content details summary::-webkit-details-marker {
    display: none;
}

[b-8d9pxpk6hu] .msg-content details summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid var(--BEC-colorNeutralForeground3, #616161);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

[b-8d9pxpk6hu] .msg-content details[open] summary::before {
    transform: rotate(90deg);
}

[b-8d9pxpk6hu] .msg-content details summary:hover {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
}

[b-8d9pxpk6hu] .msg-content details > *:not(summary) {
    padding: 0 16px;
}

[b-8d9pxpk6hu] .msg-content details > *:not(summary):last-child {
    padding-bottom: 16px;
}

[b-8d9pxpk6hu] .msg-content details > p:first-of-type {
    padding-top: 4px;
}

/* ===== Defensive: Prevent layout-breaking overflow ===== */
[b-8d9pxpk6hu] .msg-content * {
    max-width: 100%;
}

[b-8d9pxpk6hu] .msg-content pre,
[b-8d9pxpk6hu] .msg-content pre code {
    max-width: none; /* Pre needs to scroll, not wrap */
}

/* Selection color */
[b-8d9pxpk6hu] .msg-content ::selection {
    background: #D0E5F7;
    color: var(--BEC-colorNeutralForeground1, #242424);
}


/* =============================================================================
   ATTACHMENT & UI COMPONENTS (non-markdown)
   ============================================================================= */

/* ===== Attachment Container — positioned ABOVE bubble, max 2 rows ===== */
.msg-attachments[b-8d9pxpk6hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    max-height: 256px;
    overflow: hidden;
}

/* ===== Square Attachment Card (bubble variant — no status strip) ===== */
.msg-attachments .att-card[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 1.5px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.msg-attachments .att-card:hover[b-8d9pxpk6hu] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

/* Card body: file name + size centered */
.msg-attachments .att-card-body[b-8d9pxpk6hu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}

.msg-attachments .att-card-name[b-8d9pxpk6hu] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    line-height: 1.3;
}

.msg-attachments .att-card-size[b-8d9pxpk6hu] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    margin-top: 2px;
    display: block;
}

/* Image thumbnail inside card */
.msg-attachments .att-card-thumb[b-8d9pxpk6hu] {
    padding: 4px;
}

.msg-attachments .att-card-thumb-img[b-8d9pxpk6hu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* "+N more" dashed pill */
.att-more-pill[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 1.5px dashed var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: #fafafa;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 12px;
    font-weight: 600;
    cursor: default;
    flex-shrink: 0;
}

/* ===== Message Actions (Copy, etc.) — icon-only, no border ===== */
.message-actions[b-8d9pxpk6hu] {
    display: flex;
    gap: 2px;
    margin-top: 6px;
}

    /* ===== Inline Edit Area (user messages) ===== */
    .msg-edit-area[b-8d9pxpk6hu] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 2px;
    }

    .msg-edit-textarea[b-8d9pxpk6hu] {
        width: 100%;
        min-width: 300px;
        max-width: 640px;
        padding: 8px 12px;
        border-radius: 8px;
        border: 1.5px solid var(--BEC-colorBrandStroke1, #0078d4);
        background: var(--BEC-colorNeutralBackground1, #ffffff);
        font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif);
        font-size: 14px;
        line-height: 1.5;
        color: var(--BEC-colorNeutralForeground1, #242424);
        resize: vertical;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
        box-sizing: border-box;
    }

    .msg-edit-textarea:focus[b-8d9pxpk6hu] {
        border-color: var(--BEC-colorBrandStroke1, #0078d4);
        box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.18);
    }

    .msg-edit-actions[b-8d9pxpk6hu] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .msg-edit-confirm[b-8d9pxpk6hu] {
        padding: 5px 16px;
        border-radius: 6px;
        border: none;
        background: var(--BEC-colorBrandBackground1, #0078d4);
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.12s ease;
    }

    .msg-edit-confirm:hover:not(:disabled)[b-8d9pxpk6hu] {
        background: var(--BEC-colorBrandBackground1Hover, #106ebe);
    }

    .msg-edit-confirm:disabled[b-8d9pxpk6hu] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .msg-edit-cancel[b-8d9pxpk6hu] {
        padding: 5px 14px;
        border-radius: 6px;
        border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
        background: transparent;
        color: var(--BEC-colorNeutralForeground1, #242424);
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.12s ease, border-color 0.12s ease;
    }

    .msg-edit-cancel:hover[b-8d9pxpk6hu] {
        background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
        border-color: var(--BEC-colorNeutralStroke1Hover, #b3b3b3);
    }

.msg-action-btn[b-8d9pxpk6hu] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    transition: color 0.12s ease, background 0.12s ease;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
}

.msg-action-btn:hover[b-8d9pxpk6hu] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.msg-action-btn i[b-8d9pxpk6hu] {
    font-size: 13px;
}

/* Container */
.utl[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 13px;
    line-height: 1.35;
}/* Response segment inside unified timeline */
[b-8d9pxpk6hu] .utl .msg-content {
    padding-top: 2px;
    line-height: 1.5;
}

@keyframes utl-fadeIn-b-8d9pxpk6hu {
    from { opacity: 0; }
    to { opacity: 1; }
}/* Interrupted turn indicator — shown when a streaming response was cut short by disconnect */
.msg-interrupted[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: var(--BEC-colorPaletteYellowBackground1, #fff9e6);
    border: 1px solid var(--BEC-colorPaletteYellowBorderActive, #e8b400);
    font-size: 12px;
    color: var(--BEC-colorPaletteYellowForeground2, #7d5a00);
}

.msg-interrupted-icon[b-8d9pxpk6hu] {
    font-size: 12px;
    color: var(--BEC-colorPaletteYellowForeground2, #7d5a00);
}

/* User-initiated stop — neutral grey instead of warning yellow */
.msg-interrupted.msg-stopped[b-8d9pxpk6hu] {
    background-color: var(--BEC-colorNeutralBackground3, #f0f0f0);
    border-color: var(--BEC-colorNeutralStroke2, #d1d1d1);
    color: var(--BEC-colorNeutralForeground2, #616161);
}

.msg-interrupted.msg-stopped .msg-interrupted-icon[b-8d9pxpk6hu] {
    color: var(--BEC-colorNeutralForeground2, #616161);
}

/* ===== Trace ID Badge ===== */
.bec-trace-badge[b-8d9pxpk6hu] {
    font-family: var(--bec-font-mono, 'Cascadia Code', monospace);
    font-size: 0.72rem;
    color: var(--BEC-TextSecondary, #666);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.bec-trace-badge:hover[b-8d9pxpk6hu] {
    opacity: 1;
    text-decoration: underline;
}

/* =============================================================================
   GEMINI-STYLE CONTENT RENDERING ENHANCEMENTS
   =============================================================================
   Animated reveal for assistant content blocks, improved visual hierarchy
   for streamed markdown content, and polished section transitions.
   ============================================================================= */

/* Animated reveal for each block-level element inside assistant messages */
[b-8d9pxpk6hu] .msg-assistant .msg-content > p,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h1,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h2,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h3,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h4,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h5,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h6,
[b-8d9pxpk6hu] .msg-assistant .msg-content > ul,
[b-8d9pxpk6hu] .msg-assistant .msg-content > ol,
[b-8d9pxpk6hu] .msg-assistant .msg-content > blockquote,
[b-8d9pxpk6hu] .msg-assistant .msg-content > table,
[b-8d9pxpk6hu] .msg-assistant .msg-content > pre,
[b-8d9pxpk6hu] .msg-assistant .msg-content > hr,
[b-8d9pxpk6hu] .msg-assistant .msg-content > details {
    animation: contentReveal-b-8d9pxpk6hu 0.3s ease-out both;
}

@keyframes contentReveal-b-8d9pxpk6hu {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation delay for sequential blocks (first 8 visible) */
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(1) { animation-delay: 0s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(2) { animation-delay: 0.04s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(3) { animation-delay: 0.08s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(4) { animation-delay: 0.12s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(5) { animation-delay: 0.16s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(6) { animation-delay: 0.2s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(7) { animation-delay: 0.24s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(8) { animation-delay: 0.28s; }

/* Subtle left accent for the entire assistant content area — removed in Phase 3.5 (borderless agent) */
.msg-assistant .msg-body[b-8d9pxpk6hu] {
    padding-left: 0;
}

/* Enhanced blockquote callout — Gemini-style info/warning boxes */
[b-8d9pxpk6hu] .msg-content blockquote p:first-child strong {
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* =============================================================================
   #35 SEMANTIC COLOR CLASSES — Status Indicators & Value Colors
   =============================================================================
   Usage: LLM outputs <span class="text-good">Good</span> in table cells.
   Allowed by HtmlSanitizer (class attribute on span is whitelisted).
   ============================================================================= */

/* Positive / healthy / on-target */
[b-8d9pxpk6hu] .msg-content .text-good {
    color: #16643a;
    font-weight: 600;
}

/* Moderate / needs attention but not critical */
[b-8d9pxpk6hu] .msg-content .text-moderate {
    color: #7c6a0a;
    font-weight: 500;
}

/* Warning / approaching threshold / attention needed */
[b-8d9pxpk6hu] .msg-content .text-warning {
    color: #b45309;
    font-weight: 600;
}

/* Critical / failure / urgent action required */
[b-8d9pxpk6hu] .msg-content .text-critical {
    color: #be123c;
    font-weight: 600;
}

/* Dead / inactive / zero movement */
[b-8d9pxpk6hu] .msg-content .text-dead {
    color: #991b1b;
    font-weight: 600;
}

/* Muted / secondary / de-emphasized context */
[b-8d9pxpk6hu] .msg-content .text-muted {
    color: #6b7280;
    font-weight: 400;
}

/* Informational / neutral highlight */
[b-8d9pxpk6hu] .msg-content .text-info {
    color: #1d4ed8;
    font-weight: 500;
}

/* Trend indicators — subtle, no excessive weight */
[b-8d9pxpk6hu] .msg-content .text-up {
    color: #16643a;
}

[b-8d9pxpk6hu] .msg-content .text-down {
    color: #be123c;
}

[b-8d9pxpk6hu] .msg-content .text-flat {
    color: #6b7280;
}

/* =============================================================================
   #36 KPI CHIPS — Compact inline metric badges
   =============================================================================
   Usage: <span class="kpi-chip">Turnover <strong>4.2x</strong></span>
          <span class="kpi-chip kpi-good">On Hand <strong>47 days</strong></span>
   ============================================================================= */

[b-8d9pxpk6hu] .msg-content .kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    background: #F3F4F6;
    color: #374151;
    border: 1px solid #E5E7EB;
    white-space: nowrap;
    margin: 2px 4px 2px 0;
}

[b-8d9pxpk6hu] .msg-content .kpi-chip strong {
    font-weight: 700;
    color: #111827;
}

[b-8d9pxpk6hu] .msg-content .kpi-good {
    background: #ECFDF5;
    color: #065F46;
    border-color: #A7F3D0;
}
[b-8d9pxpk6hu] .msg-content .kpi-good strong { color: #065F46; }

[b-8d9pxpk6hu] .msg-content .kpi-warning {
    background: #FFFBEB;
    color: #92400E;
    border-color: #FDE68A;
}
[b-8d9pxpk6hu] .msg-content .kpi-warning strong { color: #92400E; }

[b-8d9pxpk6hu] .msg-content .kpi-critical {
    background: #FFF1F2;
    color: #9F1239;
    border-color: #FECDD3;
}
[b-8d9pxpk6hu] .msg-content .kpi-critical strong { color: #9F1239; }

[b-8d9pxpk6hu] .msg-content .kpi-info {
    background: #EFF6FF;
    color: #1E40AF;
    border-color: #BFDBFE;
}
[b-8d9pxpk6hu] .msg-content .kpi-info strong { color: #1E40AF; }

/* =============================================================================
   #37 MINI PROGRESS BARS — Inline percentage visualization
   =============================================================================
   Usage: <span class="progress-bar" data-value="62">62%</span>
   JS injects the width via inline style on a child element.
   ============================================================================= */

[b-8d9pxpk6hu] .msg-content .progress-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    vertical-align: middle;
}

[b-8d9pxpk6hu] .msg-content .progress-bar .progress-track {
    flex: 1;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Color thresholds applied by JS based on data-value */
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-good    { background: #16a34a; }
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-moderate { background: #ca8a04; }
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-warning  { background: #ea580c; }
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-critical { background: #dc2626; }

/* =============================================================================
   #39 MERMAID DIAGRAMS — Rendered from ```mermaid code blocks
   ============================================================================= */

[b-8d9pxpk6hu] .msg-content .mermaid-container {
    margin: 12px 0;
    padding: 16px;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    overflow-x: auto;
    text-align: center;
}

[b-8d9pxpk6hu] .msg-content .mermaid-container svg {
    max-width: 100%;
    height: auto;
}

[b-8d9pxpk6hu] .msg-content .mermaid-error {
    color: #DC2626;
    font-size: 12px;
    padding: 8px;
    background: #FEF2F2;
    border-radius: 4px;
    text-align: left;
}

/* =============================================================================
   #40 PRINT STYLES — Clean output for reporting
   ============================================================================= */

@media print {
    [b-8d9pxpk6hu] .msg-content .block-copy-btn,
    .message-actions[b-8d9pxpk6hu] {
        display: none !important;
    }

    [b-8d9pxpk6hu] .msg-content pre {
        background: #f5f5f5 !important;
        color: #1a1a1a !important;
        border-color: #ddd !important;
        box-shadow: none !important;
    }

    [b-8d9pxpk6hu] .msg-content .mermaid-container {
        break-inside: avoid;
    }

    [b-8d9pxpk6hu] .msg-content table {
        break-inside: avoid;
    }
}

/* ===== F2: Stream Metadata Footer ===== */
.message-meta-footer[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.message-meta-footer__sep[b-8d9pxpk6hu] {
    color: var(--BEC-colorNeutralStroke1, #c8c6c4);
    padding: 0 1px;
}

.message-meta-footer__item[b-8d9pxpk6hu] {
    white-space: nowrap;
}

/* ===== Streaming bubble heartbeat (§3.5.4) ===== */

.bec-stream-host[b-8d9pxpk6hu] {
    display: inline; /* keeps heartbeat flush with last paragraph */
}

.bec-bubble-heartbeat[b-8d9pxpk6hu] {
    /* Override the 14px default from the compact-row heartbeat */
    width: 12px;
    height: 12px;
    border-width: 1.5px;
    margin-left: 6px;
    vertical-align: baseline;
}

/* Block-level fade-in for newly arrived streaming content */
.bec-stream-content > .bec-just-arrived[b-8d9pxpk6hu] {
    /* P9-S (2026-05-21): 150ms → 280ms for a softer entrance. */
    animation: bec-fade-in-b-8d9pxpk6hu 280ms ease-out;
}

@keyframes bec-fade-in-b-8d9pxpk6hu {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bec-stream-content > .bec-just-arrived[b-8d9pxpk6hu] {
        animation: none;
    }
}

/* Thinking-dots indicator — shown in empty streaming bubble until first chunk */
.bec-thinking-dots[b-8d9pxpk6hu] {
    display: inline-flex;
    gap: 4px;
    padding: 6px 0;
    align-items: center;
}

/* P9-S (2026-05-21) — animation killed. The three pulsing thinking-dots
   competed with the streaming-paragraph shimmer for the user's eye while
   the agent was warming up. Dots remain in the markup as a static cluster
   for the brief pre-content moment, but no longer animate. The shimmer on
   the first real paragraph is the sole "I'm working" indicator. */
.bec-thinking-dots > span[b-8d9pxpk6hu] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bec-text-muted, #9ca3af);
    opacity: 0.5;
}

/* ===== In-Bubble Artifact Preview Cards (Phase 3.3) ===== */

.bec-attached-artifacts[b-8d9pxpk6hu] {
    margin: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bec-artifact-card[b-8d9pxpk6hu] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e5e7eb);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    font-family: inherit;
    text-align: left;
    max-width: 480px;
    width: max-content;
}

.bec-artifact-card:hover[b-8d9pxpk6hu] {
    background: #fafafa;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bec-artifact-icon[b-8d9pxpk6hu] {
    font-size: 1.25rem;
    color: var(--BEC-colorBrandForeground1, #3b82f6);
    flex-shrink: 0;
}

.bec-artifact-meta[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bec-artifact-title[b-8d9pxpk6hu] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bec-artifact-sub[b-8d9pxpk6hu] {
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground2, #6e6e73);
}

.bec-artifact-open[b-8d9pxpk6hu] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bec-artifact-card[b-8d9pxpk6hu] { transition: none; }
    .bec-artifact-card:hover[b-8d9pxpk6hu] { transform: none; }
}


/* ============================================================================
   P9-H — Streaming UIUX polish (agent's voice as the entire UX surface)
   ============================================================================
   - Warmup placeholder: shown until first ResponseDelta arrives. Soft pulse
     dot + "Working…" label. Honest, no fake narration.
   - Text breathing: while the agent is streaming text, the message body
     subtly pulses opacity so the user feels "live, still going" rather than
     a frozen-looking bubble. CSS animation only, no JS heartbeat needed.
   - Done state: once streaming completes, breathing animation stops and
     the message takes its final, full-opacity look.
   ============================================================================ */

/* Per-message elapsed counter (M:SS). Neutral, no words, no animation.
   Sits next to the message timestamp in the header. Counts live while the
   agent is streaming; freezes at final duration when streaming completes.
   No pulse, no cursor — the agent's text itself is the only "alive" signal,
   and the breathing animation below conveys "still talking" between beats. */
.msg-elapsed[b-8d9pxpk6hu] {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
    font-variant-numeric: tabular-nums;
}

/* Text breathing — applies while the message is streaming.
   The whole content body slowly cycles between 0.78 and 1.0 opacity so the
   user perceives a gentle "alive, talking" rhythm even between paragraphs. */
.bec-msg-breathing[b-8d9pxpk6hu] {
    animation: bec-msg-breathe-b-8d9pxpk6hu 2.2s ease-in-out infinite;
}

@keyframes bec-msg-breathe-b-8d9pxpk6hu {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1.00; }
}

.bec-msg-done[b-8d9pxpk6hu] {
    /* No animation — clean, full opacity. The bubble's final state. */
    opacity: 1;
    animation: none;
}

/* ===== Live narration fade-in (used by .bec-live-narration) ===== */
@keyframes bec-narration-fadein-b-8d9pxpk6hu {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== THE single live narration line — one line of text, updates in place ===== */
[b-8d9pxpk6hu] .bec-live-narration {
    margin: 0 0 6px 0;
    animation: bec-narration-fadein-b-8d9pxpk6hu 0.25s ease-out;
}

[b-8d9pxpk6hu] .bec-live-narration__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--BEC-colorNeutralForeground2, #6b7280);
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: opacity 0.2s ease;
}

/* ===== Activity row — dots + live timer, ALWAYS on its own line below the content ===== */
[b-8d9pxpk6hu] .bec-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
    [b-8d9pxpk6hu] .bec-live-narration { animation: none; }
}

/* Suppress the whole-bubble breathing while streaming — the per-paragraph
   active indicator is now the SOLE "alive" signal. Whole-bubble pulse
   stacked on top of the active ellipsis felt noisy in testing. */
.bec-msg-breathing.msg-streaming[b-8d9pxpk6hu] {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .bec-msg-breathing[b-8d9pxpk6hu] { animation: none; }
    .bec-msg-warmup__pulse[b-8d9pxpk6hu] { animation: none; opacity: 0.7; }
}

/* ===== U-019: Mid-stream skeleton placeholder =====
   Shown while a code fence or table is still being streamed (open but not
   yet closed). Mirrors bec-pause-indicator aesthetic — subtle gray, pulse
   animation, monospace. Disappears when the fence/table closes and the
   real Markdig-rendered block swaps in via finalizeStream. */
[b-8d9pxpk6hu] .bec-stream-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    font-family: var(--BEC-fontFamilyMonospace, 'Cascadia Code', 'Fira Code', monospace);
    font-size: 0.82em;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
}
[b-8d9pxpk6hu] .bec-stream-skeleton__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralForeground3, #9ca3af);
    animation: bec-skeleton-pulse-b-8d9pxpk6hu 1.4s ease-in-out infinite;
}
[b-8d9pxpk6hu] .bec-stream-skeleton__text {
    flex: 1;
}

@keyframes bec-skeleton-pulse-b-8d9pxpk6hu {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 0.8; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    [b-8d9pxpk6hu] .bec-stream-skeleton__pulse { animation: none; opacity: 0.5; }
}

/* ─────────────────────────────────────────────────────────────────────
   U3 (2026-05-29) — DocumentReply citation styling.
   Citations like [page 14 §11.3], [rows 47, 102], [image] are wrapped
   in <span class="msg-citation"> by MarkdownHelper.ToHtml. The styling
   here makes them visually distinct as references vs free-form text in
   square brackets (importance markers [Critical]/[High] stay plain).
   Click behavior is intentionally not bound here — full doc-viewer-with-
   anchors is a follow-up; today's value is visual identification +
   hover affordance signaling these are addressable references.
   ───────────────────────────────────────────────────────────────────── */
[b-8d9pxpk6hu] .msg-content .msg-citation {
    color: var(--BEC-colorBrandForeground1, #2563eb);
    background-color: rgba(37, 99, 235, 0.06);
    border-bottom: 1px dotted currentColor;
    padding: 0 2px;
    border-radius: 2px;
    cursor: help;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-variant-numeric: tabular-nums;
}
[b-8d9pxpk6hu] .msg-content .msg-citation:hover {
    background-color: rgba(37, 99, 235, 0.14);
    color: var(--BEC-colorBrandForeground2, #1d4ed8);
}
@media (prefers-color-scheme: dark) {
    [b-8d9pxpk6hu] .msg-content .msg-citation {
        color: var(--BEC-colorBrandForeground1, #60a5fa);
        background-color: rgba(96, 165, 250, 0.10);
    }
    [b-8d9pxpk6hu] .msg-content .msg-citation:hover {
        background-color: rgba(96, 165, 250, 0.18);
    }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/SessionPreviewPopover.razor.rz.scp.css */
/* =============================================================================
   SessionPreviewPopover.razor.css — matches SessionSidebar's BEC palette
   ==============================================================================
   The popover renders in a fixed-position root outside the sidebar's scope,
   so the BEC tokens are redeclared here (they don't cascade through fixed
   positioning + Blazor CSS isolation). Source-of-truth values mirror
   SessionSidebar.razor.css.
   ============================================================================== */

.session-preview-popover[b-q4s0hiemc6] {
    /* Re-declared design tokens (kept in lockstep with SessionSidebar.razor.css) */
    --primary: #0078d4;
    --primary-light: #e8f4fd;
    --text: #1d1d1f;
    --text-muted: #6e6e73;
    --text-faint: #a19f9d;
    --border: #e1dfdd;
    --bg-hover: #f3f2f1;
    --bg-card: #fff;
    --radius-sm: 10px;
    --shadow-popover: 0 4px 16px rgba(0, 0, 0, .08);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

    position: fixed;
    z-index: 9999;
    width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    box-shadow: var(--shadow-popover);
    font-family: var(--font);
    color: var(--text);
    pointer-events: auto;
    animation: popover-fade-in-b-q4s0hiemc6 120ms ease-out;
}

/* ===== Left-edge anchor arrow ===== */
/* Two pseudo-elements layered: outer triangle = border colour, inner triangle = card background.
   Positioned 14px from the top so it points at the centre of a ~38px row. */

.session-preview-popover[b-q4s0hiemc6]::before,
.session-preview-popover[b-q4s0hiemc6]::after {
    content: '';
    position: absolute;
    top: 14px;
    width: 0;
    height: 0;
    border-style: solid;
}

.session-preview-popover[b-q4s0hiemc6]::before {
    /* Border-coloured outer triangle */
    left: -8px;
    border-width: 7px 8px 7px 0;
    border-color: transparent var(--border) transparent transparent;
}

.session-preview-popover[b-q4s0hiemc6]::after {
    /* Card-coloured inner triangle, offset 1px to leave the border visible */
    left: -7px;
    border-width: 7px 8px 7px 0;
    border-color: transparent var(--bg-card) transparent transparent;
}

@keyframes popover-fade-in-b-q4s0hiemc6 {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ===== Scrollbar (matches sidebar) ===== */
.session-preview-popover[b-q4s0hiemc6]::-webkit-scrollbar {
    width: 4px;
}

.session-preview-popover[b-q4s0hiemc6]::-webkit-scrollbar-track {
    background: transparent;
}

.session-preview-popover[b-q4s0hiemc6]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ===== Header ===== */
.preview-header[b-q4s0hiemc6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.preview-title[b-q4s0hiemc6] {
    flex: 1;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-pill[b-q4s0hiemc6] {
    font-size: .6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.pill-streaming[b-q4s0hiemc6] {
    background: #dbeafe;
    color: #1e40af;
}

.pill-hitl[b-q4s0hiemc6] {
    background: #fef3c7;
    color: #92400e;
}

/* ===== Meta line ===== */
.preview-meta[b-q4s0hiemc6] {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .65rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

/* ===== Message list ===== */
.preview-messages[b-q4s0hiemc6] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-msg[b-q4s0hiemc6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .75rem;
    line-height: 1.45;
}

.msg-role[b-q4s0hiemc6] {
    flex-shrink: 0;
    min-width: 52px;
    font-size: .62rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    padding-top: 1px;
}

.preview-msg-assistant .msg-role[b-q4s0hiemc6] {
    color: var(--primary);
}

.msg-content[b-q4s0hiemc6] {
    color: var(--text);
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.msg-badge[b-q4s0hiemc6] {
    font-size: .7rem;
    flex-shrink: 0;
    opacity: .7;
}

/* ===== Empty state ===== */
.preview-empty[b-q4s0hiemc6] {
    font-size: .75rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    text-align: center;
    padding: 12px 0;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/SessionSidebar.razor.rz.scp.css */
/* =============================================================================
   SessionSidebar.razor.css — Sidebar styles (BEC Design System)
   ============================================================================== */

/* ----- Rename modal (plain HTML, no Syncfusion) ----- */
.agent-rename-backdrop[b-mofglmmd1w] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9000;
    animation: agent-rename-fade-in-b-mofglmmd1w 0.12s ease-out;
}
.agent-rename-dialog[b-mofglmmd1w] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    animation: agent-rename-rise-b-mofglmmd1w 0.14s ease-out;
}
.agent-rename-header[b-mofglmmd1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 8px;
    border-bottom: 1px solid #eee;
}
.agent-rename-header h3[b-mofglmmd1w] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}
.agent-rename-close[b-mofglmmd1w] {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #86868b;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
}
.agent-rename-close:hover[b-mofglmmd1w] {
    background: #f3f3f3;
    color: #1d1d1f;
}
.agent-rename-body[b-mofglmmd1w] {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agent-rename-body .bec-rename-label[b-mofglmmd1w] {
    font-size: 12px;
    color: #6e6e73;
    font-weight: 500;
}
.agent-rename-body .bec-rename-input[b-mofglmmd1w] {
    padding: 8px 10px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
}
.agent-rename-body .bec-rename-input:focus[b-mofglmmd1w] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
}
.agent-rename-dialog .bec-rename-footer[b-mofglmmd1w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px 14px;
    border-top: 1px solid #f3f3f3;
}
.agent-rename-dialog .bec-btn-cancel[b-mofglmmd1w],
.agent-rename-dialog .bec-btn-save[b-mofglmmd1w] {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.agent-rename-dialog .bec-btn-cancel[b-mofglmmd1w] {
    background: #fff;
    border-color: #d2d2d7;
    color: #1d1d1f;
}
.agent-rename-dialog .bec-btn-cancel:hover[b-mofglmmd1w] {
    background: #f5f5f7;
}
.agent-rename-dialog .bec-btn-save[b-mofglmmd1w] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #fff;
}
.agent-rename-dialog .bec-btn-save:hover:not(:disabled)[b-mofglmmd1w] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
}
.agent-rename-dialog .bec-btn-save:disabled[b-mofglmmd1w] {
    opacity: 0.5;
    cursor: not-allowed;
}
@keyframes agent-rename-fade-in-b-mofglmmd1w {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes agent-rename-rise-b-mofglmmd1w {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Delete-in-flight visual — the row dims and "Deleting…" replaces the time. */
[b-mofglmmd1w] .bec-session-deleting {
    opacity: 0.55;
    pointer-events: none;
}
[b-mofglmmd1w] .bec-session-deleting-label {
    font-style: italic;
    color: var(--BEC-colorErrorForeground1, #b3261e);
    animation: bec-session-deleting-pulse-b-mofglmmd1w 1.2s ease-in-out infinite;
}
@keyframes bec-session-deleting-pulse-b-mofglmmd1w {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
[b-mofglmmd1w] .session-preview-popover-failed {
    color: #b91c1c;
    background: #fff5f5;
    border-color: #fecaca;
}

/* ===== CSS Variables (scoped to sidebar) ===== */
.bec-sidebar[b-mofglmmd1w] {
    --primary: #0078d4;
    --primary-light: #e8f4fd;
    --text: #1d1d1f;
    --text-muted: #6e6e73;
    --text-faint: #a19f9d;
    --border: #e1dfdd;
    --bg-hover: #f3f2f1;
    --bg-card: #fff;
    --bg-chip: #f3f4f6;
    --radius: 12px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-popover: 0 4px 16px rgba(0, 0, 0, .08);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, .1);
    --danger: #a80000;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

/* ===== Sidebar Container ===== */
.bec-sidebar[b-mofglmmd1w] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    overflow: hidden;
    font-family: var(--font);
}

/* ===== Header ===== */
.bec-sidebar-header[b-mofglmmd1w] {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* New Chat button — primary blue override */
.bec-btn-new-chat[b-mofglmmd1w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 5px 12px;
    font-size: .72rem;
    font-weight: 500;
    font-family: var(--font);
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
    user-select: none;
}

.bec-btn-new-chat:hover[b-mofglmmd1w] {
    background: #006cbe;
}

.bec-btn-new-chat i[b-mofglmmd1w] {
    font-size: .7rem;
}

/* ===== Search ===== */
.bec-search-wrap[b-mofglmmd1w] {
    padding: 6px 12px;
    flex-shrink: 0;
}

.bec-search-inner[b-mofglmmd1w] {
    position: relative;
}

.bec-search-bar[b-mofglmmd1w] {
    width: 100%;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 0 12px;
    font-size: .85rem;
    font-family: var(--font);
    outline: none;
    transition: border-color .15s;
    background: var(--bg-card);
    box-sizing: border-box;
}

.bec-search-bar:focus[b-mofglmmd1w] {
    border-color: var(--primary);
}

.bec-search-bar[b-mofglmmd1w]::placeholder {
    color: var(--text-faint);
}

.bec-search-hint[b-mofglmmd1w] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    color: var(--text-faint);
    background: var(--bg-chip);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

/* ===== Apple Segmented Control ===== */
.bec-segmented-control[b-mofglmmd1w] {
    display: flex;
    margin: 8px 12px 0;
    padding: 2px;
    background: #ebebeb;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.bec-segmented-control[b-mofglmmd1w]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc((100% - 4px) / 3);
    height: calc(100% - 4px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
}

.bec-segmented-control[data-active="1"][b-mofglmmd1w]::before {
    transform: translateX(100%);
}

.bec-segmented-control[data-active="2"][b-mofglmmd1w]::before {
    transform: translateX(200%);
}

.bec-seg-btn[b-mofglmmd1w] {
    flex: 1;
    padding: 5px 0;
    font-size: .72rem;
    font-weight: 500;
    font-family: var(--font);
    text-align: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    transition: color .2s;
    border-radius: 6px;
    user-select: none;
}

.bec-seg-btn.active[b-mofglmmd1w] {
    color: var(--text);
    font-weight: 600;
}

.bec-seg-btn:hover:not(.active)[b-mofglmmd1w] {
    color: var(--text);
}

/* ===== Session Count ===== */
.bec-session-count[b-mofglmmd1w] {
    text-align: center;
    font-size: .7rem;
    color: var(--text-faint);
    padding: 6px 0 2px;
    flex-shrink: 0;
}

/* ===== Session List ===== */
.bec-session-list[b-mofglmmd1w] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    position: relative;
}

.bec-session-list[b-mofglmmd1w]::-webkit-scrollbar {
    width: 4px;
}

.bec-session-list[b-mofglmmd1w]::-webkit-scrollbar-track {
    background: transparent;
}

.bec-session-list[b-mofglmmd1w]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ===== Date Group ===== */
.bec-date-group[b-mofglmmd1w] {
    padding: 0 12px;
}

.bec-date-label[b-mofglmmd1w] {
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-faint);
    padding: 10px 4px 4px;
}

/* ===== Session Row (38px, standard) — rendered by SessionRow.razor, needs ::deep ===== */
[b-mofglmmd1w] .bec-session-row {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    margin: 1px 4px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}

[b-mofglmmd1w] .bec-session-row:hover {
    background: var(--bg-hover);
}

/* ===== Active Row ===== */
[b-mofglmmd1w] .bec-session-row.bec-active-row {
    background: var(--primary-light);
}

[b-mofglmmd1w] .bec-session-row.bec-active-row .bec-session-actions {
    background: linear-gradient(to right, transparent 0%, var(--primary-light) 30%);
}

[b-mofglmmd1w] .bec-session-row:hover .bec-session-actions {
    background: linear-gradient(to right, transparent 0%, var(--bg-hover) 30%);
}

[b-mofglmmd1w] .bec-session-row.bec-active-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--primary);
    border-radius: 1px;
}

/* ===== Session Name (used in SessionRow + pinned row directly) ===== */
[b-mofglmmd1w] .bec-session-name {
    flex: 1;
    font-size: .78rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ===== Metadata Indicators ===== */
[b-mofglmmd1w] .bec-session-indicators {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 6px;
    margin-right: 6px;
}

[b-mofglmmd1w] .bec-session-indicators i {
    font-size: .55rem;
    color: var(--text-faint);
}

/* ===== Time ===== */
[b-mofglmmd1w] .bec-session-time {
    font-size: .65rem;
    color: var(--text-faint);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Pin Icon ===== */
[b-mofglmmd1w] .bec-session-pin {
    font-size: .55rem;
    color: #d97706;
    margin-right: 6px;
    flex-shrink: 0;
}

[b-mofglmmd1w] .bec-pin-active {
    color: var(--primary);
}

/* ===== Kebab Actions (used in SessionRow + pinned row directly) ===== */
[b-mofglmmd1w] .bec-session-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-right: 8px;
    padding-left: 6px;
    background: linear-gradient(to right, transparent 0%, var(--bg-card) 30%);
    opacity: 0;
    transition: opacity .15s;
}

[b-mofglmmd1w] .bec-session-row:hover .bec-session-actions,
[b-mofglmmd1w] .bec-session-row.menu-open .bec-session-actions,
.bec-pinned-row:hover[b-mofglmmd1w]  .bec-session-actions,
.bec-pinned-row.menu-open[b-mofglmmd1w]  .bec-session-actions {
    opacity: 1;
}

/* Hide time text when kebab is visible to prevent overlap */
[b-mofglmmd1w] .bec-session-row:hover .bec-session-time,
[b-mofglmmd1w] .bec-session-row.menu-open .bec-session-time {
    visibility: hidden;
}

[b-mofglmmd1w] .bec-btn-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: .7rem;
    transition: background .15s;
}

[b-mofglmmd1w] .bec-btn-icon:hover {
    background: var(--bg-hover);
}

/* ===== Dropdown Menu ===== */
[b-mofglmmd1w] .bec-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    z-index: 200;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
    padding: 4px 0;
}

[b-mofglmmd1w] .bec-dropdown-menu.open {
    opacity: 1;
    transform: translateY(2px);
    pointer-events: auto;
}

[b-mofglmmd1w] .bec-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: .75rem;
    font-family: var(--font);
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

[b-mofglmmd1w] .bec-dropdown-item:hover {
    background: var(--bg-hover);
}

[b-mofglmmd1w] .bec-dropdown-item i {
    width: 14px;
    text-align: center;
    font-size: .7rem;
    color: var(--text-muted);
}

[b-mofglmmd1w] .bec-dropdown-danger {
    color: var(--danger);
}

[b-mofglmmd1w] .bec-dropdown-danger i {
    color: var(--danger);
}

[b-mofglmmd1w] .bec-dropdown-primary {
    color: var(--primary);
}

[b-mofglmmd1w] .bec-dropdown-primary i {
    color: var(--primary);
}

[b-mofglmmd1w] .bec-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ===== Delete Confirmation (inline in dropdown) ===== */
[b-mofglmmd1w] .bec-delete-confirm {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-mofglmmd1w] .bec-delete-confirm-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

[b-mofglmmd1w] .bec-delete-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

[b-mofglmmd1w] .bec-delete-confirm-cancel {
    height: 30px;
    padding: 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
}

[b-mofglmmd1w] .bec-delete-confirm-cancel:hover {
    background: var(--bg-hover);
}

[b-mofglmmd1w] .bec-delete-confirm-delete {
    height: 30px;
    padding: 0 12px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .1s, opacity .1s;
}

[b-mofglmmd1w] .bec-delete-confirm-delete:hover {
    opacity: 0.9;
}

[b-mofglmmd1w] .bec-delete-confirm-delete i {
    font-size: 11px;
}

/* ===== Pinned Tab Rich Rows ===== */
.bec-pinned-row[b-mofglmmd1w] {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    margin: 1px 4px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}

.bec-pinned-row:hover[b-mofglmmd1w] {
    background: var(--bg-hover);
}

.bec-pinned-row-content[b-mofglmmd1w] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bec-pinned-row-name[b-mofglmmd1w] {
    font-size: .78rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bec-pinned-row-meta[b-mofglmmd1w] {
    font-size: .62rem;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bec-pinned-row .bec-session-indicators[b-mofglmmd1w] {
    margin-left: 6px;
    margin-right: 6px;
}

.bec-pinned-row .bec-session-actions[b-mofglmmd1w] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-right: 8px;
    padding-left: 6px;
    background: linear-gradient(to right, transparent 0%, var(--bg-card) 30%);
    opacity: 0;
    transition: opacity .15s;
}

.bec-pinned-row:hover .bec-pinned-row-meta[b-mofglmmd1w],
.bec-pinned-row.menu-open .bec-pinned-row-meta[b-mofglmmd1w] {
    visibility: hidden;
}

/* ===== Empty State ===== */
[b-mofglmmd1w] .bec-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

[b-mofglmmd1w] .bec-empty-state i {
    font-size: 28px;
    color: var(--text-faint);
    margin-bottom: 12px;
}

[b-mofglmmd1w] .bec-empty-state-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

[b-mofglmmd1w] .bec-empty-state-sub {
    font-size: .75rem;
    color: var(--text-muted);
}

/* ===== Loading Skeleton ===== */
.bec-skeleton-row[b-mofglmmd1w] {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    margin: 1px 4px;
}

.bec-skeleton-bar[b-mofglmmd1w] {
    border-radius: 6px;
    height: 12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .08) 50%, rgba(0, 0, 0, .04) 100%);
    background-size: 200% 100%;
    animation: bec-shimmer-b-mofglmmd1w 1.5s ease-in-out infinite;
}

.bec-skeleton-name[b-mofglmmd1w] {
    flex: 1;
    margin-right: 12px;
}

.bec-skeleton-time[b-mofglmmd1w] {
    width: 48px;
    flex-shrink: 0;
}

@keyframes bec-shimmer-b-mofglmmd1w {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Click-away Overlay ===== */
.bec-click-away-overlay[b-mofglmmd1w] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

/* ===== Rename Dialog ===== */
.bec-rename-form[b-mofglmmd1w] {
    padding: 8px 0;
}

.bec-rename-label[b-mofglmmd1w] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.bec-rename-input[b-mofglmmd1w] {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.bec-rename-input:focus[b-mofglmmd1w] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.bec-rename-footer[b-mofglmmd1w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.bec-btn-cancel[b-mofglmmd1w] {
    height: 34px;
    padding: 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
}

.bec-btn-cancel:hover[b-mofglmmd1w] {
    background: var(--bg-hover);
}

.bec-btn-save[b-mofglmmd1w] {
    height: 34px;
    padding: 0 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    cursor: pointer;
    transition: background .1s;
}

.bec-btn-save:hover[b-mofglmmd1w] {
    background: #005a9e;
}

.bec-btn-save:disabled[b-mofglmmd1w] {
    opacity: 0.5;
    cursor: default;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .bec-session-row[b-mofglmmd1w],
    .bec-pinned-row[b-mofglmmd1w],
    .bec-btn-icon[b-mofglmmd1w],
    .bec-seg-btn[b-mofglmmd1w],
    .bec-session-actions[b-mofglmmd1w],
    .bec-segmented-control[b-mofglmmd1w]::before,
    .bec-dropdown-menu[b-mofglmmd1w],
    .bec-skeleton-bar[b-mofglmmd1w] {
        transition: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   Phase 4.3 — Virtualization, Keyboard Navigation, Accessibility
   ============================================================================= */

/* Virtualize row wrapper — must not add visible box; just carries role="option" + focus ring */
.bec-virt-row-wrap[b-mofglmmd1w] {
    display: block;
    outline: none;
}

/* Placeholder rendered by <Virtualize> while items scroll into view */
.bec-virt-placeholder[b-mofglmmd1w] {
    height: 38px;
    background: transparent;
}

/* Keyboard-focused row: outline on the child SessionRow via ::deep */
[b-mofglmmd1w] .bec-row-focused .bec-session-row {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Screen-reader-only live region */
.bec-sr-only[b-mofglmmd1w] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard focus rings — visible only on :focus-visible (Tab navigation) */
[b-mofglmmd1w] .bec-session-row:focus-visible,
.bec-pinned-row:focus-visible[b-mofglmmd1w],
.bec-seg-btn:focus-visible[b-mofglmmd1w],
.bec-btn-new-chat:focus-visible[b-mofglmmd1w],
.bec-search-bar:focus-visible[b-mofglmmd1w],
.bec-btn-icon:focus-visible[b-mofglmmd1w],
[b-mofglmmd1w] .bec-dropdown-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Hide focus ring for mouse/pointer interactions */
[b-mofglmmd1w] .bec-session-row:focus:not(:focus-visible),
.bec-pinned-row:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-seg-btn:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-btn-new-chat:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-search-bar:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-btn-icon:focus:not(:focus-visible)[b-mofglmmd1w],
[b-mofglmmd1w] .bec-dropdown-item:focus:not(:focus-visible) {
    outline: none;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Interaction/HumanInputPrompt.razor.rz.scp.css */
/* =============================================================================
   HumanInputPrompt.razor.css — Quick-Pick Content (BEC Design System)
   ==============================================================================
   Light-themed quick-pick rendered inside an ActivityStripItem body.
   Numbered option rows, hover highlight, custom answer input.
   Uses --BEC-* design tokens with fallbacks. Scoped CSS only.
   ============================================================================== */

/* ===== Content Container (rendered directly inside ActivityStripZone) ===== */
.qp-content[b-c7vv5nh6tk] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: qpSlideUp-b-c7vv5nh6tk 0.2s ease-out;
    flex-shrink: 0;
    padding: 10px 14px 8px;
}

@keyframes qpSlideUp-b-c7vv5nh6tk {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Header: question + close ===== */
.qp-header[b-c7vv5nh6tk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin-bottom: 8px;
}

.qp-question[b-c7vv5nh6tk] {
    flex: 1;
    font-size: 12.5px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    line-height: 1.45;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}

.qp-approval-detail[b-c7vv5nh6tk] {
    margin: 0 0 8px;
    max-height: 176px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* no background — matches wireframe white body */
}

/* One-line action subtitle above the detail rows */
.qp-action-title[b-c7vv5nh6tk] {
    margin: 0 0 6px;
    padding-bottom: 6px;
    font-size: 11.5px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-Text-Primary, #323130);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* Key-value rows inside .qp-approval-detail */
.qp-detail-line[b-c7vv5nh6tk] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.qp-detail-key[b-c7vv5nh6tk] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-Text-Secondary, #605e5c);
    white-space: nowrap;
    min-width: 72px;
}

.qp-detail-val[b-c7vv5nh6tk] {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--BEC-Text-Primary, #323130);
    word-break: break-word;
    /* override any global link/anchor color that may bleed in */
    text-decoration: none;
}

.qp-close[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.12s ease, background 0.12s ease;
}

.qp-close:hover:not(:disabled)[b-c7vv5nh6tk] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.qp-close:disabled[b-c7vv5nh6tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Options List ===== */
.qp-options[b-c7vv5nh6tk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

/* ===== Individual Option Row ===== */
.qp-option[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--BEC-colorNeutralBackground2, #faf9f8);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d0d0d0);
    border-radius: 4px;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.qp-option:hover:not(:disabled)[b-c7vv5nh6tk] {
    border-color: var(--BEC-colorNeutralStroke1Hover, #8a8886);
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
}

.qp-option:disabled[b-c7vv5nh6tk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Selected option — subtle gold highlight ===== */
.qp-option.qp-selected[b-c7vv5nh6tk] {
    border-color: #c19c00;
    background: #fffbf0;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.qp-option.qp-selected:hover:not(:disabled)[b-c7vv5nh6tk] {
    border-color: #a07f00;
    background: #fff5d9;
}

/* ===== Option Number Badge ===== */
.qp-option-number[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    background: var(--BEC-colorNeutralBackground4, #edebe9);
    border: none;
    border-radius: 3px;
    flex-shrink: 0;
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.qp-selected .qp-option-number[b-c7vv5nh6tk] {
    background: #c19c00;
    color: #ffffff;
}

/* ===== Option Content (label + description) ===== */
.qp-option-content[b-c7vv5nh6tk] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.qp-option-label[b-c7vv5nh6tk] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    white-space: nowrap;
}

.qp-option-desc[b-c7vv5nh6tk] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightRegular, 400);
    color: var(--BEC-colorNeutralForeground3, #8a8886);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qp-selected .qp-option-desc[b-c7vv5nh6tk] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== Checkmark on selected ===== */
.qp-option-check[b-c7vv5nh6tk] {
    font-size: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ===== Custom answer label (italic to distinguish) ===== */
.qp-custom-label[b-c7vv5nh6tk] {
    font-weight: var(--BEC-fontWeightRegular, 400);
    font-style: italic;
    opacity: 0.6;
}

.qp-selected .qp-custom-label[b-c7vv5nh6tk] {
    opacity: 1;
}

/* ===== Custom Text Input Area ===== */
.qp-custom-area[b-c7vv5nh6tk] {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 0 2px;
    animation: qpSlideUp-b-c7vv5nh6tk 0.15s ease-out;
}

.qp-custom-input[b-c7vv5nh6tk] {
    flex: 1;
    padding: 6px 10px;
    font-size: 12.5px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #f0dcc5;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease;
}

.qp-custom-input:focus[b-c7vv5nh6tk] {
    border-color: #e8912d;
}

.qp-custom-input:disabled[b-c7vv5nh6tk] {
    opacity: 0.5;
}

.qp-custom-input[b-c7vv5nh6tk]::placeholder {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

/* ===== Custom Send Button ===== */
.qp-custom-send[b-c7vv5nh6tk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 13px;
    color: #ffffff;
    background: #e8912d;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
}

.qp-custom-send:hover:not(:disabled)[b-c7vv5nh6tk] {
    background: #d97706;
}

.qp-custom-send:disabled[b-c7vv5nh6tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Focus outline suppression (tabindex for keyboard events) ===== */
.qp-content:focus[b-c7vv5nh6tk] {
    outline: none;
}

/* ===== Structured Input: Question Header ===== */
.qp-question-header[b-c7vv5nh6tk] {
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: #b45309;
    margin-right: 4px;
    white-space: nowrap;
}

/* ===== Structured Input: Progress Bar ===== */
.qp-progress[b-c7vv5nh6tk] {
    height: 2px;
    background: #f0dcc5;
    overflow: hidden;
    border-radius: 2px;
}

.qp-progress-fill[b-c7vv5nh6tk] {
    height: 100%;
    background: #e8912d;
    transition: width 0.3s ease;
}

/* ===== Structured Input: Back Button ===== */
.qp-back-area[b-c7vv5nh6tk] {
    display: flex;
    padding: 4px 0;
}

.qp-back-button[b-c7vv5nh6tk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    color: #b45309;
    background: none;
    border: 1px solid #f0dcc5;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.qp-back-button:hover:not(:disabled)[b-c7vv5nh6tk] {
    color: #92400e;
    border-color: #e8912d;
}

.qp-back-button:disabled[b-c7vv5nh6tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Submitting Indicator ===== */
.qp-submitting[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 11px;
    color: #b45309;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Views/DashboardLandingView.razor.rz.scp.css */
/* ============================================================================
   DashboardLandingView.razor.css — "Today Brief" hub styles
   ============================================================================
   Design reference: AI-Agent-Testing/my-hub-final.html
   Apple monochromatic. Decorative section dashes. Urgency dot colors.
   ============================================================================ */

/* ─── Container ─── */
.hub-landing[b-27b16uxt6s] {
    display: flex;
    flex-direction: column;
}

/* Inline loader-error banner — when any of the 15 section loaders fails,
   this surfaces the failure instead of leaving the skeleton pulsing forever. */
.hub-loader-banner[b-27b16uxt6s] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #9a3412;
    font-size: 13px;
}
.hub-loader-banner-icon[b-27b16uxt6s] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f97316;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.hub-loader-banner-body[b-27b16uxt6s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.hub-loader-banner-body strong[b-27b16uxt6s] { color: #7c2d12; font-weight: 600; }
.hub-loader-banner-body span[b-27b16uxt6s]  { color: #9a3412; opacity: 0.9; font-size: 12.5px; }
.hub-loader-banner-retry[b-27b16uxt6s] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #f97316;
    color: #9a3412;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12.5px;
}
.hub-loader-banner-retry:hover[b-27b16uxt6s] { background: #fde6cf; }

/* ─── Birthday Banner ─── */
.hub-birthday[b-27b16uxt6s] {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    background: linear-gradient(135deg, #fff9e6 0%, #fff0f5 100%);
    text-align: center;
}

/* ─── Header zone ─── */
.hub-header[b-27b16uxt6s] {
    padding: 24px 24px 20px;
}

.hub-date[b-27b16uxt6s] {
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.hub-greeting[b-27b16uxt6s] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #1d1d1f;
    margin: 0 0 5px 0;
}

.hub-identity[b-27b16uxt6s] {
    font-size: 12px;
    color: #86868b;
    line-height: 1.5;
}

/* ─── Sections ─── */
.hub-section[b-27b16uxt6s] {
    padding: 16px 24px;
    position: relative;
}

.hub-section[b-27b16uxt6s]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 28px;
    height: 1px;
    background: #d2d2d7;
}

.hub-section-label[b-27b16uxt6s] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #86868b;
    margin-bottom: 12px;
}

/* ─── Items ─── */
.hub-item[b-27b16uxt6s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
}

.hub-item:hover[b-27b16uxt6s] {
    margin: 0 -10px;
    padding: 10px 10px;
    background: #f5f5f7;
}

.hub-dot[b-27b16uxt6s] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.hub-dot.urgent[b-27b16uxt6s] { background: #ff3b30; }
.hub-dot.action[b-27b16uxt6s] { background: #0071e3; }
.hub-dot.info[b-27b16uxt6s] { background: #34c759; }
.hub-dot.neutral[b-27b16uxt6s] { background: #d2d2d7; }

.hub-item-text[b-27b16uxt6s] {
    flex: 1;
    font-size: 13px;
    color: #333336;
    line-height: 1.4;
}

.hub-item-text strong[b-27b16uxt6s] { font-weight: 600; }

.hub-item-meta[b-27b16uxt6s] {
    font-size: 11px;
    color: #86868b;
    margin-top: 2px;
}

/* ─── All-clear state ─── */
.hub-all-clear[b-27b16uxt6s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.hub-all-clear-icon[b-27b16uxt6s] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hub-all-clear-icon[b-27b16uxt6s]::after {
    content: '\2713';
    font-size: 12px;
    font-weight: 700;
    color: #34c759;
}

.hub-all-clear-text[b-27b16uxt6s] {
    font-size: 13px;
    color: #6e6e73;
}

/* ─── Empty state ─── */
.hub-empty[b-27b16uxt6s] {
    font-size: 12px;
    color: #86868b;
    font-style: italic;
    padding: 4px 0;
}

/* ─── Loading skeleton ─── */
.hub-skeleton[b-27b16uxt6s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.hub-skeleton-line[b-27b16uxt6s] {
    display: block;
    height: 12px;
    width: 70%;
    background: #f0f0f2;
    border-radius: 4px;
    animation: hub-pulse-b-27b16uxt6s 1.2s ease-in-out infinite;
}

.hub-skeleton-line.short[b-27b16uxt6s] { width: 40%; }

@keyframes hub-pulse-b-27b16uxt6s {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Views/ViewCommandPalette.razor.rz.scp.css */
/* ============================================================================
   ViewCommandPalette.razor.css — Scoped styles for the command palette
   ============================================================================
   Apple monochromatic. Centered overlay inside the ViewPanel.
   ============================================================================ */

.view-palette-backdrop[b-eq74p8sh3a] {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.04);
}

.view-palette[b-eq74p8sh3a] {
    position: absolute;
    top: 64px;
    left: 20px;
    right: 20px;
    z-index: 201;
    background: #fff;
    border: 1px solid var(--BEC-stroke, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.view-palette-input[b-eq74p8sh3a] {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--BEC-stroke, #e0e0e0);
    font-size: 14px;
    font-family: inherit;
    color: var(--BEC-dark, #1a1a1a);
    background: transparent;
    outline: none;
}

.view-palette-input[b-eq74p8sh3a]::placeholder {
    color: var(--BEC-light, #999);
}

.view-palette-list[b-eq74p8sh3a] {
    max-height: 240px;
    overflow-y: auto;
}

.view-palette-item[b-eq74p8sh3a] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-family: inherit;
    color: var(--BEC-dark, #1a1a1a);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 100ms ease;
}

.view-palette-item:hover[b-eq74p8sh3a],
.view-palette-item--active[b-eq74p8sh3a] {
    background: var(--BEC-surface, #f5f5f7);
}

.view-palette-empty[b-eq74p8sh3a] {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--BEC-light, #999);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Views/ViewPanel.razor.rz.scp.css */
/* ============================================================================
   ViewPanel.razor.css — Scoped styles for the View Panel overlay
   ============================================================================
   Apple monochromatic design. Fixed 380px. Overlay with left-edge shadow.
   ============================================================================ */

.view-panel[b-92e81k8x5u] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    z-index: 100;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 150ms ease-in;
    will-change: transform;
}

.view-panel--open[b-92e81k8x5u] {
    transform: translateX(0);
    transition: transform 200ms ease-out;
}

/* ----- Header ----- */

.view-panel-header[b-92e81k8x5u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--BEC-stroke, #e0e0e0);
    min-height: 40px;
}

.view-panel-title[b-92e81k8x5u] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--BEC-dark, #1a1a1a);
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: default;
    font-family: inherit;
}

.view-panel-title--clickable[b-92e81k8x5u] {
    cursor: pointer;
    transition: opacity 150ms ease;
}

.view-panel-title--clickable:hover[b-92e81k8x5u] {
    opacity: 0.6;
}

.view-panel-back[b-92e81k8x5u] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 22px;
    line-height: 1;
    color: var(--BEC-mid, #555);
    cursor: pointer;
    transition: opacity 150ms ease;
}

.view-panel-back:hover[b-92e81k8x5u] {
    opacity: 0.6;
}

.view-panel-close[b-92e81k8x5u] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--BEC-light, #999);
    cursor: pointer;
    margin-left: auto;
    transition: opacity 150ms ease;
}

.view-panel-close:hover[b-92e81k8x5u] {
    opacity: 0.6;
}

/* ----- Content ----- */

.view-panel-content[b-92e81k8x5u] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/PeoplePicker.razor.rz.scp.css */
/* =============================================================================
   PeoplePicker.razor.css — Autocomplete User Search Component
   ============================================================================= */

.people-picker[b-6hwrthvcc3] {
    position: relative;
    width: 100%;
}

.people-picker-input-wrapper[b-6hwrthvcc3] {
    position: relative;
}

.people-picker-selected[b-6hwrthvcc3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--BEC-colorBrandStroke1, #0f6cbd);
    border-radius: 4px;
    background: var(--BEC-colorBrandBackground2, #ebf3fc);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.people-picker-selected-name[b-6hwrthvcc3] {
    flex: 1;
    font-weight: 500;
}

.people-picker-clear[b-6hwrthvcc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #999);
    cursor: pointer;
    font-size: 10px;
}

.people-picker-clear:hover[b-6hwrthvcc3] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.people-picker-dropdown[b-6hwrthvcc3] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

.people-picker-item[b-6hwrthvcc3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.people-picker-item:hover[b-6hwrthvcc3] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.people-picker-item-main[b-6hwrthvcc3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.people-picker-name[b-6hwrthvcc3] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.people-picker-dept[b-6hwrthvcc3] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
}

.people-picker-email[b-6hwrthvcc3] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.people-picker-loading[b-6hwrthvcc3] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 12px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceContextMenu.razor.rz.scp.css */
/* =============================================================================
   WorkspaceContextMenu.razor.css — Right-click Context Menu (Apple-inspired)
   ============================================================================= */

.ws-ctx-backdrop[b-wgf0oqbzgu] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.ws-ctx-menu[b-wgf0oqbzgu] {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    padding: 4px;
}

.ws-ctx-item[b-wgf0oqbzgu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.ws-ctx-item:hover[b-wgf0oqbzgu] {
    background: rgba(0, 0, 0, 0.04);
}

.ws-ctx-item i[b-wgf0oqbzgu] {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: #86868b;
}

.ws-ctx-danger[b-wgf0oqbzgu] {
    color: #ff453a;
}

.ws-ctx-danger i[b-wgf0oqbzgu] {
    color: #ff453a;
}

.ws-ctx-divider[b-wgf0oqbzgu] {
    height: 0.5px;
    margin: 4px;
    background: rgba(0, 0, 0, 0.06);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceFileList.razor.rz.scp.css */
/* =============================================================================
   WorkspaceFileList.razor.css — File list (Apple-inspired, single-column)
   Name + inline meta (type · size · date) beneath file name
   ============================================================================= */

.ws-files[b-o0z3ch2ymr] {
    width: 260px;
    min-width: 260px;
    border-right: 0.5px solid rgba(0, 0, 0, 0.06);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, min-width 0.2s ease, opacity 0.2s ease;
}

/* ===== Body ===== */
.ws-fl-body[b-o0z3ch2ymr] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ===== File Row ===== */
.ws-fl-row[b-o0z3ch2ymr] {
    display: flex;
    padding: 8px 12px;
    align-items: flex-start;
    cursor: pointer;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s;
}

.ws-fl-row:hover[b-o0z3ch2ymr] {
    background: rgba(0, 0, 0, 0.02);
}

.ws-fl-row.selected[b-o0z3ch2ymr] {
    background: rgba(0, 113, 227, 0.06);
}

/* ===== Name Column ===== */
.ws-fl-col-name[b-o0z3ch2ymr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.ws-fl-file-icon[b-o0z3ch2ymr] {
    font-size: 15px;
    color: #86868b;
    flex-shrink: 0;
    margin-top: 1px;
}

.ws-fl-name-block[b-o0z3ch2ymr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.ws-fl-filename[b-o0z3ch2ymr] {
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-fl-meta[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Old chip/share/export classes removed:
   - .ws-fl-tag / .ws-fl-tag-ai / .ws-fl-tag-upload  → replaced by .ws-fl-chip-* in §B1
   - .ws-fl-share-badge                                → merged into .ws-fl-meta in §43
   - .ws-fl-export-chip / .ws-fl-export-chip:hover     → exports render in preview now
*/

.ws-fl-shared-by[b-o0z3ch2ymr] {
    font-size: 11px;
    color: #aeaeb2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Inline detail (type · size · date in meta row) ===== */
.ws-fl-inline-detail[b-o0z3ch2ymr] {
    font-size: 10px;
    color: #aeaeb2;
    white-space: nowrap;
}

.ws-fl-meta > .ws-fl-type-lbl[b-o0z3ch2ymr] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Dot separators between inline meta items */
.ws-fl-meta > .ws-fl-type-lbl[b-o0z3ch2ymr]::before,
.ws-fl-meta > .ws-fl-inline-detail[b-o0z3ch2ymr]::before {
    content: "\00b7";
    margin-right: 4px;
    color: #c7c7cc;
}

/* Old "shared section divider" classes removed (.ws-fl-divider*, .ws-fl-shared,
   .ws-fl-chevron) — date-group headers now use .ws-fl-date-label (§B3/§43). */

/* ===== Empty State ===== */
.ws-fl-empty[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 8px;
    color: var(--BEC-colorNeutralForeground3, #999);
    font-size: 12px;
}

/* ===== Delete Dialog ===== */
.ws-fl-delete-backdrop[b-o0z3ch2ymr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-fl-delete-dialog[b-o0z3ch2ymr] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ws-fl-delete-header[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorStatusDangerForeground1, #c4314b);
    margin-bottom: 8px;
}

.ws-fl-delete-msg[b-o0z3ch2ymr] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0 0 14px;
}

.ws-fl-delete-actions[b-o0z3ch2ymr] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ws-fl-delete-cancel[b-o0z3ch2ymr],
.ws-fl-delete-confirm[b-o0z3ch2ymr] {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.ws-fl-delete-cancel[b-o0z3ch2ymr] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ws-fl-delete-confirm[b-o0z3ch2ymr] {
    background: var(--BEC-colorStatusDangerBackground1, #c4314b);
    color: #fff;
    border-color: transparent;
}

/* ===== Rename Overlay ===== */
.ws-fl-rename-overlay[b-o0z3ch2ymr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-fl-rename-box[b-o0z3ch2ymr] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 240px;
}

.ws-fl-rename-input[b-o0z3ch2ymr] {
    width: 100%;
    border: 1px solid var(--BEC-colorBrandForeground1, #0078d4);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    outline: none;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== Planned Artifact Skeleton ===== */
.ws-fl-skeleton[b-o0z3ch2ymr] {
    opacity: 0.55;
    pointer-events: none;
}

.ws-fl-shimmer[b-o0z3ch2ymr] {
    background: linear-gradient(
        90deg,
        transparent 30%,
        rgba(0, 120, 212, 0.08) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: ws-shimmer-b-o0z3ch2ymr 1.8s ease-in-out infinite;
    border-radius: 3px;
}

@keyframes ws-shimmer-b-o0z3ch2ymr {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-fl-shimmer[b-o0z3ch2ymr] {
        animation: none;
        background: rgba(0, 120, 212, 0.06);
    }
}

/* ============================================================================
   v4 — Compact row redesign (B3)
   ─ Single-line ~28px rows, no file-type icons, source-type chip, date-grouped.
   ============================================================================ */

.ws-fl-date-label[b-o0z3ch2ymr] {
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #a19f9d;
    padding: 12px 14px 4px;
}

/* §43: Two-line file row. Filename top, plain-text meta (Source · Date · Type · Size) below. */
.ws-fl-row[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 10px;
    margin: 0 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, box-shadow .12s;
    position: relative;
    overflow: hidden;
}
.ws-fl-row:hover[b-o0z3ch2ymr] { background: #f3f2f1; }

/* §42: selected = subtle elevation, no left bar + no blue background. The row
   "pops" off the list using a soft shadow ring instead of a saturated fill. */
.ws-fl-row.selected[b-o0z3ch2ymr] {
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1;
}
.ws-fl-row.selected[b-o0z3ch2ymr]::before {
    content: none;
}

/* §43: Inner stack — filename above meta. flex:1 so it occupies all space
   except the ellipsis button on the right. min-width:0 enables ellipsis. */
.ws-fl-row-body[b-o0z3ch2ymr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ws-fl-row-body .ws-fl-filename[b-o0z3ch2ymr] {
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* UPLOAD-A2+A3 (2026-05-28, Brain): extraction-state badge. Sits inline next
   to the filename so it's visible without taking another row of vertical space.
   Two variants — in-flight (blue whisper + spin) and failed (red whisper +
   warning glyph). Reduced-motion respected. Hidden completely when extraction
   is Ready or NotRequired so the row reads clean for the 99% case. */
.ws-fl-extraction-badge[b-o0z3ch2ymr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 7px 1px 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    border-radius: 999px;
    border: 1px solid transparent;
    vertical-align: 1px;
    line-height: 1.4;
    white-space: nowrap;
}

.ws-fl-extraction-badge i[b-o0z3ch2ymr] {
    font-size: 9px;
}

.ws-fl-extraction-in-flight[b-o0z3ch2ymr] {
    background: rgba(0, 113, 227, 0.08);
    border-color: rgba(0, 113, 227, 0.20);
    color: #0561c2;
}

.ws-fl-extraction-failed[b-o0z3ch2ymr] {
    background: rgba(255, 59, 48, 0.08);
    border-color: rgba(255, 59, 48, 0.28);
    color: #8b1c20;
}

@media (prefers-reduced-motion: reduce) {
    .ws-fl-extraction-in-flight i[b-o0z3ch2ymr] {
        animation: none;
    }
}

/* §43: Plain-text meta line — no backgrounds, no pills, no icons. */
.ws-fl-meta[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #86868b;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2;
}

.ws-fl-meta-item[b-o0z3ch2ymr] {
    color: #86868b;
}

.ws-fl-meta-sep[b-o0z3ch2ymr] {
    color: #c7c7cc;
    flex-shrink: 0;
}

/* Source-type chip — Agent / Mine / Export */
.ws-fl-chip[b-o0z3ch2ymr] {
    font-size: .54rem;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
    line-height: 1.4;
}
.ws-fl-chip-agent[b-o0z3ch2ymr]  { background: #dbeafe; color: #1e40af; }
.ws-fl-chip-mine[b-o0z3ch2ymr]   { background: #ecfccb; color: #4d7c0f; }
.ws-fl-chip-export[b-o0z3ch2ymr] { background: #f3f4f6; color: #6e6e73; }
.ws-fl-chip-none[b-o0z3ch2ymr]   { display: none; }

.ws-fl-filename[b-o0z3ch2ymr] {
    flex: 1;
    font-size: .76rem;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ws-fl-time[b-o0z3ch2ymr] {
    font-size: .62rem;
    color: #a19f9d;
    flex-shrink: 0;
    white-space: nowrap;
}
.ws-fl-row.selected .ws-fl-time[b-o0z3ch2ymr] { color: #6e6e73; }

.ws-fl-shared-by[b-o0z3ch2ymr] {
    font-size: .62rem;
    color: #6e6e73;
    flex-shrink: 0;
    white-space: nowrap;
}

.ws-fl-row-ellipsis[b-o0z3ch2ymr] {
    width: 22px; height: 22px;
    border: 0; background: transparent;
    color: #6e6e73;
    border-radius: 5px;
    cursor: pointer;
    font-size: .7rem;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-fl-row:hover .ws-fl-row-ellipsis[b-o0z3ch2ymr],
.ws-fl-row.selected .ws-fl-row-ellipsis[b-o0z3ch2ymr] { display: inline-flex; }
.ws-fl-row:hover .ws-fl-time[b-o0z3ch2ymr],
.ws-fl-row:hover .ws-fl-shared-by[b-o0z3ch2ymr],
.ws-fl-row.selected .ws-fl-time[b-o0z3ch2ymr],
.ws-fl-row.selected .ws-fl-shared-by[b-o0z3ch2ymr] { display: none; }
.ws-fl-row-ellipsis:hover[b-o0z3ch2ymr] { background: #fff; color: #1d1d1f; }

/* ===== §39 + §43: Date-group header — same 48px as file rows so Virtualize math stays exact. ===== */
.ws-fl-date-label[b-o0z3ch2ymr] {
    height: 48px;
    box-sizing: border-box;
    padding: 22px 14px 6px;
    /* The padding pushes the YESTERDAY / LAST 7 DAYS label visually to the bottom
       of its 48px slot so it reads like a section divider above the rows below. */
}

/* ===== §38: Full-text search status + result rows ===== */
.ws-fl-search-status[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    color: #6e6e73;
    font-size: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ws-fl-search-status i[b-o0z3ch2ymr] {
    color: #0071e3;
}

/* §43: Search-hit rows match the new 48px row height so Virtualize math stays exact.
   Two-line layout: filename top, snippet bottom — mirrors the regular row. */
.ws-fl-hit-row[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 10px;
    margin: 0 6px;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

.ws-fl-hit-row:hover[b-o0z3ch2ymr] { background: #f3f2f1; }
.ws-fl-hit-row.selected[b-o0z3ch2ymr] { background: #e8f4fd; }

.ws-fl-hit-body[b-o0z3ch2ymr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.ws-fl-hit-body .ws-fl-filename[b-o0z3ch2ymr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.ws-fl-hit-snippet[b-o0z3ch2ymr] {
    color: #6e6e73;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.ws-fl-chip-hit[b-o0z3ch2ymr] {
    background: #fef3c7;
    color: #92400e;
}

/* ===== W-004: Infinite scroll sentinel + loading indicator ===== */
.ws-fl-sentinel[b-o0z3ch2ymr] {
    height: 1px;
    width: 100%;
}

.ws-fl-load-more[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    color: #6e6e73;
    font-size: 12px;
}

.ws-fl-load-spinner[b-o0z3ch2ymr] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: ws-spin-b-o0z3ch2ymr 0.6s linear infinite;
}

@keyframes ws-spin-b-o0z3ch2ymr {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceFilePreview.razor.rz.scp.css */
/* =============================================================================
   WorkspaceFilePreview.razor.css — File Preview Pane (Apple-inspired)
   ============================================================================= */

.ws-preview[b-x7vts16pwq] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ws-preview-header[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    background: #fafafa;
    min-height: 24px;
}

.ws-preview-hdr-icon[b-x7vts16pwq] {
    font-size: 12px;
    color: #86868b;
    flex-shrink: 0;
}

.ws-preview-title[b-x7vts16pwq] {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


/* ===== Mode Pills ===== */
.ws-preview-pills[b-x7vts16pwq] {
    display: flex;
    gap: 2px;
    margin: 0 auto;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 2px;
}

.ws-preview-pill[b-x7vts16pwq] {
    padding: 4px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #86868b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ws-preview-pill:hover[b-x7vts16pwq] {
    color: #1d1d1f;
}

.ws-preview-pill.active[b-x7vts16pwq] {
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08);
}

/* ===== Focus Button ===== */
.ws-preview-hdr-right[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.ws-preview-save-status[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #34c759;
    padding: 0 4px;
    white-space: nowrap;
}

.ws-preview-save-status.error[b-x7vts16pwq] {
    color: #ff453a;
}

.ws-preview-save-btn[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.ws-preview-save-btn:hover[b-x7vts16pwq] {
    background: rgba(0, 113, 227, 0.15);
}

.ws-preview-save-btn:disabled[b-x7vts16pwq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* §44 / Gap A: Download button in the preview header — visually a secondary
   action (subtle gray pill, no fill). Sits next to Save when present, alone
   for read-only files. Same height + radius as Save so the row stays even. */
.ws-preview-download-btn[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #ffffff;
    color: #1d1d1f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.ws-preview-download-btn:hover[b-x7vts16pwq] {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.16);
    color: #0071e3;
}

.ws-preview-download-btn i[b-x7vts16pwq] {
    font-size: 11px;
}

/* B15-A: In-flight download chip — replaces the Download button while a PDF
   export is rendering server-side (30-60 s) and bytes stream back. Apple-class
   spec:
     · Same height + radius as the button so the header row doesn't reflow.
     · Subtle navy tint + 1px hairline border — feels alive, not loud.
     · Spinner first, status text middle, thin progress bar at the bottom.
     · Status text reads "Preparing PDF · 14s" / "Downloading · 47%" / "Saved".
   The chip is non-interactive while active (no click target) — the user can't
   start a second download until the first finishes or fails. */
.ws-preview-download-progress[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: rgba(0, 113, 227, 0.06);
    color: #1d1d1f;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 180px;
    max-width: 280px;
    position: relative;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

.ws-preview-download-progress.is-complete[b-x7vts16pwq] {
    background: rgba(52, 199, 89, 0.10);
    border-color: rgba(52, 199, 89, 0.30);
    color: #1f7a34;
}

.ws-preview-download-progress.is-failed[b-x7vts16pwq] {
    background: rgba(255, 59, 48, 0.08);
    border-color: rgba(255, 59, 48, 0.30);
    color: #b3261e;
}

.ws-preview-download-progress .ws-dl-icon[b-x7vts16pwq] {
    font-size: 12px;
    flex-shrink: 0;
}

.ws-preview-download-progress .ws-dl-status[b-x7vts16pwq] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Thin progress bar pinned to the bottom hairline of the chip. Determinate:
   fill width tracks the real percent. Indeterminate: a moving sheen sweeps
   left→right at ~1.4s cadence so the user knows we're still alive. */
.ws-preview-download-progress .ws-dl-bar[b-x7vts16pwq] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.ws-preview-download-progress .ws-dl-bar-fill[b-x7vts16pwq] {
    display: block;
    height: 100%;
    background: #0071e3;
    transition: width 0.18s ease-out;
}

.ws-preview-download-progress .ws-dl-bar.indeterminate .ws-dl-bar-fill[b-x7vts16pwq] {
    width: 40% !important;
    animation: ws-dl-sweep-b-x7vts16pwq 1.4s ease-in-out infinite;
}

@keyframes ws-dl-sweep-b-x7vts16pwq {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

/* Prefer reduced motion — kill the sweep, leave the spinner + status text
   so the indicator still conveys progress without animation. */
@media (prefers-reduced-motion: reduce) {
    .ws-preview-download-progress .ws-dl-bar.indeterminate .ws-dl-bar-fill[b-x7vts16pwq] {
        animation: none;
        width: 100% !important;
        opacity: 0.4;
    }
}

.ws-preview-body[b-x7vts16pwq] {
    flex: 1;
    overflow: auto;
    min-height: 0;
    background: #fff;
    container-type: inline-size;
    container-name: preview-body;
}

/* ── Base Content Styling ────────────────────────────────────────────── */
.ws-preview-content[b-x7vts16pwq] {
    margin: 0;
    background: #fff;
    font-size: 14px;
    line-height: 1.6;
    color: #1d1d1f;
    width: 100%;
    height: 100%;
}

/* B14-FIX4 (2026-05-28, Ahmed): the preview pane was forcing white bg
   underneath every artifact, which made the document look like it was
   sitting on a "page" instead of floating on the artifact preview surface.
   Apple-class corporate documents float on a tonal gray surface with the
   white document as a card. Switch the host bg to #f5f5f7 ONLY for BEC
   documents (markdown/code previews keep their existing #fff background). */

/* ── Markdown / Code Preview ─────────────────────────────────────────
   Comfortable reading layout — no A4 simulation, just clean padding.
   ──────────────────────────────────────────────────────────────────── */
[b-x7vts16pwq] .ws-preview-content.markdown-preview {
    padding: 16px;
    max-width: 100%;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* ── BEC Document Preview — v6 (2026-05-28, Ahmed) ──────────────────
   Agent-generated reports with BecDocumentTemplate wrapper.
   v6 is fluid responsive: NO JS scaling, NO fixed 842px paper width,
   NO card chrome. The doc fills the preview pane edge-to-edge with
   `max-width: 1400px; margin: 0 auto` for natural centering on wide
   panes. All visual treatment lives INSIDE the doc via DocumentCSS
   block components (.cover / .kpi-grid / .pull-quote / .control-panel).
   ──────────────────────────────────────────────────────────────────── */
/* B14-V6 (2026-05-28, Ahmed): NO MORE BOX-INSIDE-BOX.
   The document fills the preview pane edge-to-edge. No tonal surface
   around the doc, no white card around the content, no shadow, no
   rounded corners pretending to be paper. The doc IS the preview.
   Internal section padding (set by DocumentCSS via clamp()) handles
   all breathing room from the pane edges. */
[b-x7vts16pwq] .ws-preview-content.ws-bec-document {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: block;            /* no flex centering — doc itself owns layout */
    background: #fff;          /* same as the doc — pane and doc are one surface */
    padding: 0;                /* doc fills 100% */
    overflow: auto;            /* scrolling lives on the host, not the doc */
}

/* The .bec-document itself: fluid, max-width 1400px centered, transparent,
   no card chrome whatsoever. All visual treatment lives INSIDE via the
   DocumentCSS v6 component rules (.cover, .kpi-band, .pull-quote, .section,
   .control-band — each owns its own background and borders). */
[b-x7vts16pwq] .ws-preview-content.ws-bec-document .bec-document {
    width: 100%;
    max-width: 1400px;
    min-width: 0;
    background: transparent;   /* NO card */
    box-shadow: none;          /* NO shadow */
    border-radius: 0;          /* NO rounded edges */
    border: 0;
    margin: 0 auto;            /* centered on wide screens, full-width on narrow */
    box-sizing: border-box;
    overflow: visible;
    /* No transform: scale() — v6 is responsive, not zoom-to-fit-paper. */
}

/* Certificate uses landscape orientation with explicit height */
[b-x7vts16pwq] .ws-preview-content.ws-bec-document .bec-document.page-certificate {
    min-height: 595px;
    padding: 40px 60px;
}

/* ── Container-Query Responsive Breakpoints ──────────────────────────
   Adapts to actual panel width, not viewport width.
   ──────────────────────────────────────────────────────────────────── */

/* B14-V6 (2026-05-28): no host padding at ANY panel width. The doc owns
   its own internal padding via DocumentCSS clamp() rules. */
@container preview-body (max-width: 520px) {
    [b-x7vts16pwq] .ws-preview-content.ws-bec-document { padding: 0; }
}
@container preview-body (min-width: 800px) {
    [b-x7vts16pwq] .ws-preview-content.ws-bec-document { padding: 0; }
}

.ws-preview-loading[b-x7vts16pwq],
.ws-preview-empty[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: #aeaeb2;
    font-size: 14px;
}

/* ── §26: Skeleton loader — layout-aware shimmer that hints at final content ── */
.ws-preview-skeleton[b-x7vts16pwq] {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    overflow: hidden;
}

.ws-skeleton-line[b-x7vts16pwq],
.ws-skeleton-block[b-x7vts16pwq] {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.04) 25%,
        rgba(0,0,0,0.08) 50%,
        rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
    animation: wsSkeletonShimmer-b-x7vts16pwq 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.ws-skeleton-line[b-x7vts16pwq] { height: 14px; width: 100%; }
.ws-skeleton-title[b-x7vts16pwq] { height: 26px; width: 55%; margin-bottom: 4px; }
.ws-skeleton-meta[b-x7vts16pwq] { height: 12px; width: 35%; opacity: 0.7; margin-bottom: 18px; }
.ws-skeleton-block[b-x7vts16pwq] { height: 180px; width: 100%; margin: 6px 0 12px; }
.ws-skeleton-short[b-x7vts16pwq] { width: 70%; }

@keyframes wsSkeletonShimmer-b-x7vts16pwq {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ws-visually-hidden[b-x7vts16pwq] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ws-skeleton-line[b-x7vts16pwq],
    .ws-skeleton-block[b-x7vts16pwq] { animation: none; opacity: 0.7; }
}

/* ── Syncfusion Component Container ─────────────────────────────────── */
.ws-preview-component[b-x7vts16pwq] {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* ── Image Preview ───────────────────────────────────────────────────── */
.ws-image-preview[b-x7vts16pwq] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
}

.ws-image-preview img[b-x7vts16pwq] {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

/* ── Error Preview ───────────────────────────────────────────────────── */
[b-x7vts16pwq] .ws-preview-error {
    color: #ff453a;
    padding: 16px;
    font-size: 13px;
}

/* ── Syncfusion Spreadsheet — Compact Overrides ──────────────────────
   The workspace preview panel is narrow (~560px). Reduce padding on
   the ribbon, sheet-tab bar, and formula bar so content is king.
   ──────────────────────────────────────────────────────────────────── */

/* --- Sheet Tab Bar (bottom) — reduce height --- */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-spreadsheet-footer {
    height: 26px !important;
    min-height: 26px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab-panel,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab {
    height: 26px !important;
    min-height: 26px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab .e-tab-header {
    height: 26px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab .e-tab-header .e-toolbar-item {
    height: 24px !important;
    padding: 0 6px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 11px !important;
    line-height: 24px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-add-sheet-tab,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheets-list {
    height: 24px !important;
    width: 24px !important;
    min-height: 24px !important;
    font-size: 11px !important;
}

/* Sheet tab scroll/nav buttons */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab-panel .e-scroll-nav {
    height: 24px !important;
}

/* --- Ribbon / Toolbar — compact for narrow panels --- */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon {
    font-size: 12px !important;
}

/* Ribbon tab headers */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-tab-header .e-toolbar-item {
    padding: 0 8px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 12px !important;
}

/* Ribbon content items — tighter spacing */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-ribbon-group {
    padding: 2px 4px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-ribbon-item {
    padding: 1px 2px !important;
}

/* Make dropdown buttons and icon buttons smaller */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-btn,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-dropdown-btn,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-split-btn {
    padding: 2px 4px !important;
    font-size: 12px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-btn .e-btn-icon,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-dropdown-btn .e-btn-icon,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-split-btn .e-btn-icon {
    font-size: 14px !important;
}

/* Ribbon group overflow button — make it compact */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-ribbon-overall-of-btn {
    padding: 2px 4px !important;
}

/* Ribbon group header (label below icons) */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon .e-ribbon-group-header {
    font-size: 10px !important;
    padding: 0 2px !important;
}

/* --- Horizontal scrollbar at bottom — thinner --- */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-scroller .e-hscroll-bar,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-scrollbar.e-horizontal {
    height: 10px !important;
}

/* =============================================================================
   Spreadsheet Error Fallback — graceful degradation for corrupt/unsupported files
   ============================================================================= */

.ws-preview-error-fallback[b-x7vts16pwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    padding: 32px;
    text-align: center;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
}

.ws-preview-error-icon[b-x7vts16pwq] {
    font-size: 48px;
    color: #86868b;
    opacity: 0.6;
}

.ws-preview-error-text[b-x7vts16pwq] {
    max-width: 320px;
}

.ws-preview-error-text strong[b-x7vts16pwq] {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.ws-preview-error-text p[b-x7vts16pwq] {
    font-size: 13px;
    color: #86868b;
    line-height: 1.4;
    margin: 0;
}

.ws-preview-retry-btn[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #0066cc;
    background: rgba(0, 102, 204, 0.08);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ws-preview-retry-btn:hover[b-x7vts16pwq] {
    background: rgba(0, 102, 204, 0.14);
}

.ws-preview-retry-btn i[b-x7vts16pwq] {
    font-size: 12px;
}

/* ===== New-Section Flash (artifact streaming) ===== */
@keyframes bec-section-flash-b-x7vts16pwq {
    0%   { background-color: rgba(0, 113, 227, 0.12); }
    100% { background-color: transparent; }
}

[b-x7vts16pwq] .bec-new-section-flash {
    animation: bec-section-flash-b-x7vts16pwq 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    [b-x7vts16pwq] .bec-new-section-flash {
        animation: none;
    }
}

/* ===== Narrative Anchor Flash (Phase 3.3) ===== */
@keyframes bec-anchor-flash-b-x7vts16pwq {
    0%   { background-color: rgba(59, 130, 246, 0.18); }
    100% { background-color: transparent; }
}

[b-x7vts16pwq] .bec-anchor-flash {
    animation: bec-anchor-flash-b-x7vts16pwq 1.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    [b-x7vts16pwq] .bec-anchor-flash {
        animation: none;
    }
}

/* ============================================================================
   v4 — Preview header chips (B5) + conflict banner (B8)
   ============================================================================ */

/* Clickable v{N} chip — opens the Version drawer */
.ws-preview-version-clickable[b-x7vts16pwq] {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, color 0.15s;
}
.ws-preview-version-clickable:hover:not(:disabled)[b-x7vts16pwq] {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}
.ws-preview-version-clickable:disabled[b-x7vts16pwq] {
    cursor: default;
    opacity: 0.7;
}
.ws-preview-version-clickable i[b-x7vts16pwq] {
    font-size: 9px;
    line-height: 1;
}

/* "🔗 Shared with N" pill — owner view, click → Manage Shares */
.ws-preview-shared-with[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border: 0;
    border-radius: 10px;
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s;
}
.ws-preview-shared-with:hover[b-x7vts16pwq] { background: rgba(0, 113, 227, 0.16); }
.ws-preview-shared-with i[b-x7vts16pwq] {
    font-size: 10px;
    line-height: 1;
}

/* B8 conflict state — "Edited elsewhere · Refresh" banner */
.ws-preview-save-status.conflict[b-x7vts16pwq] {
    color: #b25e00;
    background: rgba(255, 149, 0, 0.10);
    padding: 2px 8px 2px 8px;
    border-radius: 6px;
    gap: 6px;
}
.ws-preview-conflict-refresh[b-x7vts16pwq] {
    border: 0;
    background: transparent;
    color: #b25e00;
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 2px;
    font-family: inherit;
}
.ws-preview-conflict-refresh:hover[b-x7vts16pwq] { color: #8a4800; }

/* ============================================================================
   v4 — Two-line preview header: filename top, plain-text meta below
   ============================================================================ */

.ws-preview-header[b-x7vts16pwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    flex-shrink: 0;
}

/* §41: Compact single-row header — name + meta + pills + actions on ONE line.
   Saves ~32px of vertical space vs. the old two-row layout. Items collapse
   left→right when space runs short (long filename truncates first, meta
   wraps to ellipsis next, pills stay, save button always visible). */
.ws-preview-header-compact[b-x7vts16pwq] {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 6px 14px;
    min-height: 36px;
}

.ws-preview-hdr-name[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 80px;
    max-width: 40%;
    overflow: hidden;
}

.ws-preview-header-compact .ws-preview-title[b-x7vts16pwq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-preview-hdr-actions[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Meta line — plain text only, muted color, "·" separators, no backgrounds.
   In the compact header it sits inline; in the legacy two-row layout it sits
   under the filename. */
.ws-preview-hdr-meta[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    font-size: 11px;
    color: #86868b;
    padding-left: 26px;
    line-height: 1.4;
}

/* §41: in the compact header, meta loses its left indent and clips on overflow. */
.ws-preview-header-compact .ws-preview-hdr-meta[b-x7vts16pwq] {
    padding-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.ws-preview-meta-item[b-x7vts16pwq] {
    color: #86868b;
    font-weight: 400;
}

.ws-preview-meta-sep[b-x7vts16pwq] {
    color: #c7c7cc;
    user-select: none;
}

/* v{N} link — looks like text, behaves like a button */
.ws-preview-meta-version[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    padding: 0;
    color: #86868b;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
}
.ws-preview-meta-version:hover:not(:disabled)[b-x7vts16pwq] { color: #0071e3; }
.ws-preview-meta-version:disabled[b-x7vts16pwq] { cursor: default; opacity: 0.7; }
.ws-preview-meta-version i[b-x7vts16pwq] {
    font-size: 8px;
    line-height: 1;
}

/* "Shared with N" — text link in meta line */
.ws-preview-meta-shared[b-x7vts16pwq] {
    border: 0;
    background: transparent;
    padding: 0;
    color: #0071e3;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
}
.ws-preview-meta-shared:hover[b-x7vts16pwq] { color: #005bb8; text-decoration: underline; }
.ws-preview-meta-shared-by[b-x7vts16pwq] {
    color: #0071e3;
    font-weight: 500;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspacePanel.razor.rz.scp.css */
/* =============================================================================
   WorkspacePanel.razor.css — Apple-Inspired Workspace Panel
   3-column layout: FolderNav | FileList | Preview (flex:1)
   Design: #f5f5f7 bg, #0071e3 accent, subtle borders, generous spacing
   ============================================================================= */

/* ===== Panel Shell ===== */
.workspace-panel[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-width: 420px;
    max-width: 65%;
    height: 100%;
    border-left: 0.5px solid rgba(0, 0, 0, 0.08);
    background: #f5f5f7;
    overflow: hidden;
    flex-shrink: 0;
    container-type: inline-size;
    container-name: workspace-panel;
}

.workspace-fullscreen[b-32fy5em1ec] {
    position: fixed;
    inset: 0;
    /* v7b (2026-06-03): !important overrides the INLINE width/max-width the resize
       bar (workspace-resize.js) writes on the panel. Without it, the inline style
       wins and full-screen stays stuck at the dragged width, breaking the layout.
       On exit the class drops and the inline (resized) width returns. inset:0 +
       100% makes it fill any screen size natively. */
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000;
    border-left: none;
}

/* ===== Unified Toolbar — Tabs + Actions in one row ===== */
.ws-toolbar[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    background: #f5f5f7;
    min-height: 36px;
}

/* --- Segmented Tab Pill --- */
.ws-tab-pill[b-32fy5em1ec] {
    display: flex;
    gap: 1px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 2px;
    flex-shrink: 0;
}

.ws-tab-pill-btn[b-32fy5em1ec] {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86868b;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ws-tab-pill-btn:hover[b-32fy5em1ec] {
    color: #1d1d1f;
}

.ws-tab-pill-btn.active[b-32fy5em1ec] {
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.ws-pill-badge[b-32fy5em1ec] {
    font-size: 10px;
    color: #aeaeb2;
    font-weight: 600;
}

.ws-tab-pill-btn.active .ws-pill-badge[b-32fy5em1ec] {
    color: #0071e3;
}

/* --- Toolbar Actions (right side) --- */
.ws-toolbar-actions[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.ws-tb-icon[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.ws-tb-icon:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
}

.ws-tb-icon:disabled[b-32fy5em1ec] {
    opacity: 0.3;
    cursor: not-allowed;
}

.ws-tb-upload[b-32fy5em1ec] {
    color: #0071e3;
}

.ws-tb-upload:hover[b-32fy5em1ec] {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
}

.ws-tb-download[b-32fy5em1ec] {
    color: #0071e3;
}

.ws-tb-download:hover[b-32fy5em1ec] {
    background: rgba(0, 113, 227, 0.1);
}

/* ===== Download Progress Bar (reuses upload fill style) ===== */
.ws-download-progress-wrap[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 2px;
}

.ws-download-progress-bar[b-32fy5em1ec] {
    width: 72px !important;
}

.ws-download-progress-label[b-32fy5em1ec] {
    font-size: 10px;
    font-weight: 600;
    color: #0078d4;
    min-width: 26px;
    text-align: right;
}

.ws-tb-sep[b-32fy5em1ec] {
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 3px;
    flex-shrink: 0;
}

/* --- Toolbar Pill Button (prominent toggle buttons) --- */
.ws-tb-pill-btn[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: #86868b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ws-tb-pill-btn:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}

.ws-tb-pill-btn.active[b-32fy5em1ec] {
    background: rgba(0, 113, 227, 0.12);
    color: #0071e3;
}

.ws-tb-pill-btn i[b-32fy5em1ec] {
    font-size: 12px;
}

.ws-tb-pill-label[b-32fy5em1ec] {
    font-size: 11px;
    font-weight: 500;
}

/* §40 removed the collapsible search bar (.ws-search-bar*) — search is now
   the inline `.ws-tb-search` input in the toolbar. */

/* ===== Sort Dropdown ===== */
.ws-sort-dropdown[b-32fy5em1ec] {
    position: relative;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    margin: 0 10px;
    z-index: 50;
    flex-shrink: 0;
    padding: 4px;
    backdrop-filter: blur(20px);
}

.ws-sort-item[b-32fy5em1ec] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.ws-sort-item:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
}

.ws-sort-item.active[b-32fy5em1ec] {
    color: #0071e3;
    font-weight: 600;
}

/* ===== Body: 3-Column Layout ===== */
.ws-body[b-32fy5em1ec] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.ws-preview-section[b-32fy5em1ec] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== Collapsible Panel States ===== */
.ws-body.nav-collapsed[b-32fy5em1ec]  .ws-nav {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    border-right: none;
    padding: 0;
}

.ws-body.files-collapsed[b-32fy5em1ec]  .ws-files {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    border-right: none;
}

/* ===== Floating Re-open Strip ===== */
.ws-reopen[b-32fy5em1ec] {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: none;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

.ws-reopen-btn[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s, color 0.2s;
}

.ws-reopen-btn:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
    color: #0071e3;
}

/* ===== Empty Preview ===== */
.ws-empty-preview[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: #aeaeb2;
}

.ws-empty-icon[b-32fy5em1ec] {
    font-size: 36px;
    opacity: 0.3;
}

.ws-empty-text[b-32fy5em1ec] {
    font-size: 14px;
    font-weight: 400;
}

/* ===== Storage Footer (compact inline) ===== */
.ws-stor-inline[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    font-size: 10px;
    color: #aeaeb2;
    background: #f5f5f7;
}

.ws-stor-bar-inline[b-32fy5em1ec] {
    flex: 1;
    height: 2px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 1px;
    overflow: hidden;
    min-width: 0;
}

.ws-stor-fill-inline[b-32fy5em1ec] {
    height: 100%;
    background: #0071e3;
    border-radius: 1px;
    transition: width 0.4s ease;
}

.ws-stor-val-inline[b-32fy5em1ec] {
    white-space: nowrap;
}

/* ===== Toast Notifications ===== */
.ws-toast-stack[b-32fy5em1ec] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 1100;
    max-width: 360px;
}

.ws-toast[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    animation: ws-toast-in-b-32fy5em1ec 0.3s ease-out;
    font-size: 13px;
    color: #1d1d1f;
}

.ws-toast-info[b-32fy5em1ec] { border-left: 3px solid #0071e3; }
.ws-toast-success[b-32fy5em1ec] { border-left: 3px solid #30d158; }
.ws-toast-warning[b-32fy5em1ec] { border-left: 3px solid #ff9f0a; }
.ws-toast-error[b-32fy5em1ec] { border-left: 3px solid #ff453a; }

.ws-toast-icon[b-32fy5em1ec] {
    color: #0071e3;
    font-size: 15px;
    flex-shrink: 0;
}

.ws-toast-msg[b-32fy5em1ec] { flex: 1; min-width: 0; line-height: 1.5; }

.ws-toast-close[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #aeaeb2;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.ws-toast-close:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

@keyframes ws-toast-in-b-32fy5em1ec {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Upload Progress Strip (like chat upload chips) ===== */
.ws-upload-progress-strip[b-32fy5em1ec] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

/* UPLOAD-A1+A5 (2026-05-28, Brain): chip is now a vertical container so the
   always-visible error band can stack under the original single-line layout.
   The `.ws-upload-chip-row` wraps what used to be the entire chip. */
.ws-upload-chip[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    font-size: 12px;
    color: #1d1d1f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.ws-upload-chip-row[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
}

.ws-upload-chip.complete[b-32fy5em1ec] {
    border-color: #30d158;
    background: #f0fdf4;
}

.ws-upload-chip.error[b-32fy5em1ec] {
    border-color: #ff453a;
    background: #fff5f5;
}

/* UPLOAD-A1+A5 (2026-05-28, Brain): inline error reason — always visible.
   Pair to the chat-side att-card-error-band; same visual language. */
.ws-upload-chip-error-band[b-32fy5em1ec] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px 6px;
    border-top: 1px solid rgba(164, 38, 44, 0.18);
    background: rgba(255, 59, 48, 0.06);
    color: #8b1c20;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    word-break: break-word;
}

.ws-upload-chip-error-band i[b-32fy5em1ec] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 11px;
    color: #a4262c;
}

.ws-upload-chip-name[b-32fy5em1ec] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-upload-progress-bar[b-32fy5em1ec] {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: #e1dfdd;
    overflow: hidden;
    flex-shrink: 0;
}

.ws-upload-progress-fill[b-32fy5em1ec] {
    height: 100%;
    border-radius: 2px;
    background: #0078d4;
    transition: width 0.2s ease;
}

.ws-upload-chip-done[b-32fy5em1ec] {
    color: #30d158;
    font-size: 10px;
}

.ws-upload-chip-error[b-32fy5em1ec] {
    color: #ff453a;
    font-size: 10px;
}

/* ===== L1: Empty-State Onboarding Card ===== */
.ws-onboarding[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 14px;
    padding: 32px;
    text-align: center;
}

.ws-onboarding-icon[b-32fy5em1ec] {
    font-size: 40px;
    color: #0071e3;
    opacity: 0.6;
}

.ws-onboarding-title[b-32fy5em1ec] {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.ws-onboarding-desc[b-32fy5em1ec] {
    font-size: 14px;
    color: #86868b;
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

.ws-onboarding-prompts[b-32fy5em1ec] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 400px;
}

.ws-onboarding-chip[b-32fy5em1ec] {
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0, 113, 227, 0.06);
    color: #0071e3;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ===== Responsive Burger Menu for Narrow Toolbar ===== */
.ws-burger-menu[b-32fy5em1ec] {
    display: none;
    position: relative;
}

.ws-burger-btn[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-burger-dropdown[b-32fy5em1ec] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    z-index: 1200;
}

.ws-burger-item[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: #1d1d1f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.ws-burger-item:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
}

.ws-burger-item:disabled[b-32fy5em1ec] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ws-burger-item i[b-32fy5em1ec] {
    width: 16px;
    color: #86868b;
    text-align: center;
}

.ws-burger-sep[b-32fy5em1ec] {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 4px 10px;
}

.ws-tb-icons-normal[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ws-tb-close[b-32fy5em1ec] {
    color: #ff453a;
}

.ws-tb-close:hover[b-32fy5em1ec] {
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
}

/* When panel is narrow, hide normal icons and show burger */
@container workspace-panel (max-width: 500px) {
    .ws-burger-menu[b-32fy5em1ec] {
        display: block;
    }

    .ws-tb-icons-normal[b-32fy5em1ec] {
        display: none;
    }
}

/* Fallback: Use media query if container queries unsupported */
@media (max-width: 600px) {
    .workspace-panel:not(.workspace-fullscreen) .ws-burger-menu[b-32fy5em1ec] {
        display: block;
    }

    .workspace-panel:not(.workspace-fullscreen) .ws-tb-icons-normal[b-32fy5em1ec] {
        display: none;
    }
}

.ws-onboarding-upload[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    background: #0071e3;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-onboarding-upload:hover[b-32fy5em1ec] {
    background: #005bb5;
}

.ws-onboarding-types[b-32fy5em1ec] {
    font-size: 10px;
    color: #aeaeb2;
    letter-spacing: 0.3px;
}

/* ===== L2: Keyboard Shortcuts Overlay ===== */
.ws-shortcuts-backdrop[b-32fy5em1ec] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-shortcuts-dialog[b-32fy5em1ec] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    width: 340px;
    padding: 20px 24px;
}

.ws-shortcuts-header[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
}

.ws-shortcuts-close[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 12px;
}

.ws-shortcuts-close:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.ws-shortcuts-list[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ws-shortcut-row[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #1d1d1f;
}

.ws-shortcut-row kbd[b-32fy5em1ec] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    background: #fafafa;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #1d1d1f;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.ws-shortcut-row span[b-32fy5em1ec] {
    color: #86868b;
    font-size: 12px;
}

/* ============================================================================
   v4 — Toolbar additions (B1/B4): storage indicator, Upload primary, spacers
   ============================================================================ */

/* Flex spacer between left pill and middle/right groups */
.ws-tb-spacer[b-32fy5em1ec] {
    flex: 1;
}

/* §40: Inline search input in the toolbar — replaces the buried collapsible bar.
   Sits between the List/Preview pill and the storage indicator. Pill-shaped,
   minimal chrome until focused. */
.ws-tb-search[b-32fy5em1ec] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 280px;
    min-width: 140px;
    max-width: 360px;
    height: 28px;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 0 8px 0 28px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.ws-tb-search:hover[b-32fy5em1ec] {
    background: #ececef;
}

.ws-tb-search:focus-within[b-32fy5em1ec] {
    background: #ffffff;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.ws-tb-search-icon[b-32fy5em1ec] {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    font-size: 11px;
    pointer-events: none;
}

.ws-tb-search-input[b-32fy5em1ec] {
    flex: 1;
    height: 26px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: #1d1d1f;
    min-width: 0;
}

.ws-tb-search-input[b-32fy5em1ec]::placeholder {
    color: #86868b;
}

.ws-tb-search-clear[b-32fy5em1ec] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.12);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.ws-tb-search-clear:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.24);
}

/* Storage indicator — sits between spacer and Upload button */
.ws-storage[b-32fy5em1ec] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 11px;
    color: #86868b;
    white-space: nowrap;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.ws-storage strong[b-32fy5em1ec] {
    color: #1d1d1f;
    font-weight: 600;
}
.ws-storage-warn strong[b-32fy5em1ec] { color: #b25e00; }
.ws-storage-full strong[b-32fy5em1ec] { color: #c62828; }

/* Primary labeled button (Upload) — matches Apple toolbar prominent action */
.ws-tb-btn-primary[b-32fy5em1ec] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: #0071e3;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.ws-tb-btn-primary:hover[b-32fy5em1ec] { background: #006edb; }
.ws-tb-btn-primary:active[b-32fy5em1ec] { background: #005bb8; }
.ws-tb-btn-primary i[b-32fy5em1ec] {
    font-size: 11px;
    line-height: 1;
}

/* Thin vertical separator between actions and chrome (fullscreen / close) */
.ws-tb-chrome-sep[b-32fy5em1ec] {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── §28: Drag-and-drop overlay ──────────────────────────────────────── */
.workspace-panel.is-drag-over[b-32fy5em1ec] {
    /* Subtle inset ring so the user sees the drop target is "armed"
       without flashing the entire panel a different color. */
    outline: 2px dashed #0071e3;
    outline-offset: -8px;
}

.ws-dropzone-overlay[b-32fy5em1ec] {
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 247, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Pointer-events:none so the underlying div still receives the drop event. */
    pointer-events: none;
}

.ws-dropzone-card[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 56px;
    background: #ffffff;
    border: 2px dashed #0071e3;
    border-radius: 16px;
    color: #1d1d1f;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.ws-dropzone-card i[b-32fy5em1ec] {
    font-size: 40px;
    color: #0071e3;
}

.ws-dropzone-title[b-32fy5em1ec] {
    font-size: 18px;
    font-weight: 600;
}

.ws-dropzone-sub[b-32fy5em1ec] {
    font-size: 12px;
    color: #6e6e73;
    letter-spacing: 0.02em;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceShareDialog.razor.rz.scp.css */
/* =============================================================================
   WorkspaceShareDialog.razor.css — Share Dialog Modal (Apple-inspired)
   ============================================================================= */

.ws-share-backdrop[b-zyn8a15xfi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-share-dialog[b-zyn8a15xfi] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ws-share-header[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

.ws-share-title[b-zyn8a15xfi] {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

.ws-share-close[b-zyn8a15xfi] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.ws-share-close:hover[b-zyn8a15xfi] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.ws-share-body[b-zyn8a15xfi] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}

.ws-share-field[b-zyn8a15xfi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ws-share-label[b-zyn8a15xfi] {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ws-share-type-row[b-zyn8a15xfi] {
    display: flex;
    gap: 6px;
}

.ws-share-type-btn[b-zyn8a15xfi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    color: #86868b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ws-share-type-btn:hover[b-zyn8a15xfi] {
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
}

.ws-share-type-btn.active[b-zyn8a15xfi] {
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    font-weight: 600;
}

.ws-share-input[b-zyn8a15xfi] {
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.04);
    outline: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.ws-share-input:focus[b-zyn8a15xfi] {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.3);
}

.ws-share-warning[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 159, 10, 0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #835b00;
}

.ws-share-error[b-zyn8a15xfi] {
    font-size: 12px;
    color: #ff453a;
    padding: 4px 0;
}

.ws-share-footer[b-zyn8a15xfi] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px 20px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}

.ws-share-cancel-btn[b-zyn8a15xfi] {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-share-cancel-btn:hover[b-zyn8a15xfi] {
    background: rgba(0, 0, 0, 0.08);
}

.ws-share-submit-btn[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border: none;
    border-radius: 8px;
    background: #0071e3;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-share-submit-btn:hover[b-zyn8a15xfi] {
    background: #0077ed;
}

.ws-share-submit-btn:disabled[b-zyn8a15xfi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ws-share-cancel-btn:disabled[b-zyn8a15xfi] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Group Member UI ===== */
.ws-group-member-input[b-zyn8a15xfi] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ws-group-member-input .ws-share-input[b-zyn8a15xfi] {
    flex: 1;
    min-width: 0;
}

.ws-group-add-btn[b-zyn8a15xfi] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    border-radius: 6px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ws-group-add-btn:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorBrandBackgroundHover, #006cbe);
}

.ws-group-add-btn:disabled[b-zyn8a15xfi] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ws-group-member-list[b-zyn8a15xfi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    max-height: 140px;
    overflow-y: auto;
}

.ws-group-member-item[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
}

.ws-group-member-name[b-zyn8a15xfi] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-group-member-id[b-zyn8a15xfi] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.ws-group-remove-btn[b-zyn8a15xfi] {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #999);
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws-group-remove-btn:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorPaletteRedBackground2, #fde7e9);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

/* ===== Searchable Dropdown (Department / Company Pickers) ===== */
.ws-searchable-dropdown[b-zyn8a15xfi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ws-dropdown-list[b-zyn8a15xfi] {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
}

.ws-dropdown-item[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.ws-dropdown-item:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.ws-dropdown-item.selected[b-zyn8a15xfi] {
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
}

.ws-dropdown-item + .ws-dropdown-item[b-zyn8a15xfi] {
    border-top: 1px solid var(--BEC-colorNeutralStroke3, #f0f0f0);
}

.ws-dropdown-item-name[b-zyn8a15xfi] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-dropdown-item-code[b-zyn8a15xfi] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    flex-shrink: 0;
    margin-left: 8px;
}

.ws-dropdown-empty[b-zyn8a15xfi] {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.ws-picker-loading[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.ws-picker-empty[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 13px;
    color: var(--BEC-colorPaletteYellowForeground2, #835b00);
    background: var(--BEC-colorPaletteYellowBackground2, #fff4ce);
    border-radius: 6px;
}

.ws-selected-target[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
    border: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    border-radius: 6px;
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-weight: 500;
}

.ws-selected-clear[b-zyn8a15xfi] {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.ws-selected-clear:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorBrandBackgroundHover, #006cbe);
    color: #ffffff;
}

/* ===== Multi-select User Chips ===== */
.ws-user-chips[b-zyn8a15xfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ws-user-chip[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
    border: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    border-radius: 16px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    max-width: 100%;
}

.ws-user-chip i:first-child[b-zyn8a15xfi] {
    font-size: 10px;
    flex-shrink: 0;
}

.ws-user-chip-name[b-zyn8a15xfi] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-user-chip-email[b-zyn8a15xfi] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-user-chip-remove[b-zyn8a15xfi] {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws-user-chip-remove:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorPaletteRedBackground2, #fde7e9);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

/* ===== Expiration Date ===== */
.ws-expiry-label[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.ws-expiry-label input[type="checkbox"][b-zyn8a15xfi] {
    accent-color: var(--BEC-colorBrandBackground, #0078d4);
    cursor: pointer;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceShareManageDialog.razor.rz.scp.css */
/* =============================================================================
   WorkspaceShareManageDialog.razor.css — Manage Shares Modal (Apple-inspired)
   ============================================================================= */

.ws-manage-backdrop[b-mqiqxewtqk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.ws-manage-dialog[b-mqiqxewtqk] {
    background: #fff;
    border-radius: 14px;
    width: 580px;
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.ws-manage-header[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

.ws-manage-title[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

.ws-manage-title i[b-mqiqxewtqk] {
    color: #0071e3;
}

.ws-manage-close[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #aeaeb2;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}

.ws-manage-close:hover[b-mqiqxewtqk] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.ws-manage-body[b-mqiqxewtqk] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ws-manage-loading[b-mqiqxewtqk],
.ws-manage-empty[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: #aeaeb2;
    font-size: 14px;
}

/* ===== Share Table ===== */

.ws-share-table[b-mqiqxewtqk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ws-share-table th[b-mqiqxewtqk] {
    text-align: left;
    padding: 8px 10px;
    font-weight: 500;
    color: #86868b;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.ws-share-table td[b-mqiqxewtqk] {
    padding: 10px;
    color: #1d1d1f;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
    vertical-align: middle;
}

.ws-share-table tr:hover td[b-mqiqxewtqk] {
    background: rgba(0, 0, 0, 0.02);
}

.ws-share-target[b-mqiqxewtqk] {
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-share-type-badge[b-mqiqxewtqk] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: #86868b;
}

.ws-share-access-select[b-mqiqxewtqk] {
    font-size: 13px;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-share-access-select:hover[b-mqiqxewtqk] {
    background: rgba(0, 0, 0, 0.06);
}

.ws-share-date[b-mqiqxewtqk] {
    white-space: nowrap;
    color: #aeaeb2;
}

.ws-share-revoke-btn[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #ff453a;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.ws-share-revoke-btn:hover:not(:disabled)[b-mqiqxewtqk] {
    background: rgba(255, 69, 58, 0.1);
}

.ws-share-revoke-btn:disabled[b-mqiqxewtqk] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceVersionDrawer.razor.rz.scp.css */
/* ============================================================================
   Workspace Version Drawer (B6) — slides in from the right edge of preview
   Apple-clean, matches BEC palette tokens used by SessionSidebar / popover.
   ============================================================================ */

.ws-vd[b-9w0jy11nka] {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 320px;
    background: #fff;
    border-left: 1px solid #e1dfdd;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    z-index: 50;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    animation: ws-vd-slide-in-b-9w0jy11nka .18s cubic-bezier(.4, 0, .2, 1);
}

@keyframes ws-vd-slide-in-b-9w0jy11nka {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.ws-vd-header[b-9w0jy11nka] {
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e1dfdd;
    font-size: .8rem;
    font-weight: 600;
    color: #1d1d1f;
    flex-shrink: 0;
}

.ws-vd-close[b-9w0jy11nka] {
    width: 26px; height: 26px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #6e6e73;
    cursor: pointer;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-vd-close:hover[b-9w0jy11nka] { background: #f3f2f1; color: #1d1d1f; }

.ws-vd-body[b-9w0jy11nka] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.ws-vd-loading[b-9w0jy11nka],
.ws-vd-error[b-9w0jy11nka],
.ws-vd-empty[b-9w0jy11nka] {
    padding: 28px 16px;
    text-align: center;
    font-size: .78rem;
    color: #6e6e73;
}
.ws-vd-error[b-9w0jy11nka] { color: #a80000; }

.ws-vd-row[b-9w0jy11nka] {
    padding: 10px 16px;
    border-bottom: 1px solid #e1dfdd;
}
.ws-vd-row.active[b-9w0jy11nka] { background: #e8f4fd; }

.ws-vd-row-head[b-9w0jy11nka] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.ws-vd-version[b-9w0jy11nka] { font-size: .78rem; font-weight: 600; color: #1d1d1f; }
.ws-vd-time[b-9w0jy11nka] { font-size: .62rem; color: #a19f9d; }

.ws-vd-meta[b-9w0jy11nka] {
    font-size: .65rem;
    color: #6e6e73;
    margin-bottom: 6px;
    line-height: 1.4;
}
.ws-vd-summary[b-9w0jy11nka] {
    margin-top: 4px;
    font-style: italic;
    color: #6e6e73;
}

.ws-vd-actions[b-9w0jy11nka] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.ws-vd-btn[b-9w0jy11nka] {
    height: 26px;
    padding: 0 12px;
    font-size: .68rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-weight: 500;
    border: 1px solid #e1dfdd;
    background: #fff;
    color: #1d1d1f;
    border-radius: 6px;
    cursor: pointer;
}
.ws-vd-btn:hover[b-9w0jy11nka] { background: #f3f2f1; }
.ws-vd-btn.primary[b-9w0jy11nka] {
    border-color: #0078d4;
    color: #0078d4;
}
.ws-vd-btn.primary:hover[b-9w0jy11nka] { background: #e8f4fd; }
.ws-vd-btn:disabled[b-9w0jy11nka] { opacity: .55; cursor: not-allowed; }

/* Confirmation overlay (sits inside the drawer) */
.ws-vd-confirm-backdrop[b-9w0jy11nka] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.ws-vd-confirm-dialog[b-9w0jy11nka] {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    width: 260px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.ws-vd-confirm-dialog h4[b-9w0jy11nka] {
    margin: 0 0 6px;
    font-size: .85rem;
    font-weight: 600;
}
.ws-vd-confirm-dialog p[b-9w0jy11nka] {
    margin: 0 0 14px;
    font-size: .72rem;
    line-height: 1.45;
    color: #6e6e73;
}
.ws-vd-confirm-actions[b-9w0jy11nka] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/GlobalAIAgent.razor.rz.scp.css */
/* =============================================================================
   GlobalAIAgent.razor.css — Shell Layout Styles (BEC Design System)
   ==============================================================================
   All values use BEC Design Tokens from ERP_Design_System_Master_Comprehensive.
   Layout: two-column body (sidebar + content). No header bar.
   ============================================================================== */

/* ===== SHELL CONTAINER ===== */
.agent-shell[b-kh7xrag7y5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f5f7;
    font-family: var(--BEC-fontFamilyBase);
    position: relative;
}

/* ===== BODY (Sidebar + Content) ===== */
.agent-body[b-kh7xrag7y5] {
    display: flex;
    flex: 1;
    min-height: 0; /* Critical: allows flex children to shrink below content height */
    overflow: hidden;
    position: relative; /* Anchor for overlay sidebar + scrim on small screens */
}

/* ===== SIDEBAR COLLAPSE/EXPAND (controlled at parent level — SSOT for dimensions) ===== */
[b-kh7xrag7y5] .session-sidebar {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    opacity: 1;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s ease;
}

.agent-body.sidebar-collapsed[b-kh7xrag7y5]  .session-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    border-right-color: transparent;
}

.agent-body.sidebar-open[b-kh7xrag7y5]  .session-sidebar {
    width: 240px;
    min-width: 240px;
    opacity: 1;
}

/* ===== SIDEBAR TOGGLE BUTTON ===== */
.sidebar-toggle-btn[b-kh7xrag7y5] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #86868b;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.sidebar-toggle-btn:hover[b-kh7xrag7y5] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

/* ===== CONTENT AREA ===== */
/* Default: single column (chat only). When side panel opens, becomes flex-row. */
.agent-content[b-kh7xrag7y5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex child from overflowing */
    overflow: hidden;
    position: relative; /* For absolute sidebar toggle btn */
    background: #fff;
}

/* When workspace panel is open, switch to row layout */
.agent-content.has-workspace-panel[b-kh7xrag7y5] {
    flex-direction: row;
}

/* Chat column: wraps connection bar + plan resume + chat panel as a vertical stack.
   Without this wrapper, the connection bar becomes a horizontal sibling in row mode
   when the workspace panel is open, breaking the layout. */
.agent-chat-column[b-kh7xrag7y5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ===== CONNECTION STATUS — Enterprise Info Bar ===== */
.connection-status[b-kh7xrag7y5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    border-radius: 8px;
    margin: 44px auto 0; /* clear the sidebar/workspace toggle buttons, center horizontally */
    width: fit-content;
    border: 1px solid transparent;
    animation: connectionFadeIn-b-kh7xrag7y5 0.25s ease-out;
}

.connection-dot[b-kh7xrag7y5] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.connection-label[b-kh7xrag7y5] {
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* --- Connecting: soft neutral banner --- */
.connection-status--connecting[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground2, #616161);
    border-color: var(--BEC-colorNeutralStroke2, #e0e0e0);
}

.connection-status--connecting .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandForeground1, #0078d4);
    animation: connectionPulse-b-kh7xrag7y5 1.8s ease-in-out infinite;
}

/* --- Reconnecting: muted warning --- */
.connection-status--reconnecting[b-kh7xrag7y5] {
    background: var(--BEC-colorWarningBackground1, #fff8e1);
    color: var(--BEC-colorWarningForeground1, #7a5900);
    border-color: var(--BEC-colorWarningStroke1, #ffe082);
}

.connection-status--reconnecting .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorWarningForeground1, #7a5900);
    animation: connectionPulse-b-kh7xrag7y5 1.8s ease-in-out infinite;
}

/* --- Disconnected: muted error --- */
.connection-status--disconnected[b-kh7xrag7y5] {
    background: var(--BEC-colorErrorBackground1, #fef2f2);
    color: var(--BEC-colorErrorForeground1, #991b1b);
    border-color: var(--BEC-colorErrorStroke1, #fecaca);
}

.connection-status--disconnected .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorErrorForeground1, #991b1b);
}

/* --- Restored: brief confirmation flash after successful reconnect --- */
.connection-status--restored[b-kh7xrag7y5] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
    animation: connection-restored-fade-b-kh7xrag7y5 2.5s ease-out forwards;
}
.connection-status--restored .connection-dot[b-kh7xrag7y5] {
    background: #10b981;
}
@keyframes connection-restored-fade-b-kh7xrag7y5 {
    0%   { opacity: 0; transform: translateY(-2px); }
    10%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

.reconnect-btn[b-kh7xrag7y5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.reconnect-btn:hover[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.reconnect-icon[b-kh7xrag7y5] {
    font-size: 10px;
}

@keyframes connectionPulse-b-kh7xrag7y5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes connectionFadeIn-b-kh7xrag7y5 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   WORKSPACE RESIZE HANDLE (draggable splitter between chat and workspace)
   ============================================================================= */

.ws-resize-handle[b-kh7xrag7y5] {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.15s ease;
}

.ws-resize-handle:hover[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.ws-resize-grip[b-kh7xrag7y5] {
    width: 2px;
    height: 28px;
    border-radius: 1px;
    background: var(--BEC-colorNeutralStroke2, #d1d1d1);
    transition: height 0.15s ease, background 0.15s ease;
}

.ws-resize-handle:hover .ws-resize-grip[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralForeground3, #616161);
    height: 40px;
}

.ws-resize-handle:active .ws-resize-grip[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandForeground1, #0078d4);
    height: 48px;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS (P0 #3)
   ============================================================================= */

/* Compact desktop / split-screen — sidebar becomes overlay instead of pushing content */
@media (max-width: 1024px) {
    .agent-body.sidebar-open[b-kh7xrag7y5]  .session-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 20;
        width: 280px;
        min-width: 280px;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
    }

    /* Scrim behind overlay sidebar on small screens */
    .agent-body.sidebar-open[b-kh7xrag7y5]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 19;
        animation: scrimFadeIn-b-kh7xrag7y5 0.2s ease-out;
    }
}

@keyframes scrimFadeIn-b-kh7xrag7y5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hide resize handle on tablet/mobile */
@media (max-width: 768px) {
    .ws-resize-handle[b-kh7xrag7y5] {
        display: none;
    }
}
/* /Components/Pages/MainLayout/Home.razor.rz.scp.css */
/* /Components/Pages/MainLayout/Intranet/Bec_Connect/Bec_Connect.razor.rz.scp.css */
/* ========================================
   BEC Connect Component Styles
   Ticket Management System - Chat Interface
   ======================================== */

/* Root Container
   Main container for BEC Connect ticket system
   Uses BEC theme variables for colors and spacing */
.bec-connect-root[b-w9vhn8615t] {
    font-family: 'Inter', sans-serif; /* Design-specific font choice - preserved for exact design match */
    background-color: var(--BEC-colorNeutralBackground1); /* #ffffff */
    color: #111827; /* Design-specific dark gray - preserved for exact design match */
    height: calc(100vh - 64px); /* Adjust based on main layout header height */
    display: flex;
    overflow: hidden;
}

/* Custom Scrollbar Styles
   Custom scrollbar styling for better UX
   Used throughout the component */
[b-w9vhn8615t]::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

[b-w9vhn8615t]::-webkit-scrollbar-track {
    background: transparent;
}

[b-w9vhn8615t]::-webkit-scrollbar-thumb {
    background: #e5e7eb; /* Design-specific gray - preserved for exact design match */
    border-radius: 3px;
}

[b-w9vhn8615t]::-webkit-scrollbar-thumb:hover {
    background: #d1d5db; /* Design-specific gray - preserved for exact design match */
}

/* Textarea Scrollbar
   Smaller scrollbar for textarea elements */
textarea[b-w9vhn8615t]::-webkit-scrollbar {
    width: 4px;
}

textarea[b-w9vhn8615t]::-webkit-scrollbar-thumb {
    background: #d1d5db; /* Design-specific gray - preserved for exact design match */
    border-radius: 2px;
}

/* Textarea Outline Removal
   Removes default outline from textarea elements */
textarea[b-w9vhn8615t] {
    outline: none !important;
}

/* Chat Message Input Auto-Resize
   Textarea that grows/shrinks with content */
#chat-message-input[b-w9vhn8615t] {
    min-height: 48px;
    max-height: 200px;
    resize: none;
    overflow-y: hidden;
    transition: height 0.1s ease;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Fade In Animation
   Smooth fade-in animation for content transitions
   Used when switching between views */
.fade-in[b-w9vhn8615t] {
    animation: fadeIn-b-w9vhn8615t var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

@keyframes fadeIn-b-w9vhn8615t {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth Butter Transition
   Custom easing curve for smooth sliding animations
   Used for tab switching animation */
.butter-slide[b-w9vhn8615t] {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ticket Active State
   Styling for currently selected ticket in sidebar
   Uses BEC theme variables for colors and shadows */
.ticket-active[b-w9vhn8615t] {
    background-color: var(--BEC-colorNeutralBackground1); /* #ffffff */
    border-color: #e5e7eb; /* Design-specific gray - preserved for exact design match */
    box-shadow: var(--BEC-shadow2); /* Microsoft Fluent shadow */
}

/* Ticket Inactive State
   Styling for unselected tickets in sidebar */
.ticket-inactive[b-w9vhn8615t] {
    opacity: 0.8;
    border-color: transparent;
}

/* Ticket Inactive Hover State
   Hover effect for unselected tickets */
.ticket-inactive:hover[b-w9vhn8615t] {
    opacity: 1;
    background-color: #f3f4f6; /* Design-specific gray - preserved for exact design match */
}

/* BEC Connect Description Box
   Information box at the top of the create new request view
   Uses BEC theme variables for colors and spacing */
.bec-connect-description[b-w9vhn8615t] {
    background-color: var(--BEC-colorBrandBackground2); /* Light brand color */
    border: 1px solid var(--BEC-colorBrandStroke2); /* Brand border color */
    border-radius: var(--BEC-borderRadiusMedium); /* 4px */
    padding: var(--BEC-spacingVerticalM); /* 16px */
    margin-bottom: var(--BEC-spacingVerticalXL); /* 24px */
}

.bec-connect-description p[b-w9vhn8615t] {
    font-size: var(--BEC-fontSizeBase200); /* 14px */
    line-height: var(--BEC-lineHeightBase200); /* 20px */
    color: var(--BEC-colorNeutralForeground1); /* Dark text */
    margin: 0;
}

.bec-connect-description strong[b-w9vhn8615t] {
    color: var(--BEC-colorBrandForeground1); /* Brand color for emphasis */
    font-weight: var(--BEC-fontWeightSemibold); /* 600 */
}

/* Status Dropdown Styling
   Custom dropdown for changing ticket status
   Only visible in assigned tickets chat view */
.status-dropdown[b-w9vhn8615t] {
    animation: dropdownFadeIn-b-w9vhn8615t 0.2s ease-out;
}

@keyframes dropdownFadeIn-b-w9vhn8615t {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status Dropdown Backdrop (for mobile)
   Closes dropdown when clicking outside */
.status-dropdown-backdrop[b-w9vhn8615t] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}
/* /Components/Pages/MainLayout/Intranet/Birthday/BirthdayAdministration.razor.rz.scp.css */
/* ========================================
   BIRTHDAY ADMINISTRATION - 100% SYNCFUSION NATIVE RESPONSIVE
   
   FEATURES:
   ✅ 100% Syncfusion EnableAdaptiveUI (automatic mobile/tablet optimization)
   ✅ 100% Syncfusion HideAtMedia (responsive column hiding)
   ✅ BEC Theme variables only (no hardcoded values)
   ✅ No inline styles (all CSS in this file)
   ✅ NO custom media queries (all responsive via Syncfusion)
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-n3epvjkiv6] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-n3epvjkiv6] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-n3epvjkiv6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-n3epvjkiv6] {
    display: none;
}

.header-right[b-n3epvjkiv6] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-n3epvjkiv6] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-n3epvjkiv6] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-card-upcoming .stat-value[b-n3epvjkiv6] {
    color: #d97706;
}

.stat-label[b-n3epvjkiv6] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-n3epvjkiv6] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-n3epvjkiv6] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-n3epvjkiv6] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR */
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP
   ======================================== */
[b-n3epvjkiv6] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-n3epvjkiv6] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   PAGE CONTENT - Grid Container
   ======================================== */
.erp-page-content[b-n3epvjkiv6] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: visible;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-state[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    color: var(--BEC-colorNeutralForeground3);
}

.error-state i[b-n3epvjkiv6] {
    font-size: 32px;
    color: #dc2626;
}

.error-state p[b-n3epvjkiv6] {
    font-size: 14px;
    margin: 0;
}

.error-state .btn[b-n3epvjkiv6] {
    padding: 6px 16px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorBrandBackground);
    background: var(--BEC-colorBrandBackground);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.error-state .btn:hover[b-n3epvjkiv6] {
    opacity: 0.9;
}

/* ========================================
   EMPLOYEE CELL - Avatar + Name Layout
   ======================================== */
.employee-cell[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.avatar-circle[b-n3epvjkiv6] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 1;
    flex-shrink: 0;
}

.avatar-initials[b-n3epvjkiv6] {
    background: var(--BEC-colorBrandBackground);
    color: #fff;
}

.avatar-photo[b-n3epvjkiv6] {
    object-fit: cover;
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.employee-name[b-n3epvjkiv6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   BIRTHDAY BADGES
   ======================================== */
.birthday-badge[b-n3epvjkiv6] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

.birthday-today-badge[b-n3epvjkiv6] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.birthday-upcoming-badge[b-n3epvjkiv6] {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* ========================================
   BIRTHDAY DATE CELL
   ======================================== */
.birthday-date-cell[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.birthday-icon[b-n3epvjkiv6] {
    color: #d97706;
    font-size: 11px;
}

/* ========================================
   GRID STYLING - COMPACT ROWS (32px)
   ======================================== */

/* Grid Container - Rounded Corners */
[b-n3epvjkiv6] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header */
[b-n3epvjkiv6] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content */
[b-n3epvjkiv6] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting */
[b-n3epvjkiv6] .e-grid .e-row.e-selectionbackground,
[b-n3epvjkiv6] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-n3epvjkiv6] .e-grid .e-row.e-selectionbackground:hover,
[b-n3epvjkiv6] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent */
[b-n3epvjkiv6] .e-grid .e-row.e-selectionbackground td:first-child,
[b-n3epvjkiv6] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - Compact (32px) */
[b-n3epvjkiv6] .e-grid .e-row {
    height: 32px !important;
}

[b-n3epvjkiv6] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - Compact */
[b-n3epvjkiv6] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-n3epvjkiv6] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Virtual Scrolling Hardware Acceleration */
[b-n3epvjkiv6] .birthday-admin-grid {
    will-change: scroll-position;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    contain: layout style paint;
    isolation: isolate;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-virtualtrack {
    will-change: height;
    contain: layout;
}

/* Custom Scrollbar */
[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    margin: 2px;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    border: 2px solid var(--BEC-colorNeutralBackground2);
    transition: background 0.2s ease;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:active {
    background: var(--BEC-colorBrandBackgroundPressed);
}

/* ========================================
   MONTHLY POSTER DIALOG
   ======================================== */
[b-n3epvjkiv6] .poster-dialog .e-dlg-header {
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

.poster-loading[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    position: relative;
}

.poster-preview-container[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.poster-preview-image[b-n3epvjkiv6] {
    max-width: 100%;
    height: auto;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.poster-form[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.poster-form-group[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.poster-form-label[b-n3epvjkiv6] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

[b-n3epvjkiv6] .poster-input {
    width: 100% !important;
}

[b-n3epvjkiv6] .poster-input-rtl .e-input {
    direction: rtl;
    text-align: right;
}

.poster-message[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    margin-top: 12px;
}

.poster-message-success[b-n3epvjkiv6] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.poster-message-error[b-n3epvjkiv6] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.poster-confirm-text[b-n3epvjkiv6] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.5;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px !important;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content .e-btn {
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content .e-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content .e-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-corner {
    background: var(--BEC-colorNeutralBackground2);
}

/* Firefox scrollbar */
[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent {
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke2) var(--BEC-colorNeutralBackground2);
}

/* Smooth selection highlight */
[b-n3epvjkiv6] .birthday-admin-grid .e-selectionbackground {
    transition: background-color 0.15s ease;
}

/* Loading indicator for virtual scrolling */
[b-n3epvjkiv6] .birthday-admin-grid .e-spinner-pane {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ========================================
   FILTERED COLUMN INDICATOR
   ======================================== */
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell .e-filtered::before {
    color: var(--BEC-colorBrandForeground1) !important;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-headercell .e-headercelldiv {
    transition: color 0.2s ease;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-filtered~.e-headercelldiv,
[b-n3epvjkiv6] .birthday-admin-grid .e-filtered~.e-headertext,
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-headercelldiv,
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-headertext {
    color: var(--BEC-colorBrandForeground1) !important;
    font-weight: 600 !important;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-ascending,
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-descending {
    color: var(--BEC-colorBrandForeground1) !important;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   ======================================== */
[b-n3epvjkiv6] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

[b-n3epvjkiv6] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

[b-n3epvjkiv6] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   EXCEL FILTER DIALOG
   ======================================== */
[b-n3epvjkiv6] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-n3epvjkiv6] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   POSTER GALLERY DIALOG
   ======================================== */
[b-n3epvjkiv6] .gallery-dialog .e-dlg-header {
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

.gallery-loading[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

.gallery-error[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--BEC-colorNeutralForeground3);
}

.gallery-error i[b-n3epvjkiv6] {
    font-size: 28px;
    color: #dc2626;
}

.gallery-error p[b-n3epvjkiv6] {
    font-size: 13px;
    margin: 0;
}

.gallery-empty[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--BEC-colorNeutralForeground3);
}

.gallery-empty i[b-n3epvjkiv6] {
    font-size: 36px;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.5;
}

.gallery-empty p[b-n3epvjkiv6] {
    font-size: 14px;
    margin: 0;
    font-weight: var(--BEC-fontWeightSemibold);
}

.gallery-empty-hint[b-n3epvjkiv6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Gallery Grid Layout */
.gallery-grid[b-n3epvjkiv6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px 0;
    max-height: 60vh;
    overflow-y: auto;
}

/* Gallery Card */
.gallery-card[b-n3epvjkiv6] {
    position: relative;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gallery-card:hover[b-n3epvjkiv6] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.gallery-card-image[b-n3epvjkiv6] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
    background: var(--BEC-colorNeutralBackground2);
}

.gallery-card-image img[b-n3epvjkiv6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-card-image img[b-n3epvjkiv6] {
    transform: scale(1.03);
}

.gallery-card-overlay[b-n3epvjkiv6] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-card-image:hover .gallery-card-overlay[b-n3epvjkiv6] {
    opacity: 1;
}

.gallery-card-overlay i[b-n3epvjkiv6] {
    color: #fff;
    font-size: 20px;
}

.gallery-card-info[b-n3epvjkiv6] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-card-name[b-n3epvjkiv6] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-card-meta[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gallery-card-date[b-n3epvjkiv6],
.gallery-card-size[b-n3epvjkiv6] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.gallery-card-delete[b-n3epvjkiv6] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}

.gallery-card:hover .gallery-card-delete[b-n3epvjkiv6] {
    opacity: 1;
}

.gallery-card-delete:hover[b-n3epvjkiv6] {
    background: #b91c1c;
    transform: scale(1.1);
}

/* ========================================
   MONTHLY BIRTHDAYS DIALOG
   ======================================== */
[b-n3epvjkiv6] .monthly-birthdays-dialog .e-dlg-header {
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

.monthly-birthdays-container[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.monthly-birthdays-header[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.month-selector[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.month-selector-label[b-n3epvjkiv6] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.month-selector-dropdown[b-n3epvjkiv6] {
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    outline: none;
    min-width: 150px;
}

.month-selector-dropdown:focus[b-n3epvjkiv6] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15);
}

.monthly-birthdays-total[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-badge[b-n3epvjkiv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    background: var(--BEC-colorBrandBackground);
    color: #fff;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightBold);
}

.total-label[b-n3epvjkiv6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.monthly-birthdays-loading[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

/* Region Tabs */
.region-tabs[b-n3epvjkiv6] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding-bottom: 0;
}

.region-tab[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    border-radius: var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0 0;
}

.region-tab:hover[b-n3epvjkiv6] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground2);
}

.region-tab-active[b-n3epvjkiv6] {
    color: var(--BEC-colorBrandForeground1);
    border-bottom-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

.region-tab-name[b-n3epvjkiv6] {
    white-space: nowrap;
}

.region-tab-badge[b-n3epvjkiv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--BEC-colorNeutralBackground2);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.region-tab-active .region-tab-badge[b-n3epvjkiv6] {
    background: var(--BEC-colorBrandBackground);
    color: #fff;
}

.region-content[b-n3epvjkiv6] {
    padding-top: 12px;
}

/* Monthly Birthday Grid Styling */
[b-n3epvjkiv6] .monthly-birthday-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row {
    height: 32px !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row:nth-child(even) {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Dialog Footer Styling */
[b-n3epvjkiv6] .gallery-dialog .e-footer-content,
[b-n3epvjkiv6] .monthly-birthdays-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px !important;
}

[b-n3epvjkiv6] .gallery-dialog .e-footer-content .e-btn,
[b-n3epvjkiv6] .monthly-birthdays-dialog .e-footer-content .e-btn {
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}
/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventCreateModal.razor.rz.scp.css */
/* ========================================
   Event Create Modal - Sidebar Wizard
   Used on: EventsAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Sidebar + Wizard Pattern
   ======================================== */

/* ========================================
   SIDEBAR WIZARD CONTAINER
   ======================================== */

:global(.event-create-sidebar .e-sidebar)[b-2d3rrx2aw4] {
    width: 650px !important;
    box-shadow: var(--BEC-shadow64);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-container[b-2d3rrx2aw4] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-2d3rrx2aw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-2d3rrx2aw4] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-2d3rrx2aw4] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-2d3rrx2aw4] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-2d3rrx2aw4] {
    display: flex;
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.progress-step[b-2d3rrx2aw4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    cursor: pointer;
}

.progress-step[b-2d3rrx2aw4]::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.progress-step:last-child[b-2d3rrx2aw4]::after {
    display: none;
}

.progress-number[b-2d3rrx2aw4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    z-index: 1;
    transition: all 0.3s ease;
}

.progress-step.completed .progress-number[b-2d3rrx2aw4] {
    background: var(--BEC-colorCompoundBrandBackground);
    border-color: var(--BEC-colorCompoundBrandBackground);
    color: white;
}

.progress-step.active .progress-number[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
}

.progress-label[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-align: center;
}

.progress-step.active .progress-label[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.progress-step.completed .progress-label[b-2d3rrx2aw4] {
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   SIDEBAR CONTENT (Scrollable)
   ======================================== */

.sidebar-content[b-2d3rrx2aw4] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP STYLING
   ======================================== */

.wizard-step[b-2d3rrx2aw4] {
    animation: slideIn-b-2d3rrx2aw4 0.3s ease-out;
}

@keyframes slideIn-b-2d3rrx2aw4 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-title[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.step-title i[b-2d3rrx2aw4] {
    color: var(--BEC-themePrimary);
}

.step-description[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
}

.subsection-title[b-2d3rrx2aw4] {
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-2d3rrx2aw4] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-2d3rrx2aw4] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-2d3rrx2aw4]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-2d3rrx2aw4] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-2d3rrx2aw4] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.review-section-title[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-2d3rrx2aw4] {
    grid-column: 1 / -1;
}

.review-image-preview[b-2d3rrx2aw4] {
    margin-top: var(--BEC-spacingHorizontalS);
}

.review-image-preview img[b-2d3rrx2aw4] {
    max-width: 200px;
    max-height: 150px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    object-fit: cover;
}

.review-label[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-2d3rrx2aw4] {
    padding: 0 var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-2d3rrx2aw4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-2d3rrx2aw4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-themePrimary);
}

.btn-success:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   LEGACY DIALOG STYLES (Keeping for compatibility)
   ======================================== */

/* Dialog Container */
:global(.event-create-dialog)[b-2d3rrx2aw4] {
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 1200px;
}

/* Dialog Header */
:global(.branch-create-dialog .e-dlg-header)[b-2d3rrx2aw4] {
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXL);
}

.dialog-header-content[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.dialog-title[b-2d3rrx2aw4] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.dialog-title i[b-2d3rrx2aw4] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-subtitle[b-2d3rrx2aw4] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Dialog Content */
:global(.branch-create-dialog .e-dlg-content)[b-2d3rrx2aw4] {
    padding: 0;
    overflow: hidden;
}

/* Dialog Footer */
:global(.branch-create-dialog .e-footer-content)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   SYNCFUSION STEPPER CUSTOMIZATION (LABEL ONLY)
   ✅ No icon styling needed - Label Only mode
   ✅ Clean, professional text-only display
   ======================================== */

:global(.event-stepper)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* Stepper Labels (Text Only) */
:global(.branch-stepper .e-step .e-step-label-container)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM);
}

:global(.branch-stepper .e-step .e-step-text-content)[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.3s ease;
}

/* Active Step Label */
:global(.branch-stepper .e-step.e-step-selected .e-step-text-content)[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

/* Completed Step Label */
:global(.branch-stepper .e-step.e-step-completed .e-step-text-content)[b-2d3rrx2aw4] {
    color: var(--BEC-colorNeutralForeground2);
}

/* Stepper Connector Lines */
:global(.branch-stepper .e-stepper-progressbar)[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralStroke2);
    height: 3px;
    transition: all 0.3s ease;
}

:global(.branch-stepper .e-step.e-step-completed .e-stepper-progressbar)[b-2d3rrx2aw4],
:global(.branch-stepper .e-step.e-step-selected .e-stepper-progressbar)[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    height: 4px;
}

/* ========================================
   FORM CONTENT AREA
   ======================================== */

.dialog-form-content[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalXXL);
    min-height: 400px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar {
    width: 8px;
}

.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
}

.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke3);
}

/* Form Step Container */
.form-step[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (2-column grid) */
.form-row[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (3-column grid) - Compact horizontal layout */
.form-row-triple[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Row (4-column grid) - Ultra-compact for small fields */
.form-row-quad[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Group */
.form-group[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.form-group.full-width[b-2d3rrx2aw4] {
    grid-column: span 2;
}

/* Form Label */
.form-label[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-label .required[b-2d3rrx2aw4] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: var(--BEC-spacingHorizontalXXS);
}

/* Read-only Company/Organization Display */
.input-readonly[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background-color: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-readonly i[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Company/Organization Display */
.input-loading[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    background-color: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-loading i[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Field Hint */
.field-hint[b-2d3rrx2aw4] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   Displayed directly under each field
   ======================================== */
.error-message[b-2d3rrx2aw4] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-2d3rrx2aw4 0.2s ease;
}

@keyframes slideDown-b-2d3rrx2aw4 {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: var(--BEC-spacingHorizontalM) 0 var(--BEC-spacingHorizontalS) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   INFO BOX
   ======================================== */
.info-box[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themeLighter);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.info-box i[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

/* ========================================
   TOGGLE SWITCH (Syncfusion SfSwitch)
   ======================================== */
.toggle-wrapper[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    padding-top: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SYNCFUSION SWITCH SIZING
   Make toggle wider to fit Active/Inactive text
   ======================================== */
.toggle-wrapper :global(.e-switch-wrapper)[b-2d3rrx2aw4] {
    width: 100px !important;
    min-width: 100px !important;
}

.toggle-wrapper :global(.e-switch-inner)[b-2d3rrx2aw4] {
    width: 100px !important;
}

.toggle-wrapper :global(.e-switch-on)[b-2d3rrx2aw4],
.toggle-wrapper :global(.e-switch-off)[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

/* ========================================
   DIALOG FOOTER (SYNCFUSION BUTTONS)
   ✅ NO custom button classes
   ✅ Uses Syncfusion e-btn classes
   ======================================== */
.dialog-footer-wrapper[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    width: 100%;
}

.footer-spacer[b-2d3rrx2aw4] {
    flex: 1;
}

/* Syncfusion Button Customization */
:global(.branch-create-dialog .e-footer-content .e-btn)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 100px;
}

/* Primary Button Styling */
:global(.branch-create-dialog .e-footer-content .e-btn.e-primary)[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
}

:global(.branch-create-dialog .e-footer-content .e-btn.e-primary:hover:not(:disabled))[b-2d3rrx2aw4] {
    background: var(--BEC-themeSecondary);
    border-color: var(--BEC-themeSecondary);
}

/* Success Button Styling */
:global(.branch-create-dialog .e-footer-content .e-btn.e-success)[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

:global(.branch-create-dialog .e-footer-content .e-btn.e-success:hover:not(:disabled))[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

/* Flat Button Styling */
:global(.branch-create-dialog .e-footer-content .e-btn.e-flat)[b-2d3rrx2aw4] {
    background: transparent;
    border-color: transparent;
    color: var(--BEC-colorNeutralForeground2);
}

:global(.branch-create-dialog .e-footer-content .e-btn.e-flat:hover:not(:disabled))[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

/* Button Icons */
:global(.branch-create-dialog .e-footer-content .e-btn .e-btn-icon)[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Disabled Button State */
:global(.branch-create-dialog .e-footer-content .e-btn:disabled)[b-2d3rrx2aw4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION (Step 4)
   ======================================== */
.review-section[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.review-section h4[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
}

.review-row[b-2d3rrx2aw4] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-row:last-child[b-2d3rrx2aw4] {
    border-bottom: none;
}

.review-label[b-2d3rrx2aw4] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.review-value[b-2d3rrx2aw4] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase200);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :global(.event-create-dialog)[b-2d3rrx2aw4] {
        max-width: 700px;
    }
    
    .dialog-form-content[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalL);
        min-height: 350px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    :global(.event-create-dialog)[b-2d3rrx2aw4] {
        width: 95%;
        max-width: 100%;
        margin: var(--BEC-spacingHorizontalMNudge);
    }
    
    :global(.branch-create-dialog .e-dlg-header)[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    }
    
    .dialog-title[b-2d3rrx2aw4] {
        font-size: var(--BEC-fontSizeBase500);
    }
    
    :global(.event-stepper)[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalL);
    }
    
    :global(.branch-stepper .e-step .e-step-text-content)[b-2d3rrx2aw4] {
        font-size: var(--BEC-fontSizeBase200);
    }
    
    .dialog-form-content[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalXL);
        min-height: 380px;
    }
    
    .form-row[b-2d3rrx2aw4] {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width[b-2d3rrx2aw4] {
        grid-column: span 1;
    }
    
    .dialog-footer-wrapper[b-2d3rrx2aw4] {
        flex-wrap: wrap;
    }
    
    .footer-spacer[b-2d3rrx2aw4] {
        display: none;
    }
    
    :global(.branch-create-dialog .e-footer-content .e-btn)[b-2d3rrx2aw4] {
        flex: 1;
        min-width: 120px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    :global(.event-create-dialog)[b-2d3rrx2aw4] {
        border-radius: 0;
        max-height: 100vh;
    }

    .dialog-title[b-2d3rrx2aw4] {
        font-size: var(--BEC-fontSizeBase400);
    }
    
    :global(.branch-stepper .e-step .e-step-text-content)[b-2d3rrx2aw4] {
        display: none; /* Hide labels to save space */
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-2d3rrx2aw4] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-2d3rrx2aw4] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBorder1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteRedBackground2);
    border-color: var(--BEC-colorPaletteRedForeground2);
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-2d3rrx2aw4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upload Controls */
.upload-controls[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-2d3rrx2aw4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Field Hint */
.field-hint[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.targets-list[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground2);
    padding: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-top: var(--BEC-spacingHorizontalL);
}

.targets-list-title[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.target-item[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.target-name[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-remove-target[b-2d3rrx2aw4] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    transition: color 0.2s;
}

    .btn-remove-target:hover[b-2d3rrx2aw4] {
        color: var(--BEC-colorPaletteRedForeground2);
    }

.info-message[b-2d3rrx2aw4] {
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-themePrimary);
    padding: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusSmall);
    margin: var(--BEC-spacingHorizontalL) 0;
}

    .info-message i[b-2d3rrx2aw4] {
        color: var(--BEC-themePrimary);
        margin-right: var(--BEC-spacingHorizontalS);
    }

.loading-indicator[b-2d3rrx2aw4] {
    text-align: center;
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorNeutralForeground3);
}
/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventEditModal.razor.rz.scp.css */
/* ========================================
   Event Edit Modal - Sidebar Wizard
   Used on: EventsAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Sidebar + Wizard Pattern
   ======================================== */

/* ========================================
   SIDEBAR WIZARD CONTAINER
   ======================================== */

:global(.event-edit-sidebar .e-sidebar)[b-xn73o1verm] {
    width: 650px !important;
    box-shadow: var(--BEC-shadow64);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-container[b-xn73o1verm] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-xn73o1verm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-xn73o1verm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-xn73o1verm] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-xn73o1verm] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-xn73o1verm] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-xn73o1verm] {
    display: flex;
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.progress-step[b-xn73o1verm] {
    flex: 1;
    text-align: center;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    padding: var(--BEC-spacingHorizontalS);
    position: relative;
}

.progress-step.active[b-xn73o1verm] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT (Scrollable)
   ======================================== */

.sidebar-content[b-xn73o1verm] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP STYLING
   ======================================== */

.wizard-step[b-xn73o1verm] {
    animation: slideIn-b-xn73o1verm 0.3s ease-out;
}

@keyframes slideIn-b-xn73o1verm {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-title[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.step-title i[b-xn73o1verm] {
    color: var(--BEC-themePrimary);
}

.step-description[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
}

.subsection-title[b-xn73o1verm] {
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-xn73o1verm] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-xn73o1verm] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-xn73o1verm]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-xn73o1verm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-xn73o1verm] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-xn73o1verm] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.review-section-title[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-xn73o1verm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-xn73o1verm] {
    grid-column: 1 / -1;
}

.review-label[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-xn73o1verm] {
    padding: 0 var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS
   ======================================== */

.btn[b-xn73o1verm] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-xn73o1verm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-xn73o1verm] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-xn73o1verm] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-xn73o1verm] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-themePrimary);
}

.btn-success:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   FIELD HINT
   ======================================== */

.field-hint[b-xn73o1verm] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   ======================================== */

.error-message[b-xn73o1verm] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-xn73o1verm 0.2s ease;
}

@keyframes slideDown-b-xn73o1verm {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

.image-preview-container[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.image-preview[b-xn73o1verm] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

.btn-remove-image[b-xn73o1verm] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-colorPaletteRedBackground2);
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-xn73o1verm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.upload-controls[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload-image[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-xn73o1verm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   TARGET AUDIENCE
   ======================================== */

.targets-list[b-xn73o1verm] {
    background: var(--BEC-colorNeutralBackground2);
    padding: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-top: var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.targets-list-title[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.target-item[b-xn73o1verm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.target-name[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-remove-target[b-xn73o1verm] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    transition: color 0.2s;
}

.btn-remove-target:hover[b-xn73o1verm] {
    color: var(--BEC-colorPaletteRedForeground2);
}

.info-message[b-xn73o1verm] {
    background: var(--BEC-themeLighter);
    border-left: 4px solid var(--BEC-themePrimary);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorBrandForeground1);
}

.info-message i[b-xn73o1verm] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

.loading-indicator[b-xn73o1verm] {
    text-align: center;
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-indicator i[b-xn73o1verm] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase600);
}

.loading-box[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-box i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-themePrimary);
}

.error-box[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-box i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase600);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.event-edit-sidebar .e-sidebar)[b-xn73o1verm] {
        width: 100% !important;
    }
    
    .form-row[b-xn73o1verm] {
        grid-template-columns: 1fr;
    }
    
    .review-grid[b-xn73o1verm] {
        grid-template-columns: 1fr;
    }
}

/* Form Sections */
.form-section[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-header[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
}

/* Form Rows */
.form-row-single[b-xn73o1verm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.form-row-double[b-xn73o1verm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--BEC-spacingHorizontalL);
}

.form-row-triple[b-xn73o1verm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Groups */
.form-group[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalSNudge);
}

.form-label[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.required[b-xn73o1verm] {
    color: #dc2626;
    margin-left: var(--BEC-spacingHorizontalXXS);
}

.checkbox-label[b-xn73o1verm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalM);
    background: white;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.checkbox-label:hover[b-xn73o1verm] {
    border-color: var(--BEC-themePrimary);
    background: #f9fafb;
}

.checkbox-label input[type="checkbox"][b-xn73o1verm] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Multiline Input */
[b-xn73o1verm] .multiline-input textarea {
    min-height: 100px !important;
}

/* Dialog Footer */
.dialog-footer-content[b-xn73o1verm] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    justify-content: flex-end;
}

/* Loading State */
.spinner-border[b-xn73o1verm] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-xn73o1verm 0.75s linear infinite;
}

.spinner-border-sm[b-xn73o1verm] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

@keyframes spinner-border-b-xn73o1verm {
    to {
        transform: rotate(360deg);
    }
}

/* Loading Box */
.loading-box[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalXXL);
    background: white;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase400);
}

.loading-box i[b-xn73o1verm] {
    font-size: 32px;
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-xn73o1verm] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-xn73o1verm] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-xn73o1verm] {
    background: #fecaca;
    border-color: #f87171;
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-xn73o1verm] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upload Controls */
.upload-controls[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-xn73o1verm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Field Hint */
.field-hint[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row-double[b-xn73o1verm],
    .form-row-triple[b-xn73o1verm] {
        grid-template-columns: 1fr;
    }
    
    .image-preview[b-xn73o1verm] {
        max-width: 100%;
    }
}

/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventsAdministration.razor.rz.scp.css */
/* ========================================
   EVENTS ADMINISTRATION - REDESIGNED
   Following Department Administration CSS pattern
   
   FEATURES:
   ✅ Department-style action toolbar
   ✅ Compact grid with sticky headers
   ✅ Empty state illustration
   ✅ Professional Microsoft Fluent Design
   
   NOTE: Tabs are in parent component (IntranetAdministration)
   
   STICKY POSITIONING STRATEGY:
   📌 Tabs (Parent):   top: 0px,    z-index: 95
   📌 Action Toolbar:  top: 42px,   z-index: 90
   📌 Grid Headers:    top: 86px,   z-index: 80
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-jm2q7aof1q] {
    scroll-behavior: smooth;
}


/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-jm2q7aof1q] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Note: Tabs are in parent component (IntranetAdministration.razor) */

/* ========================================
   ACTION TOOLBAR - DEPARTMENT STYLE
   STICKY: Stays below tabs while scrolling
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-jm2q7aof1q] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent ======= */
[b-jm2q7aof1q] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    border: none !important;
}

/* ========================================
   PAGE CONTENT - COMPACT GRID
   ======================================== */
.erp-page-content[b-jm2q7aof1q] {
    flex: 1;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-jm2q7aof1q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-jm2q7aof1q] {
    font-size: 32px;
    color: var(--BEC-colorBrandBackground);
}

.loading-overlay p[b-jm2q7aof1q] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* ========================================
   EMPTY STATE - CUSTOM MESSAGE & ILLUSTRATION
   ======================================== */
.empty-state[b-jm2q7aof1q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXXXL);
    text-align: center;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    margin: 40px auto;
    max-width: 600px;
}

.empty-state-icon[b-jm2q7aof1q] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-colorBrandBackgroundPressed) 100%);
    border-radius: 50%;
    margin-bottom: var(--BEC-spacingHorizontalXL);
    box-shadow: var(--BEC-shadow8);
}

.empty-state-icon i[b-jm2q7aof1q] {
    font-size: 64px;
    color: white;
}

.empty-state-title[b-jm2q7aof1q] {
    font-size: 24px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
}

.empty-state-message[b-jm2q7aof1q] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXXL) 0;
    line-height: 1.6;
}

/* ========================================
   GRID STYLING - COMPACT MODE
   ======================================== */

/* Grid Container */
[b-jm2q7aof1q] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    overflow: hidden !important;
}

/* NOTE: Column headers, rows, and pager styles are in a global <style>
   block in IntranetAdministration.razor using CssClass="intranet-admin-grid".
   Syncfusion grid internals have no Blazor scope attribute, so scoped
   CSS (::deep, :global()) cannot reach them. */

/* Code Badge in Grid — Wireframe Matched */
[b-jm2q7aof1q] .code-badge {
    display: inline-block;
    padding: 1px 7px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: none;
}

/* Type Badges in Grid — Wireframe Matched */
[b-jm2q7aof1q] .type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

[b-jm2q7aof1q] .type-internal {
    background: #F0FFF0;
    color: #107C10;
}

[b-jm2q7aof1q] .type-external {
    background: #F0F6FC;
    color: #0F6CBD;
}

/* Status Badges in Grid — Wireframe Matched (dot + text) */
.status-badge[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    background: none;
    border: none;
}

.status-badge i[b-jm2q7aof1q] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.status-active[b-jm2q7aof1q] {
    color: #16a34a;
}

.status-active i[b-jm2q7aof1q] {
    background: #16a34a;
    color: #16a34a;
}

.status-inactive[b-jm2q7aof1q] {
    color: var(--BEC-colorNeutralForeground3);
}

.status-inactive i[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralForeground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* Event Status Badges in Grid — Wireframe Matched (pills with bg) */
.event-status-badge[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

.event-status-published[b-jm2q7aof1q] {
    background: #F0FFF0;
    color: #16a34a;
}

.event-status-draft[b-jm2q7aof1q] {
    background: #FFFBF0;
    color: #9A6700;
}

.event-status-cancelled[b-jm2q7aof1q] {
    background: #FDE7E9;
    color: #dc2626;
}

.event-status-completed[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.event-status-ongoing[b-jm2q7aof1q] {
    background: #F0FFF0;
    color: #16a34a;
}

.event-status-upcoming[b-jm2q7aof1q] {
    background: #F0F6FC;
    color: #0F6CBD;
}

.event-status-unknown[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* Event Thumbnail in Grid — Wireframe Matched */
.event-thumbnail[b-jm2q7aof1q] {
    width: 40px;
    height: 28px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.event-thumbnail img[b-jm2q7aof1q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-icon[b-jm2q7aof1q] {
    width: 36px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

/* Registration Info in Grid */
.registration-info[b-jm2q7aof1q] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.registration-info.registration-full[b-jm2q7aof1q] {
    color: #dc2626;
}

.registration-info.registration-available[b-jm2q7aof1q] {
    color: #10b981;
}

.registration-count[b-jm2q7aof1q] {
    font-weight: var(--BEC-fontWeightBold);
}

.badge-danger-small[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: #dc2626;
    color: white;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
    margin-left: 4px;
}

.text-muted[b-jm2q7aof1q] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-jm2q7aof1q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-jm2q7aof1q 0.2s ease-out;
}

@keyframes fadeIn-b-jm2q7aof1q {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-jm2q7aof1q 0.3s ease-out;
}

.modal-container.modal-sm[b-jm2q7aof1q] {
    max-width: 500px;
}

.modal-container.modal-xl[b-jm2q7aof1q] {
    max-width: 1400px;
    max-height: 95vh;
}

@keyframes slideUp-b-jm2q7aof1q {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-jm2q7aof1q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-jm2q7aof1q] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-title i[b-jm2q7aof1q] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.modal-close[b-jm2q7aof1q] {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-jm2q7aof1q] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-jm2q7aof1q] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-jm2q7aof1q] {
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn:disabled[b-jm2q7aof1q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-jm2q7aof1q] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-jm2q7aof1q] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #d1d1d1;
}

.btn-danger[b-jm2q7aof1q] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #b91c1c;
}

.btn-warning[b-jm2q7aof1q] {
    background: #ff8c00;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #e67e00;
}

.btn-success[b-jm2q7aof1q] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #059669;
}

/* Warning Messages */
.warning-message[b-jm2q7aof1q] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.warning-message strong[b-jm2q7aof1q] {
    color: #dc2626;
}

.warning-note[b-jm2q7aof1q] {
    padding: 12px 16px;
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.warning-note i[b-jm2q7aof1q] {
    color: #ffc107;
    margin-top: 2px;
    font-size: 14px;
    flex-shrink: 0;
}

.warning-note-info[b-jm2q7aof1q] {
    background: var(--BEC-colorSubtleBackground);
    border-left-color: var(--BEC-colorBrandBackground);
}

.warning-note-info i[b-jm2q7aof1q] {
    color: var(--BEC-colorBrandBackground);
}

.warning-note-success[b-jm2q7aof1q] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-jm2q7aof1q] {
    color: #10b981;
}

.error-message[b-jm2q7aof1q] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
    .page-header[b-jm2q7aof1q] {
        padding: 16px 24px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .page-header[b-jm2q7aof1q] {
        padding: 12px 16px;
    }
    
    .page-header-icon[b-jm2q7aof1q] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .page-header-title[b-jm2q7aof1q] {
        font-size: 18px;
    }
    
    .page-header-subtitle[b-jm2q7aof1q] {
        font-size: 12px;
    }
    
    .erp-page-content[b-jm2q7aof1q] {
        padding: 10px 16px 0px 16px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .page-header[b-jm2q7aof1q] {
        gap: 12px;
    }
    
    .page-header-icon[b-jm2q7aof1q] {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .page-header-title[b-jm2q7aof1q] {
        font-size: 16px;
    }
    
    .page-header-subtitle[b-jm2q7aof1q] {
        display: none;
    }
    
    [b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
}

/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventViewModal.razor.rz.scp.css */
/* ========================================
   Event View Modal - Fullscreen Wizard
   ======================================== */

/* ========================================
   DIALOG OVERRIDES (FULLSCREEN)
   ======================================== */
:global(.media-viewer-dialog-fullscreen .e-dlg-content)[b-e6andswgz4] {
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

:global(.media-viewer-dialog-fullscreen .e-dialog)[b-e6andswgz4] {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--BEC-colorNeutralBackground1);
}

:global(.media-viewer-dialog-fullscreen .e-dlg-overlay)[b-e6andswgz4] {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ========================================
   MAIN CONTAINER
   ======================================== */
.media-viewer-fullscreen[b-e6andswgz4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}

/* ========================================
   CLOSE BUTTON
   ======================================== */
.media-close-btn[b-e6andswgz4] {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1050; /* High z-index */
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}

.media-close-btn:hover[b-e6andswgz4] {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   WIZARD HEADER
   ======================================== */
.sidebar-header[b-e6andswgz4] {
    padding: 15px 25px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-title[b-e6andswgz4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 15px;
}

.sidebar-title i[b-e6andswgz4] {
    color: var(--BEC-themePrimary);
}

/* ========================================
   WIZARD CONTENT
   ======================================== */
.sidebar-content[b-e6andswgz4] {
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - 150px); /* Adjusted for header and footer */
    flex: 1;
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */
.wizard-progress-bar[b-e6andswgz4] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    background: var(--BEC-colorNeutralBackground2);
    padding: 10px;
    border-radius: var(--BEC-borderRadiusMedium);
}

.progress-step[b-e6andswgz4] {
    flex: 1;
    text-align: center;
    padding: 10px;
    background-color: var(--BEC-colorNeutralBackground3);
    border-radius: 5px;
    margin: 0 5px;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
    outline: none;
}

.progress-step.active[b-e6andswgz4] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    background-color: var(--BEC-themeLighter);
}

.progress-step:hover[b-e6andswgz4] {
    background-color: var(--BEC-colorNeutralBackground3Hover, var(--BEC-colorNeutralBackground3));
}

.progress-step:focus-visible[b-e6andswgz4] {
    outline: 2px solid var(--BEC-colorBrandForeground1);
    outline-offset: 2px;
}

/* ========================================
   WIZARD STEP STYLING
   ======================================== */
.wizard-step[b-e6andswgz4] {
    animation: slideIn-b-e6andswgz4 0.3s ease-out;
    max-width: 900px;
    margin: 0 auto;
}

@keyframes slideIn-b-e6andswgz4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-title[b-e6andswgz4] {
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.step-title i[b-e6andswgz4] {
    color: var(--BEC-themePrimary);
}

/* ========================================
   VIEW FIELD STYLING (Read-Only)
   ======================================== */
.view-field-group[b-e6andswgz4] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.view-label[b-e6andswgz4] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-value[b-e6andswgz4] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.view-field-row[b-e6andswgz4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

/* ========================================
   FOOTER
   ======================================== */
.sidebar-footer[b-e6andswgz4] {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px 25px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Other styles from EventViewModal.razor.css can be merged here */
/* ... (status badges, info messages, etc.) ... */
.status-badge[b-e6andswgz4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

.status-badge.status-success[b-e6andswgz4] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.status-badge.status-warning[b-e6andswgz4] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.status-badge.status-danger[b-e6andswgz4] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.status-badge.status-secondary[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.status-badge.status-active[b-e6andswgz4] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.status-badge.status-inactive[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.type-badge[b-e6andswgz4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    background: var(--BEC-themeLighter);
    color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

.btn[b-e6andswgz4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-e6andswgz4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-e6andswgz4] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-e6andswgz4] {
    background: var(--BEC-themeSecondary);
}

/* /Components/Pages/MainLayout/Intranet/GalleryAdministration/GalleryAdministration.razor.rz.scp.css */
/* ========================================
   GALLERY ADMINISTRATION - FOLDER/ALBUM CARD VIEW
   Modern card-based layout for gallery management
   
   FEATURES:
   ✅ Folder/Album card grid layout
   ✅ Cover image previews
   ✅ Quick action buttons
   ✅ Selection checkboxes
   ✅ Loading states
   ✅ Responsive design
   ✅ Lazy-loaded gallery items in view dialog
   ======================================== */

/* Smooth scrolling */
:global(html)[b-xh8b5apoh3] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER
   Fixed height to prevent page scrolling
   Only content scrolls internally
   ======================================== */
.erp-page-container[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    position: relative;
}
/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   MATCHES: Events/News/Hero Administration tabs
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-xh8b5apoh3] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Text - Uniform */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Hover Effect */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themePrimary) !important;
}

/* Disabled State */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn.e-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ========================================
   PAGE CONTENT - FOLDER/ALBUM CARD VIEW
   Fixed height - prevents page scrolling
   Content scrolls internally only
   ======================================== */
.erp-page-content[b-xh8b5apoh3] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalXS) 16px 16px 16px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    height: calc(100vh - var(--BEC-dashboard-header-height) - 50px - 50px - 20px);
    max-height: calc(100vh - var(--BEC-dashboard-header-height) - 50px - 50px - 20px);
}

/* Loading Overlay */
.gallery-loading-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-xh8b5apoh3] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.gallery-loading-overlay p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error State */
.gallery-error-state[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.gallery-error-state i[b-xh8b5apoh3] {
    font-size: 48px;
    color: var(--BEC-errorText);
    opacity: 0.7;
}

.gallery-error-state p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.btn-retry[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
}

.btn-retry:hover[b-xh8b5apoh3] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
}

/* Empty State */
.gallery-empty-state[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 80px 20px;
    text-align: center;
}

.gallery-empty-state i[b-xh8b5apoh3] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.3;
}

.gallery-empty-state p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   FOLDER/ALBUM CARD GRID
   ======================================== */
.gallery-folder-grid[b-xh8b5apoh3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: var(--BEC-spacingHorizontalS) 0;
}

.gallery-folder-card[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

.gallery-folder-card:hover[b-xh8b5apoh3] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--BEC-colorNeutralStroke1);
}

.gallery-folder-card.selected[b-xh8b5apoh3] {
    border-color: var(--BEC-themePrimary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

/* Card Checkbox */
.card-checkbox[b-xh8b5apoh3] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 2px;
    box-shadow: var(--BEC-shadow4);
}

.card-checkbox input[type="checkbox"][b-xh8b5apoh3] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--BEC-themePrimary);
}

/* Card Cover Image */
.card-cover[b-xh8b5apoh3] {
    width: 100%;
    height: 100px;
    position: relative;
    background: linear-gradient(135deg, var(--BEC-colorPaletteLightBlueBorder2) 0%, var(--BEC-colorPaletteBlueBorder2) 100%);
    overflow: hidden;
}

.cover-image[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-folder-card:hover .cover-image[b-xh8b5apoh3] {
    transform: scale(1.05);
}

.video-cover[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-play-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    transition: all 0.3s ease;
    z-index: 2;
}

.gallery-folder-card:hover .video-play-overlay[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-duration-badge[b-xh8b5apoh3] {
    position: absolute;
    bottom: var(--BEC-spacingHorizontalS);
    right: var(--BEC-spacingHorizontalS);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    z-index: 2;
}

.no-cover-placeholder[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 28px;
    opacity: 0.3;
}

/* Status Badge */
.status-badge[b-xh8b5apoh3] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: var(--BEC-shadow4);
}

.status-badge.active[b-xh8b5apoh3] {
    background: var(--BEC-successBackground);
    color: var(--BEC-successText);
}

.status-badge.inactive[b-xh8b5apoh3] {
    background: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
}

.status-badge i[b-xh8b5apoh3] {
    font-size: 12px;
}

/* Card Info */
.card-info[b-xh8b5apoh3] {
    padding: 6px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-title[b-xh8b5apoh3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
    line-height: 1.3;
}

.card-description[b-xh8b5apoh3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
}

/* Card Stats */
.card-stats[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.stat-item[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.stat-item i[b-xh8b5apoh3] {
    font-size: 10px;
    color: var(--BEC-themePrimary);
}

/* Card Actions */
.card-actions[b-xh8b5apoh3] {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.action-btn[b-xh8b5apoh3] {
    flex: 1;
    padding: 3px;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 11px;
}

.action-btn:hover[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
    transform: translateY(-1px);
}

.view-btn:hover[b-xh8b5apoh3] {
    background: var(--BEC-themeLighterAlt);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
}

.edit-btn:hover[b-xh8b5apoh3] {
    background: var(--BEC-warningBackground);
    border-color: var(--BEC-warningText);
    color: var(--BEC-warningText);
}

/* ========================================
   MODAL DIALOGS
   ======================================== */
.modal-overlay[b-xh8b5apoh3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-xh8b5apoh3 0.2s ease-out;
}

@keyframes fadeIn-b-xh8b5apoh3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-xh8b5apoh3 0.3s ease-out;
}

.modal-container.modal-sm[b-xh8b5apoh3] {
    max-width: 500px;
}

.modal-container.modal-xlg[b-xh8b5apoh3] {
    max-width: 1400px;
}

@keyframes slideUp-b-xh8b5apoh3 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-xh8b5apoh3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
}

.modal-title[b-xh8b5apoh3] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-xh8b5apoh3] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.modal-content[b-xh8b5apoh3] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}

/* Dialog Loading Overlay */
.dialog-loading-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.dialog-loading-overlay .loading-spinner[b-xh8b5apoh3] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.dialog-loading-overlay p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

.modal-footer[b-xh8b5apoh3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-xh8b5apoh3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.2);
}

.btn-secondary[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground3);
}

.btn-danger[b-xh8b5apoh3] {
    background: var(--BEC-errorText);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeDark);
}

.btn-warning[b-xh8b5apoh3] {
    background: var(--BEC-warningText);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeDark);
}

.btn-success[b-xh8b5apoh3] {
    background: var(--BEC-successText);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeDark);
}

.btn-outline[b-xh8b5apoh3] {
    background: transparent;
    color: var(--BEC-themePrimary);
    border: 2px solid var(--BEC-themePrimary);
}

.btn-outline:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   GALLERY INFO BAR (View Dialog)
   ======================================== */
.gallery-info-bar[b-xh8b5apoh3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-themeLighterAlt);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-themeLighter);
    margin-bottom: 24px;
}

.info-item[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.info-item i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase400);
}

.gallery-description[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: 24px;
}

.gallery-description h3[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.gallery-description p[b-xh8b5apoh3] {
    margin: 0;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   GALLERY ITEMS SECTION (Lazy Loaded)
   ======================================== */
.gallery-items-section[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

/* Empty Gallery State */
.empty-gallery[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: var(--BEC-spacingHorizontalL);
    color: var(--BEC-colorNeutralForeground3);
}

.empty-gallery i[b-xh8b5apoh3] {
    font-size: 64px;
    opacity: 0.3;
}

.empty-gallery p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    margin: 0;
}

/* ========================================
   ITEMS GRID - RESPONSIVE CARDS
   ======================================== */
.items-grid[b-xh8b5apoh3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: 24px;
}

.gallery-item-card[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item-card:hover[b-xh8b5apoh3] {
    transform: translateY(-4px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-themePrimary);
}

/* Item Thumbnail */
.item-thumbnail[b-xh8b5apoh3] {
    width: 100%;
    height: 160px;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
    overflow: hidden;
}

.item-thumbnail img[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-thumbnail.video[b-xh8b5apoh3] {
    position: relative;
}

/* Video preview element (for videos without thumbnails) */
.item-video-preview[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

/* Cover image video element */
.card-cover video.cover-image[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

.video-placeholder[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themeLighterAlt);
}

.video-placeholder i[b-xh8b5apoh3] {
    font-size: 48px;
    color: var(--BEC-themePrimary);
    opacity: 0.3;
}

.video-overlay-badge[b-xh8b5apoh3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
}

.gallery-item-card:hover .video-overlay-badge[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Item Details */
.item-details[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalM);
}

.item-caption[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 40px;
}

.item-meta[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.media-type-badge[b-xh8b5apoh3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.media-type-badge.type-image[b-xh8b5apoh3] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.media-type-badge.type-video[b-xh8b5apoh3] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-errorText);
}

.item-date[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase100);
}

/* ========================================
   LOAD MORE SECTION (Lazy Loading)
   ======================================== */
.load-more-section[b-xh8b5apoh3] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.loading-more[b-xh8b5apoh3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: 24px;
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
}

.loading-more i[b-xh8b5apoh3] {
    font-size: 20px;
}

/* ========================================
   WARNING MESSAGES (Delete Dialog)
   ======================================== */
.warning-message[b-xh8b5apoh3] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-xh8b5apoh3] {
    color: var(--BEC-warningText);
}

.warning-note[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-warningBackground);
    border-left: 3px solid var(--BEC-warningText);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-xh8b5apoh3] {
    color: var(--BEC-warningText);
    margin-top: var(--BEC-spacingHorizontalXXS);
    flex-shrink: 0;
}

.warning-note-info[b-xh8b5apoh3] {
    background: var(--BEC-themeLighterAlt);
    border-left-color: var(--BEC-themePrimary);
}

.warning-note-info i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
}

.warning-note-success[b-xh8b5apoh3] {
    background: var(--BEC-successBackground);
    border-left-color: var(--BEC-successText);
}

.warning-note-success i[b-xh8b5apoh3] {
    color: var(--BEC-successText);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .gallery-folder-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--BEC-spacingHorizontalL);
    }
    
    .items-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }
    
    [b-xh8b5apoh3] .e-toolbar.e-control {
        top: 50px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .erp-page-header[b-xh8b5apoh3] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .stats-container[b-xh8b5apoh3] {
        width: 100%;
        justify-content: space-around;
    }
    
    .gallery-folder-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .items-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }
    
    .item-thumbnail[b-xh8b5apoh3] {
        height: 120px;
    }
    
    .modal-container.modal-xlg[b-xh8b5apoh3] {
        max-width: 95vw;
        width: 95vw;
    }
    
    [b-xh8b5apoh3] .e-toolbar.e-control {
        top: 90px !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .gallery-folder-grid[b-xh8b5apoh3] {
        grid-template-columns: 1fr;
    }
    
    .items-grid[b-xh8b5apoh3] {
        grid-template-columns: 1fr;
    }
    
    .gallery-info-bar[b-xh8b5apoh3] {
        flex-direction: column;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    [b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
}

/* ========================================
   MEDIA VIEWER (LIGHTBOX)
   Full-size image/video viewer
   ======================================== */

.media-viewer-dialog[b-xh8b5apoh3] {
    max-width: 95vw !important;
    max-height: 95vh !important;
}

.media-viewer-header[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--BEC-spacingHorizontalL);
}

.media-info[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
}

.media-info i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-xh8b5apoh3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.modal-close:hover[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.modal-close i[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
}

.media-viewer-content[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    min-height: 60vh;
    background: var(--BEC-colorNeutralBackground2);
}

.media-viewer-image[b-xh8b5apoh3] {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.media-viewer-video[b-xh8b5apoh3] {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   CLICKABLE GALLERY ITEMS
   Hover effects and clickable indicators
   ======================================== */

.gallery-item-card[b-xh8b5apoh3] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item-card:hover[b-xh8b5apoh3] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.item-thumbnail.clickable[b-xh8b5apoh3] {
    position: relative;
    overflow: hidden;
}

.item-thumbnail.clickable img[b-xh8b5apoh3] {
    transition: transform 0.3s ease;
}

.gallery-item-card:hover .item-thumbnail.clickable img[b-xh8b5apoh3] {
    transform: scale(1.05);
}

.item-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item-card:hover .item-overlay[b-xh8b5apoh3] {
    opacity: 1;
}

.item-overlay i[b-xh8b5apoh3] {
    color: white;
    font-size: 32px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* /Components/Pages/MainLayout/Intranet/GalleryAdministration/GalleryCreateModal.razor.rz.scp.css */
/* ========================================
   GALLERY CREATE WIZARD - SIDEBAR PATTERN
   Following NewsCreateModal Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.gallery-create-sidebar .e-sidebar)[b-r3yr2b56oa] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-r3yr2b56oa] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-r3yr2b56oa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-r3yr2b56oa] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-r3yr2b56oa] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-r3yr2b56oa] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-r3yr2b56oa] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-r3yr2b56oa]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-r3yr2b56oa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-r3yr2b56oa] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-r3yr2b56oa] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-r3yr2b56oa] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-r3yr2b56oa]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-r3yr2b56oa] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-r3yr2b56oa] {
    max-width: 100%;
}

.step-title[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-r3yr2b56oa] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-r3yr2b56oa]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-r3yr2b56oa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-r3yr2b56oa] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-r3yr2b56oa] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalS) 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.toggle-hint[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   UPLOAD SECTION
   ======================================== */

.upload-section[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.upload-controls[b-r3yr2b56oa] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload:disabled[b-r3yr2b56oa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-upload i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Upload Progress Section */
.upload-progress-section[b-r3yr2b56oa] {
    margin-top: var(--BEC-spacingHorizontalXL);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item:last-child[b-r3yr2b56oa] {
    margin-bottom: 0;
}

.progress-file-info[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.progress-file-info i[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.progress-file-name[b-r3yr2b56oa] {
    flex: 1;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-status[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    white-space: nowrap;
}

.progress-bar-container[b-r3yr2b56oa] {
    width: 100%;
    height: 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
    margin-bottom: var(--BEC-spacingHorizontalXS);
    position: relative;
}

.progress-bar[b-r3yr2b56oa] {
    height: 100%;
    background: linear-gradient(90deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar[b-r3yr2b56oa]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer-b-r3yr2b56oa 1.5s infinite;
}

@keyframes shimmer-b-r3yr2b56oa {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-percentage[b-r3yr2b56oa] {
    text-align: right;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

/* Uploaded Items Preview */
.uploaded-items-preview[b-r3yr2b56oa] {
    margin-top: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.uploaded-items-list[b-r3yr2b56oa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--BEC-spacingHorizontalM);
    margin-top: var(--BEC-spacingHorizontalM);
}

.uploaded-item-card[b-r3yr2b56oa] {
    position: relative;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.uploaded-item-card:hover[b-r3yr2b56oa] {
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
}

.item-preview[b-r3yr2b56oa] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.video-preview[b-r3yr2b56oa] {
    width: 100%;
    height: 120px;
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
}

.video-preview i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase600);
}

.item-info[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalS);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--BEC-colorNeutralBackground1);
}

.item-type[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
}

.btn-remove[b-r3yr2b56oa] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-colorPaletteRedBackground2);
    transform: scale(1.1);
}

.btn-remove:disabled[b-r3yr2b56oa] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-r3yr2b56oa] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-r3yr2b56oa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-r3yr2b56oa] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-r3yr2b56oa] {
    grid-column: 1 / -1;
}

.review-label[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-r3yr2b56oa] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-r3yr2b56oa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-r3yr2b56oa] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-r3yr2b56oa] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-r3yr2b56oa] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-success:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.gallery-create-sidebar .e-sidebar)[b-r3yr2b56oa] {
        width: 90% !important;
    }

    .sidebar-header[b-r3yr2b56oa],
    .sidebar-footer[b-r3yr2b56oa] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-r3yr2b56oa] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-r3yr2b56oa] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-r3yr2b56oa] {
        grid-template-columns: 1fr;
    }

    .uploaded-items-list[b-r3yr2b56oa] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}
/* /Components/Pages/MainLayout/Intranet/GalleryAdministration/GalleryEditModal.razor.rz.scp.css */
/* ========================================
   GALLERY EDIT WIZARD - SIDEBAR PATTERN
   Following NewsCreateModal Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.gallery-edit-sidebar .e-sidebar)[b-rtmfettkab] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-rtmfettkab] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-rtmfettkab] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-rtmfettkab] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-rtmfettkab] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-rtmfettkab] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-rtmfettkab] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-rtmfettkab]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-rtmfettkab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-rtmfettkab] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-rtmfettkab] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-rtmfettkab] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-rtmfettkab]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-rtmfettkab] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-rtmfettkab] {
    max-width: 100%;
}

.step-title[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-rtmfettkab] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-rtmfettkab]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-rtmfettkab] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-rtmfettkab] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-rtmfettkab] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalS) 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.toggle-hint[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   UPLOAD SECTION
   ======================================== */

.upload-section[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.upload-controls[b-rtmfettkab] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload:disabled[b-rtmfettkab] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-upload i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Upload Progress Section */
.upload-progress-section[b-rtmfettkab] {
    margin-top: var(--BEC-spacingHorizontalXL);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item:last-child[b-rtmfettkab] {
    margin-bottom: 0;
}

.progress-file-info[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.progress-file-info i[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.progress-file-name[b-rtmfettkab] {
    flex: 1;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-status[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    white-space: nowrap;
}

.progress-bar-container[b-rtmfettkab] {
    width: 100%;
    height: 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
    margin-bottom: var(--BEC-spacingHorizontalXS);
    position: relative;
}

.progress-bar[b-rtmfettkab] {
    height: 100%;
    background: linear-gradient(90deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar[b-rtmfettkab]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer-b-rtmfettkab 1.5s infinite;
}

@keyframes shimmer-b-rtmfettkab {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-percentage[b-rtmfettkab] {
    text-align: right;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

/* Uploaded Items Preview */
.uploaded-items-preview[b-rtmfettkab] {
    margin-top: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.uploaded-items-list[b-rtmfettkab] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--BEC-spacingHorizontalM);
    margin-top: var(--BEC-spacingHorizontalM);
}

.uploaded-item-card[b-rtmfettkab] {
    position: relative;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.uploaded-item-card:hover[b-rtmfettkab] {
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
}

.item-preview[b-rtmfettkab] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.video-preview[b-rtmfettkab] {
    width: 100%;
    height: 120px;
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
}

.video-preview i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase600);
}

.item-info[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalS);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--BEC-colorNeutralBackground1);
}

.item-type[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
}

.btn-remove[b-rtmfettkab] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedBackground2);
    transform: scale(1.1);
}

.btn-remove:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-rtmfettkab] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-rtmfettkab] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-rtmfettkab] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-rtmfettkab] {
    grid-column: 1 / -1;
}

.review-label[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-rtmfettkab] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-rtmfettkab] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-rtmfettkab] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-rtmfettkab] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-rtmfettkab] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-success:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.gallery-edit-sidebar .e-sidebar)[b-rtmfettkab] {
        width: 90% !important;
    }

    .sidebar-header[b-rtmfettkab],
    .sidebar-footer[b-rtmfettkab] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-rtmfettkab] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-rtmfettkab] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-rtmfettkab] {
        grid-template-columns: 1fr;
    }

    .uploaded-items-list[b-rtmfettkab] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .existing-items-grid[b-rtmfettkab] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   EXISTING ITEMS MANAGEMENT
   ======================================== */

.existing-items-section[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingVerticalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-header[b-rtmfettkab] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingVerticalL);
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalM);
}

.bulk-actions[b-rtmfettkab] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: center;
}

.btn-select-all[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    transition: all 0.2s ease;
}

.btn-select-all:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-themePrimary);
}

.btn-select-all:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-select-all input[type="checkbox"][b-rtmfettkab] {
    cursor: pointer;
}

.btn-delete-selected[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground3);
    border: 1px solid var(--BEC-colorPaletteRedBorder2);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300);
    color: white;
    transition: all 0.2s ease;
}

.btn-delete-selected:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedForeground3);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-delete-selected:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-items[b-rtmfettkab] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalXXL);
    color: var(--BEC-colorNeutralForeground2);
}

.existing-items-grid[b-rtmfettkab] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--BEC-spacingHorizontalM);
}

.existing-item-card[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
    position: relative;
}

.existing-item-card:hover[b-rtmfettkab] {
    border-color: var(--BEC-themePrimary);
    box-shadow: var(--BEC-shadow4);
}

.existing-item-card.selected[b-rtmfettkab] {
    border-color: var(--BEC-themePrimary);
    background: var(--BEC-colorBrandBackground2Selected);
}

.item-checkbox[b-rtmfettkab] {
    display: flex;
    align-items: center;
}

.item-checkbox input[type="checkbox"][b-rtmfettkab] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.item-preview[b-rtmfettkab] {
    width: 60px;
    height: 60px;
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-preview img[b-rtmfettkab] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-preview-icon[b-rtmfettkab] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.video-preview-icon i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase600);
}

.item-details[b-rtmfettkab] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalXXS);
    overflow: hidden;
}

.item-type[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    text-transform: uppercase;
}

.item-caption[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-single[b-rtmfettkab] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--BEC-colorPaletteRedBackground3);
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-delete-single:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedForeground3);
    transform: scale(1.05);
}

.btn-delete-single:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

.upload-new-items-section[b-rtmfettkab] {
    margin-top: var(--BEC-spacingVerticalL);
}

/* ========================================
   DELETE CONFIRMATION DIALOG
   ======================================== */

:global(.delete-confirmation-dialog .e-dlg-header-content)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedBackground2);
    border-bottom: 2px solid var(--BEC-colorPaletteRedBorder2);
}

.dialog-header-delete[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorPaletteRedForeground3);
    font-weight: var(--BEC-fontWeightSemibold);
}

.dialog-header-delete i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-content-delete[b-rtmfettkab] {
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
}

.dialog-content-delete p[b-rtmfettkab] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

.dialog-footer[b-rtmfettkab] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
}

.btn-danger[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedBackground3);
    border: 1px solid var(--BEC-colorPaletteRedBorder2);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedForeground3);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-danger:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/MainLayout/Intranet/GalleryViewer/GalleryItemsView.razor.rz.scp.css */
/* ========================================
   GALLERY ITEMS VIEW PAGE
   Shows all items in a specific gallery
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.gallery-items-view-container[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   PAGE HEADER (No Bar, Just Title & Back)
   ======================================== */
.items-view-header[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.btn-back[b-dfpwxb8vk1] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0;
}

.btn-back:hover[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
    transform: translateX(-2px);
}

.btn-back i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
}

.header-title-section[b-dfpwxb8vk1] {
    flex: 1;
}

.items-view-title[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground1);
}

.items-view-title i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-themePrimary);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.items-view-content[b-dfpwxb8vk1] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    position: relative;
    min-height: calc(100vh - 100px);
}

/* Loading Overlay - Unified Pattern */
.loading-overlay[b-dfpwxb8vk1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-dfpwxb8vk1] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error State */
.items-error[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.items-error i[b-dfpwxb8vk1] {
    font-size: 48px;
    color: #dc2626;
    opacity: 0.7;
}

.items-error p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.btn-retry[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
}

.btn-retry:hover[b-dfpwxb8vk1] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
}

/* Empty State */
.items-empty[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.items-empty i[b-dfpwxb8vk1] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
    opacity: 0.5;
}

.items-empty p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   ITEMS GRID
   ======================================== */
.items-grid[b-dfpwxb8vk1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.item-card[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: visible;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.item-card:hover[b-dfpwxb8vk1] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-themePrimary);
}

.item-image-container[b-dfpwxb8vk1],
.item-video-container[b-dfpwxb8vk1] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
    cursor: pointer;
    border-radius: var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium) 0 0;
}

.item-image[b-dfpwxb8vk1],
.item-thumbnail[b-dfpwxb8vk1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-card:hover .item-image[b-dfpwxb8vk1],
.item-card:hover .item-thumbnail[b-dfpwxb8vk1] {
    transform: scale(1.1);
}

.item-video-preview[b-dfpwxb8vk1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

.item-overlay[b-dfpwxb8vk1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--BEC-colorNeutralBackground1);
}

.item-card:hover .item-overlay[b-dfpwxb8vk1] {
    opacity: 1;
}

.item-overlay i[b-dfpwxb8vk1] {
    font-size: 32px;
}

.video-duration[b-dfpwxb8vk1] {
    position: absolute;
    bottom: var(--BEC-spacingHorizontalS);
    right: var(--BEC-spacingHorizontalS);
    background: rgba(0, 0, 0, 0.75);
    color: var(--BEC-colorNeutralBackground1);
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
}

.item-caption[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.item-caption p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   MEDIA VIEWER (Full Screen, No Scroll)
   ======================================== */
:global(.media-viewer-dialog-fullscreen .e-dlg-content)[b-dfpwxb8vk1] {
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

:global(.media-viewer-dialog-fullscreen .e-dialog)[b-dfpwxb8vk1] {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

:global(.media-viewer-dialog-fullscreen .e-dlg-overlay)[b-dfpwxb8vk1] {
    background: rgba(0, 0, 0, 0.95) !important;
}

.media-viewer-fullscreen[b-dfpwxb8vk1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.media-close-btn[b-dfpwxb8vk1] {
    position: absolute;
    top: var(--BEC-spacingHorizontalL);
    right: var(--BEC-spacingHorizontalL);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}

.media-close-btn:hover[b-dfpwxb8vk1] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.media-nav-btn[b-dfpwxb8vk1] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.2s ease;
}

.media-nav-btn:hover[b-dfpwxb8vk1] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.media-nav-btn.prev[b-dfpwxb8vk1] {
    left: var(--BEC-spacingHorizontalL);
}

.media-nav-btn.next[b-dfpwxb8vk1] {
    right: var(--BEC-spacingHorizontalL);
}

.media-display-fullscreen[b-dfpwxb8vk1] {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 80px 80px 80px; /* Space for buttons and info */
    box-sizing: border-box;
}

.media-image-fullscreen[b-dfpwxb8vk1] {
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0;
}

.media-video-fullscreen[b-dfpwxb8vk1] {
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0;
}

.media-info-fullscreen[b-dfpwxb8vk1] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: var(--BEC-colorNeutralBackground1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-caption[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.media-counter[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    opacity: 0.8;
    margin: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .items-view-header[b-dfpwxb8vk1] {
        padding: var(--BEC-spacingHorizontalM);
    }

    .items-grid[b-dfpwxb8vk1] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }

    .media-display-fullscreen[b-dfpwxb8vk1] {
        padding: 50px 60px 70px 60px;
    }

    .media-nav-btn[b-dfpwxb8vk1] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .media-nav-btn.prev[b-dfpwxb8vk1] {
        left: var(--BEC-spacingHorizontalS);
    }

    .media-nav-btn.next[b-dfpwxb8vk1] {
        right: var(--BEC-spacingHorizontalS);
    }
}

/* ========================================
   MANAGE MODE & DELETE FUNCTIONALITY
   ======================================== */

.items-view-header[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingVerticalXL);
}

/* ========================================
   TOOLBAR STYLES
   ======================================== */
:global(.gallery-items-toolbar)[b-dfpwxb8vk1] {
    margin: 0 var(--BEC-spacingHorizontalL) var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow2);
}

/* Toolbar Button Styling */
:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn)[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalM);
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--BEC-borderRadiusSmall);
}

:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn:hover:not(:disabled))[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-themePrimary);
}

:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn:disabled)[b-dfpwxb8vk1] {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--BEC-colorNeutralForeground4);
}

:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn i)[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Selection Info Display in Toolbar */
.selection-info[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalL);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
}

.selection-count[b-dfpwxb8vk1] {
    color: var(--BEC-themePrimary);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.selection-count i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
}

.total-count[b-dfpwxb8vk1] {
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SELECTION MODE GRID (Always Active)
   ======================================== */
.items-grid.with-selection .item-card[b-dfpwxb8vk1] {
    cursor: default;
    user-select: none;
}

.items-grid.with-selection .item-card:hover[b-dfpwxb8vk1] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow8);
}

.items-grid.with-selection .item-card.selected[b-dfpwxb8vk1] {
    border: 3px solid var(--BEC-themePrimary);
    background: var(--BEC-colorBrandBackground2Selected);
}

.item-checkbox[b-dfpwxb8vk1] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--BEC-borderRadiusSmall);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 1 !important;
    visibility: visible !important;
}

.item-checkbox input[type="checkbox"][b-dfpwxb8vk1] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--BEC-themePrimary);
    margin: 0;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Delete Confirmation Dialog */
:global(.delete-confirmation-dialog .e-dlg-header-content)[b-dfpwxb8vk1] {
    background: var(--BEC-colorPaletteRedBackground2);
    border-bottom: 2px solid var(--BEC-colorPaletteRedBorder2);
}

.dialog-header-delete[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorPaletteRedForeground3);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

.dialog-header-delete i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-content-delete[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingVerticalXL) var(--BEC-spacingHorizontalL);
}

.dialog-content-delete p[b-dfpwxb8vk1] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.dialog-footer[b-dfpwxb8vk1] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
}

.btn-danger[b-dfpwxb8vk1] {
    background: #dc2626;
    border: 1px solid #b91c1c;
    color: white;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-danger:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-danger:disabled[b-dfpwxb8vk1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   BUTTONS - MATCHING APP DESIGN SYSTEM
   ======================================== */
.btn-primary[b-dfpwxb8vk1] {
    background: var(--BEC-themePrimary) !important;
    border: 1px solid var(--BEC-themePrimary) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    cursor: pointer !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: var(--BEC-fontSizeBase300) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--BEC-spacingHorizontalS) !important;
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2) !important;
    min-height: 36px !important;
}

.btn-primary:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-themeSecondary) !important;
    border-color: var(--BEC-themeSecondary) !important;
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-primary:active:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-themeDark) !important;
    transform: translateY(0) !important;
}

.btn-primary:disabled[b-dfpwxb8vk1] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: var(--BEC-colorNeutralStroke1) !important;
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

.btn-primary i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
}

.btn-secondary[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    cursor: pointer !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: var(--BEC-fontSizeBase300) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--BEC-spacingHorizontalS) !important;
    min-height: 36px !important;
}

.btn-secondary:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-color: var(--BEC-colorNeutralStroke2) !important;
}

.btn-secondary:disabled[b-dfpwxb8vk1] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.btn-secondary i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300) !important;
}

/* ========================================
   UPLOAD SIDEBAR WIZARD STYLES
   ======================================== */
:global(.upload-wizard-sidebar)[b-dfpwxb8vk1] {
    z-index: 1000 !important;
}

:global(.upload-wizard-sidebar .e-sidebar)[b-dfpwxb8vk1] {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-header[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-title[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase500);
}

.sidebar-title i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-themePrimary);
}

.sidebar-close-btn[b-dfpwxb8vk1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.sidebar-close-btn:hover[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-content[b-dfpwxb8vk1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-step-content[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalXL);
}

.sidebar-footer[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    flex-shrink: 0;
}

/* Selected Files List */
.selected-files-list[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
}

.selected-files-title[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
}

.selected-files-hint[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-style: italic;
}

.selected-file-item[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalXS) 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.selected-file-item:last-child[b-dfpwxb8vk1] {
    border-bottom: none;
}

.selected-file-item i[b-dfpwxb8vk1] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase300);
}

.selected-file-item .file-name[b-dfpwxb8vk1] {
    flex: 1;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground1);
}

.selected-file-item .file-size[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
}

/* Upload Confirmation */
.upload-confirmation[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
}

.confirmation-header[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.confirmation-header i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.confirmation-header h3[b-dfpwxb8vk1] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.confirmation-message[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalL);
    line-height: 1.5;
}

.confirmation-files[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.confirmation-files h4[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.confirmation-files ul[b-dfpwxb8vk1] {
    margin: 0;
    padding-left: var(--BEC-spacingHorizontalL);
    list-style: disc;
}

.confirmation-files li[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalXS);
    line-height: 1.4;
}

/* Upload Progress Section */
.upload-progress-section[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
}

.progress-title[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
}

.upload-section[b-dfpwxb8vk1] {
    margin-bottom: var(--BEC-spacingVerticalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-section:last-child[b-dfpwxb8vk1] {
    margin-bottom: 0;
}

.upload-label[b-dfpwxb8vk1] {
    display: block;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.upload-controls[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.btn-upload:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-upload:disabled[b-dfpwxb8vk1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.field-hint[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalXS);
}

.upload-progress-list[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.upload-progress-item[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.progress-info[b-dfpwxb8vk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--BEC-fontSizeBase200);
}

.file-name[b-dfpwxb8vk1] {
    color: var(--BEC-colorNeutralForeground2);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-text[b-dfpwxb8vk1] {
    color: var(--BEC-themePrimary);
    font-weight: var(--BEC-fontWeightMedium);
    margin-left: var(--BEC-spacingHorizontalS);
}

.progress-bar[b-dfpwxb8vk1] {
    width: 100%;
    height: 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
}

.progress-fill[b-dfpwxb8vk1] {
    height: 100%;
    background: var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: width 0.3s ease;
}

/* /Components/Pages/MainLayout/Intranet/GalleryViewer/GalleryViewer.razor.rz.scp.css */
/* ========================================
   GALLERY VIEWER - VIEW ONLY PAGE
   Compact, performant design for browsing galleries
   
   FEATURES:
   ✅ Folder/Album card grid layout
   ✅ Cover image previews
   ✅ Gallery items grid view
   ✅ Media viewer (lightbox)
   ✅ Search functionality
   ✅ Responsive design
   ✅ Lazy loading
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.gallery-viewer-container[b-gkp4hqb884] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   PAGE HEADER (No Bar, Just Title & Back)
   ======================================== */
.viewer-header[b-gkp4hqb884] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.header-content[b-gkp4hqb884] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

/* Back Button */
.btn-back[b-gkp4hqb884] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0;
}

.btn-back:hover[b-gkp4hqb884] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
    transform: translateX(-2px);
}

.btn-back:active[b-gkp4hqb884] {
    transform: translateX(-1px);
}

.btn-back i[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase300);
}

.header-title-section[b-gkp4hqb884] {
    flex: 1;
}

.viewer-title[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground1);
}

.viewer-title i[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-themePrimary);
}

.viewer-subtitle[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.header-actions[b-gkp4hqb884] {
    flex-shrink: 0;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.viewer-content[b-gkp4hqb884] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    position: relative;
    min-height: calc(100vh - 120px);
}

/* Loading Overlay - Unified Pattern */
.loading-overlay[b-gkp4hqb884] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-gkp4hqb884] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error State */
.viewer-error[b-gkp4hqb884] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.viewer-error i[b-gkp4hqb884] {
    font-size: 48px;
    color: #dc2626;
    opacity: 0.7;
}

.viewer-error p[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.btn-retry[b-gkp4hqb884] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
}

.btn-retry:hover[b-gkp4hqb884] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
}

/* Empty State */
.viewer-empty[b-gkp4hqb884] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.viewer-empty i[b-gkp4hqb884] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
    opacity: 0.5;
}

.viewer-empty p[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   GALLERY FOLDERS GRID
   ======================================== */
.gallery-folders-grid[b-gkp4hqb884] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalS) 0;
}

.gallery-folder-card[b-gkp4hqb884] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.gallery-folder-card:hover[b-gkp4hqb884] {
    transform: translateY(-4px);
    box-shadow: var(--BEC-shadow16);
    border-color: var(--BEC-themePrimary);
}

/* Cover Image/Video */
.folder-cover[b-gkp4hqb884] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

.cover-image[b-gkp4hqb884] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-folder-card:hover .cover-image[b-gkp4hqb884] {
    transform: scale(1.05);
}

.cover-video[b-gkp4hqb884] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

.cover-placeholder[b-gkp4hqb884] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground4);
}

.cover-placeholder i[b-gkp4hqb884] {
    font-size: 48px;
    opacity: 0.5;
}

.folder-overlay[b-gkp4hqb884] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalS);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--BEC-colorNeutralBackground1);
}

.gallery-folder-card:hover .folder-overlay[b-gkp4hqb884] {
    opacity: 1;
}

.folder-overlay i[b-gkp4hqb884] {
    font-size: 32px;
}

.folder-overlay span[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Folder Info */
.folder-info[b-gkp4hqb884] {
    padding: var(--BEC-spacingHorizontalL);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.folder-title[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.4;
}

.folder-description[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.folder-stats[b-gkp4hqb884] {
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    margin-top: auto;
    padding-top: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.stat-item[b-gkp4hqb884] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.stat-item i[b-gkp4hqb884] {
    color: var(--BEC-themePrimary);
}


/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .gallery-folders-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }

    .items-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }
}

@media (max-width: 768px) {
    .viewer-header[b-gkp4hqb884] {
        flex-direction: column;
        gap: var(--BEC-spacingHorizontalM);
        align-items: flex-start;
    }

    .gallery-folders-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }

    .items-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }

    .media-nav-btn[b-gkp4hqb884] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .media-nav-btn.prev[b-gkp4hqb884] {
        left: var(--BEC-spacingHorizontalS);
    }

    .media-nav-btn.next[b-gkp4hqb884] {
        right: var(--BEC-spacingHorizontalS);
    }
}

@media (max-width: 480px) {
    .gallery-folders-grid[b-gkp4hqb884] {
        grid-template-columns: 1fr;
    }

    .items-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* /Components/Pages/MainLayout/Intranet/HeroAdministration/HeroAdministration.razor.rz.scp.css */
/* ========================================
   HERO ADMINISTRATION
   Following BranchAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-1ycp8e6kg0] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   Pin to viewport height for pager bottom positioning
   ======================================== */
.erp-page-container[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-1ycp8e6kg0] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform (Active buttons are bright) */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-themePrimary) !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themePrimary) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
/* OPTION 5: Opacity Only (Simplest & Lightest) - ACTIVE */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themeDark) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent (20% Smaller) ======= */
[b-1ycp8e6kg0] .e-toolbar .e-separator {
    background: var(--BEC-themePrimary) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER (User Preference) ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-1ycp8e6kg0] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.loading-overlay[b-1ycp8e6kg0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-1ycp8e6kg0] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* NOTE: Column headers, rows, and pager styles are in a global <style>
   block in IntranetAdministration.razor using CssClass="intranet-admin-grid".
   Syncfusion grid internals have no Blazor scope attribute. */

/* Code Badge in Grid — Wireframe Matched */
[b-1ycp8e6kg0] .code-badge {
    display: inline-block;
    padding: 1px 7px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: none;
}

/* Type Badges in Grid — Wireframe Matched */
[b-1ycp8e6kg0] .type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

[b-1ycp8e6kg0] .type-branch {
    background: #F0FFF0;
    color: #107C10;
}

[b-1ycp8e6kg0] .type-project {
    background: #F0F6FC;
    color: #0F6CBD;
}

/* Status Badges in Grid — Wireframe Matched (dot + text) */
[b-1ycp8e6kg0] .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    background: none;
    border: none;
}

[b-1ycp8e6kg0] .status-badge i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

[b-1ycp8e6kg0] .status-active {
    color: #16a34a;
}

[b-1ycp8e6kg0] .status-active i {
    background: #16a34a;
}

[b-1ycp8e6kg0] .status-inactive {
    color: var(--BEC-colorNeutralForeground3);
}

[b-1ycp8e6kg0] .status-inactive i {
    background: var(--BEC-colorNeutralForeground3);
}

/* RTL Text Support */
[b-1ycp8e6kg0] .rtl-text {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

[b-1ycp8e6kg0] .rtl-input {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-1ycp8e6kg0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-1ycp8e6kg0 0.2s ease-out;
}

@keyframes fadeIn-b-1ycp8e6kg0 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-1ycp8e6kg0 0.3s ease-out;
}

.modal-container.modal-sm[b-1ycp8e6kg0] {
    max-width: 500px;
}

@keyframes slideUp-b-1ycp8e6kg0 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-1ycp8e6kg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-1ycp8e6kg0] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-1ycp8e6kg0] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-1ycp8e6kg0] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-1ycp8e6kg0] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-1ycp8e6kg0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-1ycp8e6kg0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-1ycp8e6kg0] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: var(--BEC-themeSecondary);
}

.btn-secondary[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #d1d1d1;
}

.btn-danger[b-1ycp8e6kg0] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #b91c1c;
}

.btn-warning[b-1ycp8e6kg0] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #e67e00;
}

.btn-success[b-1ycp8e6kg0] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #059669;
}

/* Info Grid (View Dialog) */
.info-grid[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.info-section[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
}

.info-row[b-1ycp8e6kg0] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-row:last-child[b-1ycp8e6kg0] {
    border-bottom: none;
}

.info-label[b-1ycp8e6kg0] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.info-value[b-1ycp8e6kg0] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

/* Form Grid (Edit Dialog) */
.form-grid[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.form-section[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.form-group[b-1ycp8e6kg0] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-group:last-child[b-1ycp8e6kg0] {
    margin-bottom: 0;
}

.form-label[b-1ycp8e6kg0] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-input[b-1ycp8e6kg0] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-1ycp8e6kg0] {
    outline: none;
    border-color: var(--BEC-themePrimary);
    box-shadow: var(--BEC-shadow4);
}

.form-input:disabled[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    cursor: not-allowed;
}

.checkbox-label[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-1ycp8e6kg0] {
    width: var(--BEC-spacingHorizontalL);
    height: var(--BEC-spacingHorizontalL);
    cursor: pointer;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-1ycp8e6kg0] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-1ycp8e6kg0] {
    color: var(--BEC-warningText);
}

.warning-note[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-warningBackground);
    border-left: 3px solid var(--BEC-warningText);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-1ycp8e6kg0] {
    color: var(--BEC-warningText);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-1ycp8e6kg0] {
    background: var(--BEC-themeLighterAlt);
    border-left-color: var(--BEC-themePrimary);
}

.warning-note-info i[b-1ycp8e6kg0] {
    color: var(--BEC-themePrimary);
}

.warning-note-success[b-1ycp8e6kg0] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-1ycp8e6kg0] {
    color: #10b981;
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {
    /* Sticky Toolbar Positioning */
    [b-1ycp8e6kg0] .e-toolbar.e-control {
        top: 50px !important; /* Below compact header */
    }
    
    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-1ycp8e6kg0] {
        top: 100px !important; /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {
    /* Page Header - Stack Vertically */
    .erp-page-header[b-1ycp8e6kg0] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    /* Stats - Full Width */
    .stats-container[b-1ycp8e6kg0] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-1ycp8e6kg0] .e-toolbar.e-control {
        top: 90px !important; /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-1ycp8e6kg0] {
        top: 140px !important; /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {
    /* Hide button text, show icons only to save space */
    [b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
    
    /* Column Chooser - Responsive on Mobile */
    [b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-1ycp8e6kg0] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-1ycp8e6kg0] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   HERO-SPECIFIC STYLING
   Additional styles for Hero image preview
   ======================================== */

/* Hero Image Preview in View Dialog */
.hero-preview[b-1ycp8e6kg0] {
    width: 100%;
    max-width: 800px;
    margin: var(--BEC-spacingVerticalL) 0;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow8);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview img[b-1ycp8e6kg0] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 400px;
}

.text-muted[b-1ycp8e6kg0] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Full width section for image */
.info-section.full-width[b-1ycp8e6kg0] {
    grid-column: 1 / -1;
}

/* ========================================
   HERO VIEW, EDIT & CREATE WIZARD SIDEBARS
   Following NewsAdministration Pattern
   ======================================== */

/* Sidebar Container */
:global(.hero-view-sidebar .e-sidebar)[b-1ycp8e6kg0],
:global(.hero-edit-sidebar .e-sidebar)[b-1ycp8e6kg0],
:global(.hero-create-sidebar .e-sidebar)[b-1ycp8e6kg0] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-1ycp8e6kg0] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* Sidebar Header */
.sidebar-header[b-1ycp8e6kg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-1ycp8e6kg0] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-1ycp8e6kg0] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-1ycp8e6kg0] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
}


/* Sidebar Content */
.sidebar-content[b-1ycp8e6kg0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* Wizard Step */
.wizard-step[b-1ycp8e6kg0] {
    max-width: 100%;
}

.step-title[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

/* View Info Grid (Read-Only Display) */
.view-info-grid[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

.view-info-row[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--BEC-spacingHorizontalM);
    align-items: start;
}

.view-info-row.full-width[b-1ycp8e6kg0] {
    grid-template-columns: 1fr;
    flex-direction: column;
}

.view-info-label[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.view-info-value[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

.view-info-value i[b-1ycp8e6kg0] {
    margin-right: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-colorBrandForeground1);
}

/* Status Badge in View */
.status-badge[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.status-active[b-1ycp8e6kg0] {
    background: var(--BEC-successBackground);
    color: var(--BEC-successText);
}

.status-badge.status-inactive[b-1ycp8e6kg0] {
    background: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
}

.status-badge i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase100);
}

/* Hero Preview in View */
.hero-preview-view[b-1ycp8e6kg0] {
    width: 100%;
    max-width: 100%;
    margin-top: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow8);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview-view img[b-1ycp8e6kg0] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 400px;
}

.external-link-view[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    word-break: break-all;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.external-link-view:hover[b-1ycp8e6kg0] {
    text-decoration: underline;
}

.external-link-view i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
}

/* Form Elements (Edit/Create Wizard) */
.form-group[b-1ycp8e6kg0] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-1ycp8e6kg0] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-1ycp8e6kg0]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-1ycp8e6kg0] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-1ycp8e6kg0] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.context-note-card[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #c9ddff;
    border-radius: var(--BEC-borderRadiusMedium);
}

.context-note-icon[b-1ycp8e6kg0] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: white;
    box-shadow: var(--BEC-shadow4);
}

.context-note-copy[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.context-note-copy strong[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.context-note-copy span[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
}

/* Subsection Title */
.subsection-title[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* Toggle Wrapper */
.toggle-wrapper[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* Read-only Input Display */
.input-readonly[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.input-readonly i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
}

.input-loading[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.input-loading i[b-1ycp8e6kg0] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

/* Image Upload Area */
.image-upload-area[b-1ycp8e6kg0] {
    position: relative;
    width: 100%;
}

.image-upload-area input[type="file"][b-1ycp8e6kg0] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

.compact-upload-row[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.btn-compact-upload[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-compact-upload-icon[b-1ycp8e6kg0] {
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: var(--BEC-borderRadiusLarge);
}

.btn-compact-upload:hover[b-1ycp8e6kg0] {
    background: var(--BEC-themeSecondary);
    border-color: var(--BEC-themeSecondary);
}

.btn-compact-upload i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
}

.compact-upload-copy[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
    min-width: 0;
}

.compact-upload-copy strong[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.compact-upload-copy small[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.upload-progress[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-top: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.upload-progress i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    animation: spin-b-1ycp8e6kg0 1s linear infinite;
}

@keyframes spin-b-1ycp8e6kg0 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Image Preview Container */
.image-preview-container[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
    align-items: flex-start;
}

.image-preview[b-1ycp8e6kg0] {
    width: min(100%, 320px);
    aspect-ratio: 16 / 5;
    max-height: 160px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

.btn-remove-image[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground1);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.btn-remove-image:hover[b-1ycp8e6kg0] {
    background: var(--BEC-colorPaletteRedBackground2);
}

.btn-remove-image i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
}

/* Review Section */
.review-section[b-1ycp8e6kg0] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-1ycp8e6kg0] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item.full-width[b-1ycp8e6kg0] {
    grid-column: 1 / -1;
}

.review-label[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

.review-image[b-1ycp8e6kg0] {
    width: 100%;
    max-width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
    margin-top: var(--BEC-spacingHorizontalS);
}

/* Sidebar Footer */
.sidebar-footer[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* Sidebar Footer Buttons */
.sidebar-footer .btn[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.sidebar-footer .btn:disabled[b-1ycp8e6kg0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sidebar-footer .btn-secondary[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-footer .btn-secondary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.sidebar-footer .btn-primary[b-1ycp8e6kg0] {
    background: var(--BEC-themePrimary);
    color: white;
}

.sidebar-footer .btn-primary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: var(--BEC-themeSecondary);
}

.sidebar-footer .btn i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Loading Box */
.loading-box[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-box i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
}

.loading-box p[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    :global(.hero-view-sidebar .e-sidebar)[b-1ycp8e6kg0],
    :global(.hero-edit-sidebar .e-sidebar)[b-1ycp8e6kg0],
    :global(.hero-create-sidebar .e-sidebar)[b-1ycp8e6kg0] {
        width: 90% !important;
    }

    .sidebar-header[b-1ycp8e6kg0],
    .sidebar-footer[b-1ycp8e6kg0] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-1ycp8e6kg0] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-1ycp8e6kg0],
    .review-grid[b-1ycp8e6kg0],
    .view-info-row[b-1ycp8e6kg0] {
        grid-template-columns: 1fr;
    }
}
        /* Compact Upload Trigger */
        .upload-compact[b-1ycp8e6kg0] {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: #f8fafc;
            border: 1px dashed var(--BEC-colorNeutralStroke1);
            border-radius: var(--BEC-borderRadiusMedium);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .upload-compact:hover[b-1ycp8e6kg0] {
            border-color: var(--BEC-brandBackground);
            background: #eff6ff;
        }

        .upload-compact-icon[b-1ycp8e6kg0] {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(37, 99, 235, 0.1);
            color: var(--BEC-brandBackground);
            border-radius: 50%;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .upload-compact-content[b-1ycp8e6kg0] {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .upload-compact-text[b-1ycp8e6kg0] {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--BEC-colorNeutralForeground1);
        }

        .upload-compact-subtext[b-1ycp8e6kg0] {
            font-size: 0.75rem;
            color: var(--BEC-colorNeutralForeground3);
        }

        /* Image Grid */
        .image-preview-section[b-1ycp8e6kg0] {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 10px;
        }

        .image-grid[b-1ycp8e6kg0] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .image-card[b-1ycp8e6kg0] {
            position: relative;
            border-radius: var(--BEC-borderRadiusMedium);
            overflow: hidden;
            border: 1px solid var(--BEC-colorNeutralStroke1);
            background: #fff;
            aspect-ratio: 16/9;
        }

        .image-card img[b-1ycp8e6kg0] {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Hover overlay for actions */
        .image-overlay[b-1ycp8e6kg0] {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 8px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .image-card:hover .image-overlay[b-1ycp8e6kg0] {
            opacity: 1;
        }

        .image-actions[b-1ycp8e6kg0] {
            display: flex;
            justify-content: flex-end;
        }

        .action-icon[b-1ycp8e6kg0] {
            background: rgba(255,255,255,0.9);
            color: #ef4444;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .action-icon:hover[b-1ycp8e6kg0] {
            background: #fff;
            transform: scale(1.1);
        }

        .image-meta[b-1ycp8e6kg0] {
            color: white;
            font-size: 0.75rem;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Status Badge inside Image Cards only */
        .image-card .status-badge[b-1ycp8e6kg0] {
            position: absolute;
            top: 8px;
            left: 8px;
            background: #10b981;
            color: white;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
/* /Components/Pages/MainLayout/Intranet/HeroAdministration/HeroCreateModal.razor.rz.scp.css */
/* ========================================
   Hero Create Modal - Syncfusion Components
   Used on: HeroAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Dialog + Stepper + Toast
   ======================================== */

/* ========================================
   SYNCFUSION DIALOG CUSTOMIZATION
   ======================================== */

/* Dialog Container */
:global(.hero-create-dialog)[b-2bao1q74pp] {
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 1200px;
}

/* Dialog Header */
:global(.hero-create-dialog .e-dlg-header)[b-2bao1q74pp] {
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXL);
}

.dialog-header-content[b-2bao1q74pp] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.dialog-title[b-2bao1q74pp] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.dialog-title i[b-2bao1q74pp] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-subtitle[b-2bao1q74pp] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Dialog Content */
:global(.hero-create-dialog .e-dlg-content)[b-2bao1q74pp] {
    padding: 0;
    overflow: hidden;
}

/* Dialog Footer */
:global(.hero-create-dialog .e-footer-content)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   SYNCFUSION STEPPER CUSTOMIZATION (LABEL ONLY)
   ✅ No icon styling needed - Label Only mode
   ✅ Clean, professional text-only display
   ======================================== */

:global(.hero-stepper)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* Stepper Labels (Text Only) */
:global(.branch-stepper .e-step .e-step-label-container)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalM);
}

:global(.branch-stepper .e-step .e-step-text-content)[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.3s ease;
}

/* Active Step Label */
:global(.branch-stepper .e-step.e-step-selected .e-step-text-content)[b-2bao1q74pp] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

/* Completed Step Label */
:global(.branch-stepper .e-step.e-step-completed .e-step-text-content)[b-2bao1q74pp] {
    color: var(--BEC-colorNeutralForeground2);
}

/* Stepper Connector Lines */
:global(.branch-stepper .e-stepper-progressbar)[b-2bao1q74pp] {
    background: var(--BEC-colorNeutralStroke2);
    height: 3px;
    transition: all 0.3s ease;
}

:global(.branch-stepper .e-step.e-step-completed .e-stepper-progressbar)[b-2bao1q74pp],
:global(.branch-stepper .e-step.e-step-selected .e-stepper-progressbar)[b-2bao1q74pp] {
    background: var(--BEC-themePrimary);
    height: 4px;
}

/* ========================================
   FORM CONTENT AREA
   ======================================== */

.dialog-form-content[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalXXL);
    min-height: 400px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar {
    width: 8px;
}

.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
}

.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke3);
}

/* Form Step Container */
.form-step[b-2bao1q74pp] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (2-column grid) */
.form-row[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (3-column grid) - Compact horizontal layout */
.form-row-triple[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Row (4-column grid) - Ultra-compact for small fields */
.form-row-quad[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Group */
.form-group[b-2bao1q74pp] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.form-group.full-width[b-2bao1q74pp] {
    grid-column: span 2;
}

/* Form Label */
.form-label[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-label .required[b-2bao1q74pp] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: var(--BEC-spacingHorizontalXXS);
}

/* Read-only Company/Organization Display */
.input-readonly[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background-color: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-readonly i[b-2bao1q74pp] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Company/Organization Display */
.input-loading[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    background-color: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-loading i[b-2bao1q74pp] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Field Hint */
.field-hint[b-2bao1q74pp] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   Displayed directly under each field
   ======================================== */
.error-message[b-2bao1q74pp] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-2bao1q74pp 0.2s ease;
}

@keyframes slideDown-b-2bao1q74pp {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: var(--BEC-spacingHorizontalM) 0 var(--BEC-spacingHorizontalS) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   INFO BOX
   ======================================== */
.info-box[b-2bao1q74pp] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themeLighter);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.info-box i[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

/* ========================================
   TOGGLE SWITCH (Syncfusion SfSwitch)
   ======================================== */
.toggle-wrapper[b-2bao1q74pp] {
    display: flex;
    align-items: center;
    padding-top: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SYNCFUSION SWITCH SIZING
   Make toggle wider to fit Active/Inactive text
   ======================================== */
.toggle-wrapper :global(.e-switch-wrapper)[b-2bao1q74pp] {
    width: 100px !important;
    min-width: 100px !important;
}

.toggle-wrapper :global(.e-switch-inner)[b-2bao1q74pp] {
    width: 100px !important;
}

.toggle-wrapper :global(.e-switch-on)[b-2bao1q74pp],
.toggle-wrapper :global(.e-switch-off)[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase300) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

/* ========================================
   DIALOG FOOTER (SYNCFUSION BUTTONS)
   ✅ NO custom button classes
   ✅ Uses Syncfusion e-btn classes
   ======================================== */
.dialog-footer-wrapper[b-2bao1q74pp] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    width: 100%;
}

.footer-spacer[b-2bao1q74pp] {
    flex: 1;
}

/* Syncfusion Button Customization */
:global(.hero-create-dialog .e-footer-content .e-btn)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 100px;
}

/* Primary Button Styling */
:global(.hero-create-dialog .e-footer-content .e-btn.e-primary)[b-2bao1q74pp] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
}

:global(.hero-create-dialog .e-footer-content .e-btn.e-primary:hover:not(:disabled))[b-2bao1q74pp] {
    background: var(--BEC-themeSecondary);
    border-color: var(--BEC-themeSecondary);
}

/* Success Button Styling */
:global(.hero-create-dialog .e-footer-content .e-btn.e-success)[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

:global(.hero-create-dialog .e-footer-content .e-btn.e-success:hover:not(:disabled))[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

/* Flat Button Styling */
:global(.hero-create-dialog .e-footer-content .e-btn.e-flat)[b-2bao1q74pp] {
    background: transparent;
    border-color: transparent;
    color: var(--BEC-colorNeutralForeground2);
}

:global(.hero-create-dialog .e-footer-content .e-btn.e-flat:hover:not(:disabled))[b-2bao1q74pp] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

/* Button Icons */
:global(.hero-create-dialog .e-footer-content .e-btn .e-btn-icon)[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Disabled Button State */
:global(.hero-create-dialog .e-footer-content .e-btn:disabled)[b-2bao1q74pp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION (Step 4)
   ======================================== */
.review-section[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.review-section h4[b-2bao1q74pp] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
}

.review-row[b-2bao1q74pp] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-row:last-child[b-2bao1q74pp] {
    border-bottom: none;
}

.review-label[b-2bao1q74pp] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.review-value[b-2bao1q74pp] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase200);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :global(.event-create-dialog)[b-2bao1q74pp] {
        max-width: 700px;
    }
    
    .dialog-form-content[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalL);
        min-height: 350px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    :global(.event-create-dialog)[b-2bao1q74pp] {
        width: 95%;
        max-width: 100%;
        margin: var(--BEC-spacingHorizontalMNudge);
    }
    
    :global(.hero-create-dialog .e-dlg-header)[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    }
    
    .dialog-title[b-2bao1q74pp] {
        font-size: var(--BEC-fontSizeBase500);
    }
    
    :global(.hero-stepper)[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalL);
    }
    
    :global(.branch-stepper .e-step .e-step-text-content)[b-2bao1q74pp] {
        font-size: var(--BEC-fontSizeBase200);
    }
    
    .dialog-form-content[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalXL);
        min-height: 380px;
    }
    
    .form-row[b-2bao1q74pp] {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width[b-2bao1q74pp] {
        grid-column: span 1;
    }
    
    .dialog-footer-wrapper[b-2bao1q74pp] {
        flex-wrap: wrap;
    }
    
    .footer-spacer[b-2bao1q74pp] {
        display: none;
    }
    
    :global(.hero-create-dialog .e-footer-content .e-btn)[b-2bao1q74pp] {
        flex: 1;
        min-width: 120px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    :global(.hero-create-dialog)[b-2bao1q74pp] {
        border-radius: 0;
        max-height: 100vh;
    }

    .dialog-title[b-2bao1q74pp] {
        font-size: var(--BEC-fontSizeBase400);
    }
    
    :global(.hero-stepper .e-step .e-step-text-content)[b-2bao1q74pp] {
        display: none; /* Hide labels to save space */
    }
}

/* ========================================
   HERO-SPECIFIC STYLING
   Image preview components
   ======================================== */

/* Hero Preview - Small (during input) */
.hero-preview-small[b-2bao1q74pp] {
    width: 100%;
    max-width: 600px;
    margin-top: var(--BEC-spacingVerticalM);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow4);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview-small img[b-2bao1q74pp] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 200px;
}

/* Hero Preview - Review Step */
.hero-preview-review[b-2bao1q74pp] {
    width: 100%;
    max-width: 800px;
    margin-top: var(--BEC-spacingVerticalL);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow8);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview-review img[b-2bao1q74pp] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 300px;
}

/* Preview Error Message */
.preview-error[b-2bao1q74pp] {
    padding: var(--BEC-spacingVerticalXL);
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingVerticalM);
}

.preview-error i[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeHero900);
    opacity: 0.5;
}

/* ========================================
   CENTERED STATUS DIALOG
   ======================================== */
.status-dialog-overlay[b-2bao1q74pp] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--BEC-colorNeutralBackgroundScrim) 65%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    z-index: 1200;
}

.status-dialog[b-2bao1q74pp] {
    width: min(460px, 100%);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow16);
    padding: var(--BEC-spacingHorizontalXL);
}

.status-dialog-header[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--BEC-spacingHorizontalL);
    align-items: start;
}

.status-dialog-icon[b-2bao1q74pp] {
    width: 48px;
    height: 48px;
    border-radius: var(--BEC-borderRadiusLarge);
    background: var(--BEC-colorNeutralBackground3);
    display: grid;
    place-items: center;
    font-size: var(--BEC-fontSizeBase500);
}

.status-dialog h3[b-2bao1q74pp] {
    margin: 0 0 var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground1);
}

.status-dialog p[b-2bao1q74pp] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.6;
}

.status-dialog-actions[b-2bao1q74pp] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--BEC-spacingHorizontalXL);
}

.status-dialog-button[b-2bao1q74pp] {
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    min-width: 108px;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralBackground1);
}

.status-dialog-button-success[b-2bao1q74pp],
.status-dialog.status-dialog-success .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

.status-dialog-button-warning[b-2bao1q74pp],
.status-dialog.status-dialog-warning .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteYellowBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.status-dialog-button-error[b-2bao1q74pp],
.status-dialog.status-dialog-error .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteRedBackground3);
    color: var(--BEC-colorNeutralBackground1);
}

.status-dialog-button-info[b-2bao1q74pp],
.status-dialog.status-dialog-info .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}
/* /Components/Pages/MainLayout/Intranet/Intranet-MainPage/Intranet-MainPage.razor.rz.scp.css */
/* ========================================
   Intranet Main Page Scoped Styles (Cleaned)
   ======================================== */

[b-9qrq7oltca] body { font-family: 'Inter', sans-serif; background-color: var(--BEC-colorNeutralBackground2, #FAFAFA); }
[b-9qrq7oltca] html { scroll-behavior: smooth; }

.intranet-page-root[b-9qrq7oltca] {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f9fafb;
    display: flex;
    flex-direction: column;
    flex: 1;
    color: #4b5563;
}

.hero-banner[b-9qrq7oltca] {
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
}

.hero-banner-inner[b-9qrq7oltca] {
    position: relative;
    height: 320px;
    width: 100%;
    max-width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    max-height: 400px;
}

@media (min-width: 768px) {
    .hero-banner-inner[b-9qrq7oltca] {
        height: 400px;
    }
}

.hero-banner-img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    filter: brightness(0.95);
}

.hero-banner-inner:hover .hero-banner-img[b-9qrq7oltca] {
    transform: scale(1.05);
}

/* Hero Carousel */
.hero-carousel[b-9qrq7oltca] {
    position: relative;
    height: 320px;
    width: 100%;
    max-width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    max-height: 400px;
}

@media (min-width: 768px) {
    .hero-carousel[b-9qrq7oltca] {
        height: 400px;
    }
}

.hero-carousel-track[b-9qrq7oltca] {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}

.hero-carousel-slide[b-9qrq7oltca] {
    height: 100%;
    overflow: hidden;
}

.hero-carousel-slide .hero-banner-img[b-9qrq7oltca] {
    transition: none;
}

/* Arrows */
.hero-carousel-arrow[b-9qrq7oltca] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease;
    padding: 0;
}

.hero-carousel:hover .hero-carousel-arrow[b-9qrq7oltca] {
    opacity: 1;
}

.hero-carousel-arrow:hover[b-9qrq7oltca] {
    background: rgba(0, 0, 0, 0.6);
}

.hero-carousel-arrow-left[b-9qrq7oltca] {
    left: 12px;
}

.hero-carousel-arrow-right[b-9qrq7oltca] {
    right: 12px;
}

/* Dots */
.hero-carousel-dots[b-9qrq7oltca] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.hero-carousel-dot[b-9qrq7oltca] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.2s ease;
}

.hero-carousel-dot.active[b-9qrq7oltca] {
    background: #fff;
    transform: scale(1.2);
}

.hero-carousel-dot:hover[b-9qrq7oltca] {
    background: rgba(255, 255, 255, 0.6);
}

/* Scrollbar */
[b-9qrq7oltca] ::-webkit-scrollbar { width: 6px; height: 6px; }
[b-9qrq7oltca] ::-webkit-scrollbar-track { background: transparent; }
[b-9qrq7oltca] ::-webkit-scrollbar-thumb { background: var(--BEC-colorNeutralStroke1, #E5E7EB); border-radius: 3px; }
[b-9qrq7oltca] ::-webkit-scrollbar-thumb:hover { background: var(--BEC-colorNeutralStroke2, #D1D5DB); }

/* Page Loader */
.page-loader[b-9qrq7oltca] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 9999;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--BEC-durationNormal, 0.2s) ease;
}
.page-loader-hidden[b-9qrq7oltca] { opacity: 0; pointer-events: none; }

/* Quick Access — responsive grid fallback for smaller screens */
@media (max-width: 1023px) {
    .qa-grid[b-9qrq7oltca] {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 639px) {
    .qa-grid[b-9qrq7oltca] {
        grid-template-columns: repeat(3, 1fr);
    }
}


.shadow-banner[b-9qrq7oltca] { box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }

/* Registration progress bar */
.registration-progress-bar[b-9qrq7oltca] { height: 100%; border-radius: 9999px; transition: all var(--BEC-durationSlow, 0.3s) ease; }

.wizard-panel[b-9qrq7oltca] { box-shadow: 0 10px 40px -5px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05); }
@keyframes fadeScale-b-9qrq7oltca { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
.line-clamp-2[b-9qrq7oltca] { display:-webkit-box; -webkit-line-clamp:2; line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3[b-9qrq7oltca] { display:-webkit-box; -webkit-line-clamp:3; line-clamp: 3; -webkit-box-orient:vertical; overflow:hidden; }
@keyframes slide-in-b-9qrq7oltca { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.animate-slide-in[b-9qrq7oltca] { animation: slide-in-b-9qrq7oltca 0.3s ease-out; }
/* --- Unified News Grid --- */
.unified-news-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
@media (max-width: 767px) {
    .unified-news-grid[b-9qrq7oltca] { grid-template-columns: repeat(2, 1fr); }
}
.unified-news-item[b-9qrq7oltca] {
    background: #f9fafb;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}
.unified-news-item:hover[b-9qrq7oltca] { background: #f3f4f6; }
.unified-news-item__img[b-9qrq7oltca] {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.unified-news-item__img img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.unified-news-item:hover .unified-news-item__img img[b-9qrq7oltca] {
    transform: scale(1.05);
}
.unified-news-item__badge[b-9qrq7oltca] {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    background: rgba(79, 70, 229, 0.9);
    color: white;
    border-radius: 0.25rem;
    z-index: 2;
}
.unified-news-item__body[b-9qrq7oltca] {
    padding: 0.5rem;
}
.unified-news-item__title[b-9qrq7oltca] {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.unified-news-item:hover .unified-news-item__title[b-9qrq7oltca] { color: #4f46e5; }
.unified-news-item__meta[b-9qrq7oltca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.375rem;
    border-top: 1px solid #e5e7eb;
}
.unified-news-item__date[b-9qrq7oltca] {
    font-size: 10px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.unified-news-item__cta[b-9qrq7oltca] {
    font-size: 10px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.175rem 0.45rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.3rem;
    transition: all 0.15s ease;
}
.unified-news-item:hover .unified-news-item__cta[b-9qrq7oltca] {
    color: #fff;
    background: #4f46e5;
    border-color: #4f46e5;
}

/* --- Unified Gallery (Team Moments) --- */
.unified-gallery-track[b-9qrq7oltca] {
    display: flex;
    gap: 0.5rem;
    overflow: hidden;
}
.unified-gallery-item[b-9qrq7oltca] {
    flex: 0 0 calc(25% - 0.375rem);
    min-width: 0;
    background: #f9fafb;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}
.unified-gallery-item:hover[b-9qrq7oltca] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.unified-gallery-item__media[b-9qrq7oltca] {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.unified-gallery-item__media img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.unified-gallery-item:hover .unified-gallery-item__media img[b-9qrq7oltca] {
    transform: scale(1.05);
}
.unified-gallery-item__overlay[b-9qrq7oltca] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.unified-gallery-item:hover .unified-gallery-item__overlay[b-9qrq7oltca] {
    background: rgba(0,0,0,0.15);
}
.unified-gallery-item__expand[b-9qrq7oltca] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 11px;
    color: #374151;
}
.unified-gallery-item:hover .unified-gallery-item__expand[b-9qrq7oltca] {
    opacity: 1;
}
.unified-gallery-item__body[b-9qrq7oltca] {
    padding: 0.35rem 0.5rem 0.3rem;
}
.unified-gallery-item__caption[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Gallery Infinite Scroll Animation --- */
.gallery-scroll-container[b-9qrq7oltca] {
    overflow: hidden;
    position: relative;
}
.gallery-scroll-track[b-9qrq7oltca] {
    display: flex;
    gap: 0.5rem;
    animation: gallery-scroll-b-9qrq7oltca 30s linear infinite;
    width: max-content;
}
.gallery-scroll-track:hover[b-9qrq7oltca] {
    animation-play-state: paused;
}
[b-9qrq7oltca] .gallery-paused {
    animation-play-state: paused !important;
}
@keyframes gallery-scroll-b-9qrq7oltca {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.gallery-scroll-track .unified-gallery-item[b-9qrq7oltca] {
    flex: 0 0 auto;
    width: calc((100vw - 6rem) / 4 - 0.5rem);
    min-width: 180px;
    max-width: 280px;
}
@media (max-width: 767px) {
    .gallery-scroll-track .unified-gallery-item[b-9qrq7oltca] {
        width: calc((100vw - 3rem) / 2 - 0.5rem);
    }
}

/* --- Unified Newsletter Grid --- */
.unified-newsletter-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
@media (max-width: 767px) {
    .unified-newsletter-grid[b-9qrq7oltca] { grid-template-columns: repeat(2, 1fr); }
}
.unified-nl-item[b-9qrq7oltca] {
    background: #f9fafb;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.unified-nl-item:hover[b-9qrq7oltca] { background: #f3f4f6; }
.unified-nl-item__img[b-9qrq7oltca] {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.unified-nl-item__img img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.unified-nl-item:hover .unified-nl-item__img img[b-9qrq7oltca] {
    transform: scale(1.05);
}
.unified-nl-item__pdf-icon[b-9qrq7oltca] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
}
.unified-nl-item:hover .unified-nl-item__pdf-icon[b-9qrq7oltca] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.unified-nl-item__pdf-icon i[b-9qrq7oltca] {
    font-size: 0.7rem;
    color: #dc2626;
}
.unified-nl-item__body[b-9qrq7oltca] {
    padding: 0.5rem;
}
.unified-nl-item__title[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.unified-nl-item:hover .unified-nl-item__title[b-9qrq7oltca] { color: #4f46e5; }
.unified-nl-item__date[b-9qrq7oltca] {
    font-size: 10px;
    color: #9ca3af;
}

/* PDF Canvas for rendering PDF thumbnails */
.newsletter-pdf-canvas[b-9qrq7oltca] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.newsletter-loading[b-9qrq7oltca] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
}
.newsletter-loading .spinner-border[b-9qrq7oltca] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
    border-style: solid;
    border-color: currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-9qrq7oltca 0.75s linear infinite;
}
@keyframes spinner-border-b-9qrq7oltca {
    to { transform: rotate(360deg); }
}
.pdf-load-error[b-9qrq7oltca] {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.pdf-load-error[b-9qrq7oltca]::after {
    content: 'PDF Preview Unavailable';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    z-index: 10;
}
/* Fallback when no thumbnail is available */
.newsletter-no-thumbnail[b-9qrq7oltca] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* News Attachment Styles */

/* Image Attachments */
.news-attachment-image-wrapper[b-9qrq7oltca] {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f3f4f6;
    aspect-ratio: 16 / 10;
}

.news-attachment-image[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-attachment-image-wrapper:hover .news-attachment-image[b-9qrq7oltca] {
    transform: scale(1.05);
}

.news-attachment-image-overlay[b-9qrq7oltca] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-attachment-image-wrapper:hover .news-attachment-image-overlay[b-9qrq7oltca] {
    opacity: 1;
}

/* Link Attachments */
.news-attachment-link[b-9qrq7oltca] {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background-color: rgba(239, 246, 255, 0.3);
    transition: all 0.3s ease;
    font-size: 0.75rem;
}

.news-attachment-link:hover[b-9qrq7oltca] {
    background-color: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.news-attachment-link-url[b-9qrq7oltca] {
    display: block;
    color: #2563eb;
    font-size: 0.75rem;
    line-height: 1.4;
    word-break: break-all;
    transition: color 0.3s ease;
}

.news-attachment-link-url:hover[b-9qrq7oltca] {
    color: #1d4ed8;
    text-decoration: underline;
}

/* File/Document Attachments */
.news-attachment-file[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    transition: all 0.3s ease;
    font-size: 0.75rem;
}

.news-attachment-file:hover[b-9qrq7oltca] {
    border-color: #93c5fd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* --- SIDEBAR WIZARD OVERLAY PATCH — FULL VIEWPORT COVERAGE --- */
.sidebar-overlay[b-9qrq7oltca],
.yt-viewer-backdrop[b-9qrq7oltca] {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.sidebar-overlay > div[b-9qrq7oltca] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sidebar-overlay > .wizard-panel[b-9qrq7oltca],
.sidebar-overlay > .sidebar-panel[b-9qrq7oltca] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wizard-panel[b-9qrq7oltca],
.yt-viewer-container[b-9qrq7oltca] {
    max-height: 100vh;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sidebar-backdrop[b-9qrq7oltca] {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* NEWS & EVENT DETAILS COVER IMAGE HEIGHT REDUCTION */
.sidebar-overlay--z85 .wizard-cover-media[b-9qrq7oltca] {
    aspect-ratio: 16 / 5.8 !important;
    max-height: 220px;
}

.sidebar-overlay--z85 .wizard-cover-media + *[b-9qrq7oltca] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Birthday Section Styles */
.birthday-card[b-9qrq7oltca] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.birthday-card:hover[b-9qrq7oltca] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ========================================
   WIZARD PANEL STYLES (News/Event Details)
   ======================================== */

/* Wizard Content */
.wizard-content[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground2);
}

/* Content Cards */
.wizard-card[b-9qrq7oltca] {
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.wizard-card-gradient[b-9qrq7oltca] {
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground4) 0%, var(--BEC-colorNeutralBackground3) 100%);
}

/* Badge/Category */
.wizard-badge[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    font-size: var(--BEC-fontSizeBase200);
}

.wizard-badge--green[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
    font-size: var(--BEC-fontSizeBase200);
}

.wizard-meta-text[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Typography */
.wizard-hero-title[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeHero700);
    line-height: var(--BEC-lineHeightHero700);
}

.wizard-body-text[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase400);
    line-height: var(--BEC-lineHeightBase500);
}

.wizard-prose[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
    line-height: var(--BEC-lineHeightBase400);
}

/* Section Headers */
.wizard-section-header[b-9qrq7oltca] {
    border-bottom: 2px solid var(--BEC-colorBrandBackground);
}

.wizard-section-header--green[b-9qrq7oltca] {
    border-bottom: 2px solid var(--BEC-colorPaletteGreenForeground1);
}

.wizard-section-icon[b-9qrq7oltca] {
    color: var(--BEC-colorBrandBackground);
}

.wizard-section-icon--green[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-section-title[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.wizard-subsection-title[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
}

/* Attachment Styles */
.wizard-attachment-item[b-9qrq7oltca] {
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
}

.wizard-attachment-icon[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.wizard-attachment-icon--neutral[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
}

.wizard-attachment-name[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
}

.wizard-attachment-link[b-9qrq7oltca] {
    color: var(--BEC-colorBrandForeground1);
}

.wizard-attachment-button[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.wizard-attachment-filename[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Event Info Grid */
.wizard-info-grid[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground3);
}

.wizard-info-icon-wrapper[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground1);
}

.wizard-info-icon[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-info-label[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3);
}

.wizard-info-value[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
}

/* Event Registration Styles */
.wizard-registration-card[b-9qrq7oltca] {
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.wizard-registration-header-icon[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-registration-title[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.wizard-registration-badge[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.wizard-registration-stats[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground3);
}

.wizard-registration-stats-label[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground2);
}

.wizard-registration-stats-value[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
}

.wizard-registration-stats-positive[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-registration-stats-negative[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.wizard-registration-progress-bg[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground1);
}

.wizard-registration-button-disabled[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.wizard-registration-button-loading[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

.wizard-registration-button-primary[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

.wizard-registration-button-primary:hover[b-9qrq7oltca] {
    opacity: 0.9;
}

.wizard-registration-success-card[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.wizard-registration-success-icon[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-registration-success-title[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

.wizard-registration-success-text[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
    opacity: 0.85;
}

/* Event Description Section */
.wizard-description-section[b-9qrq7oltca] {
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.wizard-description-header--green[b-9qrq7oltca] {
    border-bottom: 2px solid var(--BEC-colorPaletteGreenForeground1);
}

.wizard-description-icon--green[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-external-link[b-9qrq7oltca] {
    color: var(--BEC-colorBrandForeground1);
}

/* Dynamic Styles (Acceptable Exceptions) */
/* These use C# calculations and must remain inline */
/* - width: @(progressScore)% */
/* - transform: translateX(calc(-@(currentNewsSlide) * 296px)) */
/* - transform: translateX(-@(currentNewsletterSlide * 25)%) */
/* - width: @(registrationPercentage)% with dynamic background color */

/* ========================================
   TAILWIND → SCOPED CSS MIGRATION
   ======================================== */

/* --- Spin Keyframe --- */
@keyframes spin-b-9qrq7oltca {
    to { transform: rotate(360deg); }
}

/* --- Loader Spinner --- */
.loader-spinner[b-9qrq7oltca] {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    animation: spin-b-9qrq7oltca 1s linear infinite;
}
.loader-spinner--centered[b-9qrq7oltca] {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.75rem;
}

/* --- Error State --- */
.error-container[b-9qrq7oltca] {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.error-alert[b-9qrq7oltca] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.error-retry-btn[b-9qrq7oltca] {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-decoration: underline;
}

/* --- Main Content --- */
.intranet-main-page[b-9qrq7oltca] {
    width: 100%;
    flex-grow: 1;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 2.5rem;
    max-width: 100%;
    min-width: 0;
}
@media (min-width: 640px) {
    .intranet-main-page[b-9qrq7oltca] { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 1024px) {
    .intranet-main-page[b-9qrq7oltca] { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --- Metrics Section --- */
.metrics-section[b-9qrq7oltca] { margin-bottom: 3rem; }
.metrics-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
    .metrics-grid[b-9qrq7oltca] { grid-template-columns: 3fr 1fr; }
}

/* --- Combined Profile + Stats Card --- */
.profile-stats-card[b-9qrq7oltca] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}
.profile-stats-card:hover[b-9qrq7oltca] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Top Row: Avatar + Name (left) + Details (right) */
.profile-stats-top[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.profile-stats-user[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}
.avatar-wrap[b-9qrq7oltca] { position: relative; flex-shrink: 0; }
.avatar-circle[b-9qrq7oltca] {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(to bottom right, #3b82f6, #9333ea);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.avatar-initials[b-9qrq7oltca] { color: white; font-weight: 700; font-size: 0.85rem; line-height: 1rem; }
.status-online[b-9qrq7oltca] {
    position: absolute;
    bottom: -0.125rem;
    right: -0.125rem;
    height: 0.625rem;
    width: 0.625rem;
    background-color: #10b981;
    border: 2px solid white;
    border-radius: 9999px;
}
.user-info[b-9qrq7oltca] { min-width: 0; }
.user-name[b-9qrq7oltca] {
    font-size: 0.8rem;
    line-height: 1.125rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.025em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-code[b-9qrq7oltca] {
    font-size: 0.65rem;
    font-weight: 500;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profile detail items (Job Title / Department / Location) */
.profile-stats-details[b-9qrq7oltca] {
    display: flex;
    gap: 2rem;
    margin-left: auto;
}
.profile-detail-item[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
}
.profile-detail-label[b-9qrq7oltca] {
    font-size: 0.55rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.125rem;
}
.profile-detail-value[b-9qrq7oltca] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Divider between profile and stats */
.profile-stats-divider[b-9qrq7oltca] {
    border-top: 1px solid #e5e7eb;
    margin: 0.625rem 0;
}

/* Bottom Row: 3 Stat Boxes */
.profile-stats-bottom[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}
@media (min-width: 640px) {
    .profile-stats-bottom[b-9qrq7oltca] { grid-template-columns: 1fr 1fr 1fr; }
}

.stat-box[b-9qrq7oltca] {
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.stat-box:hover[b-9qrq7oltca] { background: #f3f4f6; }
.stat-box__label[b-9qrq7oltca] {
    font-size: 0.6rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.stat-box__value[b-9qrq7oltca] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.stat-box__value--empty[b-9qrq7oltca] { color: #9ca3af; }
.stat-box__unit[b-9qrq7oltca] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
}
.stat-box__sub[b-9qrq7oltca] {
    font-size: 0.6rem;
    color: #6b7280;
    font-weight: 500;
    margin-top: 0.125rem;
}

/* Attendance IN/OUT sub-grid inside stat-box */
.stat-box-att-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
    margin-top: 0.25rem;
}
.stat-box-att-cell[b-9qrq7oltca] {
    background: white;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
}
.stat-box-att-cell__label[b-9qrq7oltca] {
    font-size: 0.5rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 0.125rem;
}
.stat-box-att-cell__value[b-9qrq7oltca] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
}
.stat-box-att-cell__value--empty[b-9qrq7oltca] { color: #9ca3af; }

/* --- BEC Connect Card --- */
.connect-card[b-9qrq7oltca] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}
.connect-card:hover[b-9qrq7oltca] { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.connect-body[b-9qrq7oltca] { display: flex; flex-direction: column; height: 100%; }
.connect-header[b-9qrq7oltca] { margin-bottom: 0.5rem; }
.connect-title[b-9qrq7oltca] { font-size: 0.85rem; line-height: 1.125rem; font-weight: 700; color: #111827; letter-spacing: -0.025em; }
.connect-subtitle[b-9qrq7oltca] { font-size: 0.625rem; color: #6b7280; font-weight: 500; }
.connect-stats[b-9qrq7oltca] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
.connect-stat-box[b-9qrq7oltca] { border-radius: 0.5rem; padding: 0.5rem; text-align: center; }
.connect-stat-box--indigo[b-9qrq7oltca] { background-color: #eef2ff; }
.connect-stat-box--purple[b-9qrq7oltca] { background-color: #faf5ff; }
.connect-stat-label[b-9qrq7oltca] { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.125rem; }
.connect-stat-label--indigo[b-9qrq7oltca] { color: #4f46e5; }
.connect-stat-label--purple[b-9qrq7oltca] { color: #9333ea; }
.connect-stat-number[b-9qrq7oltca] { font-size: 1.25rem; line-height: 1.5rem; font-weight: 800; }
.connect-stat-number--indigo[b-9qrq7oltca] { color: #4338ca; }
.connect-stat-number--purple[b-9qrq7oltca] { color: #7e22ce; }
.connect-stat-sub[b-9qrq7oltca] { font-size: 0.5rem; margin-top: 0.125rem; }
.connect-stat-sub--indigo[b-9qrq7oltca] { color: #6366f1; }
.connect-stat-sub--purple[b-9qrq7oltca] { color: #a855f7; }
.connect-actions[b-9qrq7oltca] { margin-top: auto; }
.connect-btn[b-9qrq7oltca] {
    width: 100%; padding: 0.5rem 0.625rem;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: white;
    font-size: 0.65rem; font-weight: 600;
    border: none;
    border-radius: 0.5rem; transition: opacity 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    cursor: pointer;
}
.connect-btn:hover[b-9qrq7oltca] { opacity: 0.9; }

/* Responsive: mobile details stack below user info */
@media (max-width: 639px) {
    .profile-stats-details[b-9qrq7oltca] {
        margin-left: 0;
        gap: 1rem;
        flex-wrap: wrap;
    }
}

/* --- Quick Access (Unified with Metrics Section) --- */
.qa-panel[b-9qrq7oltca] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}
.qa-panel:hover[b-9qrq7oltca] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Header */
.qa-header[b-9qrq7oltca] {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.qa-header__icon[b-9qrq7oltca] {
    height: 2.25rem; width: 2.25rem; border-radius: 0.5rem;
    background-color: #f9fafb; border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    color: #374151; font-size: 1rem;
}
.qa-header__title[b-9qrq7oltca] {
    font-size: 0.85rem; line-height: 1.125rem;
    font-weight: 700; color: #111827; letter-spacing: -0.025em;
}
.qa-header__sub[b-9qrq7oltca] {
    font-size: 0.625rem; color: #6b7280; font-weight: 500;
}

/* Divider */
.qa-divider[b-9qrq7oltca] {
    border-top: 1px solid #e5e7eb;
    margin: 0 0 0.75rem 0;
}

/* 9-column grid */
.qa-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.375rem;
}

/* Each tile — styled like .stat-box */
.qa-tile[b-9qrq7oltca] {
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: inherit;
    border: none;
}
.qa-tile:hover[b-9qrq7oltca] {
    background: #f3f4f6;
}

/* Icon */
.qa-tile__icon[b-9qrq7oltca] {
    width: 1.875rem; height: 1.875rem;
    border-radius: 0.375rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.qa-tile:hover .qa-tile__icon[b-9qrq7oltca] { color: #4f46e5; }

/* Text block */
.qa-tile__text[b-9qrq7oltca] {
    display: flex; flex-direction: column; min-width: 0;
}
.qa-tile__label[b-9qrq7oltca] {
    font-size: 0.6rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.qa-tile:hover .qa-tile__label[b-9qrq7oltca] { color: #111827; }
.qa-tile__sub[b-9qrq7oltca] {
    font-size: 0.5rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}

/* Chevron for dropdown items */
.qa-tile__chevron[b-9qrq7oltca] {
    font-size: 0.4rem;
    color: #d1d5db;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.qa-tile:hover .qa-tile__chevron[b-9qrq7oltca] { color: #6366f1; }

/* Dropdown wrapper for Resources & Policies */
.qa-dropdown-wrapper[b-9qrq7oltca] {
    position: relative;
}
.qa-dropdown[b-9qrq7oltca] {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); margin-top: 0.5rem; width: 14rem;
    background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    z-index: 50;
}
.qa-dropdown__item[b-9qrq7oltca] {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem 0.75rem; transition: background-color 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none; color: inherit;
}
.qa-dropdown__item:hover[b-9qrq7oltca] { background-color: #f9fafb; }
.qa-dropdown__item:last-child[b-9qrq7oltca] { border-bottom: none; }
.qa-dropdown__item--no-border[b-9qrq7oltca] { border-bottom: none; }
.qa-dropdown__icon[b-9qrq7oltca] { color: #9ca3af; width: 1rem; }
.qa-dropdown__text[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #374151; font-weight: 500; }

/* --- Unified Content Section Wrapper --- */
.content-section-card[b-9qrq7oltca] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}
.content-section-card:hover[b-9qrq7oltca] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* --- Unified Section Header (icon-in-box + title + subtitle) --- */
.content-section-header[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}
.content-section-header__icon[b-9qrq7oltca] {
    height: 2rem;
    width: 2rem;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.content-section-header__title[b-9qrq7oltca] {
    font-size: 0.85rem;
    line-height: 1.125rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.025em;
}
.content-section-header__sub[b-9qrq7oltca] {
    font-size: 0.625rem;
    color: #6b7280;
    font-weight: 500;
}
.content-section-header__right[b-9qrq7oltca] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.content-section-header__count[b-9qrq7oltca] {
    font-size: 0.55rem;
    color: #9ca3af;
    font-weight: 600;
}

/* --- Unified Nav Arrows --- */
.content-nav-btn[b-9qrq7oltca] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}
.content-nav-btn:hover[b-9qrq7oltca] {
    background: #f3f4f6;
    color: #4f46e5;
    border-color: #c7d2fe;
}
.content-nav-btn:disabled[b-9qrq7oltca] {
    opacity: 0.4;
    cursor: not-allowed;
}
.content-nav-btn:disabled:hover[b-9qrq7oltca] {
    background: #f9fafb;
    color: #6b7280;
    border-color: #e5e7eb;
}

/* --- Unified Divider --- */
.content-section-divider[b-9qrq7oltca] {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 0.625rem 0;
}

/* --- Unified Pill CTA --- */
.content-pill-cta[b-9qrq7oltca] {
    font-size: 10px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    cursor: pointer;
}
.content-pill-cta:hover[b-9qrq7oltca] {
    color: #fff;
    background: #4f46e5;
    border-color: #4f46e5;
}

/* --- Unified Small Pill CTA (for inside cards) --- */
.content-pill-cta--sm[b-9qrq7oltca] {
    font-size: 10px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.175rem 0.45rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.3rem;
    transition: all 0.15s ease;
}

/* --- Section Spacing --- */
.section-mb-10[b-9qrq7oltca] { margin-bottom: 2.5rem; }

/* --- Empty State --- */
.empty-state[b-9qrq7oltca] { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; font-size: 0.75rem; line-height: 1rem; color: #6b7280; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* --- Unified Video Grid --- */
.unified-video-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
@media (max-width: 767px) {
    .unified-video-grid[b-9qrq7oltca] { grid-template-columns: repeat(2, 1fr); }
}
.unified-video-item[b-9qrq7oltca] {
    background: #f9fafb;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}
.unified-video-item:hover[b-9qrq7oltca] { background: #f3f4f6; }
.unified-video-item__thumb[b-9qrq7oltca] {
    width: 100%;
    aspect-ratio: 16/9;
    background: #1f2937;
    position: relative;
    overflow: hidden;
}
.unified-video-item__thumb img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.unified-video-item:hover .unified-video-item__thumb img[b-9qrq7oltca] {
    transform: scale(1.05);
}
.unified-video-item__thumb video[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.unified-video-item__thumb-placeholder[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f2937;
}
.unified-video-item__overlay[b-9qrq7oltca] {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.unified-video-item:hover .unified-video-item__overlay[b-9qrq7oltca] {
    background: rgba(0,0,0,0.2);
}
.unified-video-item__play[b-9qrq7oltca] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.unified-video-item:hover .unified-video-item__play[b-9qrq7oltca] {
    opacity: 1;
}
.unified-video-item__play svg[b-9qrq7oltca] {
    width: 0.7rem;
    height: 0.7rem;
    color: #111827;
    margin-left: 0.1rem;
}
.unified-video-item__body[b-9qrq7oltca] {
    padding: 0.375rem 0.5rem;
}
.unified-video-item__title[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.unified-video-item:hover .unified-video-item__title[b-9qrq7oltca] { color: #4f46e5; }


/* ── Events Calendar v2 ── */
.cal-layout[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 0.625rem;
}
.cal-panel[b-9qrq7oltca] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.625rem;
}
.cal-nav[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.cal-nav__month-label[b-9qrq7oltca] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
    min-width: 6.5rem;
    text-align: center;
}
.cal-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    row-gap: 0.1rem;
}
.cal-grid__day-header[b-9qrq7oltca] {
    font-size: 0.55rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.25rem;
}
.cal-grid__day-cell[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.15rem 0;
    min-height: 2.25rem;
    cursor: pointer;
}
[b-9qrq7oltca] .cal-grid__day-cell:hover .cal-grid__day-num {
    background: #f3f4f6;
}
[b-9qrq7oltca] .cal-grid__day-cell--today:hover .cal-grid__day-num {
    background: #4f46e5;
}
[b-9qrq7oltca] .cal-grid__day-cell--selected:hover .cal-grid__day-num {
    background: #eef2ff;
}
.cal-grid__day-num[b-9qrq7oltca] {
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: #374151;
    border-radius: 50%;
    transition: all 0.15s ease;
}
.cal-grid__day-cell--other-month .cal-grid__day-num[b-9qrq7oltca] {
    color: #d1d5db;
}
.cal-grid__day-cell--today .cal-grid__day-num[b-9qrq7oltca] {
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
}
.cal-grid__day-cell--selected .cal-grid__day-num[b-9qrq7oltca] {
    background: #eef2ff;
    border: 2px solid #4f46e5;
    color: #4f46e5;
    font-weight: 700;
}
.cal-dot-row[b-9qrq7oltca] {
    display: flex;
    gap: 3px;
    margin-top: 1px;
    justify-content: center;
}
.cal-dot[b-9qrq7oltca] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.cal-dot--internal[b-9qrq7oltca] { background: #4f46e5; }
.cal-dot--external[b-9qrq7oltca] { background: #059669; }

/* Detail panel */
.cal-detail-panel[b-9qrq7oltca] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 22rem;
    overflow-y: auto;
}
.cal-detail-header__title[b-9qrq7oltca] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.025em;
}
.cal-detail-header__subtitle[b-9qrq7oltca] {
    font-size: 0.625rem;
    color: #6b7280;
    font-weight: 500;
}

.cal-view-link[b-9qrq7oltca] {
    font-size: 0.625rem;
    font-weight: 600;
    color: #4f46e5;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.cal-view-link:hover[b-9qrq7oltca] { text-decoration: underline; }

/* Upcoming rows (State B) */
.cal-upcoming-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}
[b-9qrq7oltca] .cal-upcoming-row:hover {
    background: #f9fafb;
    border-radius: 0.375rem;
}
.cal-upcoming-row:last-of-type[b-9qrq7oltca] { border-bottom: none; }
.cal-date-badge[b-9qrq7oltca] {
    flex-shrink: 0;
    width: 2.75rem;
    background: #4f46e5;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    text-align: center;
    padding: 0.2rem 0.25rem;
    border-radius: 0.3rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
}
[b-9qrq7oltca] .cal-upcoming-info {
    flex: 1;
    min-width: 0;
}
.cal-upcoming-info__title[b-9qrq7oltca] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #111827;
}
.cal-upcoming-time[b-9qrq7oltca] {
    font-size: 0.6rem;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
}

/* Calendar responsive */
@media (max-width: 767px) {
    .cal-layout[b-9qrq7oltca] {
        grid-template-columns: 1fr;
    }
}

/* ── End Events Calendar v2 ── */

/* --- Birthdays --- */
.birthday-panel[b-9qrq7oltca] { background: white; border-radius: 0.75rem; padding: 1.25rem; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.birthday-header[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.birthday-icon-wrap[b-9qrq7oltca] { height: 2.25rem; width: 2.25rem; border-radius: 0.5rem; background-color: #fce7f3; display: flex; align-items: center; justify-content: center; }
.birthday-list[b-9qrq7oltca] { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.birthday-item[b-9qrq7oltca] {
    position: relative; display: flex; align-items: center; gap: 0.625rem;
    background-color: #f9fafb; border-radius: 0.5rem;
    padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb;
    transition: all 0.2s ease; cursor: pointer;
}
.birthday-item:hover[b-9qrq7oltca] { background-color: #f3f4f6; border-color: #f9a8d4; }
.birthday-item__avatar[b-9qrq7oltca] { height: 3.5rem; width: 3.5rem; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 2px #e5e7eb; transition: all 0.2s ease; }
.birthday-item:hover .birthday-item__avatar[b-9qrq7oltca] { box-shadow: 0 0 0 2px #f9a8d4; }
.birthday-item__info[b-9qrq7oltca] { text-align: left; min-width: 0; }
.birthday-item__name[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Today's Birthdays Section (Design 1 — Minimal Cards) --- */
.bday-section[b-9qrq7oltca] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}
.bday-section__header[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.bday-section__cake-icon[b-9qrq7oltca] {
    font-size: 1.35rem;
    line-height: 1;
}
.bday-section__title[b-9qrq7oltca] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}
.bday-section__count[b-9qrq7oltca] {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 400;
    line-height: 1;
}
.bday-section__scroll[b-9qrq7oltca] {
    overflow: hidden;
    padding-bottom: 0.5rem;
    position: relative;
}

.bday-scroll-track[b-9qrq7oltca] {
    display: flex;
    gap: 0.75rem;
    width: max-content;
    animation: bdayScroll-b-9qrq7oltca 30s linear infinite;
}

.bday-scroll-track.bday-paused[b-9qrq7oltca] {
    animation-play-state: paused;
}

@keyframes bdayScroll-b-9qrq7oltca {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Each birthday card */
.bday-card[b-9qrq7oltca] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #0078d4;
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    position: relative;
    transition: box-shadow 0.2s ease;
    scroll-snap-align: start;
}
.bday-card:hover[b-9qrq7oltca] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.bday-card__party[b-9qrq7oltca] {
    position: absolute;
    top: 0.5rem;
    right: 0.625rem;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.7;
}
.bday-card__row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.bday-card__avatar[b-9qrq7oltca],
.bday-card__avatar-img[b-9qrq7oltca] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bday-card__avatar[b-9qrq7oltca] {
    background: linear-gradient(135deg, #0078d4, #00a5b5);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}
.bday-card__avatar-img[b-9qrq7oltca] {
    object-fit: cover;
    border: 2px solid #e5e7eb;
}
.bday-card__info[b-9qrq7oltca] {
    min-width: 0;
    flex: 1;
}
.bday-card__name[b-9qrq7oltca] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.bday-card__email[b-9qrq7oltca] {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.bday-card__job[b-9qrq7oltca] {
    font-size: 0.8rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.bday-card__dept[b-9qrq7oltca] {
    font-size: 0.75rem;
    color: #0078d4;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* --- Footer --- */
.ftr-body[b-9qrq7oltca] { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 1.25rem; }
.ftr-col-title[b-9qrq7oltca] { font-size: 0.6rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid #f3f4f6; }
.ftr-about-text[b-9qrq7oltca] { font-size: 0.65rem; color: #6b7280; font-weight: 400; line-height: 1.65; margin-bottom: 0.625rem; }
.ftr-social[b-9qrq7oltca] { display: flex; gap: 0.35rem; }
.ftr-social__link[b-9qrq7oltca] { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; background: #f9fafb; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; color: #6b7280; transition: all 0.2s ease; cursor: pointer; text-decoration: none; }
.ftr-social__link:hover[b-9qrq7oltca] { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.ftr-link-list[b-9qrq7oltca] { list-style: none; padding: 0; margin: 0; }
.ftr-link-list li[b-9qrq7oltca] { margin-bottom: 0.3rem; }
.ftr-link-list a[b-9qrq7oltca] { font-size: 0.65rem; color: #374151; text-decoration: none; font-weight: 450; transition: color 0.15s ease; display: flex; align-items: center; gap: 0.25rem; }
.ftr-link-list a:hover[b-9qrq7oltca] { color: #4f46e5; }
.ftr-link-list a .ftr-arrow[b-9qrq7oltca] { font-size: 0.55rem; color: #d1d5db; transition: color 0.15s ease; }
.ftr-link-list a:hover .ftr-arrow[b-9qrq7oltca] { color: #4f46e5; }
.ftr-contact-item[b-9qrq7oltca] { display: flex; align-items: flex-start; gap: 0.35rem; margin-bottom: 0.45rem; }
.ftr-contact-item__icon[b-9qrq7oltca] { color: #9ca3af; flex-shrink: 0; margin-top: 2px; }
.ftr-contact-item__text[b-9qrq7oltca] { font-size: 0.65rem; color: #374151; font-weight: 400; line-height: 1.5; }
.ftr-contact-item__text a[b-9qrq7oltca] { color: #4f46e5; text-decoration: none; font-weight: 500; }
.ftr-contact-item__text a:hover[b-9qrq7oltca] { text-decoration: underline; }
.ftr-bottom-bar[b-9qrq7oltca] { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.375rem; padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px solid #e5e7eb; font-size: 0.6rem; color: #9ca3af; font-weight: 400; }
.ftr-bottom-bar a[b-9qrq7oltca] { color: #9ca3af; text-decoration: none; font-weight: 500; transition: color 0.15s ease; }
.ftr-bottom-bar a:hover[b-9qrq7oltca] { color: #4f46e5; }
.ftr-bottom-bar__dot[b-9qrq7oltca] { color: #d1d5db; -webkit-user-select: none; user-select: none; }
.ftr-bottom-bar__ver[b-9qrq7oltca] { color: #d1d5db; font-weight: 500; letter-spacing: 0.03em; }
@media (max-width: 768px) {
    .ftr-body[b-9qrq7oltca] { grid-template-columns: 1fr; }
    .ftr-bottom-bar[b-9qrq7oltca] { gap: 0.25rem; }
}

/* --- YouTube-Style Fullscreen Viewers --- */
.yt-viewer-backdrop[b-9qrq7oltca] { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.yt-viewer-container[b-9qrq7oltca] { max-width: 64rem; width: 100%; padding: 1rem; border-radius: 0.75rem; overflow: hidden; animation: fadeScale-b-9qrq7oltca .25s ease; }
.yt-viewer-container--wide[b-9qrq7oltca] { max-width: 72rem; }
.yt-viewer-player[b-9qrq7oltca] { position: relative; background: #000; border-radius: 0.75rem 0.75rem 0 0; overflow: hidden; }
.yt-viewer-top-gradient[b-9qrq7oltca] { position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent); display: flex; align-items: flex-start; justify-content: flex-end; padding: 12px 16px; z-index: 10; }
.yt-viewer-close-btn[b-9qrq7oltca] { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.15s ease; }
.yt-viewer-close-btn:hover[b-9qrq7oltca] { background: rgba(255,255,255,0.2); }
.yt-viewer-esc-hint[b-9qrq7oltca] { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 6px; z-index: 10; opacity: 0.5; transition: opacity 0.3s ease; }
.yt-viewer-esc-hint:hover[b-9qrq7oltca] { opacity: 0.9; }
.yt-viewer-esc-key[b-9qrq7oltca] { padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 0.625rem; font-weight: 500; color: rgba(255,255,255,0.7); font-family: 'Roboto', sans-serif; }
.yt-viewer-esc-label[b-9qrq7oltca] { font-size: 0.625rem; color: rgba(255,255,255,0.5); font-family: 'Roboto', sans-serif; }
.yt-viewer-image[b-9qrq7oltca] { width: 100%; height: auto; object-fit: contain; max-height: 80vh; display: block; }
.yt-viewer-image-caption[b-9qrq7oltca] { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.3), transparent); padding: 3rem 16px 14px; z-index: 5; }
.yt-viewer-image-caption__text[b-9qrq7oltca] { font-size: 0.85rem; color: #fff; font-weight: 400; font-family: 'Roboto', sans-serif; }
.yt-viewer-video[b-9qrq7oltca] { width: 100%; height: auto; max-height: 85vh; object-fit: contain; display: block; }
.yt-viewer-info[b-9qrq7oltca] { padding: 12px 16px 14px; background: #0f0f0f; border-radius: 0 0 0.75rem 0.75rem; }
.yt-viewer-info__title[b-9qrq7oltca] { font-size: 1rem; font-weight: 500; color: #fff; margin: 0; line-height: 1.4; font-family: 'Roboto', sans-serif; }
.yt-viewer-info__meta[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.375rem; }
.yt-viewer-info__badge[b-9qrq7oltca] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
.yt-viewer-info__badge--image[b-9qrq7oltca] { background: rgba(79,70,229,0.15); color: #818cf8; }
.yt-viewer-info__badge--video[b-9qrq7oltca] { background: rgba(255,0,0,0.12); color: #ff4e4e; }
.yt-viewer-info__source[b-9qrq7oltca] { font-size: 0.75rem; color: #aaa; font-family: 'Roboto', sans-serif; }

/* --- Sidebar Panels --- */
.sidebar-overlay[b-9qrq7oltca] { position: fixed; inset: 0; display: flex; }
.sidebar-overlay--z80[b-9qrq7oltca] { z-index: 1080; }
.sidebar-overlay--z82[b-9qrq7oltca] { z-index: 1082; }
.sidebar-overlay--z85[b-9qrq7oltca] { z-index: 1085; }
.sidebar-backdrop[b-9qrq7oltca] { position: absolute; inset: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sidebar-panel[b-9qrq7oltca] { margin-left: auto; height: 100%; width: 100%; background: white; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); display: flex; flex-direction: column; position: relative; z-index: 10; }
.sidebar-panel--md[b-9qrq7oltca] { max-width: 48rem; }
.sidebar-panel--lg[b-9qrq7oltca] { max-width: 72rem; }
.sidebar-panel--xl[b-9qrq7oltca] { max-width: 56rem; }
.sidebar-header[b-9qrq7oltca] { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; }
.sidebar-filter-bar[b-9qrq7oltca] { padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; overflow-x: auto; }
.sidebar-filter-btn[b-9qrq7oltca] { padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; }
.sidebar-filter-btn--active[b-9qrq7oltca] { background-color: #111827; color: white; }
.sidebar-filter-btn--inactive[b-9qrq7oltca] { background-color: #f3f4f6; color: #4b5563; }
.sidebar-filter-btn--inactive:hover[b-9qrq7oltca] { background-color: #e5e7eb; }
.sidebar-filter-spinner[b-9qrq7oltca] { margin-left: 0.25rem; display: inline-block; width: 0.75rem; height: 0.75rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 9999px; animation: spin-b-9qrq7oltca 1s linear infinite; }
.sidebar-content[b-9qrq7oltca] { flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f9fafb; }
.sidebar-loading[b-9qrq7oltca] { display: flex; align-items: center; justify-content: center; padding: 3rem 0; }
.sidebar-loading__inner[b-9qrq7oltca] { text-align: center; }
.sidebar-loading__text[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; color: #6b7280; }
.sidebar-video-grid[b-9qrq7oltca] { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .sidebar-video-grid[b-9qrq7oltca] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sidebar-video-grid[b-9qrq7oltca] { grid-template-columns: repeat(3, 1fr); } }
.sidebar-video-card[b-9qrq7oltca] { cursor: pointer; }
.sidebar-video-thumb[b-9qrq7oltca] { position: relative; aspect-ratio: 16/9; border-radius: 0.75rem; overflow: hidden; background: black; margin-bottom: 0.75rem; }
.sidebar-masonry[b-9qrq7oltca] { columns: 2; gap: 1rem; }
.sidebar-masonry > * + *[b-9qrq7oltca] { margin-top: 1rem; }
@media (min-width: 768px) { .sidebar-masonry[b-9qrq7oltca] { columns: 3; } }
@media (min-width: 1024px) { .sidebar-masonry[b-9qrq7oltca] { columns: 4; } }
.sidebar-image-card[b-9qrq7oltca] { break-inside: avoid; position: relative; border-radius: 0.75rem; overflow: hidden; background-color: #e5e7eb; cursor: pointer; transition: box-shadow 0.2s ease; }
.sidebar-image-card:hover[b-9qrq7oltca] { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.sidebar-image-card__img[b-9qrq7oltca] { width: 100%; height: auto; object-fit: cover; transition: transform 0.5s ease; }
.sidebar-image-card:hover .sidebar-image-card__img[b-9qrq7oltca] { transform: scale(1.02); }
.sidebar-image-card__overlay[b-9qrq7oltca] { position: absolute; inset: 0; background: transparent; transition: background-color 0.2s ease; }
.sidebar-image-card:hover .sidebar-image-card__overlay[b-9qrq7oltca] { background: rgba(0,0,0,0.1); }
.wizard-cover-media[b-9qrq7oltca] { aspect-ratio: 16/9; width: 100%; }

/* --- Toast --- */
.toast-container[b-9qrq7oltca] { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; }
.toast[b-9qrq7oltca] { border: 1px solid; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); padding: 1rem; max-width: 28rem; }
.toast--success[b-9qrq7oltca] { background-color: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.toast--error[b-9qrq7oltca] { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
.toast__body[b-9qrq7oltca] { display: flex; align-items: flex-start; gap: 0.75rem; }
.toast__icon--success[b-9qrq7oltca] { flex-shrink: 0; color: #16a34a; }
.toast__icon--error[b-9qrq7oltca] { flex-shrink: 0; color: #dc2626; }
.toast__content[b-9qrq7oltca] { flex: 1; }
.toast__title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.toast__message[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; }
.toast__close[b-9qrq7oltca] { flex-shrink: 0; color: #9ca3af; }
.toast__close:hover[b-9qrq7oltca] { color: #4b5563; }

/* --- Events List Wizard --- */
.events-list-grid[b-9qrq7oltca] { display: grid; gap: 1rem; }
.events-list-item[b-9qrq7oltca] {
    background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    padding: 1rem; display: flex; gap: 1rem; text-align: left;
    width: 100%; transition: all 0.2s ease;
}
.events-list-item:hover[b-9qrq7oltca] { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border-color: #93c5fd; }
.events-list-item__body[b-9qrq7oltca] { flex: 1; display: flex; gap: 1rem; min-width: 0; }
.events-list-item__thumb[b-9qrq7oltca] { width: 8rem; height: 5rem; border-radius: 0.375rem; overflow: hidden; background-color: #f3f4f6; flex-shrink: 0; }
.events-list-item__thumb img[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.events-list-item:hover .events-list-item__thumb img[b-9qrq7oltca] { transform: scale(1.05); }
.events-list-item__info[b-9qrq7oltca] { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.events-list-item__title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 0.25rem; }
.events-list-item:hover .events-list-item__title[b-9qrq7oltca] { color: #2563eb; }
.events-list-item__summary[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; margin-bottom: 0.5rem; }
.events-list-item__meta[b-9qrq7oltca] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: #6b7280; }
.events-list-item__arrow[b-9qrq7oltca] { display: flex; align-items: center; flex-shrink: 0; color: #9ca3af; transition: color 0.2s ease; }
.events-list-item:hover .events-list-item__arrow[b-9qrq7oltca] { color: #2563eb; }
.events-list-item__time[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.25rem; }
.events-list-item__location[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.25rem; }
.events-list-item__status[b-9qrq7oltca] { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 10px; font-weight: 600; background-color: #fef2f2; color: #b91c1c; }
.events-list-item__date[b-9qrq7oltca] { width: 4rem; height: 4rem; background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.events-list-item__month[b-9qrq7oltca] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; font-weight: 700; }
.events-list-item__day[b-9qrq7oltca] { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: #111827; line-height: 1; }

/* === Sidebar sub-element classes === */
.sidebar-header__title[b-9qrq7oltca] { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: #111827; }
.sidebar-header__subtitle[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; margin-top: 0.125rem; }
.sidebar-filter-bar__inner[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; }

/* === Sidebar video thumb sub-elements === */
.sidebar-video-thumb__img[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.3s ease; }
.sidebar-video-card:hover .sidebar-video-thumb__img[b-9qrq7oltca] { opacity: 0.6; }
.sidebar-video-thumb__video[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.3s ease; }
.sidebar-video-card:hover .sidebar-video-thumb__video[b-9qrq7oltca] { opacity: 0.6; }
.sidebar-video-thumb__placeholder[b-9qrq7oltca] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #1f2937; color: #9ca3af; }
.sidebar-video-card__title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #111827; }
.sidebar-video-card:hover .sidebar-video-card__title[b-9qrq7oltca] { color: #2563eb; }
.sidebar-video-card__desc[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; margin-top: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



/* === Birthday sub-elements === */
.birthday-header__title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #111827; }
.birthday-header__subtitle[b-9qrq7oltca] { font-size: 10px; color: #6b7280; }

/* === Additional panel variants === */

/* ============================================================
   Tailwind ➜ scoped utility replacements for wizard inner content
   These replicate common Tailwind utility classes used inside
   wizard/sidebar panels (News Detail, Event Detail, etc.).
   ============================================================ */

/* Layout */
[b-9qrq7oltca] .flex { display: flex; }
[b-9qrq7oltca] .flex-1 { flex: 1 1 0%; }
[b-9qrq7oltca] .flex-col { flex-direction: column; }
[b-9qrq7oltca] .flex-wrap { flex-wrap: wrap; }
[b-9qrq7oltca] .items-center { align-items: center; }
[b-9qrq7oltca] .items-start { align-items: flex-start; }
[b-9qrq7oltca] .justify-center { justify-content: center; }
[b-9qrq7oltca] .justify-between { justify-content: space-between; }
[b-9qrq7oltca] .gap-1 { gap: 0.25rem; }
[b-9qrq7oltca] .gap-1\.5 { gap: 0.375rem; }
[b-9qrq7oltca] .gap-2 { gap: 0.5rem; }
[b-9qrq7oltca] .gap-3 { gap: 0.75rem; }
[b-9qrq7oltca] .gap-4 { gap: 1rem; }
[b-9qrq7oltca] .gap-6 { gap: 1.5rem; }
[b-9qrq7oltca] .grid { display: grid; }
[b-9qrq7oltca] .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Spacing */
[b-9qrq7oltca] .space-y-2 > * + * { margin-top: 0.5rem; }
[b-9qrq7oltca] .space-y-3 > * + * { margin-top: 0.75rem; }
[b-9qrq7oltca] .space-y-5 > * + * { margin-top: 1.25rem; }
[b-9qrq7oltca] .space-y-6 > * + * { margin-top: 1.5rem; }
[b-9qrq7oltca] .p-3 { padding: 0.75rem; }
[b-9qrq7oltca] .p-4 { padding: 1rem; }
[b-9qrq7oltca] .p-6 { padding: 1.5rem; }
[b-9qrq7oltca] .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
[b-9qrq7oltca] .px-4 { padding-left: 1rem; padding-right: 1rem; }
[b-9qrq7oltca] .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
[b-9qrq7oltca] .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
[b-9qrq7oltca] .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
[b-9qrq7oltca] .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
[b-9qrq7oltca] .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
[b-9qrq7oltca] .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
[b-9qrq7oltca] .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
[b-9qrq7oltca] .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
[b-9qrq7oltca] .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
[b-9qrq7oltca] .mb-1 { margin-bottom: 0.25rem; }
[b-9qrq7oltca] .mb-1\.5 { margin-bottom: 0.375rem; }
[b-9qrq7oltca] .mb-2 { margin-bottom: 0.5rem; }
[b-9qrq7oltca] .mb-3 { margin-bottom: 0.75rem; }
[b-9qrq7oltca] .mb-4 { margin-bottom: 1rem; }
[b-9qrq7oltca] .mt-0\.5 { margin-top: 0.125rem; }
[b-9qrq7oltca] .mt-1 { margin-top: 0.25rem; }
[b-9qrq7oltca] .mt-2 { margin-top: 0.5rem; }
[b-9qrq7oltca] .mt-4 { margin-top: 1rem; }
[b-9qrq7oltca] .mt-6 { margin-top: 1.5rem; }
[b-9qrq7oltca] .pb-3 { padding-bottom: 0.75rem; }
[b-9qrq7oltca] .pt-1 { padding-top: 0.25rem; }

/* Sizing */
[b-9qrq7oltca] .w-full { width: 100%; }
[b-9qrq7oltca] .h-auto { height: auto; }
[b-9qrq7oltca] .h-2\.5 { height: 0.625rem; }
[b-9qrq7oltca] .h-7 { height: 1.75rem; }
[b-9qrq7oltca] .h-9 { height: 2.25rem; }
[b-9qrq7oltca] .h-10 { height: 2.5rem; }
[b-9qrq7oltca] .h-16 { height: 4rem; }
[b-9qrq7oltca] .w-3 { width: 0.75rem; }
[b-9qrq7oltca] .w-4 { width: 1rem; }
[b-9qrq7oltca] .w-7 { width: 1.75rem; }
[b-9qrq7oltca] .w-9 { width: 2.25rem; }
[b-9qrq7oltca] .w-10 { width: 2.5rem; }
[b-9qrq7oltca] .w-12 { width: 3rem; }
[b-9qrq7oltca] .w-16 { width: 4rem; }
[b-9qrq7oltca] .h-3 { height: 0.75rem; }
[b-9qrq7oltca] .h-4 { height: 1rem; }
[b-9qrq7oltca] .h-12 { height: 3rem; }
[b-9qrq7oltca] .max-w-none { max-width: none; }
[b-9qrq7oltca] .max-w-4xl { max-width: 56rem; }
[b-9qrq7oltca] .max-h-\[80vh\] { max-height: 80vh; }
[b-9qrq7oltca] .max-h-\[85vh\] { max-height: 85vh; }
[b-9qrq7oltca] .min-w-0 { min-width: 0; }
[b-9qrq7oltca] .shrink-0 { flex-shrink: 0; }

/* Typography */
[b-9qrq7oltca] .text-\[10px\] { font-size: 10px; }
[b-9qrq7oltca] .text-xs { font-size: 0.75rem; line-height: 1rem; }
[b-9qrq7oltca] .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
[b-9qrq7oltca] .text-base { font-size: 1rem; line-height: 1.5rem; }
[b-9qrq7oltca] .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
[b-9qrq7oltca] .font-medium { font-weight: 500; }
[b-9qrq7oltca] .font-semibold { font-weight: 600; }
[b-9qrq7oltca] .font-bold { font-weight: 700; }
[b-9qrq7oltca] .text-center { text-align: center; }
[b-9qrq7oltca] .text-left { text-align: left; }
[b-9qrq7oltca] .leading-relaxed { line-height: 1.625; }
[b-9qrq7oltca] .leading-none { line-height: 1; }
[b-9qrq7oltca] .tracking-tight { letter-spacing: -0.025em; }
[b-9qrq7oltca] .tracking-wider { letter-spacing: 0.05em; }
[b-9qrq7oltca] .uppercase { text-transform: uppercase; }
[b-9qrq7oltca] .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[b-9qrq7oltca] .break-all { word-break: break-all; }
[b-9qrq7oltca] .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
[b-9qrq7oltca] .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Colors */
[b-9qrq7oltca] .text-white { color: white; }
[b-9qrq7oltca] .text-gray-400 { color: #9ca3af; }
[b-9qrq7oltca] .text-gray-500 { color: #6b7280; }
[b-9qrq7oltca] .text-gray-900 { color: #111827; }
[b-9qrq7oltca] .bg-white { background-color: white; }
[b-9qrq7oltca] .bg-black { background-color: black; }
[b-9qrq7oltca] .bg-gray-50 { background-color: #f9fafb; }
[b-9qrq7oltca] .bg-gray-100 { background-color: #f3f4f6; }

/* Borders & Rounded */
[b-9qrq7oltca] .border { border-width: 1px; border-style: solid; }
[b-9qrq7oltca] .border-2 { border-width: 2px; border-style: solid; }
[b-9qrq7oltca] .border-4 { border-width: 4px; border-style: solid; }
[b-9qrq7oltca] .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
[b-9qrq7oltca] .border-gray-100 { border-color: #f3f4f6; }
[b-9qrq7oltca] .border-gray-200 { border-color: #e5e7eb; }
[b-9qrq7oltca] .border-current { border-color: currentColor; }
[b-9qrq7oltca] .border-t-transparent { border-top-color: transparent; }
[b-9qrq7oltca] .border-white { border-color: white; }
[b-9qrq7oltca] .rounded { border-radius: 0.25rem; }
[b-9qrq7oltca] .rounded-lg { border-radius: 0.5rem; }
[b-9qrq7oltca] .rounded-xl { border-radius: 0.75rem; }
[b-9qrq7oltca] .rounded-full { border-radius: 9999px; }

/* Shadows & Effects */
[b-9qrq7oltca] .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
[b-9qrq7oltca] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }

/* Position & Overflow */
[b-9qrq7oltca] .relative { position: relative; }
[b-9qrq7oltca] .absolute { position: absolute; }
[b-9qrq7oltca] .inset-0 { inset: 0; }
[b-9qrq7oltca] .overflow-hidden { overflow: hidden; }
[b-9qrq7oltca] .overflow-y-auto { overflow-y: auto; }
[b-9qrq7oltca] .z-10 { z-index: 10; }
[b-9qrq7oltca] .object-cover { object-fit: cover; }
[b-9qrq7oltca] .object-contain { object-fit: contain; }

/* Transitions & Animations */
[b-9qrq7oltca] .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
[b-9qrq7oltca] .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
[b-9qrq7oltca] .animate-spin { animation: spin-b-9qrq7oltca 1s linear infinite; }

/* Responsive */
@media (min-width: 640px) {
    [b-9qrq7oltca] .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Prose (Markdown content) */
[b-9qrq7oltca] .prose { max-width: 65ch; }
[b-9qrq7oltca] .prose-sm { font-size: 0.875rem; line-height: 1.7; }
[b-9qrq7oltca] .prose.max-w-none { max-width: none; }

/* Aspect Ratio */
[b-9qrq7oltca] .aspect-video { aspect-ratio: 16/9; }

/* Cursor */
[b-9qrq7oltca] .cursor-not-allowed { cursor: not-allowed; }

/* Inline-flex */
[b-9qrq7oltca] .inline-flex { display: inline-flex; }
[b-9qrq7oltca] .inline-block { display: inline-block; }
[b-9qrq7oltca] .block { display: block; }
[b-9qrq7oltca] .hidden { display: none; }

/* Opacity */
[b-9qrq7oltca] .opacity-0 { opacity: 0; }

/* Hover states */
[b-9qrq7oltca] .hover\:text-gray-600:hover { color: #4b5563; }
[b-9qrq7oltca] .hover\:text-gray-800:hover { color: #1f2937; }
[b-9qrq7oltca] .hover\:bg-gray-100:hover { background-color: #f3f4f6; }

/* Auto margins */
[b-9qrq7oltca] .mx-auto { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════
   UNIFIED SIDEBAR HEADER
   ═══════════════════════════════════════════════════════ */
[b-9qrq7oltca] .uni-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

[b-9qrq7oltca] .uni-header__group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-9qrq7oltca] .uni-header__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-9qrq7oltca] .uni-header__icon--indigo {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4f46e5;
}

[b-9qrq7oltca] .uni-header__icon--emerald {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
}

[b-9qrq7oltca] .uni-header__icon--amber {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #d97706;
}

[b-9qrq7oltca] .uni-header__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.025em;
    margin: 0;
}

[b-9qrq7oltca] .uni-header__subtitle {
    font-size: 0.7rem;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}

[b-9qrq7oltca] .uni-header__close {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #6b7280;
    padding: 0;
}

[b-9qrq7oltca] .uni-header__close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════
   UNIFIED LOADING STATE
   ═══════════════════════════════════════════════════════ */
[b-9qrq7oltca] .uni-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem;
}

[b-9qrq7oltca] .uni-loading__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: uni-spin-b-9qrq7oltca 0.8s linear infinite;
}

[b-9qrq7oltca] .uni-loading__spinner--emerald {
    border-top-color: #059669;
}

@keyframes uni-spin-b-9qrq7oltca {
    to { transform: rotate(360deg); }
}

[b-9qrq7oltca] .uni-loading__text {
    margin-top: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

/* ═══════════════════════════════════════════════════════
   UNIFIED EMPTY / ERROR STATE
   ═══════════════════════════════════════════════════════ */
[b-9qrq7oltca] .uni-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem;
    text-align: center;
}

[b-9qrq7oltca] .uni-empty__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    margin-bottom: 1rem;
}

[b-9qrq7oltca] .uni-empty__icon--error {
    background: #fef2f2;
    color: #dc2626;
}

[b-9qrq7oltca] .uni-empty__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.375rem 0;
}

[b-9qrq7oltca] .uni-empty__text {
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 500;
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

[b-9qrq7oltca] .uni-empty__button {
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-9qrq7oltca] .uni-empty__button:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* ═══ Quick Access Sidebar Grid ═══ */
.qa-sidebar-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ═══ Quick Access Sidebar Card ═══ */
.qa-sidebar-card[b-9qrq7oltca] {
    background: white;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}

.qa-sidebar-card:hover[b-9qrq7oltca] {
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
    transform: translateY(-1px);
}

.qa-sidebar-card__body[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
}

.qa-sidebar-card__name[b-9qrq7oltca] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.qa-sidebar-card__desc[b-9qrq7oltca] {
    font-size: 0.8rem;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-sidebar-card__external[b-9qrq7oltca] {
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.15s;
    margin-top: 0.125rem;
}

.qa-sidebar-card:hover .qa-sidebar-card__external[b-9qrq7oltca] {
    color: #4f46e5;
}

.qa-sidebar-card__cat[b-9qrq7oltca] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.qa-sidebar-card__cat--core[b-9qrq7oltca] {
    background: #eef2ff;
    color: #4338ca;
}

.qa-sidebar-card__cat--support[b-9qrq7oltca] {
    background: #ecfdf5;
    color: #047857;
}

.qa-sidebar-card__cat--technical[b-9qrq7oltca] {
    background: #fffbeb;
    color: #b45309;
}

/* ═══ Sidebar Search Bar ═══ */
.sidebar-search-bar[b-9qrq7oltca] {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-search-bar__icon[b-9qrq7oltca] {
    position: absolute;
    left: 2.125rem;
    color: #9ca3af;
    pointer-events: none;
}

.sidebar-search-bar__input[b-9qrq7oltca] {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #374151;
    background: #f9fafb;
    transition: border-color 0.15s;
    outline: none;
}

.sidebar-search-bar__input:focus[b-9qrq7oltca] {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.sidebar-search-bar__input[b-9qrq7oltca]::placeholder {
    color: #9ca3af;
}

/* ═══ Quick Access Tile Clickable ═══ */
.qa-tile--clickable[b-9qrq7oltca] {
    cursor: pointer;
}

/* ═══ Filter Count Badge ═══ */
.filter-count[b-9qrq7oltca] {
    font-weight: 400;
    opacity: 0.7;
}

/* =========================================================
   HOME POPUP — Birthday + Fun Day RSVP (tabbed)
   ========================================================= */
.popup-overlay[b-9qrq7oltca] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 15, 30, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popup-fade-in-b-9qrq7oltca 0.35s ease-out;
}

@keyframes popup-fade-in-b-9qrq7oltca {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ——— Card shell ——— */
.popup-card[b-9qrq7oltca] {
    background: #ffffff;
    border-radius: 20px;
    width: 460px;
    height: 500px;
    max-width: 95vw;
    max-height: 90vh;
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.10),
        0 12px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: popup-slide-up-b-9qrq7oltca 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popup-slide-up-b-9qrq7oltca {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ——— Close button ——— */
.popup-close[b-9qrq7oltca] {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
    font-family: inherit;
}

.popup-close:hover[b-9qrq7oltca] {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
    transform: scale(1.05);
}

/* ——— Tab bar ——— */
.popup-tabs[b-9qrq7oltca] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fafbfd;
    padding: 0 16px;
    flex-shrink: 0;
}

.popup-tab[b-9qrq7oltca] {
    flex: 1;
    padding: 12px 8px 10px;
    text-align: center;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: #9ca3af;
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    letter-spacing: 0.01em;
}

.popup-tab:hover[b-9qrq7oltca] {
    color: #555;
    background: rgba(0, 0, 0, 0.015);
}

.popup-tab.active[b-9qrq7oltca] {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

.popup-tab .tab-icon[b-9qrq7oltca] {
    font-size: 15px;
}

.popup-tab .tab-badge[b-9qrq7oltca] {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    letter-spacing: 0.02em;
}

.popup-tab .tab-badge-blue[b-9qrq7oltca] {
    background: #2563eb;
}

/* ——— Panel container ——— */
.popup-panel[b-9qrq7oltca] {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    animation: panel-fade-b-9qrq7oltca 0.25s ease;
}

@keyframes panel-fade-b-9qrq7oltca {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-panel.active[b-9qrq7oltca] {
    display: flex;
}

/* ═══════════════════════════════════════════
   BIRTHDAY PANEL
   ═══════════════════════════════════════════ */
.bday-header[b-9qrq7oltca] {
    padding: 16px 24px 12px;
    text-align: center;
    background: linear-gradient(135deg, #fffbf0 0%, #fff7ed 50%, #fef3e2 100%);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(251, 191, 36, 0.08);
}

.bday-header-icon[b-9qrq7oltca] {
    font-size: 28px;
    margin-bottom: 4px;
    display: inline-block;
    animation: bday-icon-bounce-b-9qrq7oltca 2s ease-in-out infinite;
}

@keyframes bday-icon-bounce-b-9qrq7oltca {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.bday-header h2[b-9qrq7oltca] {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}

.bday-header p[b-9qrq7oltca] {
    font-size: 11.5px;
    color: #9ca3af;
    margin: 0;
    font-weight: 400;
}

.bday-list[b-9qrq7oltca] {
    padding: 6px 14px 12px;
    flex: 1;
    overflow-y: auto;
}

.bday-list[b-9qrq7oltca]::-webkit-scrollbar {
    width: 3px;
}

.bday-list[b-9qrq7oltca]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 4px;
}

.bday-list[b-9qrq7oltca]::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

.bday-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.bday-row:hover[b-9qrq7oltca] {
    background: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.bday-row + .bday-row[b-9qrq7oltca] {
    border-top: 1px solid #f5f5f5;
}

/* ——— Info block ——— */
.bday-info[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
}

.bday-name[b-9qrq7oltca] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    letter-spacing: -0.005em;
    cursor: default;
}

.bday-detail[b-9qrq7oltca] {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    line-height: 1.3;
}

/* ——— Wish button ——— */
.bday-wish-btn[b-9qrq7oltca] {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    font-size: 11.5px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bday-wish-btn:hover[b-9qrq7oltca] {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
    transform: translateY(-1px);
}

.bday-wish-btn:active[b-9qrq7oltca] {
    transform: translateY(0);
    box-shadow: none;
}

.bday-wish-btn:disabled[b-9qrq7oltca] {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: #e2e8f0;
    transform: none;
    box-shadow: none;
}

.bday-wish-result[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 16px;
}

.bday-wish-result.wish-sent[b-9qrq7oltca] {
    color: #16a34a;
    background: #f0fdf4;
}

.bday-wish-result.wish-error[b-9qrq7oltca] {
    color: #dc2626;
    background: #fef2f2;
}

/* ═══════════════════════════════════════════
   FUN DAY RSVP PANEL
   ═══════════════════════════════════════════ */
.funday-header[b-9qrq7oltca] {
    padding: 14px 28px 10px;
    text-align: center;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    flex-shrink: 0;
}

.funday-header-icon[b-9qrq7oltca] {
    font-size: 28px;
    margin-bottom: 2px;
}

.funday-header h2[b-9qrq7oltca] {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 2px;
}

.funday-header p[b-9qrq7oltca] {
    font-size: 12px;
    color: #888;
    margin: 0;
}

.funday-date[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e7ef;
    font-size: 11px;
    font-weight: 600;
    color: #1a56db;
}

.funday-date svg[b-9qrq7oltca] {
    width: 12px;
    height: 12px;
}

.funday-body[b-9qrq7oltca] {
    padding: 12px 28px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.qr-container[b-9qrq7oltca] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    border: 2px dashed #e0e7ef;
    background: #fafbfc;
}

.qr-box[b-9qrq7oltca] {
    width: 170px;
    height: 170px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.qr-box img[b-9qrq7oltca] {
    width: 150px;
    height: 150px;
    border-radius: 6px;
}

.qr-label[b-9qrq7oltca] {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

.qr-label strong[b-9qrq7oltca] {
    color: #1a1a2e;
}

.funday-or[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    color: #ccc;
    font-size: 11px;
    width: 120px;
}

.funday-or[b-9qrq7oltca]::before,
.funday-or[b-9qrq7oltca]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
}

.funday-cta[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #1a56db, #2563eb);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.funday-cta:hover[b-9qrq7oltca] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26, 86, 219, 0.3);
    color: #fff;
}

.funday-cta svg[b-9qrq7oltca] {
    width: 15px;
    height: 15px;
}

/* ═══════════════════════════════════════════
   POPUP MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 560px) {
    .popup-card[b-9qrq7oltca] {
        width: calc(100vw - 32px);
        height: auto;
        max-height: 90vh;
        border-radius: 16px;
    }

    .bday-header[b-9qrq7oltca],
    .funday-header[b-9qrq7oltca] {
        padding: 20px 20px 16px;
    }

    .funday-body[b-9qrq7oltca] {
        padding: 20px;
    }

    .qr-box[b-9qrq7oltca] {
        width: 150px;
        height: 150px;
    }

    .qr-box img[b-9qrq7oltca] {
        width: 130px;
        height: 130px;
    }
}

/* ── Online Meeting Join Button ── */
.join-meeting-card[b-9qrq7oltca] { border: 1px solid var(--BEC-colorNeutralStroke1, #e0e0e0); }
.join-meeting-icon[b-9qrq7oltca] { color: var(--BEC-colorBrandForeground1, #5b5fc7); }
.join-meeting-live-badge[b-9qrq7oltca] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    color: #fff; background: #e74c3c; animation: join-pulse-b-9qrq7oltca 1.5s ease-in-out infinite;
}
@keyframes join-pulse-b-9qrq7oltca { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.join-meeting-button[b-9qrq7oltca] {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: all 0.2s ease; border: none; cursor: pointer;
}
.join-meeting-button--active[b-9qrq7oltca] {
    background: linear-gradient(135deg, #5b5fc7 0%, #7b83eb 100%);
    color: #fff; box-shadow: 0 4px 14px rgba(91, 95, 199, 0.35);
}
.join-meeting-button--active:hover[b-9qrq7oltca] {
    background: linear-gradient(135deg, #4b4fba 0%, #6b73e0 100%);
    box-shadow: 0 6px 20px rgba(91, 95, 199, 0.45); transform: translateY(-1px);
}
.join-meeting-button--disabled[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
    color: var(--BEC-colorNeutralForegroundDisabled, #bdbdbd);
    cursor: not-allowed; box-shadow: none;
}
.join-meeting-button--disabled svg[b-9qrq7oltca] { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════
   DESIGN 1 — Compact Side Panel (Event Detail)
   420px right-side panel, banner image, info chips, birthday
   table with independent scroll. Zero wasted space.
   ═══════════════════════════════════════════════════════════ */

.d1-panel[b-9qrq7oltca] {
    position: fixed;
    top: 0;
    right: 0;
    width: 672px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 86;
    overflow: hidden;
}

.d1-header[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #e5e7eb);
    flex-shrink: 0;
}

.d1-header-left[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.d1-header-icon[b-9qrq7oltca] {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: #ededf5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d1-header-icon svg[b-9qrq7oltca] {
    color: #5b5fc7;
}

.btn-close[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3, #616161);
    transition: all 0.15s ease;
}

.btn-close:hover[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.d1-image[b-9qrq7oltca] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.d1-image--contain[b-9qrq7oltca] {
    object-fit: contain;
    height: 200px;
    background: #fff;
}

.d1-body[b-9qrq7oltca] {
    padding: 12px 14px;
    flex: 1;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.d1-badge-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge--internal[b-9qrq7oltca] {
    background: #ededf5;
    color: #5b5fc7;
}

.d1-status-text[b-9qrq7oltca] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.d1-title[b-9qrq7oltca] {
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.3;
}

.d1-meta-grid[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.d1-meta-item[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-radius: 5px;
    font-size: 10.5px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.d1-meta-item svg[b-9qrq7oltca] {
    width: 11px;
    height: 11px;
    color: #5b5fc7;
    flex-shrink: 0;
}

.d1-meta-item--span2[b-9qrq7oltca] {
    grid-column: span 2;
}

.d1-description[b-9qrq7oltca] {
    font-size: 11.5px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.55;
}

.d1-join-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #e6f5e6;
    border-radius: 6px;
}

.d1-join-row .live-dot[b-9qrq7oltca] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0e7a0d;
    animation: pulse-dot-b-9qrq7oltca 1.5s infinite;
}

@keyframes pulse-dot-b-9qrq7oltca {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.d1-join-label[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 600;
    color: #0e7a0d;
    flex: 1;
}

.d1-join-btn[b-9qrq7oltca] {
    font-size: 10px;
    padding: 4px 10px;
    background: #0e7a0d;
}

.d1-join-btn:hover[b-9qrq7oltca] {
    background: #0a6b0a;
}

.btn-join[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: #fff;
}

.btn-join--primary[b-9qrq7oltca] {
    background: #5b5fc7;
}

.btn-join--primary:hover[b-9qrq7oltca] {
    background: #4f52b2;
}

.btn-join--outline[b-9qrq7oltca] {
    background: transparent;
    border: 1.5px solid #5b5fc7;
    color: #5b5fc7;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Registration Link */
.d1-reg-link[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.d1-reg-link svg[b-9qrq7oltca] {
    color: #5b5fc7;
    flex-shrink: 0;
}

.d1-reg-link a[b-9qrq7oltca] {
    color: #5b5fc7;
    text-decoration: none;
    font-weight: 500;
}

.d1-reg-link a:hover[b-9qrq7oltca] {
    text-decoration: underline;
}

/* Compact Registration Section */
.d1-registration[b-9qrq7oltca] {
    border: 1px solid var(--BEC-colorNeutralStroke1, #e5e7eb);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.d1-registration-header[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.d1-registration-label[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.d1-registration-badge[b-9qrq7oltca] {
    font-size: 10px;
    font-weight: 600;
    color: #0e7a0d;
    background: #e6f5e6;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #0e7a0d;
}

.d1-registration-stats[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.d1-registration-count[b-9qrq7oltca] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.d1-registration-seats[b-9qrq7oltca] {
    font-weight: 600;
    font-size: 10px;
    color: #0e7a0d;
}

.d1-registration-full[b-9qrq7oltca] {
    font-weight: 600;
    font-size: 10px;
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
}

.d1-progress-track[b-9qrq7oltca] {
    width: 100%;
    height: 4px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-radius: 2px;
    overflow: hidden;
}

.d1-progress-bar[b-9qrq7oltca] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.d1-reg-btn[b-9qrq7oltca] {
    width: 100%;
    padding: 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.d1-reg-btn--primary[b-9qrq7oltca] {
    background: #0e7a0d;
    color: #fff;
}

.d1-reg-btn--primary:hover[b-9qrq7oltca] {
    background: #0a6b0a;
}

.d1-reg-btn--disabled[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
    color: var(--BEC-colorNeutralForegroundDisabled, #bdbdbd);
    cursor: not-allowed;
}

.d1-reg-btn--loading[b-9qrq7oltca] {
    background: #0e7a0d;
    color: #fff;
    cursor: wait;
}

.d1-reg-spinner[b-9qrq7oltca] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-9qrq7oltca 0.6s linear infinite;
}

/* Birthday Section with Independent Scroll */
.d1-bday-section[b-9qrq7oltca] {
    border-top: 1px solid var(--BEC-colorNeutralStroke1, #e5e7eb);
    padding-top: 10px;
    flex-shrink: 0;
}

.section-label[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.d1-bday-scroll[b-9qrq7oltca] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--BEC-colorNeutralStroke1, #e5e7eb);
    border-radius: 5px;
}

.bday-table[b-9qrq7oltca] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    table-layout: fixed;
}

.bday-table thead th[b-9qrq7oltca] {
    padding: 5px 8px;
    font-weight: 600;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #e5e7eb);
    text-align: left;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    position: sticky;
    top: 0;
    z-index: 1;
}

.bday-table tbody td[b-9qrq7oltca] {
    padding: 4px 8px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #e5e7eb);
    vertical-align: middle;
}

.bday-table tbody tr:last-child td[b-9qrq7oltca] {
    border-bottom: none;
}

.bday-table tbody tr:hover td[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.bday-avatar[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.bday-avatar-circle[b-9qrq7oltca] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ededf5;
    color: #5b5fc7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

.bday-employee-info[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 80px;
}

.bday-employee-name[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
}

.bday-employee-code[b-9qrq7oltca] {
    font-size: 9px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    line-height: 1.2;
}

.bday-date[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 10px;
    white-space: nowrap;
}



/* Loading & Empty States */
.d1-loading[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 10px;
}

.d1-loading-text[b-9qrq7oltca] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.d1-empty[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
    text-align: center;
    padding: 24px;
}

.d1-empty-icon[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
}

.d1-empty-title[b-9qrq7oltca] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.d1-empty-text[b-9qrq7oltca] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.d1-empty-btn[b-9qrq7oltca] {
    margin-top: 4px;
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--BEC-colorNeutralStroke1, #e5e7eb);
    background: #fff;
    color: var(--BEC-colorNeutralForeground1, #242424);
    cursor: pointer;
    transition: all 0.15s ease;
}

.d1-empty-btn:hover[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

/* Responsive: narrow screens */
@media (max-width: 720px) {
    .d1-panel[b-9qrq7oltca] {
        width: 100vw;
    }
}
/* /Components/Pages/MainLayout/Intranet/IntranetAdministration.razor.rz.scp.css */
/* ========================================
   INTRANET ADMINISTRATION — v2 REDESIGN
   Dense, muted, full-width, content-first
   ======================================== */

/* ── LOADING OVERLAY ── */
.intranet-admin-loading-overlay[b-d2tntwujpj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-d2tntwujpj 0.2s ease-in;
}

@keyframes fadeIn-b-d2tntwujpj {
    from { opacity: 0; }
    to { opacity: 1; }
}

.intranet-admin-loading-content[b-d2tntwujpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.intranet-admin-spinner[b-d2tntwujpj] {
    position: relative;
    width: 48px;
    height: 48px;
}

.spinner-ring[b-d2tntwujpj] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--BEC-colorBrandBackground, #0078D4);
    border-radius: 50%;
    animation: spin-b-d2tntwujpj 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1)[b-d2tntwujpj] { animation-delay: -0.45s; }
.spinner-ring:nth-child(2)[b-d2tntwujpj] { animation-delay: -0.3s; border-top-color: var(--BEC-colorBrandBackgroundHover, #106EBE); }
.spinner-ring:nth-child(3)[b-d2tntwujpj] { animation-delay: -0.15s; border-top-color: var(--BEC-colorBrandForeground1, #005A9E); }
.spinner-ring:nth-child(4)[b-d2tntwujpj] { border-top-color: var(--BEC-colorBrandBackground, #0078D4); opacity: 0.6; }

@keyframes spin-b-d2tntwujpj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.intranet-admin-loading-text[b-d2tntwujpj] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #323130);
    margin: 0;
}

.intranet-admin-loading-subtext[b-d2tntwujpj] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #605e5c);
    margin: 0;
}

.content-loading[b-d2tntwujpj] {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ── MAIN CONTENT SHELL ── */
.intranet-admin-content[b-d2tntwujpj] {
    flex: 1;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    list-style: none;
}

.intranet-admin-content[b-d2tntwujpj]::before,
.intranet-admin-content[b-d2tntwujpj]::after {
    display: none !important;
    content: none !important;
}

/* ── PAGE HEADER — compact inline ── */
.page-head[b-d2tntwujpj] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    gap: 16px;
    flex-shrink: 0;
}

.page-head .title-block[b-d2tntwujpj] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.page-head-title[b-d2tntwujpj] {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
}

.page-head-sub[b-d2tntwujpj] {
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* ── TABS — dense underline with icons ── */
.tabs-container[b-d2tntwujpj] {
    display: flex;
    align-items: stretch;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 16px;
    gap: 0;
    flex-shrink: 0;
    margin: 0;
    list-style: none;
    min-height: 0;
}

.tabs-container[b-d2tntwujpj]::before,
.tabs-container[b-d2tntwujpj]::after {
    display: none !important;
    content: none !important;
}

.tabs-wrapper[b-d2tntwujpj] {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.tab-button[b-d2tntwujpj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-size: 12px !important;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.tab-button i[b-d2tntwujpj] {
    font-size: 11px;
    transition: color 0.15s ease;
}

.tab-button:hover[b-d2tntwujpj] {
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.tab-button:hover i[b-d2tntwujpj] {
    color: var(--BEC-colorNeutralForeground1);
}

.tab-button.active[b-d2tntwujpj] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
    border-bottom-color: var(--BEC-colorBrandForeground1);
}

.tab-button.active i[b-d2tntwujpj] {
    color: var(--BEC-colorBrandForeground1);
}

.tab-button:active[b-d2tntwujpj] {
    transform: scale(0.98);
}

.tab-button:disabled[b-d2tntwujpj] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── TAB CONTENT ── */
.tab-content[b-d2tntwujpj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* /Components/Pages/MainLayout/Intranet/NewsAdministration/NewsAdministration.razor.rz.scp.css */
/* ========================================
   NEWS ADMINISTRATION
   Following BranchAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
html[b-cecy957xxy] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   Pin to viewport height for pager bottom positioning
   ======================================== */
.erp-page-container[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-cecy957xxy] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-cecy957xxy] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-cecy957xxy] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform (Active buttons are bright) */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-themePrimary) !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themePrimary) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
/* OPTION 5: Opacity Only (Simplest & Lightest) - ACTIVE */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themeDark) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent (20% Smaller) ======= */
[b-cecy957xxy] .e-toolbar .e-separator {
    background: var(--BEC-themePrimary) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER (User Preference) ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-cecy957xxy] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.loading-overlay[b-cecy957xxy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-cecy957xxy] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error Dialog Message */
.modal-content .error-message[b-cecy957xxy] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* NOTE: Column headers, rows, and pager styles are in a global <style>
   block in IntranetAdministration.razor using CssClass="intranet-admin-grid".
   Syncfusion grid internals have no Blazor scope attribute. */

/* Code Badge in Grid — Wireframe Matched */
.code-badge[b-cecy957xxy] {
    display: inline-block;
    padding: 1px 7px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: none;
}

/* Type Badges in Grid — Wireframe Matched */
.type-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

.type-branch[b-cecy957xxy] {
    background: #F0FFF0;
    color: #107C10;
}

.type-project[b-cecy957xxy] {
    background: #F0F6FC;
    color: #0F6CBD;
}

/* Status Badges in Grid — Wireframe Matched (dot + text) */
.status-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    background: none;
    border: none;
}

.status-badge i[b-cecy957xxy] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.status-active[b-cecy957xxy] {
    color: #16a34a;
}

.status-active i[b-cecy957xxy] {
    background: #16a34a;
}

.status-inactive[b-cecy957xxy] {
    color: var(--BEC-colorNeutralForeground3);
}

.status-inactive i[b-cecy957xxy] {
    background: var(--BEC-colorNeutralForeground3);
}

/* Publish Status Badges in Grid — Wireframe Matched (pills with bg) */
.publish-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

.publish-published[b-cecy957xxy] {
    background: #F0FFF0;
    color: #16a34a;
}

.publish-draft[b-cecy957xxy] {
    background: #FFFBF0;
    color: #9A6700;
}

.publish-expired[b-cecy957xxy] {
    background: #FDE7E9;
    color: #dc2626;
}

/* ========================================
   GRID IMAGE THUMBNAIL
   ======================================== */
.grid-image-container[b-cecy957xxy] {
    width: 40px;
    height: 28px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.grid-image-container img[b-cecy957xxy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.no-image-icon[b-cecy957xxy] {
    width: 36px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

/* RTL Text Support */
.rtl-text[b-cecy957xxy] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

.rtl-input[b-cecy957xxy] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-cecy957xxy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-cecy957xxy 0.2s ease-out;
}

@keyframes fadeIn-b-cecy957xxy {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-cecy957xxy 0.3s ease-out;
}

.modal-container.modal-sm[b-cecy957xxy] {
    max-width: 500px;
}

.modal-container.modal-lg[b-cecy957xxy] {
    max-width: 1000px;
}

@keyframes slideUp-b-cecy957xxy {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-cecy957xxy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-cecy957xxy] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-cecy957xxy] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-cecy957xxy] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-cecy957xxy] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-cecy957xxy] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-cecy957xxy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-cecy957xxy] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
}

.btn-secondary[b-cecy957xxy] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-cecy957xxy] {
    background: #d1d1d1;
}

.btn-danger[b-cecy957xxy] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-cecy957xxy] {
    background: #b91c1c;
}

.btn-warning[b-cecy957xxy] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-cecy957xxy] {
    background: #e67e00;
}

.btn-success[b-cecy957xxy] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-cecy957xxy] {
    background: #059669;
}

/* Info Grid (View Dialog) */
.info-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.info-section[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
}

.info-row[b-cecy957xxy] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.info-label[b-cecy957xxy] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.info-value[b-cecy957xxy] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

/* Form Grid (Edit Dialog) */
.form-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.form-section[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.form-group[b-cecy957xxy] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-group:last-child[b-cecy957xxy] {
    margin-bottom: 0;
}

.form-label[b-cecy957xxy] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-input[b-cecy957xxy] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-cecy957xxy] {
    outline: none;
    border-color: var(--BEC-themePrimary);
    box-shadow: var(--BEC-shadow4);
}

.form-input:disabled[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    cursor: not-allowed;
}

.checkbox-label[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-cecy957xxy] {
    width: var(--BEC-spacingHorizontalL);
    height: var(--BEC-spacingHorizontalL);
    cursor: pointer;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-cecy957xxy] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-cecy957xxy] {
    color: var(--BEC-warningText);
}

.warning-note[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-warningBackground);
    border-left: 3px solid var(--BEC-warningText);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-cecy957xxy] {
    color: var(--BEC-warningText);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-cecy957xxy] {
    background: var(--BEC-themeLighterAlt);
    border-left-color: var(--BEC-themePrimary);
}

.warning-note-info i[b-cecy957xxy] {
    color: var(--BEC-themePrimary);
}

.warning-note-success[b-cecy957xxy] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-cecy957xxy] {
    color: #10b981;
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {
    /* Sticky Toolbar Positioning */
    [b-cecy957xxy] .e-toolbar.e-control {
        top: 50px !important; /* Below compact header */
    }
    
    /* Sticky Grid Headers Positioning */
    .e-grid .e-gridheader[b-cecy957xxy] {
        top: 100px !important; /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {
    /* Page Header - Stack Vertically */
    .erp-page-header[b-cecy957xxy] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    /* Stats - Full Width */
    .stats-container[b-cecy957xxy] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-cecy957xxy] .e-toolbar.e-control {
        top: 90px !important; /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    .e-grid .e-gridheader[b-cecy957xxy] {
        top: 140px !important; /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {
    /* Hide button text, show icons only to save space */
    [b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
    
    /* Column Chooser - Responsive on Mobile */
    [b-cecy957xxy] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-cecy957xxy] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-cecy957xxy] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   ENHANCED VIEW DIALOG STYLES
   ======================================== */

/* Full-width info sections */
.info-section.full-width[b-cecy957xxy] {
    grid-column: 1 / -1;
}

/* Content box for text content */
.content-box[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
}

/* Image preview section */
.image-preview[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.news-cover-img[b-cecy957xxy] {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow8);
}

/* ========================================
   ATTACHMENTS GRID (Image, Link, File Support)
   ======================================== */
.attachments-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.attachment-card[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.attachment-card:hover[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
}

/* Image Attachment Card */
.attachment-card.image-attachment .attachment-image[b-cecy957xxy] {
    width: 100%;
    height: 200px;
    margin-bottom: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    background: #e0e0e0;
}

.attachment-card.image-attachment .attachment-image img[b-cecy957xxy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Link and File Attachment Icon */
.attachment-icon-large[b-cecy957xxy] {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--BEC-spacingHorizontalM);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 28px;
}

.attachment-card.link-attachment .attachment-icon-large[b-cecy957xxy] {
    background: var(--BEC-themePrimary);
}

.attachment-card.file-attachment .attachment-icon-large[b-cecy957xxy] {
    background: #5c2d91;
}

/* Attachment Details */
.attachment-details[b-cecy957xxy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.attachment-name[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

.attachment-caption[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.attachment-size[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-type[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-family: 'Courier New', monospace;
}

/* Attachment Action Buttons */
.btn-view-attachment[b-cecy957xxy],
.btn-download-attachment[b-cecy957xxy] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-view-attachment:hover[b-cecy957xxy],
.btn-download-attachment:hover[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.3);
}

/* External Link in Link Attachment */
.attachment-card .external-link[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-themePrimary);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    word-break: break-all;
    margin-top: var(--BEC-spacingHorizontalXS);
}

.attachment-card .external-link:hover[b-cecy957xxy] {
    text-decoration: underline;
}

/* Responsive Attachments Grid */
@media (max-width: 768px) {
    .attachments-grid[b-cecy957xxy] {
        grid-template-columns: 1fr;
    }
}

/* Loading and Empty States */
.loading-box[b-cecy957xxy],
.empty-box[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalXL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.loading-box i[b-cecy957xxy] {
    font-size: 24px;
    color: var(--BEC-themePrimary);
}

.empty-box i[b-cecy957xxy] {
    font-size: 32px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Audit Section */
.audit-section[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground2);
}

.audit-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.audit-item[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.audit-label[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
}

.audit-label i[b-cecy957xxy] {
    color: var(--BEC-themePrimary);
}

.audit-value[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.audit-date[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   NEWS VIEW & EDIT WIZARD SIDEBARS
   Following NewsCreateModal Pattern
   ======================================== */

/* Sidebar Container */
:global(.news-view-sidebar .e-sidebar)[b-cecy957xxy],
:global(.news-edit-sidebar .e-sidebar)[b-cecy957xxy] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-cecy957xxy] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* Sidebar Header */
.sidebar-header[b-cecy957xxy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-cecy957xxy] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-cecy957xxy] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-cecy957xxy] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
}

/* Wizard Progress Bar (Simple Text Labels) */
.wizard-progress-bar[b-cecy957xxy] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.progress-step[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.3s ease;
}

.progress-step.active[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorNeutralBackground1);
}

/* Sidebar Content */
.sidebar-content[b-cecy957xxy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* Wizard Step */
.wizard-step[b-cecy957xxy] {
    max-width: 100%;
}

.step-title[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

/* View Info Grid (Read-Only Display) */
.view-info-grid[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

.view-info-row[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--BEC-spacingHorizontalM);
    align-items: start;
}

.view-info-row.full-width[b-cecy957xxy] {
    grid-template-columns: 1fr;
    flex-direction: column;
}

.view-info-label[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.view-info-value[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

.view-info-value i[b-cecy957xxy] {
    margin-right: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-colorBrandForeground1);
}

.content-box[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-top: var(--BEC-spacingHorizontalS);
}

.news-cover-img-view[b-cecy957xxy] {
    max-width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Attachments Grid (View) */
.attachments-grid-view[b-cecy957xxy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    margin-top: var(--BEC-spacingHorizontalM);
}

.attachment-card-view[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    gap: var(--BEC-spacingHorizontalS);
}

.attachment-image-view[b-cecy957xxy] {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: var(--BEC-borderRadiusSmall);
}

.attachment-image-view img[b-cecy957xxy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-icon-view[b-cecy957xxy] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.attachment-details-view[b-cecy957xxy] {
    flex: 1;
}

.attachment-name-view[b-cecy957xxy] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.attachment-caption-view[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.attachment-size-view[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.btn-view-attachment-view[b-cecy957xxy],
.btn-download-attachment-view[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    transition: all 0.2s ease;
}

.btn-view-attachment-view:hover[b-cecy957xxy],
.btn-download-attachment-view:hover[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
}

.external-link-view[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    word-break: break-all;
}

.external-link-view:hover[b-cecy957xxy] {
    text-decoration: underline;
}

/* Audit Section (View) */
.audit-section-view[b-cecy957xxy] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding-top: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.audit-item-view[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.audit-item-view i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
}

.audit-date-view[b-cecy957xxy] {
    margin-left: auto;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

/* Form Elements (Edit Wizard) */
.form-group[b-cecy957xxy] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-cecy957xxy] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-cecy957xxy]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-cecy957xxy] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-cecy957xxy] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Subsection Title */
.subsection-title[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* Toggle Wrapper */
.toggle-wrapper[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* Read-only Input Display */
.input-readonly[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.input-readonly i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
}

.input-loading[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.input-loading i[b-cecy957xxy] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

/* Review Section */
.review-section[b-cecy957xxy] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-cecy957xxy] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item.full-width[b-cecy957xxy] {
    grid-column: 1 / -1;
}

.review-label[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* Sidebar Footer */
.sidebar-footer[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* Sidebar Footer Buttons */
.sidebar-footer .btn[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.sidebar-footer .btn:disabled[b-cecy957xxy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sidebar-footer .btn-secondary[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-footer .btn-secondary:hover:not(:disabled)[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.sidebar-footer .btn-primary[b-cecy957xxy] {
    background: var(--BEC-themePrimary);
    color: white;
}

.sidebar-footer .btn-primary:hover:not(:disabled)[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
}

.sidebar-footer .btn i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Loading Box */
.loading-box[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-box i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
}

.loading-box p[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Image Preview Container */
.image-preview-container[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.image-preview[b-cecy957xxy] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Responsive Design */
@media (max-width: 768px) {
    :global(.news-view-sidebar .e-sidebar)[b-cecy957xxy],
    :global(.news-edit-sidebar .e-sidebar)[b-cecy957xxy] {
        width: 90% !important;
    }

    .sidebar-header[b-cecy957xxy],
    .sidebar-footer[b-cecy957xxy] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-cecy957xxy] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-cecy957xxy],
    .review-grid[b-cecy957xxy],
    .view-info-row[b-cecy957xxy] {
        grid-template-columns: 1fr;
    }

    .attachments-grid-view[b-cecy957xxy] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MainLayout/Intranet/NewsAdministration/NewsCreateModal.razor.rz.scp.css */
/* ========================================
   NEWS CREATE WIZARD - SIDEBAR PATTERN
   Following SystemModuleAdministration Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.news-create-sidebar .e-sidebar)[b-un25rei7r7] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-un25rei7r7] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-un25rei7r7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-un25rei7r7] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-un25rei7r7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-un25rei7r7] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-un25rei7r7] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-un25rei7r7]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-un25rei7r7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-un25rei7r7] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-un25rei7r7] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-un25rei7r7]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-un25rei7r7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-un25rei7r7] {
    max-width: 100%;
}

.step-title[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-un25rei7r7] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-un25rei7r7] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-un25rei7r7]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-un25rei7r7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-un25rei7r7] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-un25rei7r7] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* Read-only Input Display */
.input-readonly[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.input-readonly i[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
}

.input-loading[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.input-loading i[b-un25rei7r7] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-un25rei7r7] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-un25rei7r7] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-un25rei7r7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-un25rei7r7] {
    grid-column: 1 / -1;
}

.review-label[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-un25rei7r7] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-un25rei7r7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-un25rei7r7] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-un25rei7r7] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-un25rei7r7] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-un25rei7r7] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-un25rei7r7] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

.btn-success:hover:not(:disabled)[b-un25rei7r7] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.news-create-sidebar .e-sidebar)[b-un25rei7r7] {
        width: 90% !important;
    }

    .sidebar-header[b-un25rei7r7],
    .sidebar-footer[b-un25rei7r7] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-un25rei7r7] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-un25rei7r7] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-un25rei7r7] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-un25rei7r7] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-un25rei7r7] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

    .btn-remove-image:hover:not(:disabled)[b-un25rei7r7] {
        background: #fecaca;
        border-color: #f87171;
        transform: translateY(-1px);
    }

    .btn-remove-image:disabled[b-un25rei7r7] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Upload Controls */
.upload-controls[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

    .btn-upload-image:hover:not(:disabled)[b-un25rei7r7] {
        background: var(--BEC-themeSecondary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
    }

    .btn-upload-image:disabled[b-un25rei7r7] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Field Hint */
.field-hint[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   ATTACHMENTS SECTION
   ======================================== */

.attachment-controls[b-un25rei7r7] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.input-with-button[b-un25rei7r7] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: flex-end;
}

.input-with-button .form-group[b-un25rei7r7] {
    flex: 1;
}

.attachments-list[b-un25rei7r7] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.attachments-list-title[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.attachments-grid[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.attachment-item[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: all 0.2s ease;
}

.attachment-item:hover[b-un25rei7r7] {
    border-color: var(--BEC-themePrimary);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

.attachment-icon[b-un25rei7r7] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: white;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase400);
}

.attachment-info[b-un25rei7r7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-name[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.attachment-caption[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.attachment-type[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightMedium);
}

.btn-remove-attachment[b-un25rei7r7] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-attachment:hover[b-un25rei7r7] {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

/* Review Section Attachments */
.review-attachments-list[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.review-attachment-item[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.review-attachment-item i[b-un25rei7r7] {
    color: var(--BEC-themePrimary);
}

.review-attachment-caption[b-un25rei7r7] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* /Components/Pages/MainLayout/Intranet/NewsAdministration/NewsEditModal.razor.rz.scp.css */
/* ========================================
   NEWS EDIT WIZARD - SIDEBAR PATTERN
   Following NewsCreateModal Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.news-edit-sidebar .e-sidebar)[b-k5o7dllqn8] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-k5o7dllqn8] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-k5o7dllqn8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-k5o7dllqn8] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-k5o7dllqn8] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-k5o7dllqn8] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-k5o7dllqn8] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-k5o7dllqn8]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-k5o7dllqn8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-k5o7dllqn8] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-k5o7dllqn8] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-k5o7dllqn8]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-k5o7dllqn8] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-k5o7dllqn8] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* Loading Container */
.loading-container[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXL);
    min-height: 300px;
}

.loading-container i[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-themePrimary);
}

.loading-container span[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-k5o7dllqn8] {
    max-width: 100%;
}

.step-title[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-k5o7dllqn8] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-k5o7dllqn8] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-k5o7dllqn8] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-k5o7dllqn8]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-k5o7dllqn8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-k5o7dllqn8] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-k5o7dllqn8] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-k5o7dllqn8] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-k5o7dllqn8] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-k5o7dllqn8] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-k5o7dllqn8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-k5o7dllqn8] {
    grid-column: 1 / -1;
}

.review-label[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-k5o7dllqn8] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-k5o7dllqn8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-k5o7dllqn8] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-k5o7dllqn8] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-k5o7dllqn8] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

.btn-success:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.news-edit-sidebar .e-sidebar)[b-k5o7dllqn8] {
        width: 90% !important;
    }

    .sidebar-header[b-k5o7dllqn8],
    .sidebar-footer[b-k5o7dllqn8] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-k5o7dllqn8] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-k5o7dllqn8] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-k5o7dllqn8] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-k5o7dllqn8] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-k5o7dllqn8] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-k5o7dllqn8] {
    background: #fecaca;
    border-color: #f87171;
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-k5o7dllqn8] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upload Controls */
.upload-controls[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-k5o7dllqn8] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   ATTACHMENTS SECTION
   ======================================== */

.attachment-controls[b-k5o7dllqn8] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.input-with-button[b-k5o7dllqn8] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: flex-end;
}

.input-with-button .form-group[b-k5o7dllqn8] {
    flex: 1;
}

.attachments-list[b-k5o7dllqn8] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.attachments-list-title[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.attachments-grid[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.attachment-item[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: all 0.2s ease;
}

.attachment-item:hover[b-k5o7dllqn8] {
    border-color: var(--BEC-themePrimary);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

.attachment-icon[b-k5o7dllqn8] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: white;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase400);
}

.attachment-info[b-k5o7dllqn8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-name[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.attachment-caption[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.attachment-type[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightMedium);
}

.btn-remove-attachment[b-k5o7dllqn8] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-attachment:hover[b-k5o7dllqn8] {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

/* Review Section Attachments */
.review-attachments-list[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.review-attachment-item[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.review-attachment-item i[b-k5o7dllqn8] {
    color: var(--BEC-themePrimary);
}

.review-attachment-caption[b-k5o7dllqn8] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* /Components/Pages/MainLayout/ITSupport/ITConsole/ITConsole.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   ITConsole.razor.css - IT Admin Console
   BEC Design System Compliant (Immersive Redesign)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page Layout ── */
.BEC-Immersive-Layout[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* No padding, content spreads to edges */
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    gap: 0;
    overflow: hidden;
}

/* ── Header Section ── */
.BEC-Header[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    box-shadow: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
}

.BEC-Header-Left[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ── Cross-Navigation Link ── */
.BEC-CrossNav-Link[b-zyf9oadj6d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    text-decoration: none;
    white-space: nowrap;
}

.BEC-CrossNav-Link:hover[b-zyf9oadj6d] {
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.BEC-CrossNav-Link:focus-visible[b-zyf9oadj6d] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Success Toast ── */
.BEC-Success-Toast[b-zyf9oadj6d] {
    padding: 0 24px;
    animation: slideDown-b-zyf9oadj6d var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

@keyframes slideDown-b-zyf9oadj6d {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Attachment Upload Progress ── */
.BEC-Upload-Progress[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-bottom: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    animation: slideDown-b-zyf9oadj6d var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.BEC-Upload-Progress-Header[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Upload-Progress-Text[b-zyf9oadj6d] {
    font-size: 13px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Upload-Progress-Text strong[b-zyf9oadj6d] {
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

[b-zyf9oadj6d] .BEC-Upload-Progress .fluent-progress-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--BEC-colorNeutralStroke2, #c7c7c7);
}

[b-zyf9oadj6d] .BEC-Upload-Progress fluent-progress-bar {
    --progress-bar-height: 4px;
}

.BEC-Title[b-zyf9oadj6d] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    line-height: 1.4;
}

/* ── Stats Group ── */
.BEC-Stat-Group[b-zyf9oadj6d] {
    display: flex;
    gap: 16px;
    margin-left: auto;
}

.BEC-Header-Actions[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Header-Right[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

[b-zyf9oadj6d] .BEC-Header-Actions .e-btn.e-primary {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    height: 32px;
    line-height: 1;
}

.BEC-Stat[b-zyf9oadj6d] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.BEC-Stat-Value[b-zyf9oadj6d] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Stat-Label[b-zyf9oadj6d] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.BEC-Stat--accent .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Stat--warning .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

.BEC-Stat--danger .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.BEC-Stat--critical .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteDarkOrangeForeground1, #da3b01);
}

.BEC-Stat--success .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

/* ── Header Refresh Button (Dashboard tab) ── */
[b-zyf9oadj6d] .BEC-Header-Refresh {
    min-width: auto !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 4px;
}

/* ── Tabs Container ── */
.BEC-Tabs-Container[b-zyf9oadj6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Grid/Tabs sit directly on background */
}

/* ── Immersive Tabs ── */
[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    padding: 0 16px;
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-tab-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-content {
    background: transparent !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-content > .e-item.e-active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ── Tab Content Immersive ── */
.BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 16px;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

/* ── Filter Bar ── */
.BEC-Filter-Bar[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 8px; /* Spacing before grid */
}

.BEC-Chip-Group[b-zyf9oadj6d] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.BEC-Chip[b-zyf9oadj6d] {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-height: 32px;
}

.BEC-Chip:hover[b-zyf9oadj6d] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Chip:focus-visible[b-zyf9oadj6d] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

.BEC-Chip-Active[b-zyf9oadj6d] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);
}

.BEC-Chip-Danger.BEC-Chip-Active[b-zyf9oadj6d] {
    background: var(--BEC-colorPaletteRedBackground3, #d13438);
    border-color: var(--BEC-colorPaletteRedBackground3, #d13438);
}

.BEC-Search-Box[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    min-width: 220px;
    margin-left: auto;
}

.BEC-Search-Box input[b-zyf9oadj6d] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-zyf9oadj6d] .BEC-Icon-Button {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* ── Immersive Grid Wrapper ── */
.BEC-Grid-Immersive-Wrapper[b-zyf9oadj6d] {
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── SfGrid flex chain: make the grid fill its container ── */
[b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

[b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-gridcontent .e-content {
    overflow: auto !important;
}

/* ── Loading State ── */
.BEC-Loading-State[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 300px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 14px;
}

/* ── Skeleton Shimmer Loading (Queue tab) ── */
.BEC-Skeleton-Grid[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

.BEC-Skeleton-Header[b-zyf9oadj6d] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.BEC-Skeleton-Row[b-zyf9oadj6d] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.BEC-Skeleton-Cell[b-zyf9oadj6d] {
    height: 16px;
}

.BEC-Skeleton-Cell--xs[b-zyf9oadj6d] { width: 60px; }
.BEC-Skeleton-Cell--sm[b-zyf9oadj6d] { width: 80px; }
.BEC-Skeleton-Cell--md[b-zyf9oadj6d] { width: 120px; }
.BEC-Skeleton-Cell--lg[b-zyf9oadj6d] { width: 180px; }

/* ── Empty State ── */
.BEC-Empty-State[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 400px;
    padding: 48px 24px;
    text-align: center;
}

.BEC-Empty-Icon[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.BEC-Empty-Title[b-zyf9oadj6d] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Empty-Text[b-zyf9oadj6d] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.5;
}

/* ── Grid / Cell / SLA / Badge / Progress styles ──
   SSOT: css/modules/it-support-grid.css (scoped via .bec-its)
   ─────────────────────────────────────────────── */

.BEC-Badge[b-zyf9oadj6d] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.BEC-Badge-Success[b-zyf9oadj6d] { background: var(--BEC-colorPaletteGreenBackground1, #f1faf1); color: var(--BEC-colorPaletteGreenForeground1, #107c10); }
.BEC-Badge-Neutral[b-zyf9oadj6d] { background: var(--BEC-colorNeutralBackground3, #f5f5f5); color: var(--BEC-colorNeutralForeground2, #424242); }

/* ── Load More (cursor pagination) ── */
.its-load-more-container[b-zyf9oadj6d] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.its-load-more[b-zyf9oadj6d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
                border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-load-more:hover:not(:disabled)[b-zyf9oadj6d] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.its-load-more:disabled[b-zyf9oadj6d] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Small Progress Ring (replaces inline style) ── */
.its-progress-sm[b-zyf9oadj6d] {
    width: 16px;
    height: 16px;
}

/* ── Action Group (Category grid) ── */
[b-zyf9oadj6d] .BEC-Action-Group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet Landscape: ≤ 1024px ── */
@media (max-width: 1024px) {
    .BEC-Header[b-zyf9oadj6d] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Header-Left[b-zyf9oadj6d] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Stat-Group[b-zyf9oadj6d] {
        margin-left: auto;
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Chip-Group[b-zyf9oadj6d] {
        flex-wrap: wrap;
    }

    .BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
        padding: 8px 12px;
    }

    [b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-tab-text {
        font-size: 13px;
    }

    .BEC-Stat-Value[b-zyf9oadj6d] {
        font-size: 15px;
    }

    .BEC-Stat-Label[b-zyf9oadj6d] {
        font-size: 12px;
    }
}

/* ── Tablet Portrait: ≤ 768px ── */
@media (max-width: 768px) {
    .BEC-Header[b-zyf9oadj6d] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 12px;
    }

    .BEC-Header-Left[b-zyf9oadj6d] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .BEC-Title[b-zyf9oadj6d] {
        font-size: 18px;
    }

    .BEC-Stat-Group[b-zyf9oadj6d] {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .BEC-Stat[b-zyf9oadj6d] {
        font-size: 12px;
    }

    .BEC-Stat-Value[b-zyf9oadj6d] {
        font-size: 14px;
    }

    .BEC-Header-Actions[b-zyf9oadj6d] {
        width: 100%;
        justify-content: stretch;
    }

    [b-zyf9oadj6d] .BEC-Header-Actions .e-btn {
        flex: 1;
    }

    .BEC-Filter-Bar[b-zyf9oadj6d] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .BEC-Search-Box[b-zyf9oadj6d] {
        width: 100%;
        margin-left: 0;
        min-width: unset;
    }

    .BEC-Chip-Group[b-zyf9oadj6d] {
        width: 100%;
    }

    .BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
        padding: 8px;
    }

    .BEC-Empty-State[b-zyf9oadj6d] {
        min-height: 240px;
        padding: 24px 16px;
    }

    .BEC-Empty-Title[b-zyf9oadj6d] {
        font-size: 16px;
    }

    .BEC-Empty-Text[b-zyf9oadj6d] {
        font-size: 13px;
    }

    /* Reduce grid row height for denser display */
    [b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-row td {
        padding: 6px 8px;
        font-size: 12px;
    }

    [b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-headercell {
        font-size: 12px;
        padding: 6px 8px;
    }

    .BEC-Skeleton-Header[b-zyf9oadj6d],
    .BEC-Skeleton-Row[b-zyf9oadj6d] {
        gap: 8px;
        padding: 8px 16px;
    }
}

/* ── Mobile: ≤ 480px ── */
@media (max-width: 480px) {
    .BEC-Immersive-Layout[b-zyf9oadj6d] {
        overflow-x: hidden;
    }

    .BEC-Header[b-zyf9oadj6d] {
        padding: 8px 12px;
    }

    .BEC-Title[b-zyf9oadj6d] {
        font-size: 16px;
    }

    .BEC-Stat-Group[b-zyf9oadj6d] {
        display: none;
    }

    .BEC-Chip-Group[b-zyf9oadj6d] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .BEC-Chip[b-zyf9oadj6d] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .BEC-Chip-Group[b-zyf9oadj6d]::after {
        content: '';
        position: sticky;
        right: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, var(--BEC-colorNeutralBackground2, #fafafa));
        pointer-events: none;
        flex-shrink: 0;
    }

    .BEC-Search-Box[b-zyf9oadj6d] {
        min-width: unset;
    }

    [b-zyf9oadj6d] .BEC-Header-Actions .e-btn {
        font-size: 13px;
        padding: 8px 8px;
    }

    .BEC-Empty-State[b-zyf9oadj6d] {
        min-height: 200px;
        padding: 16px 12px;
    }

    .BEC-Grid-Immersive-Wrapper[b-zyf9oadj6d] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .its-load-more[b-zyf9oadj6d] {
        width: 100%;
        justify-content: center;
    }

    .BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
        padding: 4px 8px;
        gap: 4px;
    }

    [b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header {
        padding: 0 8px;
    }

    [b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-tab-text {
        font-size: 12px;
    }
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/CategoryFormDialog.razor.rz.scp.css */
/* ============================================================================
   CategoryFormDialog.razor.css
   IT Support — Category Create/Edit Dialog Scoped Styles
   Relies on shared sp-* classes from BEC_Theme.css for structure.
   Only adds module-specific refinements.
   ============================================================================ */

/* ── Focus Visible (WCAG 2.1 AA) ── */
button:focus-visible[b-2ph3ie2zmc],
input:focus-visible[b-2ph3ie2zmc],
select:focus-visible[b-2ph3ie2zmc],
[tabindex]:focus-visible[b-2ph3ie2zmc] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Loading Button Spinner ── */
[b-2ph3ie2zmc] .sp-footer .e-btn fluent-progress-ring {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-2ph3ie2zmc] .sp-footer .e-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 13px;
    padding: 6px 16px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-2ph3ie2zmc] {
    display: contents;
}

/* ── Responsive: Sidebar & Form Layout ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-2ph3ie2zmc]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-2ph3ie2zmc]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }
}

/* ── Discard Confirmation Bar ── */
.its-discard-bar[b-2ph3ie2zmc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--BEC-colorStatusWarningBackground1, #fff4ce);
    border-bottom: 1px solid var(--BEC-colorStatusWarningBorder1, #fce100);
    flex-shrink: 0;
}

.its-discard-text[b-2ph3ie2zmc] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn[b-2ph3ie2zmc] {
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
                color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    line-height: 1.5;
}

.its-discard-btn--discard[b-2ph3ie2zmc] {
    background: var(--BEC-colorStatusDangerBackground1, #fde7e9);
    color: var(--BEC-colorStatusDangerForeground1, #a80000);
}

.its-discard-btn--discard:hover[b-2ph3ie2zmc] {
    background: var(--BEC-colorStatusDangerBackground2, #f9c5ca);
}

.its-discard-btn--keep[b-2ph3ie2zmc] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn--keep:hover[b-2ph3ie2zmc] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/CreateTicketWizard.razor.rz.scp.css */
/* ============================================================================
   CreateTicketWizard.razor.css
   IT Support — polished side panel wizard
   Relies on shared sp-* classes from BEC_Theme.css for structure.
   Only adds module-specific refinements.
   ============================================================================ */

/* ── Panel ── */
.sp-panel[b-lm0ypadcvj] {
    box-shadow: var(--BEC-shadow16, 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14));
}

/* ── Header — clean white, NOT gradient ── */
.sp-header[b-lm0ypadcvj] {
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.sp-title[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    line-height: 1.3;
}

.sp-close-btn[b-lm0ypadcvj] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.sp-close-btn:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

/* ── Section Intro ── */
.its-section-intro[b-lm0ypadcvj] {
    margin-bottom: 24px;
}

.its-section-intro h4[b-lm0ypadcvj] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0 0 4px 0;
}

.its-section-intro p[b-lm0ypadcvj] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin: 0;
    line-height: 1.5;
}

/* ── Body / Content ── */
.sp-body[b-lm0ypadcvj] {
    flex: 1;
    overflow: hidden;
}

.sp-content[b-lm0ypadcvj] {
    padding: 24px;
    overflow-y: auto;
    height: 100%;
}

/* ── Form ── */
.sp-form[b-lm0ypadcvj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Form Groups — generous spacing ── */
.sp-form-group[b-lm0ypadcvj] {
    margin-bottom: 24px;
}

.sp-label[b-lm0ypadcvj] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin-bottom: 8px;
}

.sp-required[b-lm0ypadcvj] {
    color: var(--BEC-colorErrorForeground1, #dc2626);
    margin-left: 2px;
}

/* ── Syncfusion Field Overrides ── */
[b-lm0ypadcvj] .e-outline .e-input-group,
[b-lm0ypadcvj] .e-outline.e-input-group {
    border-radius: 6px !important;
    border-color: var(--BEC-colorNeutralStroke2, #c7c7c7) !important;
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

[b-lm0ypadcvj] .e-outline .e-input-group:hover,
[b-lm0ypadcvj] .e-outline.e-input-group:hover {
    border-color: var(--BEC-colorBrandForeground1, #0078d4) !important;
}

[b-lm0ypadcvj] .e-outline .e-input-group.e-input-focus,
[b-lm0ypadcvj] .e-outline.e-input-group.e-input-focus {
    border-color: var(--BEC-colorBrandForeground1, #0078d4) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandForeground1, #0078d4) !important;
}

/* Only one textarea in this wizard (Description field) — safe to scope globally */
[b-lm0ypadcvj] .e-outline textarea {
    min-height: 140px;
    resize: vertical;
}

/* ── Character Count ── */
.its-char-count[b-lm0ypadcvj] {
    margin-top: 8px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: right;
}

/* ── Loading State ── */
.its-loading-inline[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-radius: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Footer — subtle alt background ── */
.sp-footer[b-lm0ypadcvj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

/* ── Validation Messages ── */
[b-lm0ypadcvj] .validation-message {
    font-size: 12px;
    color: var(--BEC-colorErrorForeground1, #dc2626);
    margin-top: 4px;
}

/* ── Attachment Zone (compact) ── */
.its-attach-zone[b-lm0ypadcvj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px dashed var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-attach-zone:hover[b-lm0ypadcvj] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    background: rgba(0, 120, 212, 0.04);
}

.its-attach-hint[b-lm0ypadcvj] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 11px;
}

[b-lm0ypadcvj] .its-file-input {
    display: none !important;
}

/* ── File Chips ── */
.its-file-list[b-lm0ypadcvj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* .its-file-chip — SSOT: css/modules/it-support-grid.css */
/* .its-file-ext  — SSOT: css/modules/it-support-grid.css */

.its-file-name[b-lm0ypadcvj] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.its-file-size[b-lm0ypadcvj] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 11px;
    white-space: nowrap;
}

.its-file-remove[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 10px;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.its-file-remove[b-lm0ypadcvj]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.its-file-remove:hover[b-lm0ypadcvj] {
    background: #fde8e8;
    color: var(--BEC-colorErrorForeground1, #dc2626);
}

/* ── Progress Ring Sizes ── */
/* .its-progress-xs — SSOT: css/modules/it-support-grid.css */

[b-lm0ypadcvj] .its-progress-sm {
    width: 16px;
    height: 16px;
}

/* ── Loading Button — constrain spinner inside Syncfusion buttons ── */
[b-lm0ypadcvj] .sp-footer .e-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

[b-lm0ypadcvj] .sp-footer .e-btn fluent-progress-ring {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── AI Suggestion Banner ── */
.its-suggestion-banner[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--BEC-colorPalettePurpleBackground1, #f0eaff) 0%, var(--BEC-colorBrandBackground2, #e8ebf9) 100%);
    border: 1px solid var(--BEC-colorPalettePurpleBorder1, #d4c4f9);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-suggestion-banner.its-suggestion-loading[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke2, #c7c7c7);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.its-suggestion-apply[b-lm0ypadcvj] {
    margin-left: auto;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-suggestion-apply:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.its-suggestion-dismiss[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    font-size: 10px;
}

.its-suggestion-dismiss:hover[b-lm0ypadcvj] {
    background: rgba(0, 0, 0, 0.06);
}

/* ── Focus Visible (E14: WCAG 2.1 AA) ── */
.its-file-remove:focus-visible[b-lm0ypadcvj],
.sp-alert-dismiss:focus-visible[b-lm0ypadcvj],
.its-suggestion-dismiss:focus-visible[b-lm0ypadcvj],
.its-suggestion-apply:focus-visible[b-lm0ypadcvj] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-lm0ypadcvj] {
    display: contents;
}

/* ── Responsive: Sidebar & Form Layout ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-lm0ypadcvj]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .sp-header[b-lm0ypadcvj] {
        padding: 12px 16px;
    }

    .sp-title[b-lm0ypadcvj] {
        font-size: 16px;
    }

    .sp-content[b-lm0ypadcvj] {
        padding: 16px;
    }

    .sp-footer[b-lm0ypadcvj] {
        padding: 12px 16px;
    }

    .sp-form-group[b-lm0ypadcvj] {
        margin-bottom: 16px;
    }

    .its-file-list[b-lm0ypadcvj] {
        flex-direction: column;
    }

    .its-file-chip[b-lm0ypadcvj] {
        max-width: 100%;
    }

    .its-suggestion-banner[b-lm0ypadcvj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .its-suggestion-apply[b-lm0ypadcvj] {
        margin-left: 0;
        align-self: flex-end;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-lm0ypadcvj]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }

    .sp-content[b-lm0ypadcvj] {
        padding: 20px;
    }
}

/* ── Discard Confirmation Bar ── */
.its-discard-bar[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorStatusWarningBackground1, #fff4ce);
    border-bottom: 1px solid var(--BEC-colorStatusWarningBorder1, #fce100);
    flex-shrink: 0;
}

.its-discard-text[b-lm0ypadcvj] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn[b-lm0ypadcvj] {
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    line-height: 1.5;
}

.its-discard-btn--discard[b-lm0ypadcvj] {
    background: var(--BEC-colorStatusDangerBackground1, #fde7e9);
    color: var(--BEC-colorStatusDangerForeground1, #a80000);
}

.its-discard-btn--discard:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorStatusDangerBackground2, #f9c5ca);
}

.its-discard-btn--keep[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn--keep:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/OperationsDashboard.razor.rz.scp.css */
/* [UID: OPS_DASHBOARD] — Operations Dashboard Scoped Styles */
/* ─────────────────────────────────────────────────────────────────────────────
   OperationsDashboard.razor.css — 60-KPI Operations Dashboard
   BEC Design System Compliant — All tokens from BEC_Theme.css (SSOT)
   8px grid, no hardcoded colors, no :root, no inline styles
   ───────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   Root Container (CSS isolation boundary)
   ══════════════════════════════════════════════════════════════ */

.ops-root[b-qws5ft1yzv] {
    /* Brand color decomposed to RGB channels for heatmap alpha compositing */
    --ops-brand-rgb: 0, 120, 212;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden; /* Establish scroll containment for .ops-dashboard */
}

/* ══════════════════════════════════════════════════════════════
   Loading / Error / Empty States
   ══════════════════════════════════════════════════════════════ */

/* .skeleton + @keyframes shimmer — SSOT: css/modules/it-support-grid.css */

.skeleton-row[b-qws5ft1yzv] {
    height: 16px;
    margin-bottom: 8px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
}

.ops-loading[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    padding: 24px;
}

.ops-loading .skeleton-card[b-qws5ft1yzv] {
    height: 120px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
}

.ops-empty[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    border: 2px dashed var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: center;
}

.ops-empty h3[b-qws5ft1yzv] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ops-empty p[b-qws5ft1yzv] {
    margin: 0;
    font-size: 14px;
    max-width: 400px;
}

.ops-error[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    flex: 1;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard Container
   ══════════════════════════════════════════════════════════════ */

.ops-dashboard[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;        /* Fill parent flex container (replaces fragile height:100%) */
    min-height: 0;  /* Allow shrinking below content height to enable scrolling */
}

/* ══════════════════════════════════════════════════════════════
   Hero Section (Summary KPIs — toolbar moved to page header)
   ══════════════════════════════════════════════════════════════ */

.ops-hero-section[b-qws5ft1yzv] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Hero KPI Strip (single scrollable row, no side borders) ── */

.ops-hero-strip[b-qws5ft1yzv] {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    flex: 1;
    min-width: 0;
}

.ops-hero-card[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-bottom: 3px solid transparent;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    box-shadow: var(--BEC-shadow4, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14));
    transition: box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-height: 72px;
    min-width: 120px;
    flex: 1 1 0;
}

.ops-hero-card:hover[b-qws5ft1yzv] {
    box-shadow: var(--BEC-shadow8, 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14));
}

.ops-hero-card.success[b-qws5ft1yzv] { border-bottom-color: var(--BEC-colorSuccessForeground1, #107c10); }
.ops-hero-card.warning[b-qws5ft1yzv] { border-bottom-color: var(--BEC-colorWarningForeground1, #d83b01); }
.ops-hero-card.danger[b-qws5ft1yzv]  { border-bottom-color: var(--BEC-colorErrorForeground1, #bc2f32); }

.ops-hero-val[b-qws5ft1yzv] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ops-hero-lbl[b-qws5ft1yzv] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
}

/* Hero-specific: colored text only, NO border-left */
.ops-hero-primary .ops-hero-val[b-qws5ft1yzv] {
    color: var(--BEC-colorBrandBackground, #0078d4);
}

/* ══════════════════════════════════════════════════════════════
   KPI Health Color Classes (SSOT — reused everywhere)
   ══════════════════════════════════════════════════════════════ */

.ops-kpi-success .ops-hero-val[b-qws5ft1yzv],
.ops-kpi-success .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorSuccessForeground1, #107c10);
}

.ops-kpi-warning .ops-hero-val[b-qws5ft1yzv],
.ops-kpi-warning .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorWarningForeground1, #d83b01);
}

.ops-kpi-danger .ops-hero-val[b-qws5ft1yzv],
.ops-kpi-danger .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorErrorForeground1, #bc2f32);
}

/* Metric cards inside sections get colored left border */
.ops-section-body .ops-kpi-success[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorSuccessForeground1, #107c10);
}

.ops-section-body .ops-kpi-warning[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorWarningForeground1, #d83b01);
}

.ops-section-body .ops-kpi-danger[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorErrorForeground1, #bc2f32);
}

.ops-section-body .ops-kpi-neutral[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

/* ── Growth Indicators ── */
.ops-growth-up .ops-hero-val[b-qws5ft1yzv],
.ops-growth-up .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorErrorForeground1, #bc2f32);
}

.ops-growth-down .ops-hero-val[b-qws5ft1yzv],
.ops-growth-down .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorSuccessForeground1, #107c10);
}

.ops-growth-flat .ops-hero-val[b-qws5ft1yzv],
.ops-growth-flat .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ══════════════════════════════════════════════════════════════
   Section Containers (Collapsible)
   ══════════════════════════════════════════════════════════════ */

.ops-section[b-qws5ft1yzv] {
    margin-bottom: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

.ops-section-header[b-qws5ft1yzv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
}

.ops-section-title[b-qws5ft1yzv] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    flex: 1;
}

.ops-section-badge[b-qws5ft1yzv] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.ops-section-body[b-qws5ft1yzv] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ══════════════════════════════════════════════════════════════
   Grid Row Layouts (8px grid)
   ══════════════════════════════════════════════════════════════ */

.ops-row[b-qws5ft1yzv] {
    display: grid;
    gap: 8px;
}

.ops-row--1col[b-qws5ft1yzv] { grid-template-columns: 1fr; }
.ops-row--2col[b-qws5ft1yzv] { grid-template-columns: repeat(2, 1fr); }
.ops-row--3col[b-qws5ft1yzv] { grid-template-columns: repeat(3, 1fr); }
.ops-row--4col[b-qws5ft1yzv] { grid-template-columns: repeat(4, 1fr); }

/* Responsive breakpoints consolidated at end of file */

/* ══════════════════════════════════════════════════════════════
   Metric Cards
   ══════════════════════════════════════════════════════════════ */

.ops-metric-card[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    min-height: 80px;
    transition: box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.ops-metric-card:hover[b-qws5ft1yzv] {
    box-shadow: var(--BEC-shadow4, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14));
}

.ops-metric-card--inline[b-qws5ft1yzv] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    min-height: auto;
}

.ops-metric-val[b-qws5ft1yzv] {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.2;
}

.ops-metric-unit[b-qws5ft1yzv] {
    font-size: 13px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.ops-metric-lbl[b-qws5ft1yzv] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: center;
    margin-top: 4px;
}

/* ── Period Grid (Created/Resolved/Closed T/W/M) ── */
.ops-period-grid[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 8px;
    align-items: baseline;
}

.ops-period-val[b-qws5ft1yzv] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-align: right;
}

.ops-period-lbl[b-qws5ft1yzv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ══════════════════════════════════════════════════════════════
   Panels (wrapper for charts & tables)
   ══════════════════════════════════════════════════════════════ */

.ops-panel[b-qws5ft1yzv] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    padding: 16px;
    overflow: hidden;
}

.ops-panel--chart[b-qws5ft1yzv] {
    padding: 16px 8px 8px;
}

.ops-panel-title[b-qws5ft1yzv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.ops-nodata[b-qws5ft1yzv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    padding: 16px 0;
    text-align: center;
    display: block;
}

/* ══════════════════════════════════════════════════════════════
   Horizontal Bar Charts (CSS-only — SSOT pattern)
   ══════════════════════════════════════════════════════════════ */

.ops-bar-chart[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-bar-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: 72px 1fr 40px;
    gap: 8px;
    align-items: center;
}

.ops-bar-label[b-qws5ft1yzv] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-bar-track[b-qws5ft1yzv] {
    height: 16px;
    background: var(--BEC-colorNeutralBackground5, #ebebeb);
    border-radius: 8px;
    overflow: hidden;
}

.ops-bar-fill[b-qws5ft1yzv] {
    height: 100%;
    width: var(--bar-width, 0%);
    border-radius: 8px;
    transition: width var(--BEC-durationSlower, 400ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-width: 2px;
}

.ops-bar-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-align: right;
}

/* ── Aging Bucket Fill Colors (SSOT) ── */
.ops-aging-fresh[b-qws5ft1yzv]  { background: var(--BEC-colorSuccessForeground1, #107c10); }
.ops-aging-mild[b-qws5ft1yzv]   { background: var(--BEC-colorSuccessForeground1, #107c10); }
.ops-aging-warm[b-qws5ft1yzv]   { background: var(--BEC-colorWarningForeground1, #d83b01); }
.ops-aging-hot[b-qws5ft1yzv]    { background: var(--BEC-colorErrorForeground1, #bc2f32); }
.ops-aging-critical[b-qws5ft1yzv] { background: var(--BEC-colorErrorForeground1, #bc2f32); }
.ops-aging-stale[b-qws5ft1yzv]  { background: var(--BEC-colorNeutralForeground3, #616161); }

.ops-bar-brand[b-qws5ft1yzv] { background: var(--BEC-colorBrandBackground, #0078d4); }

/* ══════════════════════════════════════════════════════════════
   Mini KPI List (vertical stack of small KPIs)
   ══════════════════════════════════════════════════════════════ */

.ops-mini-kpi-list[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ops-mini-kpi[b-qws5ft1yzv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.ops-mini-kpi:last-child[b-qws5ft1yzv] {
    border-bottom: none;
}

.ops-mini-val[b-qws5ft1yzv] {
    font-size: 18px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ops-mini-lbl[b-qws5ft1yzv] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.ops-val-danger[b-qws5ft1yzv] {
    color: var(--BEC-colorErrorForeground1, #bc2f32);
}

.ops-val-warning[b-qws5ft1yzv] {
    color: var(--BEC-colorWarningForeground1, #d83b01);
}

/* ══════════════════════════════════════════════════════════════
   Engineer Performance Bars
   ══════════════════════════════════════════════════════════════ */

.ops-engineer-bars[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-eng-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: 140px 1fr 48px;
    gap: 8px;
    align-items: center;
}

.ops-eng-name[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-eng-track[b-qws5ft1yzv] {
    height: 14px;
    background: var(--BEC-colorNeutralBackground5, #ebebeb);
    border-radius: 7px;
    overflow: hidden;
}

.ops-eng-fill[b-qws5ft1yzv] {
    height: 100%;
    width: var(--bar-width, 0%);
    border-radius: 7px;
    transition: width var(--BEC-durationSlower, 400ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

/* Reuse ITSupportFormatHelper utilization classes */
[b-qws5ft1yzv] .BEC-Utilization-Fill--success { background: var(--BEC-colorSuccessForeground1, #107c10); }
[b-qws5ft1yzv] .BEC-Utilization-Fill--warning { background: var(--BEC-colorWarningForeground1, #d83b01); }
[b-qws5ft1yzv] .BEC-Utilization-Fill--danger  { background: var(--BEC-colorErrorForeground1, #bc2f32); }

.ops-eng-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   Rank Lists (Top 5 / Bottom 5)
   ══════════════════════════════════════════════════════════════ */

.ops-rank-list[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ops-rank-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    transition: background var(--BEC-durationFaster, 100ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.ops-rank-row:hover[b-qws5ft1yzv] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.ops-rank-num[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 700;
    color: var(--BEC-colorBrandBackground, #0078d4);
    text-align: center;
}

.ops-rank-name[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-rank-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ══════════════════════════════════════════════════════════════
   Peak Analysis Heatmap
   ══════════════════════════════════════════════════════════════ */

.ops-heatmap-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 4px;
}

.ops-heatmap-row--days[b-qws5ft1yzv] {
    grid-template-columns: repeat(7, 1fr);
}

.ops-heat-cell[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    /* Heatmap tint: uses --ops-brand-rgb (defined on .ops-root) for theme alignment.
       CSS cannot decompose a custom-property hex into RGB channels, so the component
       defines a local --ops-brand-rgb token kept in sync with --BEC-colorBrandBackground. */
    background: rgba(var(--ops-brand-rgb, 0, 120, 212), var(--heat-opacity, 0));
    transition: background var(--BEC-durationNormal, 200ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-height: 48px;
}

.ops-heat-cell--day[b-qws5ft1yzv] {
    min-height: 56px;
}

.ops-heat-label[b-qws5ft1yzv] {
    font-size: 9px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.ops-heat-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ══════════════════════════════════════════════════════════════
   Syncfusion Chart Overrides (scoped via ::deep)
   ══════════════════════════════════════════════════════════════ */

[b-qws5ft1yzv] .e-chart {
    background: transparent;
    font-family: inherit;
}

[b-qws5ft1yzv] .e-chart .e-chart-title {
    font-size: 12px;
    font-weight: 600;
    fill: var(--BEC-colorNeutralForeground1, #242424);
}

[b-qws5ft1yzv] .e-grid .e-headercell {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

[b-qws5ft1yzv] .e-grid .e-rowcell {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet Landscape: ≤ 1024px ── */
@media (max-width: 1024px) {
    .ops-row--4col[b-qws5ft1yzv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ops-row--3col[b-qws5ft1yzv] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ops-row--2col stays 2 columns */

    .ops-dashboard[b-qws5ft1yzv] {
        padding: 12px 12px 20px;
    }

    .ops-hero-card[b-qws5ft1yzv] {
        padding: 12px;
        min-height: 64px;
        min-width: 100px;
    }

    .ops-hero-val[b-qws5ft1yzv] {
        font-size: 20px;
    }

    .ops-section-body[b-qws5ft1yzv] {
        padding: 12px;
    }

    /* Charts: reduce height slightly */
    [b-qws5ft1yzv] .e-chart {
        max-height: 260px;
    }

    .ops-eng-row[b-qws5ft1yzv] {
        grid-template-columns: 120px 1fr 44px;
    }

    .ops-bar-row[b-qws5ft1yzv] {
        grid-template-columns: 64px 1fr 36px;
    }
}

/* ── Tablet Portrait: ≤ 768px ── */
@media (max-width: 768px) {
    .ops-row--4col[b-qws5ft1yzv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ops-row--3col[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
    }

    .ops-row--2col[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
    }

    .ops-hero-section[b-qws5ft1yzv] {
        flex-direction: column;
    }

    .ops-hero-strip[b-qws5ft1yzv] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .ops-hero-card[b-qws5ft1yzv] {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        padding: 10px;
        min-height: 56px;
    }

    .ops-hero-val[b-qws5ft1yzv] {
        font-size: 18px;
    }

    .ops-hero-lbl[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-dashboard[b-qws5ft1yzv] {
        padding: 8px 8px 16px;
        gap: 6px;
    }

    .ops-section[b-qws5ft1yzv] {
        margin-bottom: 16px;
    }

    .ops-section-body[b-qws5ft1yzv] {
        padding: 8px;
        gap: 12px;
    }

    .ops-section-header[b-qws5ft1yzv] {
        padding: 12px 8px;
    }

    .ops-metric-card[b-qws5ft1yzv] {
        padding: 12px;
        min-height: 64px;
    }

    .ops-metric-val[b-qws5ft1yzv] {
        font-size: 18px;
    }

    .ops-metric-lbl[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Charts: reduce height further */
    [b-qws5ft1yzv] .e-chart {
        max-height: 220px;
    }

    /* Heatmap: horizontal scroll if overflow */
    .ops-heatmap-row[b-qws5ft1yzv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .ops-heat-cell[b-qws5ft1yzv] {
        min-width: 40px;
        padding: 6px 3px;
    }

    .ops-eng-row[b-qws5ft1yzv] {
        grid-template-columns: 100px 1fr 40px;
    }

    .ops-bar-row[b-qws5ft1yzv] {
        grid-template-columns: 56px 1fr 32px;
    }

    .ops-bar-label[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-panel[b-qws5ft1yzv] {
        padding: 12px;
    }

    .ops-panel--chart[b-qws5ft1yzv] {
        padding: 12px 6px 6px;
    }

    .ops-rank-row[b-qws5ft1yzv] {
        padding: 6px;
    }

    .ops-rank-name[b-qws5ft1yzv] {
        font-size: 11px;
    }

    .ops-rank-val[b-qws5ft1yzv] {
        font-size: 11px;
    }

    /* Grid tables: horizontal scroll */
    [b-qws5ft1yzv] .e-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Mobile: ≤ 480px ── */
@media (max-width: 480px) {
    .ops-root[b-qws5ft1yzv] {
        overflow-x: hidden;
    }

    .ops-row--4col[b-qws5ft1yzv],
    .ops-row--3col[b-qws5ft1yzv],
    .ops-row--2col[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
    }

    .ops-dashboard[b-qws5ft1yzv] {
        padding: 4px 4px 12px;
        gap: 4px;
    }

    .ops-hero-section[b-qws5ft1yzv] {
        flex-direction: column;
    }

    .ops-hero-strip[b-qws5ft1yzv] {
        flex-direction: column;
        gap: 4px;
    }

    .ops-hero-card[b-qws5ft1yzv] {
        flex: 1 1 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 12px;
        min-height: auto;
    }

    .ops-hero-val[b-qws5ft1yzv] {
        font-size: 18px;
    }

    .ops-hero-lbl[b-qws5ft1yzv] {
        font-size: 10px;
        margin-top: 0;
        margin-left: 8px;
    }

    .ops-section[b-qws5ft1yzv] {
        margin-bottom: 8px;
    }

    .ops-section-header[b-qws5ft1yzv] {
        padding: 8px;
    }

    .ops-section-title[b-qws5ft1yzv] {
        font-size: 13px;
    }

    .ops-section-body[b-qws5ft1yzv] {
        padding: 4px;
        gap: 8px;
    }

    .ops-metric-card[b-qws5ft1yzv] {
        padding: 10px;
        min-height: auto;
    }

    .ops-metric-card--inline[b-qws5ft1yzv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ops-metric-val[b-qws5ft1yzv] {
        font-size: 16px;
    }

    /* Charts: minimal height */
    [b-qws5ft1yzv] .e-chart {
        max-height: 180px;
    }

    .ops-panel[b-qws5ft1yzv] {
        padding: 8px;
    }

    .ops-panel--chart[b-qws5ft1yzv] {
        padding: 8px 4px 4px;
    }

    .ops-panel-title[b-qws5ft1yzv] {
        font-size: 12px;
        margin: 0 0 8px;
        padding-bottom: 4px;
    }

    /* Heatmap: horizontal scroll */
    .ops-heatmap-row[b-qws5ft1yzv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ops-heat-cell[b-qws5ft1yzv] {
        min-width: 36px;
        padding: 4px 2px;
        min-height: 40px;
    }

    .ops-heat-cell--day[b-qws5ft1yzv] {
        min-height: 44px;
    }

    /* Bar chart: tighter layout */
    .ops-bar-row[b-qws5ft1yzv] {
        grid-template-columns: 48px 1fr 28px;
        gap: 4px;
    }

    .ops-bar-label[b-qws5ft1yzv] {
        font-size: 9px;
    }

    .ops-bar-val[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Engineer bars: tighter */
    .ops-eng-row[b-qws5ft1yzv] {
        grid-template-columns: 80px 1fr 36px;
        gap: 4px;
    }

    .ops-eng-name[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-eng-val[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Rank list */
    .ops-rank-row[b-qws5ft1yzv] {
        grid-template-columns: 24px 1fr auto;
        padding: 4px;
        gap: 4px;
    }

    .ops-rank-name[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-rank-val[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Grid tables: horizontal scroll */
    [b-qws5ft1yzv] .e-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ops-loading[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
    }

    .ops-empty[b-qws5ft1yzv] {
        padding: 32px 16px;
    }

    .ops-mini-kpi[b-qws5ft1yzv] {
        padding: 6px 0;
    }

    .ops-mini-val[b-qws5ft1yzv] {
        font-size: 16px;
    }

    .ops-mini-lbl[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-period-val[b-qws5ft1yzv] {
        font-size: 14px;
    }
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TeamManagementPanel.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   TeamManagementPanel.razor.css - Category Team Management Side Panel
   BEC Design System Compliant — sp-* shared classes + scoped overrides
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Panel Override ── */
.team-panel[b-5n229srwnv] {
    min-width: 0;
}

/* ── Summary Strip ── */
.team-summary-strip[b-5n229srwnv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.team-summary-card[b-5n229srwnv] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.team-summary-value[b-5n229srwnv] {
    font-size: 24px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.2;
}

.team-summary-value--accent[b-5n229srwnv] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.team-summary-label[b-5n229srwnv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── Section Header ── */
.team-section-header[b-5n229srwnv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.team-section-title[b-5n229srwnv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Grid Wrapper ── */
.team-grid-wrapper[b-5n229srwnv] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

[b-5n229srwnv] .team-grid-wrapper .e-grid {
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7) !important;
    border-radius: 8px;
}

[b-5n229srwnv] .team-grid-wrapper .e-grid .e-gridheader {
    background-color: var(--BEC-colorNeutralBackground2, #fafafa) !important;
}

[b-5n229srwnv] .team-grid-wrapper .e-grid .e-headercell {
    background-color: var(--BEC-colorNeutralBackground2, #fafafa) !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Engineer Cell ── */
.team-engineer-cell[b-5n229srwnv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.team-engineer-name[b-5n229srwnv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.3;
}

.team-engineer-email[b-5n229srwnv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    line-height: 1.2;
}

.team-engineer--at-capacity[b-5n229srwnv] {
    opacity: 0.6;
}

/* ── Icon Buttons (in grid cells) ── */
.team-icon-btn[b-5n229srwnv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #616161);
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    position: relative;
}

.team-icon-btn[b-5n229srwnv]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.team-icon-btn:hover[b-5n229srwnv] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke2, #c7c7c7);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.team-icon-btn:disabled[b-5n229srwnv] {
    opacity: 0.4;
    cursor: not-allowed;
}

.team-icon-btn--active[b-5n229srwnv] {
    color: var(--BEC-colorWarningForeground1, #9a6700);
}

.team-icon-btn--active:hover[b-5n229srwnv] {
    color: var(--BEC-colorWarningForeground1, #9a6700);
}

.team-action-btns[b-5n229srwnv] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* ── Section Header Actions ── */
.team-section-actions[b-5n229srwnv] {
    display: flex;
    gap: 8px;
}

/* ── Add Engineer Inline Bar ── */
.team-add-bar[b-5n229srwnv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    margin-bottom: 16px;
}

.team-add-field[b-5n229srwnv] {
    flex: 1;
    min-width: 0;
}

[b-5n229srwnv] .team-add-field .e-outline .e-input-group {
    height: 36px;
}

/* ── Bulk Assign Bar ── */
.team-bulk-bar[b-5n229srwnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    margin-bottom: 16px;
}

.team-bulk-field[b-5n229srwnv] {
    width: 100%;
}

[b-5n229srwnv] .team-bulk-field .e-outline .e-input-group {
    min-height: 36px;
}

.team-bulk-actions[b-5n229srwnv] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Empty State Icon ── */
.team-empty-icon[b-5n229srwnv] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-bottom: 8px;
}

/* .skeleton + @keyframes shimmer — SSOT: css/modules/it-support-grid.css */

.skeleton-card[b-5n229srwnv] {
    border: none;
}

.skeleton-value[b-5n229srwnv] {
    width: 48px;
    height: 24px;
}

.skeleton-label[b-5n229srwnv] {
    width: 72px;
    height: 12px;
    margin-top: 4px;
}

.skeleton-rows[b-5n229srwnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.skeleton-row[b-5n229srwnv] {
    width: 100%;
    height: 48px;
}

/* @keyframes + prefers-reduced-motion — SSOT: css/modules/it-support-grid.css */

/* ── Responsive: Full overlay on smaller screens ── */
@media (max-width: 1023px) {
    .team-summary-strip[b-5n229srwnv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .team-summary-value[b-5n229srwnv] {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .team-summary-strip[b-5n229srwnv] {
        grid-template-columns: 1fr;
    }

    .team-add-bar[b-5n229srwnv] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Engineer Picker Dropdown Item Template ── */
[b-5n229srwnv] .engineer-picker-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    line-height: 1.3;
}

[b-5n229srwnv] .engineer-picker-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-5n229srwnv] .engineer-picker-detail {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Focus Visible (E14: WCAG 2.1 AA) ── */
.team-icon-btn:focus-visible[b-5n229srwnv] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-5n229srwnv] {
    display: contents;
}

/* ── Responsive: Sidebar Width ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-5n229srwnv]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .team-section-header[b-5n229srwnv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .team-bulk-bar[b-5n229srwnv] {
        padding: 8px 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-5n229srwnv]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TicketDetailWizard.razor.rz.scp.css */
/* ============================================================================
   Ticket Detail Wizard - Aligned to BEC Design System
   ============================================================================
   Pattern: [UID: SIDE_PANEL / WIZARD_SIDE] + [UID: TIMELINE]
   ============================================================================ */

/* ── Panel Override ── */
.its-wizard[b-jox42r3r0k] {
    font-size: 13px;
    border-left: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

/* ── Header ── */
.its-header-left[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.its-header-right[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.its-ticket-id[b-jox42r3r0k] {
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ── Content Area ── */
.its-wizard[b-jox42r3r0k]  .sp-content {
    padding: 24px;
}

/* ── Loading / Empty States ── */
.its-loading[b-jox42r3r0k],
.its-empty[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 13px;
}

/* ── Subject Row ── */
.its-subject-row[b-jox42r3r0k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.its-subject[b-jox42r3r0k] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.3;
    flex: 1;
}

/* ── Meta Row ── */
.its-meta-row[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
}

.its-meta-item[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.its-meta-ai[b-jox42r3r0k] {
    color: var(--BEC-colorPalettePurpleForeground1, #7c3aed);
    font-weight: 600;
}

/* ── Sections ── */
.its-section[b-jox42r3r0k] {
    margin-bottom: 16px;
}

.its-section-title[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.its-section-title .its-count[b-jox42r3r0k] {
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.its-description[b-jox42r3r0k] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    max-height: 120px;
    overflow-y: auto;
}

/* ── Beneficiary Label ── */
.its-beneficiary-label[b-jox42r3r0k] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Flags Row ── */
.its-flags-row[b-jox42r3r0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.its-flag[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.its-flag-presence[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteYellowBackground1, #fffef5);
    color: var(--BEC-colorWarningForeground1, #d97706);
}

.its-flag-approval[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteBlueLightBackground1, #deecf9);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

/* ── AI Summary ── */
.its-ai-section[b-jox42r3r0k] {
    margin-bottom: 12px;
}

.its-ai-summary[b-jox42r3r0k] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: linear-gradient(135deg, var(--BEC-colorPalettePurpleBackground1, #f0eaff) 0%, var(--BEC-colorBrandBackground2, #e8ebf9) 100%);
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    border-left: 3px solid var(--BEC-colorPalettePurpleForeground1, #7c3aed);
}

/* ── SLA Bar ── */
.its-sla-bar[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 12px;
}

.its-sla-bar.bec-sla-ontrack[b-jox42r3r0k] {
    background: var(--BEC-colorSuccessBackground, #dff6dd);
    color: var(--BEC-colorSuccessForeground1, #107c10);
}

.its-sla-bar.bec-sla-atrisk[b-jox42r3r0k] {
    background: var(--BEC-colorWarningBackground, #fff4ce);
    color: var(--BEC-colorWarningForeground1, #795548);
}

.its-sla-bar.bec-sla-breached[b-jox42r3r0k] {
    background: var(--BEC-colorErrorBackground, #fde7e9);
    color: var(--BEC-colorErrorForeground1, #a80000);
}

.its-sla-bar.bec-sla-none[b-jox42r3r0k] {
    background: var(--BEC-colorInfoBackground, #f3f2f1);
    color: var(--BEC-colorInfoForeground1, #323130);
}

.its-sla-badge[b-jox42r3r0k] {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: auto;
}

.bec-sla-ontrack .its-sla-badge[b-jox42r3r0k] {
    background: var(--BEC-colorSuccessForeground1, #107c10);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

.bec-sla-atrisk .its-sla-badge[b-jox42r3r0k] {
    background: var(--BEC-colorWarningForeground1, #795548);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

.bec-sla-breached .its-sla-badge[b-jox42r3r0k] {
    background: var(--BEC-colorErrorForeground1, #a80000);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

/* ── Resolution ── */
.its-resolution-section[b-jox42r3r0k] {
    margin-bottom: 12px;
}

.its-resolution[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    padding: 12px;
    border-left: 3px solid var(--BEC-colorSuccessForeground1, #107c10);
}

.its-resolution-notes[b-jox42r3r0k] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-resolution-meta[b-jox42r3r0k] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Conversation Timeline (matches [UID: TIMELINE]) ── */
.its-conversation-section[b-jox42r3r0k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.its-conversation-timeline[b-jox42r3r0k] {
    position: relative;
    padding-left: 28px;
    margin-left: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.its-conversation-timeline[b-jox42r3r0k]::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralBorder1, #e1dfdd);
    pointer-events: none;
}

.its-no-messages[b-jox42r3r0k] {
    text-align: center;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 12px;
    margin-left: -28px;
}

/* ── Timeline Item ── */
.its-tl-item[b-jox42r3r0k] {
    position: relative;
    margin-bottom: 20px;
}

.its-tl-item:last-child[b-jox42r3r0k] {
    margin-bottom: 0;
}

/* ── Timeline Marker (matches design system .timeline-marker) ── */
.its-tl-marker[b-jox42r3r0k] {
    position: absolute;
    left: -22px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    z-index: 1;
}

.its-tl-marker-staff[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
}

.its-tl-marker-user[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
}

.its-tl-marker-system[b-jox42r3r0k] {
    border-color: var(--BEC-colorNeutralForeground3, #616161);
}

.its-tl-marker-ai[b-jox42r3r0k] {
    border-color: var(--BEC-colorPalettePurpleForeground1, #7c3aed);
    background: var(--BEC-colorPalettePurpleBackground1, #f0eaff);
}

/* ── Timeline Content (matches design system layout) ── */
.its-tl-content[b-jox42r3r0k] {
    padding-left: 4px;
}

.its-tl-title[b-jox42r3r0k] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.4;
}

.its-tl-subtitle[b-jox42r3r0k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin-top: 2px;
}

.its-tl-body[b-jox42r3r0k] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    padding: 8px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
}
/* ── Reply Box ── */
.its-reply-box[b-jox42r3r0k] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
}

.its-reply-input-group[b-jox42r3r0k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.its-reply-box[b-jox42r3r0k]  .its-reply-input {
    flex: 1;
}

.its-reply-box[b-jox42r3r0k]  .its-reply-input textarea {
    min-height: 36px;
    max-height: 80px;
    font-size: 13px;
    padding: 8px 12px;
}

/* ── Override Syncfusion for Compact ── */
.its-wizard[b-jox42r3r0k]  .e-btn.e-small {
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
}

/* ── Attachments ── */
.its-attachments-list[b-jox42r3r0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.its-attachment-row[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.its-attachment-delete[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-attachment-delete:hover[b-jox42r3r0k] {
    opacity: 1;
    background: var(--BEC-colorErrorBackground, #fde7e9);
}

.its-attachment-delete:disabled[b-jox42r3r0k] {
    opacity: 0.3;
    cursor: not-allowed;
}

.its-attachment-item[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-decoration: none;
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    max-width: 280px;
}

.its-attachment-item:hover[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    background: rgba(43, 87, 154, 0.04);
}

/* .its-file-ext — SSOT: css/modules/it-support-grid.css */

.its-attachment-name[b-jox42r3r0k] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.its-attachment-size[b-jox42r3r0k] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 11px;
    white-space: nowrap;
}

/* ── Progress Ring & Icon Sizes ── */
/* .its-progress-xs — SSOT: css/modules/it-support-grid.css */
/* .its-icon-sm     — SSOT: css/modules/it-support-grid.css */

[b-jox42r3r0k] .its-progress-md {
    width: 24px;
    height: 24px;
}

/* ── Loading Button — constrain spinner inside Syncfusion buttons ── */
[b-jox42r3r0k] .e-btn fluent-progress-ring {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-jox42r3r0k] .e-btn.e-small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Reassign Panel ── */
.its-reassign-panel[b-jox42r3r0k] {
    padding: 8px 16px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.its-reassign-row[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-jox42r3r0k] .its-reassign-dropdown {
    flex: 1;
    min-width: 0;
}

[b-jox42r3r0k] .its-btn-reassign {
    border-color: var(--BEC-colorNeutralStroke1, #d1d1d1);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Edit Mode ── */
.its-edit-form[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.its-edit-group[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-edit-label[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.its-edit-row[b-jox42r3r0k] {
    display: flex;
    gap: 12px;
}

.its-edit-half[b-jox42r3r0k] {
    flex: 1;
    min-width: 0;
}

.its-edit-check[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    cursor: pointer;
}

.its-edit-error[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--BEC-colorErrorBackground, #fde7e9);
    border: 1px solid var(--BEC-colorErrorBorder1, #f1bbbc);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 13px;
    color: var(--BEC-colorErrorForeground1, #a80000);
}

.its-action-error[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--BEC-colorErrorBackground, #fde7e9);
    border: 1px solid var(--BEC-colorErrorBorder1, #f1bbbc);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 13px;
    color: var(--BEC-colorErrorForeground1, #a80000);
    animation: its-action-error-fadein-b-jox42r3r0k var(--BEC-durationGentle, 250ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.its-action-error span[b-jox42r3r0k] {
    flex: 1;
}

.its-action-error-dismiss[b-jox42r3r0k] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: var(--BEC-colorErrorForeground1, #a80000);
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    opacity: 0.7;
    transition: opacity var(--BEC-durationFast, 150ms);
}

.its-action-error-dismiss:hover[b-jox42r3r0k] {
    opacity: 1;
}

@keyframes its-action-error-fadein-b-jox42r3r0k {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Feedback Section ── */
.its-feedback-section[b-jox42r3r0k] {
    margin-bottom: 12px;
}

.its-feedback-display[b-jox42r3r0k] {
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
}

.its-feedback-stars[b-jox42r3r0k] {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}

.its-star[b-jox42r3r0k] {
    font-size: 18px;
    color: var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.its-star-filled[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

.its-feedback-comment[b-jox42r3r0k] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 4px 0;
    line-height: 1.4;
}

.its-feedback-date[b-jox42r3r0k] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.its-feedback-form[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-feedback-stars-input[b-jox42r3r0k] {
    gap: 4px;
}

.its-star-btn[b-jox42r3r0k] {
    font-size: 24px;
    background: none;
    border: none;
    color: var(--BEC-colorNeutralStroke2, #c7c7c7);
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    transition: color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), transform var(--BEC-durationFaster, 100ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-star-btn:hover[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    transform: scale(1.15);
}

.its-star-btn.its-star-filled[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

[b-jox42r3r0k] .its-feedback-input textarea {
    min-height: 36px;
    max-height: 60px;
    font-size: 13px;
}

.its-feedback-none[b-jox42r3r0k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-style: italic;
}

/* ── AI Email Conversations ── */
.its-ai-conversations-section[b-jox42r3r0k] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    padding-top: 16px;
}

.its-conv-list[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-conv-card[b-jox42r3r0k] {
    padding: 12px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-conv-card:hover[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
    box-shadow: var(--BEC-shadow4);
}

.its-conv-card-top[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.its-conv-sender[b-jox42r3r0k] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-conv-status[b-jox42r3r0k] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: capitalize;
}

.its-conv-card-subject[b-jox42r3r0k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.its-conv-card-meta[b-jox42r3r0k] {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.its-conv-safety-badge[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteRedBackground1, #fdf3f4);
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Detail view */
.its-conv-detail[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.its-conv-detail-header[b-jox42r3r0k] {
    display: flex;
    align-items: center;
}

.its-conv-back-btn[b-jox42r3r0k] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.its-conv-back-btn:hover[b-jox42r3r0k] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.its-conv-detail-body[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-conv-detail-row[b-jox42r3r0k] {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.its-conv-label[b-jox42r3r0k] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    min-width: 90px;
    flex-shrink: 0;
}

.its-conv-safety-alert[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.its-conv-email-body[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.its-conv-pre[b-jox42r3r0k] {
    font-size: 12px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 4px;
    padding: 8px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.its-conv-loading[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    padding: 8px 0;
}

/* ── Inline Action Forms (Resolve / Reopen) ── */
.its-action-form[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    animation: its-action-form-slidein-b-jox42r3r0k var(--BEC-durationNormal, 200ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.its-resolve-form[b-jox42r3r0k] {
    border-left: 3px solid var(--BEC-colorSuccessForeground1, #107c10);
}

.its-reopen-form[b-jox42r3r0k] {
    border-left: 3px solid var(--BEC-colorWarningForeground1, #d97706);
}

.its-action-form-label[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[b-jox42r3r0k] .its-action-form-textarea {
    width: 100%;
}

[b-jox42r3r0k] .its-action-form-textarea textarea {
    min-height: 60px;
    max-height: 140px;
    font-size: 13px;
    resize: vertical;
}

.its-action-form-buttons[b-jox42r3r0k] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

@keyframes its-action-form-slidein-b-jox42r3r0k {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Delete Confirmation ── */
.its-footer-spacer[b-jox42r3r0k] {
    flex: 1;
}

.its-delete-confirm-text[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

/* ── Attachment Inline Delete Confirmation ── */
.its-attachment-delete-confirm[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.its-attachment-delete-confirm-text[b-jox42r3r0k] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.its-attachment-confirm-btn[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 28px;
    min-height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-attachment-confirm-btn[b-jox42r3r0k]::before {
    content: '';
    position: absolute;
    inset: -8px;
    min-width: 44px;
    min-height: 44px;
}

.its-attachment-confirm-yes:hover[b-jox42r3r0k] {
    background: var(--BEC-colorErrorBackground, #fde7e9);
}

.its-attachment-confirm-no:hover[b-jox42r3r0k] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.its-attachment-confirm-btn:disabled[b-jox42r3r0k] {
    opacity: 0.3;
    cursor: not-allowed;
}

.its-attachment-confirm-btn:focus-visible[b-jox42r3r0k] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Focus Visible (E14: WCAG 2.1 AA) ── */
.its-star-btn:focus-visible[b-jox42r3r0k],
.its-attachment-delete:focus-visible[b-jox42r3r0k],
.its-conv-back-btn:focus-visible[b-jox42r3r0k] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-jox42r3r0k] {
    display: contents;
}

/* ── Responsive: Sidebar & Detail Layout ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-jox42r3r0k]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .its-subject[b-jox42r3r0k] {
        font-size: 14px;
    }

    .its-meta-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 8px;
    }

    .its-edit-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 12px;
    }

    .its-reassign-row[b-jox42r3r0k] {
        flex-direction: column;
        align-items: stretch;
    }

    .its-conversation-timeline[b-jox42r3r0k] {
        max-height: 240px;
    }

    .its-reply-box[b-jox42r3r0k] {
        flex-direction: column;
        align-items: stretch;
    }

    .its-action-form-buttons[b-jox42r3r0k] {
        flex-direction: column;
        align-items: stretch;
    }

    .its-conv-detail-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 4px;
    }

    .its-conv-label[b-jox42r3r0k] {
        min-width: unset;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-jox42r3r0k]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }

    .its-edit-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Accessibility: screen-reader-only live region ── */
.visually-hidden[b-jox42r3r0k] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TicketPriorityIndicator.razor.rz.scp.css */
/* ============================================================================
   Ticket Priority Indicator Component Styles
   ============================================================================ */

.BEC-Priority-Indicator[b-6m38qi02d5] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS, 4px);
}

.BEC-Priority-Label[b-6m38qi02d5] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightMedium, 500);
}

/* Priority: Critical */
.BEC-Priority-Critical[b-6m38qi02d5] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

/* Priority: High */
.BEC-Priority-High[b-6m38qi02d5] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

/* Priority: Medium */
.BEC-Priority-Medium[b-6m38qi02d5] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

/* Priority: Low */
.BEC-Priority-Low[b-6m38qi02d5] {
    color: var(--BEC-colorNeutralForeground3, #616161);
}

/* Priority: Default */
.BEC-Priority-Default[b-6m38qi02d5] {
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* .its-icon-sm — SSOT: css/modules/it-support-grid.css */
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TicketStatusBadge.razor.rz.scp.css */
/* ============================================================================
   Ticket Status Badge Component Styles
   ============================================================================ */

.bec-status-badge[b-s2t1mh9fhf] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS, 4px);
    padding: var(--BEC-spacingHorizontalXXS, 2px) var(--BEC-spacingHorizontalS, 8px);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightSemibold, 600);
    white-space: nowrap;
    line-height: var(--BEC-lineHeightBase200, 16px);
}

/* Open - New/Fresh */
.bec-status-open[b-s2t1mh9fhf] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
}

/* In Progress - Active Work (teal to distinguish from Open) */
.bec-status-inprogress[b-s2t1mh9fhf] {
    /* No teal token in _primitives.css — using Microsoft Fluent teal */
    color: #038387;
    background: #e0f5f5;
}

/* Pending - Waiting (amber/warning) */
.bec-status-pending[b-s2t1mh9fhf] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    background: var(--BEC-colorPaletteYellowBackground2, #fff8df);
}

/* Resolved - Success */
.bec-status-resolved[b-s2t1mh9fhf] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
    background: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
}

/* Closed - Done/Archived */
.bec-status-closed[b-s2t1mh9fhf] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}

/* Reopened - Attention needed */
.bec-status-reopened[b-s2t1mh9fhf] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    background: var(--BEC-colorPaletteRedBackground1, #fdf3f4);
}

/* Fallback */
.bec-status-unknown[b-s2t1mh9fhf] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}


/* /Components/Pages/MainLayout/ITSupport/UserPortal/UserPortal.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   UserPortal.razor.css - My IT Support Tickets
   BEC Design System Compliant
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page Layout (edge-to-edge, no card box) ── */
.BEC-Layout[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    gap: 0;
    overflow: hidden;
}

/* ── Header Section ── */
.BEC-Header[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    box-shadow: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
    flex-shrink: 0;
}

.BEC-Header-Left[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ── Cross-Navigation Link ── */
.BEC-CrossNav-Link[b-lhitorj6ok] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    text-decoration: none;
    white-space: nowrap;
}

.BEC-CrossNav-Link:hover[b-lhitorj6ok] {
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.BEC-CrossNav-Link:focus-visible[b-lhitorj6ok] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

.BEC-Title[b-lhitorj6ok] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    line-height: 1.4;
}

/* ── Stats Group ── */
.BEC-Stat-Group[b-lhitorj6ok] {
    display: flex;
    gap: 16px;
    margin-left: auto;
}

.BEC-Stat[b-lhitorj6ok] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.BEC-Stat-Value[b-lhitorj6ok] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Stat-Highlight .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Stat--accent .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Stat--warning .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorWarningForeground1, #d97706);
}

.BEC-Stat--critical .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorPalettePurpleForeground1, #7c3aed);
}

.BEC-Stat--danger .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.BEC-Stat--success .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.BEC-Stat-Label[b-lhitorj6ok] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Header Actions ── */
.BEC-Header-Actions[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.its-export-text[b-lhitorj6ok] {
    margin-inline-start: 4px;
}

[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-primary {
    background: var(--BEC-colorBrandBackground, #0078d4);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-primary:hover {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

/* ── Success Toast ── */
.BEC-Success-Toast[b-lhitorj6ok] {
    padding: 0 24px;
    animation: slideDown-b-lhitorj6ok var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

@keyframes slideDown-b-lhitorj6ok {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Attachment Upload Progress ── */
.BEC-Upload-Progress[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-bottom: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    animation: slideDown-b-lhitorj6ok var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.BEC-Upload-Progress-Header[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Upload-Progress-Text[b-lhitorj6ok] {
    font-size: 13px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Upload-Progress-Text strong[b-lhitorj6ok] {
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

[b-lhitorj6ok] .BEC-Upload-Progress .fluent-progress-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--BEC-colorNeutralStroke2, #c7c7c7);
}

[b-lhitorj6ok] .BEC-Upload-Progress fluent-progress-bar {
    --progress-bar-height: 4px;
}

/* ── Grid Container — flush edge-to-edge ── */
.BEC-Grid-Container[b-lhitorj6ok] {
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

/* ── Loading State ── */
.BEC-Loading-State[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 300px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 14px;
}

/* ── Empty State (no bg – sits directly on page background) ── */
.BEC-Empty-State[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 400px;
    padding: 48px 24px;
    text-align: center;
    background: transparent;
}

.BEC-Empty-Icon[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.BEC-Empty-Title[b-lhitorj6ok] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Empty-Text[b-lhitorj6ok] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    max-width: 320px;
    line-height: 1.5;
}

/* ── Grid / Cell / SLA / Badge / Progress styles ──
   SSOT: css/modules/it-support-grid.css (scoped via .bec-its)
   ─────────────────────────────────────────────── */

/* ── Skeleton Cell Sizes (C6: replaces inline style widths) ── */
.BEC-Skeleton-Cell--xs[b-lhitorj6ok] { width: 60px; }
.BEC-Skeleton-Cell--sm[b-lhitorj6ok] { width: 80px; }
.BEC-Skeleton-Cell--md[b-lhitorj6ok] { width: 120px; }
.BEC-Skeleton-Cell--lg[b-lhitorj6ok] { width: 180px; }

/* ── Skeleton Shimmer Loading ── */
.BEC-Skeleton-Grid[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

.BEC-Skeleton-Header[b-lhitorj6ok] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.BEC-Skeleton-Row[b-lhitorj6ok] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

/* .BEC-Skeleton-Cell shimmer + @keyframes shimmer — SSOT: css/modules/it-support-grid.css */
.BEC-Skeleton-Cell[b-lhitorj6ok] {
    height: 16px;
}

/* ── Refresh Button Styling ── */
[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-outline {
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    color: var(--BEC-colorNeutralForeground1, #242424);
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-outline:hover {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke1Hover, #c8c6c4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet: ≤ 1024px ── */
@media (max-width: 1024px) {
    .BEC-Header[b-lhitorj6ok] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Header-Left[b-lhitorj6ok] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Stat-Group[b-lhitorj6ok] {
        margin-left: auto;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
    .BEC-Header[b-lhitorj6ok] {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }

    .BEC-Header-Left[b-lhitorj6ok] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .BEC-Title[b-lhitorj6ok] {
        font-size: 18px;
    }

    .BEC-Stat-Group[b-lhitorj6ok] {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .BEC-Stat[b-lhitorj6ok] {
        font-size: 12px;
    }

    .BEC-Stat-Value[b-lhitorj6ok] {
        font-size: 14px;
    }

    .BEC-Header-Actions[b-lhitorj6ok] {
        width: 100%;
        justify-content: stretch;
    }

    [b-lhitorj6ok] .BEC-Header-Actions .e-btn {
        flex: 1;
    }

    .BEC-Empty-State[b-lhitorj6ok] {
        min-height: 240px;
        padding: 24px 16px;
    }

    .BEC-Empty-Title[b-lhitorj6ok] {
        font-size: 16px;
    }

    .BEC-Empty-Text[b-lhitorj6ok] {
        font-size: 13px;
    }

    .BEC-Skeleton-Header[b-lhitorj6ok],
    .BEC-Skeleton-Row[b-lhitorj6ok] {
        gap: 8px;
        padding: 8px 16px;
    }
}

/* ── Small Phone: ≤ 480px ── */
@media (max-width: 480px) {
    .BEC-Header[b-lhitorj6ok] {
        padding: 8px 16px;
    }

    .BEC-Title[b-lhitorj6ok] {
        font-size: 16px;
    }

    .BEC-Stat-Group[b-lhitorj6ok] {
        display: none;
    }

    [b-lhitorj6ok] .BEC-Header-Actions .e-btn {
        font-size: 13px;
        padding: 8px 8px;
    }
}

/* /Components/Pages/MainLayout/KnowledgeBase.razor.rz.scp.css */
/* Knowledge Base - V1 Standard Docs Design */
/* Local scoped variables (page-specific overrides) */
.kb-page-container[b-qcg2s6m45f] {
    --primary: #0078d4;
    --text-primary: #171717;
    --text-secondary: #505050;
    --bg-body: #ffffff;
    --bg-sidebar: #f3f2f1;
    --border: #e0e0e0;
    --link: #0078d4;
    --header-height: 50px;
}

.kb-page-container[b-qcg2s6m45f] {
    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-primary);
    display: flex;
    height: calc(100vh - 60px);
    /* Adjust for main layout header */
    overflow: hidden;
    background: var(--bg-body);
}

/* Sidebar Navigation */
.kb-sidebar[b-qcg2s6m45f] {
    width: 280px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
}

.kb-search-box[b-qcg2s6m45f] {
    padding: 0 24px;
    margin-bottom: 24px;
}

.kb-search-input[b-qcg2s6m45f] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #8a8886;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

.kb-nav-group-title[b-qcg2s6m45f] {
    padding: 8px 24px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 16px;
    cursor: default;
}

.kb-nav-item[b-qcg2s6m45f] {
    padding: 8px 24px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    border-left: 4px solid transparent;
    display: block;
    text-decoration: none;
    transition: background 0.1s;
}

.kb-nav-item:hover[b-qcg2s6m45f] {
    background: #edebe9;
    color: var(--text-primary);
}

.kb-nav-item.active[b-qcg2s6m45f] {
    border-left-color: var(--primary);
    background: #edebe9;
    color: var(--text-primary);
    font-weight: 600;
}

/* Main Content */
.kb-main-content[b-qcg2s6m45f] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.kb-article-container[b-qcg2s6m45f] {
    flex: 1;
    overflow-y: auto;
    padding: 48px 64px;
    max-width: 900px;
}

.kb-breadcrumb[b-qcg2s6m45f] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.kb-breadcrumb span[b-qcg2s6m45f] {
    margin: 0 8px;
    color: #9E9E9E;
}

.kb-breadcrumb-link[b-qcg2s6m45f] {
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
}

.kb-breadcrumb-link:hover[b-qcg2s6m45f] {
    text-decoration: underline;
}

h1[b-qcg2s6m45f] {
    font-size: 36px;
    margin: 0 0 16px 0;
    font-weight: 600;
    color: #171717;
}

h2[b-qcg2s6m45f] {
    font-size: 24px;
    margin: 32px 0 16px 0;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

h3[b-qcg2s6m45f] {
    font-size: 18px;
    margin: 24px 0 12px 0;
    font-weight: 600;
}

p[b-qcg2s6m45f] {
    line-height: 1.6;
    margin-bottom: 16px;
    font-size: 15px;
}

.kb-meta-info[b-qcg2s6m45f] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    display: flex;
    gap: 16px;
}

.kb-alert-box[b-qcg2s6m45f] {
    background: #f0f6ff;
    border-left: 4px solid var(--primary);
    padding: 16px;
    margin: 24px 0;
    border-radius: 4px;
}

/* Right Rail (On This Page) */
.kb-right-rail[b-qcg2s6m45f] {
    width: 250px;
    padding: 48px 24px;
    border-left: 1px solid var(--border);
    overflow-y: auto;
    font-size: 13px;
    display: none;
    /* Hidden on small screens */
}

@media (min-width: 1200px) {
    .kb-right-rail[b-qcg2s6m45f] {
        display: block;
    }
}

.kb-right-rail h4[b-qcg2s6m45f] {
    margin: 0 0 12px 0;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.kb-toc-link[b-qcg2s6m45f] {
    display: block;
    padding: 4px 0;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 12px;
    margin-left: -14px;
    cursor: pointer;
}

.kb-toc-link:hover[b-qcg2s6m45f] {
    color: var(--primary);
}

.kb-toc-link.active[b-qcg2s6m45f] {
    border-left-color: var(--primary);
    color: var(--text-primary);
    font-weight: 600;
}

/* Mobile Overlay */
.kb-sidebar-overlay[b-qcg2s6m45f] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}
/* /Components/Pages/MainLayout/Leave_Report/Master/LeaveReport.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-w0khitxkyg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-w0khitxkyg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-w0khitxkyg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-w0khitxkyg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-w0khitxkyg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-w0khitxkyg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-w0khitxkyg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-w0khitxkyg] {
    transform: scale(0.98);
}

.page-subtitle[b-w0khitxkyg] {
    display: none;
}

.header-right[b-w0khitxkyg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-w0khitxkyg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-w0khitxkyg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-w0khitxkyg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-w0khitxkyg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-w0khitxkyg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-w0khitxkyg] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-w0khitxkyg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-w0khitxkyg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* Make grid fill remaining page content */
.erp-page-content[b-w0khitxkyg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden; /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-w0khitxkyg] .e-grid {
    /*flex: 1;*/               /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-w0khitxkyg] .e-grid .e-row {
    height: 28px !important;
}

[b-w0khitxkyg] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-w0khitxkyg] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-w0khitxkyg] .e-grid .e-gridcontent {
/*    flex: 1;*/
    overflow-y: auto;
}



/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-w0khitxkyg] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-w0khitxkyg] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-w0khitxkyg] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-w0khitxkyg] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-w0khitxkyg] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-w0khitxkyg] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-w0khitxkyg] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-w0khitxkyg] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-w0khitxkyg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* /Components/Pages/MainLayout/Notifications/Notifications.razor.rz.scp.css */
/* ========================================
   FLUENT FEED NOTIFICATIONS STYLES
   ======================================== */

/* Inline status surfaces — replaces toast-based UX. */
.notif-heartbeat[b-ka9oz1fjjj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--fluent-text-secondary, #666);
    margin-left: 12px;
    opacity: 0.85;
}
.notif-heartbeat-icon[b-ka9oz1fjjj] {
    font-size: 14px !important;
}
.notif-heartbeat-pulse .notif-heartbeat-icon[b-ka9oz1fjjj] {
    animation: notif-heartbeat-spin-b-ka9oz1fjjj 1.2s linear infinite;
    color: var(--fluent-primary, #1e3c72);
}
@keyframes notif-heartbeat-spin-b-ka9oz1fjjj {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.notif-inline-banner[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 10px 16px 0;
    border-radius: 6px;
    font-size: 13.5px;
    border: 1px solid transparent;
    animation: notif-banner-in-b-ka9oz1fjjj 0.18s ease-out;
}
@keyframes notif-banner-in-b-ka9oz1fjjj {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.notif-inline-banner .material-icons[b-ka9oz1fjjj] { font-size: 18px; }
.notif-inline-banner-error[b-ka9oz1fjjj] {
    background: #fff4f4;
    color: #b3261e;
    border-color: #f5c2c0;
}
.notif-inline-banner-success[b-ka9oz1fjjj] {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.notif-inline-banner-info[b-ka9oz1fjjj] {
    background: #f0f7ff;
    color: #1e40af;
    border-color: #c7dbff;
}
.notif-banner-dismiss[b-ka9oz1fjjj] {
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    display: inline-flex;
    padding: 2px;
    border-radius: 4px;
}
.notif-banner-dismiss:hover[b-ka9oz1fjjj] { opacity: 1; background: rgba(0,0,0,0.06); }
.notif-banner-dismiss .material-icons[b-ka9oz1fjjj] { font-size: 16px; }

/* Local scoped variables — moved from :root to component scope */
.fluent-notifications-hub[b-ka9oz1fjjj] {
    --fluent-primary: #1e3c72;
    --fluent-bg-body: #f8f8f8;
    --fluent-bg-white: #ffffff;
    --fluent-border: #e0e0e0;
    --fluent-text-primary: #242424;
    --fluent-text-secondary: #666666;
    --fluent-hover-bg: #f3f2f1;
    --fluent-unread-bg: #eff6fc;
}

.fluent-notifications-hub[b-ka9oz1fjjj] {
    font-family: 'Segoe UI', sans-serif;
    background: var(--fluent-bg-body);
    height: 100%;
    min-height: calc(100vh - 60px);
    /* Adjust for main layout header */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.fluent-header[b-ka9oz1fjjj] {
    background: var(--fluent-bg-white);
    padding: 16px 32px;
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.header-title[b-ka9oz1fjjj] {
    font-size: 20px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-actions[b-ka9oz1fjjj] {
    display: flex;
    gap: 12px;
}

.search-box[b-ka9oz1fjjj] {
    background: #f3f3f3;
    border-radius: 4px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    width: 300px;
    border: 1px solid transparent;
}

    .search-box:focus-within[b-ka9oz1fjjj] {
        background: white;
        border-color: var(--fluent-primary);
    }

    .search-box input[b-ka9oz1fjjj] {
        border: none;
        background: transparent;
        width: 100%;
        outline: none;
        font-size: 14px;
        color: var(--fluent-text-primary);
    }

.action-btn[b-ka9oz1fjjj] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fluent-text-secondary);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .action-btn:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
        color: var(--fluent-text-primary);
    }

/* Main Layout */
.content-container[b-ka9oz1fjjj] {
    display: flex;
    flex: 1;
    overflow: hidden;
    width: 98%;
    /* Almost full width as requested */
    margin: 16px auto;
    background: var(--fluent-bg-white);
    border: 1px solid var(--fluent-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabs Sidebar */
.tabs-sidebar[b-ka9oz1fjjj] {
    width: 260px;
    background: #faf9f8;
    border-right: 1px solid var(--fluent-border);
    padding: 20px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.tab-item[b-ka9oz1fjjj] {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    color: var(--fluent-text-secondary);
    border-left: 3px solid transparent;
    transition: all 0.1s;
}

    .tab-item:hover[b-ka9oz1fjjj] {
        background: #f0f0f0;
    }

    .tab-item.active[b-ka9oz1fjjj] {
        background: #fff;
        font-weight: 600;
        color: var(--fluent-text-primary);
        border-left-color: var(--fluent-primary);
    }

.counter[b-ka9oz1fjjj] {
    background: #e1dfdd;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    min-width: 20px;
    text-align: center;
}

/* Feed */
.feed-content[b-ka9oz1fjjj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feed-list[b-ka9oz1fjjj] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ========================================
   MODERN CARD GRID LAYOUT
   ======================================== */

.grid-container[b-ka9oz1fjjj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    width: 100%;
}

.card[b-ka9oz1fjjj] {
    background: var(--fluent-bg-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 24px;
    transition: transform 0.2s, box-shadow 0.2s;
    border-top: 4px solid transparent;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .card:hover[b-ka9oz1fjjj] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .card.unread[b-ka9oz1fjjj] {
        background: var(--fluent-unread-bg);
    }

    .card.type-messages[b-ka9oz1fjjj] {
        border-top-color: #0078d4;
    }

    .card.type-approvals[b-ka9oz1fjjj] {
        border-top-color: #107c10;
    }

    .card.type-system[b-ka9oz1fjjj] {
        border-top-color: #8764b8;
    }

.card-header[b-ka9oz1fjjj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.status-badge[b-ka9oz1fjjj] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.status-open[b-ka9oz1fjjj] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-resolved[b-ka9oz1fjjj] {
    background: #e8f5e9;
    color: #2e7d32;
}

.time-text[b-ka9oz1fjjj] {
    font-size: 12px;
    color: #999;
}

.card-title[b-ka9oz1fjjj] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--fluent-primary);
}

.ticket-number[b-ka9oz1fjjj] {
    font-family: monospace;
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    color: #555;
    font-size: 13px;
    display: inline-block;
    margin-top: 4px;
}

.card-body[b-ka9oz1fjjj] {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1;
}

.card-footer[b-ka9oz1fjjj] {
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sender-avatar[b-ka9oz1fjjj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fluent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sender-details[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sender-name[b-ka9oz1fjjj] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.sender-role[b-ka9oz1fjjj] {
    font-size: 11px;
    color: #888;
}

.action-btn-card[b-ka9oz1fjjj] {
    margin-left: auto;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}

    .action-btn-card:hover[b-ka9oz1fjjj] {
        background: var(--fluent-primary);
        color: white;
        border-color: var(--fluent-primary);
    }

.notification-item[b-ka9oz1fjjj] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    gap: 16px;
    cursor: pointer;
    transition: background 0.1s;
    background: white;
}

    .notification-item:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
    }

    .notification-item.unread[b-ka9oz1fjjj] {
        background: var(--fluent-unread-bg);
    }

        .notification-item.unread:hover[b-ka9oz1fjjj] {
            background: #e5eff8;
        }

.avatar-circle[b-ka9oz1fjjj] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 16px;
}

.avatar-high[b-ka9oz1fjjj] {
    background: #fde7e9;
    color: #a80000;
}

.avatar-normal[b-ka9oz1fjjj] {
    background: #e1dfdd;
    color: #605e5c;
}

.avatar-icon[b-ka9oz1fjjj] {
    font-family: 'Material Icons';
    font-size: 20px;
}

.content-col[b-ka9oz1fjjj] {
    flex: 1;
    min-width: 0;
}

.item-header[b-ka9oz1fjjj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    align-items: baseline;
}

.item-title[b-ka9oz1fjjj] {
    font-weight: 600;
    font-size: 14px;
    color: var(--fluent-text-primary);
}

.item-time[b-ka9oz1fjjj] {
    font-size: 12px;
    color: var(--fluent-text-secondary);
}

.item-preview[b-ka9oz1fjjj] {
    color: var(--fluent-text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-footer[b-ka9oz1fjjj] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.badge[b-ka9oz1fjjj] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    background: #f3f3f3;
    color: #666;
    border: 1px solid #edebe9;
}

.item-actions[b-ka9oz1fjjj] {
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.notification-item:hover .item-actions[b-ka9oz1fjjj] {
    opacity: 1;
}

/* Pagination Footer */
.feed-pagination[b-ka9oz1fjjj] {
    padding: 12px 24px;
    border-top: 1px solid var(--fluent-border);
    background: #faf9f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-controls[b-ka9oz1fjjj] {
    display: flex;
    gap: 8px;
}

.page-btn[b-ka9oz1fjjj] {
    border: 1px solid var(--fluent-border);
    background: white;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

    .page-btn:hover:not(:disabled)[b-ka9oz1fjjj] {
        background: #f3f2f1;
    }

    .page-btn:disabled[b-ka9oz1fjjj] {
        opacity: 0.5;
        cursor: default;
    }

    .page-btn.active[b-ka9oz1fjjj] {
        background: var(--fluent-primary);
        color: white;
        border-color: var(--fluent-primary);
    }

/* Empty State */
.empty-view[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--fluent-text-secondary);
    height: 100%;
}

.empty-icon[b-ka9oz1fjjj] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d1d1;
}

/* Filter Panel (Simplified) */
.filter-panel[b-ka9oz1fjjj] {
    background: #f8f8f8;
    padding: 16px 24px;
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    gap: 16px;
    align-items: center;
    animation: slideDown-b-ka9oz1fjjj 0.2s ease-out;
}

.filter-group[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-select[b-ka9oz1fjjj] {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
}

@keyframes slideDown-b-ka9oz1fjjj {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

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

.BEC-pagination-button[b-ka9oz1fjjj] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
}

    .BEC-pagination-button:hover:not(.disabled)[b-ka9oz1fjjj] {
        background: var(--BEC-colorNeutralBackground3);
        border-color: var(--BEC-colorNeutralStroke2);
        transform: translateY(-1px);
    }

    .BEC-pagination-button.disabled[b-ka9oz1fjjj] {
        background: var(--BEC-colorNeutralBackground3);
        color: var(--BEC-colorNeutralForeground3);
        cursor: not-allowed;
        opacity: 0.5;
    }

.BEC-pagination-pages[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
    margin: 0 var(--BEC-spacingHorizontalS);
}

.BEC-pagination-page[b-ka9oz1fjjj] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
}

    .BEC-pagination-page:hover[b-ka9oz1fjjj] {
        background: var(--BEC-colorNeutralBackground3);
        border-color: var(--BEC-colorNeutralStroke2);
        transform: translateY(-1px);
    }

    .BEC-pagination-page.active[b-ka9oz1fjjj] {
        background: var(--BEC-colorBrandBackground);
        color: var(--BEC-colorNeutralForegroundOnBrand);
        border-color: var(--BEC-colorBrandBackground);
        box-shadow: var(--BEC-shadow2);
    }

.BEC-pagination-size[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-pagination-size-label[b-ka9oz1fjjj] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

.BEC-pagination-size-select[b-ka9oz1fjjj] {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    min-width: 60px;
}

    .BEC-pagination-size-select:focus[b-ka9oz1fjjj] {
        outline: none;
        border-color: var(--BEC-colorBrandBackground);
        box-shadow: 0 0 0 2px var(--BEC-colorBrandBackground2);
    }

/* ========================================
   NOTIFICATION DETAILS MODAL
   ======================================== */

.mobile-details-modal[b-ka9oz1fjjj] {
    max-width: 600px;
}

.mobile-modal-header[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fluent-border);
}

.mobile-modal-nav[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.back-button[b-ka9oz1fjjj] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fluent-text-secondary);
}

    .back-button:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
    }

.mobile-modal-title[b-ka9oz1fjjj] {
    font-size: 18px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.mobile-modal-content[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

.mobile-summary-card[b-ka9oz1fjjj],
.mobile-message-card[b-ka9oz1fjjj],
.mobile-sender-card[b-ka9oz1fjjj] {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 16px;
}

.summary-icon[b-ka9oz1fjjj] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fluent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.summary-content[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-title[b-ka9oz1fjjj] {
    font-size: 16px;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.summary-time[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--fluent-text-secondary);
}

    .summary-time .material-icons[b-ka9oz1fjjj] {
        font-size: 16px;
    }

.message-header[b-ka9oz1fjjj],
.sender-header[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--fluent-text-secondary);
}

    .message-header .material-icons[b-ka9oz1fjjj],
    .sender-header .material-icons[b-ka9oz1fjjj] {
        font-size: 20px;
    }

.message-title[b-ka9oz1fjjj],
.sender-title[b-ka9oz1fjjj] {
    font-size: 14px;
    font-weight: 600;
}

.message-content[b-ka9oz1fjjj] {
    font-size: 14px;
    color: var(--fluent-text-primary);
    line-height: 1.5;
}

.sender-content[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-text[b-ka9oz1fjjj] {
    font-size: 14px;
}

.sender-info[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sender-email[b-ka9oz1fjjj] {
    font-size: 12px;
    color: var(--fluent-text-secondary);
}

/* ========================================
   NOTIFICATION ACTIONS MENU
   ======================================== */

.notification-menu-modal[b-ka9oz1fjjj] {
    max-width: 250px;
}

.notification-menu[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--fluent-text-primary);
    font-size: 14px;
}

    .menu-item:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
    }

    .menu-item .material-icons[b-ka9oz1fjjj] {
        font-size: 18px;
    }

    .menu-item.delete-item[b-ka9oz1fjjj] {
        color: #d13438;
    }

        .menu-item.delete-item:hover[b-ka9oz1fjjj] {
            background: #fef0f1;
        }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    .grid-container[b-ka9oz1fjjj] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .fluent-header[b-ka9oz1fjjj] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
    }

    .header-actions[b-ka9oz1fjjj] {
        width: 100%;
        flex-direction: column;
    }

    .search-box[b-ka9oz1fjjj] {
        width: 100%;
    }

    .content-container[b-ka9oz1fjjj] {
        flex-direction: column;
        width: 100%;
        margin: 8px auto;
    }

    .tabs-sidebar[b-ka9oz1fjjj] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--fluent-border);
        padding: 12px 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
    }

    .tab-item[b-ka9oz1fjjj] {
        flex-shrink: 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 8px 16px;
    }

        .tab-item.active[b-ka9oz1fjjj] {
            border-left: none;
            border-bottom-color: var(--fluent-primary);
        }

    .feed-list[b-ka9oz1fjjj] {
        padding: 16px;
    }

    .grid-container[b-ka9oz1fjjj] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card[b-ka9oz1fjjj] {
        padding: 20px;
    }

    .feed-pagination[b-ka9oz1fjjj] {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .pagination-controls[b-ka9oz1fjjj] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .fluent-header[b-ka9oz1fjjj] {
        padding: 8px 12px;
    }

    .header-title[b-ka9oz1fjjj] {
        font-size: 18px;
    }

    .feed-list[b-ka9oz1fjjj] {
        padding: 12px;
    }

    .grid-container[b-ka9oz1fjjj] {
        gap: 12px;
    }

    .card[b-ka9oz1fjjj] {
        padding: 16px;
    }

    .card-header[b-ka9oz1fjjj] {
        margin-bottom: 12px;
    }

    .card-title[b-ka9oz1fjjj] {
        font-size: 15px;
    }

    .card-body[b-ka9oz1fjjj] {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .pagination-controls[b-ka9oz1fjjj] {
        gap: 4px;
    }

    .page-btn[b-ka9oz1fjjj] {
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* ================= MIGRATED INLINE STYLES ================= */

.notif-icon-primary[b-ka9oz1fjjj] {
    color: #0078d4;
}

.notif-search-icon[b-ka9oz1fjjj] {
    font-size: 18px;
    color: #666;
    margin-right: 8px;
}

.notif-counter-active[b-ka9oz1fjjj] {
    background: #0078d4;
    color: white;
}

.notif-category-text[b-ka9oz1fjjj] {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    display: block;
}

.notif-pagination-info[b-ka9oz1fjjj] {
    font-size: 13px;
    color: #666;
}
/* /Components/Pages/MainLayout/Payslip/Master/Master.razor.rz.scp.css */
/* ========================================
   PAYSLIP PAGE - COMPACT STYLE
   Following UserCompanyAdministration pattern
   ======================================== */

/* ========================================
   PAGE LAYOUT
   ======================================== */
.erp-page-container[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.erp-page-content[b-jf3evhwutg] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.salary-toggle-btn .e-tbar-btn[b-jf3evhwutg] {
/*    background-color: #0ea5e9 !important;*/
    color: var(--BEC-themePrimary) !important;
}

/* ========================================
   PAGE HEADER - COMPACT
   ======================================== */
.erp-page-header[b-jf3evhwutg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jf3evhwutg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-jf3evhwutg] {
    display: none;
}

.header-right[b-jf3evhwutg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - COMPACT
   ======================================== */
.stats-container[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jf3evhwutg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jf3evhwutg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jf3evhwutg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jf3evhwutg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   TOOLBAR (Syncfusion)
   ======================================== */
[b-jf3evhwutg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: var(--BEC-spacingHorizontalXS) !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

[b-jf3evhwutg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-jf3evhwutg] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

[b-jf3evhwutg] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-jf3evhwutg] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Grid Row Height - Compact */
[b-jf3evhwutg] .e-grid .e-row {
    height: 32px !important;
}

[b-jf3evhwutg] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - Compact */
[b-jf3evhwutg] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jf3evhwutg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   NET SALARY HIGHLIGHT
   ======================================== */
.net-salary-highlight[b-jf3evhwutg] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   VIEW DETAILS BUTTON
   ======================================== */
.view-details-btn[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-details-btn:hover:not(:disabled)[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2);
}

.view-details-btn:disabled[b-jf3evhwutg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.view-details-btn i[b-jf3evhwutg] {
    font-size: 11px;
}

.btn-spinner[b-jf3evhwutg] {
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-jf3evhwutg 0.6s linear infinite;
}

@keyframes spin-b-jf3evhwutg {
    to { transform: rotate(360deg); }
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-jf3evhwutg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 12px;
}

.loading-spinner[b-jf3evhwutg] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jf3evhwutg 0.8s linear infinite;
}

.loading-text[b-jf3evhwutg] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.loading-subtext[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   ERROR CONTAINER
   ======================================== */
.error-container[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 16px;
    color: var(--BEC-colorStatusDangerForeground1);
}

.error-container i[b-jf3evhwutg] {
    font-size: 64px;
    opacity: 0.6;
}

.error-container p[b-jf3evhwutg] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    max-width: 500px;
}

.retry-button[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.retry-button:hover[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    gap: 16px;
}

.empty-state i[b-jf3evhwutg] {
    font-size: 72px;
    color: var(--BEC-colorNeutralStroke2);
}

.empty-state h2[b-jf3evhwutg] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.empty-state p[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 8px 0;
}

.primary-button[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-button:hover[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.2);
}

/* ========================================
   DATE RANGE DIALOG
   ======================================== */
.dialog-header[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.dialog-header i[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
}

.date-range-content[b-jf3evhwutg] {
    padding: 10px 0;
}

.dialog-description[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 20px 0;
}

.date-input-group[b-jf3evhwutg] {
    margin-bottom: 20px;
}

.date-label[b-jf3evhwutg] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.validation-error[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--BEC-colorStatusDangerBackground1);
    border-left: 3px solid var(--BEC-colorStatusDangerForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 12px;
}

.validation-error i[b-jf3evhwutg] {
    color: var(--BEC-colorStatusDangerForeground1);
    font-size: 16px;
}

.validation-error span[b-jf3evhwutg] {
    color: var(--BEC-colorStatusDangerForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
}

.quick-select[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-wrap: wrap;
}

.quick-select-label[b-jf3evhwutg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.quick-btn[b-jf3evhwutg] {
    padding: 6px 14px;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn:hover[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    border-color: var(--BEC-colorBrandBackground);
}

.dialog-footer[b-jf3evhwutg] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.dialog-btn[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn[b-jf3evhwutg] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground2);
}

.cancel-btn:hover:not(:disabled)[b-jf3evhwutg] {
    background: var(--BEC-colorNeutralBackground2Hover);
}

.apply-btn[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.apply-btn:hover:not(:disabled)[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.apply-btn:disabled[b-jf3evhwutg] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   SIDEBAR
   ======================================== */
[b-jf3evhwutg] .e-sidebar {
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.sidebar-content[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.sidebar-header[b-jf3evhwutg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-header h2[b-jf3evhwutg] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.sidebar-period[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.close-sidebar-btn[b-jf3evhwutg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.close-sidebar-btn:hover[b-jf3evhwutg] {
    background: var(--BEC-colorNeutralBackground2);
}

.close-sidebar-btn i[b-jf3evhwutg] {
    font-size: 18px;
}

.sidebar-body[b-jf3evhwutg] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.details-section[b-jf3evhwutg] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.details-section:last-child[b-jf3evhwutg] {
    border-bottom: none;
}

.section-title[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.section-title i[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
}

.details-grid[b-jf3evhwutg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-jf3evhwutg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.detail-value[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.earnings-list[b-jf3evhwutg], .deductions-list[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.earning-item[b-jf3evhwutg], .deduction-item[b-jf3evhwutg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.earning-label[b-jf3evhwutg], .deduction-label[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.earning-value[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.deduction-value[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorStatusDangerForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.earning-item.total[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackground1);
    border: 1px solid var(--BEC-colorBrandForeground1);
}

.earning-item.total .earning-label[b-jf3evhwutg],
.earning-item.total .earning-value[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
}

.no-deductions[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
    padding: 12px;
    text-align: center;
}

.net-salary-section[b-jf3evhwutg] {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground1) 0%, var(--BEC-colorBrandBackground2) 100%);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
}

.net-salary-box[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.net-salary-label[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.net-salary-amount[b-jf3evhwutg] {
    font-size: 28px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

.sidebar-loading-overlay[b-jf3evhwutg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.sidebar-loading-content[b-jf3evhwutg] {
    background: white;
    padding: 32px 48px;
    border-radius: var(--BEC-borderRadiusLarge);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* /Components/Pages/MainLayout/PayslipDocs.razor.rz.scp.css */
/* PayslipDocs - Compact Full-Width Layout */

/* Base Container */
.docs-container[b-zyv9i4oy1c] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--text-primary, #2D3748);
}

/* Documentation Section Styling */
.docs-section[b-zyv9i4oy1c] {
    display: none;
    animation: fade-in-b-zyv9i4oy1c 0.2s ease;
    width: 100%;
}

.docs-section.active[b-zyv9i4oy1c] {
    display: block;
}

@keyframes fade-in-b-zyv9i4oy1c {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.docs-section-header[b-zyv9i4oy1c] {
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    padding: 0.75rem 1.25rem;
    color: white;
    width: 100%;
}

.docs-section-header h2[b-zyv9i4oy1c] {
    margin: 0;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.2;
}

.docs-section-content[b-zyv9i4oy1c] {
    padding: 1rem;
}

.docs-section-content p[b-zyv9i4oy1c] {
    line-height: 1.5;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #2D3748);
    font-size: 0.875rem;
}

/* Feature Grid */
.feature-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.feature-card[b-zyv9i4oy1c] {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #E2E8F0);
    display: flex;
    flex-direction: column;
}

.feature-card:hover[b-zyv9i4oy1c] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    border-color: var(--accent-primary, #2B3484);
}

.feature-card[b-zyv9i4oy1c]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    transition: width 0.3s ease;
}

.feature-card:hover[b-zyv9i4oy1c]::after {
    width: 100%;
}

.feature-icon[b-zyv9i4oy1c] {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0.4rem;
    background-color: rgba(43, 52, 132, 0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--accent-primary, #2B3484);
}

.feature-card p[b-zyv9i4oy1c] {
    font-size: 0.813rem;
    line-height: 1.4;
    margin: 0;
    color: var(--text-secondary, #4A5568);
}

/* Module Navigation */
.module-navigation[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
    width: 100%;
}

.module-navigation h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.module-navigation h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.module-nav-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.module-nav-item[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #E2E8F0);
}

.module-nav-item:hover[b-zyv9i4oy1c] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    border-color: var(--accent-primary, #2B3484);
}

.module-nav-item[b-zyv9i4oy1c]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-primary, #2B3484);
    transition: width 0.3s ease;
}

.module-nav-item:hover[b-zyv9i4oy1c]::after {
    width: 100%;
}

.nav-number[b-zyv9i4oy1c] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--accent-primary, #2B3484);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.nav-content h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--text-primary, #2D3748);
}

.nav-content p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

/* Interface Section */
.interface-section[b-zyv9i4oy1c] {
    margin-bottom: 1.25rem;
    width: 100%;
}

.interface-section h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.interface-section h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.navigation-visual[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.nav-year-tabs[b-zyv9i4oy1c] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.nav-year[b-zyv9i4oy1c] {
    padding: 0.3rem 0.6rem;
    background-color: white;
    border-radius: 4px;
    font-size: 0.813rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-year.active[b-zyv9i4oy1c] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
}

.nav-month-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.nav-month[b-zyv9i4oy1c] {
    background-color: white;
    border-radius: 4px;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.813rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-month.active[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.1);
    border: 1px solid var(--accent-primary, #2B3484);
}

.nav-month.empty[b-zyv9i4oy1c] {
    background-color: rgba(160, 174, 192, 0.1);
    color: var(--text-secondary, #A0AEC0);
}

.navigation-features[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.feature-item[b-zyv9i4oy1c] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.6rem;
    gap: 0.5rem;
}

.feature-item p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

.info-box[b-zyv9i4oy1c] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background-color: rgba(49, 130, 206, 0.1);
    padding: 0.6rem;
    border-radius: 4px;
    margin-top: 0.75rem;
}

.info-icon[b-zyv9i4oy1c] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233182CE'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.info-box p[b-zyv9i4oy1c] {
    font-size: 0.813rem;
    margin: 0;
    color: var(--accent-primary, #2B3484);
}

.filter-options[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.filter-option[b-zyv9i4oy1c] {
    display: flex;
    align-items: flex-start;
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    gap: 0.6rem;
}

.filter-icon[b-zyv9i4oy1c] {
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 6px;
    flex-shrink: 0;
}

.filter-text h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--text-primary, #2D3748);
}

.filter-text p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

/* Payslip Sections */
.payslip-sections-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.section-card[b-zyv9i4oy1c], .print-option-card[b-zyv9i4oy1c], .ai-feature-card[b-zyv9i4oy1c] {
    position: relative;
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.section-card:hover[b-zyv9i4oy1c], .print-option-card:hover[b-zyv9i4oy1c], .ai-feature-card:hover[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.05);
    border-color: var(--border-color, #E2E8F0);
}

.section-icon[b-zyv9i4oy1c], .print-icon[b-zyv9i4oy1c], .ai-icon[b-zyv9i4oy1c] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-color: rgba(43, 52, 132, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-card h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
    color: var(--text-primary, #2D3748);
}

.section-card ul[b-zyv9i4oy1c] {
    margin: 0;
    padding-left: 1rem;
}

.section-card li[b-zyv9i4oy1c] {
    font-size: 0.813rem;
    margin-bottom: 0.2rem;
    color: var(--text-secondary, #4A5568);
}

.section-card li:last-child[b-zyv9i4oy1c] {
    margin-bottom: 0;
}

/* Payslip Visual Enhancement */
.payslip-visual[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
    width: 100%;
}

.payslip-mockup[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-color, #E2E8F0);
}

.payslip-header[b-zyv9i4oy1c] {
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    color: white;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payslip-header[b-zyv9i4oy1c]::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8L14,2z M16,18H8v-2h8V18z M16,14H8v-2h8V14z M13,9V3.5 L18.5,9H13z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.payslip-content[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.payslip-column[b-zyv9i4oy1c] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mockup-section[b-zyv9i4oy1c] {
    background-color: white;
    border-radius: 4px;
    height: 70px;
    position: relative;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #E2E8F0);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.02);
}

.mockup-section[b-zyv9i4oy1c]::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 70%;
    height: 12px;
    background-color: rgba(203, 213, 224, 0.4);
    border-radius: 2px;
}

.mockup-section[b-zyv9i4oy1c]::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 10px;
    width: 40%;
    height: 8px;
    background-color: rgba(203, 213, 224, 0.3);
    border-radius: 2px;
}

.mockup-section.emp-info[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.03);
}

.mockup-section.bank-info[b-zyv9i4oy1c] {
    background-color: rgba(49, 130, 206, 0.03);
}

.mockup-section.attendance[b-zyv9i4oy1c] {
    background-color: rgba(72, 187, 120, 0.03);
}

.mockup-section.earnings[b-zyv9i4oy1c] {
    background-color: rgba(56, 178, 172, 0.03);
}

.mockup-section.deductions[b-zyv9i4oy1c] {
    background-color: rgba(237, 100, 166, 0.03);
}

.mockup-section.net-salary[b-zyv9i4oy1c] {
    background-color: rgba(246, 173, 85, 0.03);
}

/* AI Features */
.ai-features-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.ai-feature-card h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
    color: var(--text-primary, #2D3748);
}

.ai-feature-card p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

.ai-interaction[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
}

.ai-interaction h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.ai-interaction h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.ai-interaction-visual[b-zyv9i4oy1c] {
    margin-top: 0.75rem;
}

.ai-chat-mockup[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    overflow: hidden;
    max-width: 500px;
}

.ai-chat-header[b-zyv9i4oy1c] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.ai-chat-messages[b-zyv9i4oy1c] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-message[b-zyv9i4oy1c], .user-message[b-zyv9i4oy1c] {
    padding: 0.6rem;
    border-radius: 4px;
    font-size: 0.813rem;
    max-width: 80%;
}

.ai-message[b-zyv9i4oy1c] {
    background-color: white;
    align-self: flex-start;
}

.user-message[b-zyv9i4oy1c] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    align-self: flex-end;
}

/* Printing Options */
.print-options-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.print-option-card h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
    color: var(--text-primary, #2D3748);
}

.print-option-card p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

.print-process[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
}

.print-process h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.print-process h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.print-steps[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.print-step[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    position: relative;
}

.step-number[b-zyv9i4oy1c] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--accent-primary, #2B3484);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.print-step p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

/* FAQ */
.faq-list[b-zyv9i4oy1c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

:deep(.fluent-accordion-item)[b-zyv9i4oy1c] {
    margin-bottom: 0.4rem;
    border: none;
    background-color: transparent;
    width: 100%;
}

:deep(.fluent-accordion-item .fluent-accordion-header-content)[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-primary, #2D3748);
}

:deep(.fluent-accordion-item .fluent-accordion-header)[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    transition: all 0.2s ease;
}

:deep(.fluent-accordion-item .fluent-accordion-header:hover)[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.05);
    border-color: var(--accent-primary, #2B3484);
}

:deep(.fluent-accordion-item[expanded] .fluent-accordion-header)[b-zyv9i4oy1c] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    background-color: rgba(43, 52, 132, 0.05);
}

:deep(.fluent-accordion-item .fluent-accordion-region)[b-zyv9i4oy1c] {
    background-color: white;
    border: 1px solid var(--border-color, #E2E8F0);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content)[b-zyv9i4oy1c] {
    padding: 0.75rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p)[b-zyv9i4oy1c] {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #4A5568);
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p:last-child)[b-zyv9i4oy1c] {
    margin-bottom: 0;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content ul)[b-zyv9i4oy1c] {
    padding-left: 1.1rem;
    margin-bottom: 0.5rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content li)[b-zyv9i4oy1c] {
    margin-bottom: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Tablet Breakpoint */
@media (min-width: 768px) {
    .docs-section-header[b-zyv9i4oy1c] {
        padding: 1rem 1.5rem;
    }
    
    .docs-section-header h2[b-zyv9i4oy1c] {
        font-size: 1.5rem;
    }
    
    .docs-section-content[b-zyv9i4oy1c] {
        padding: 1.25rem 1.5rem;
    }
    
    .feature-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .module-nav-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .navigation-features[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-options[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .payslip-sections-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .payslip-content[b-zyv9i4oy1c] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ai-features-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .print-options-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .print-steps[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-month-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop Breakpoint */
@media (min-width: 1024px) {
    .docs-section-header[b-zyv9i4oy1c] {
        padding: 1.25rem 2rem;
    }
    
    .docs-section-content[b-zyv9i4oy1c] {
        padding: 1.5rem 2rem;
    }
    
    .feature-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .module-nav-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .navigation-features[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .ai-features-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .print-options-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .nav-month-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Large Desktop Breakpoint */
@media (min-width: 1280px) {
    .docs-section-header[b-zyv9i4oy1c] {
        padding: 1.5rem 2.5rem;
    }
    
    .docs-section-header h2[b-zyv9i4oy1c] {
        font-size: 1.75rem;
    }
    
    .docs-section-content[b-zyv9i4oy1c] {
        padding: 2rem 2.5rem;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Analytics/Analytics.razor.rz.scp.css */
/* ================================================================
   PE Score Dashboard - Scoped Styles
   Aligned with MainLayout erp-page-container pattern
   ================================================================ */

/* -- Page Container (inherits flex from MainLayout) ---------------- */
.erp-page-container[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 24px 32px;
    min-height: 0;
    overflow-y: auto;
}

/* -- Page Header --------------------------------------------------- */
.erp-page-header[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

.page-title-row[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-icon[b-hwjef64zfp] {
    font-size: 22px;
    color: var(--BEC-colorBrandForeground1, #003366);
}

.erp-page-header h4[b-hwjef64zfp] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- State containers (loading, error, empty) ---------------------- */
.state-container[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.state-container i[b-hwjef64zfp] {
    font-size: 32px;
}

.state-error i[b-hwjef64zfp] {
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.btn-retry[b-hwjef64zfp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #003366);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s;
}

.btn-retry:hover[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #003366);
}

/* -- Section Card Wrapper ------------------------------------------ */
.section-card[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* -- Section titles ------------------------------------------------ */
.section-title[b-hwjef64zfp] {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.section-header-row[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header-row .section-title[b-hwjef64zfp] {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Section 1 — Progress Overview
   ═══════════════════════════════════════════════════════════════════ */
.section-progress[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-cards[b-hwjef64zfp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.progress-card[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-top: 3px solid transparent;
    transition: box-shadow 0.2s;
}

.progress-card:hover[b-hwjef64zfp] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-total[b-hwjef64zfp] {
    border-top-color: var(--BEC-colorBrandForeground1, #003366);
}

.card-completed[b-hwjef64zfp] {
    border-top-color: #2E7D32;
}

.card-inprogress[b-hwjef64zfp] {
    border-top-color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.card-value[b-hwjef64zfp] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.card-total .card-value[b-hwjef64zfp] {
    color: var(--BEC-colorBrandForeground1, #003366);
}

.card-completed .card-value[b-hwjef64zfp] {
    color: #2E7D32;
}

.card-inprogress .card-value[b-hwjef64zfp] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.card-label[b-hwjef64zfp] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.card-subtext[b-hwjef64zfp] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* Stage breakdown row */
.stage-breakdown[b-hwjef64zfp] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
}

.stage-item[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stage-dot[b-hwjef64zfp] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-self[b-hwjef64zfp] {
    background: #1565C0;
}

.dot-manager[b-hwjef64zfp] {
    background: #6A1B9A;
}

.dot-approval[b-hwjef64zfp] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.dot-ack[b-hwjef64zfp] {
    background: #00838F;
}

.stage-name[b-hwjef64zfp] {
    font-size: 0.85rem;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.stage-count[b-hwjef64zfp] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ═══════════════════════════════════════════════════════════════════
   Section 2 — Score Results
   ═══════════════════════════════════════════════════════════════════ */
.section-scores[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
}

.scores-layout[b-hwjef64zfp] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 24px;
    align-items: start;
}

.score-chart-container[b-hwjef64zfp] {
    min-height: 300px;
    max-height: 380px;
}

.no-data-text[b-hwjef64zfp] {
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
    padding: 48px 0;
}

.score-average-card[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground1, #003366), #004d99);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.2);
}

.avg-label[b-hwjef64zfp] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.avg-score[b-hwjef64zfp] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.avg-unit[b-hwjef64zfp] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════
   Section 3 — Top Performers Table
   ═══════════════════════════════════════════════════════════════════ */
.section-top-performers[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
}

.top-performers-table-wrapper[b-hwjef64zfp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.top-performers-table[b-hwjef64zfp] {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.top-performers-table thead th[b-hwjef64zfp] {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--BEC-colorNeutralForeground3, #707070);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    white-space: nowrap;
}

.top-performers-table tbody td[b-hwjef64zfp] {
    padding: 10px 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    white-space: nowrap;
}

.top-performers-table tbody tr.row-alt[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground2, #fafafa);
}

.top-performers-table tbody tr:hover[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.top-performers-table .col-rank[b-hwjef64zfp] {
    width: 48px;
    text-align: center;
}

.top-performers-table .col-name[b-hwjef64zfp] {
    min-width: 160px;
    font-weight: 500;
}

.top-performers-table .col-code[b-hwjef64zfp] {
    min-width: 80px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.top-performers-table .col-dept[b-hwjef64zfp] {
    min-width: 130px;
}

.top-performers-table .col-score[b-hwjef64zfp] {
    text-align: center;
    font-weight: 600;
    min-width: 90px;
}

.top-performers-table .col-result[b-hwjef64zfp] {
    text-align: center;
    min-width: 130px;
}

.top-performers-table .col-eval[b-hwjef64zfp] {
    min-width: 130px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.score-unit[b-hwjef64zfp] {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Rank badges --------------------------------------------------- */
.rank-badge[b-hwjef64zfp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
}

.rank-gold[b-hwjef64zfp] {
    background: linear-gradient(135deg, #F9A825, #F57F17);
    box-shadow: 0 2px 6px rgba(249, 168, 37, 0.35);
}

.rank-silver[b-hwjef64zfp] {
    background: linear-gradient(135deg, #90A4AE, #607D8B);
    box-shadow: 0 2px 6px rgba(96, 125, 139, 0.3);
}

.rank-bronze[b-hwjef64zfp] {
    background: linear-gradient(135deg, #A1887F, #795548);
    box-shadow: 0 2px 6px rgba(121, 85, 72, 0.3);
}

.rank-default[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground5, #e0e0e0);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* -- Result badges (shared by Top Performers + Department grid) ---- */
.result-badge[b-hwjef64zfp] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.badge-outstanding[b-hwjef64zfp] {
    background: #e8f5e9;
    color: #2E7D32;
}

.badge-exceed[b-hwjef64zfp] {
    background: #e3f2fd;
    color: #1565C0;
}

.badge-meet[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground5, #e0e0e0);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.badge-partial[b-hwjef64zfp] {
    background: #fff3e0;
    color: #e65100;
}

.badge-need[b-hwjef64zfp] {
    background: #ffebee;
    color: #c62828;
}

/* ═══════════════════════════════════════════════════════════════════
   Section 4 — Department Grid
   ═══════════════════════════════════════════════════════════════════ */
.section-department[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
}

.department-table-wrapper[b-hwjef64zfp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.btn-export[b-hwjef64zfp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: #2E7D32;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.btn-export:hover[b-hwjef64zfp] {
    background: #f0fdf4;
    border-color: #2E7D32;
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .erp-page-container[b-hwjef64zfp] {
        padding: 12px 16px 24px;
    }

    .section-card[b-hwjef64zfp] {
        padding: 16px;
    }

    .progress-cards[b-hwjef64zfp] {
        grid-template-columns: 1fr;
    }

    .scores-layout[b-hwjef64zfp] {
        grid-template-columns: 1fr;
    }

    .stage-breakdown[b-hwjef64zfp] {
        flex-direction: column;
        gap: 12px;
    }

    .top-performers-table[b-hwjef64zfp] {
        min-width: 900px;
    }

    .erp-page-header[b-hwjef64zfp] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Analytics/EvaluationAnalytics.razor.rz.scp.css */
/* ================================================================
   Active Evaluations Tracker - Scoped Styles
   ================================================================ */

/* -- Page container ------------------------------------------------ */
.erp-page-container[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 24px;
    min-height: 0;
    overflow-y: auto;
}

/* -- Page header --------------------------------------------------- */
.erp-page-header[b-psv76x285b] {
    margin-bottom: 4px;
}

.page-title-row[b-psv76x285b] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-icon[b-psv76x285b] {
    font-size: 22px;
    color: var(--BEC-colorBrandForeground1, #003366);
}

.erp-page-header h4[b-psv76x285b] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- Loading / Error ----------------------------------------------- */
.loading-container[b-psv76x285b],
.error-container[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.error-container i[b-psv76x285b] {
    font-size: 32px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.btn-retry[b-psv76x285b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #003366);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s;
}

.btn-retry:hover[b-psv76x285b] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #003366);
}

/* -- Summary Cards Row --------------------------------------------- */
.summary-row[b-psv76x285b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.summary-card[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    border-top: 3px solid transparent;
    outline: none;
    font-family: inherit;
}

.summary-card:hover[b-psv76x285b] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.summary-card.active[b-psv76x285b] {
    border-color: var(--BEC-colorBrandStroke1, #003366);
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.15);
}

.summary-count[b-psv76x285b] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-label[b-psv76x285b] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* Card colour variants */
.summary-draft[b-psv76x285b] {
    border-top-color: var(--BEC-colorNeutralForeground3, #707070);
}
.summary-draft .summary-count[b-psv76x285b] {
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.summary-inprogress[b-psv76x285b] {
    border-top-color: var(--BEC-colorBrandForeground1, #003366);
}
.summary-inprogress .summary-count[b-psv76x285b] {
    color: var(--BEC-colorBrandForeground1, #003366);
}

.summary-pending[b-psv76x285b] {
    border-top-color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}
.summary-pending .summary-count[b-psv76x285b] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.summary-returned[b-psv76x285b] {
    border-top-color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}
.summary-returned .summary-count[b-psv76x285b] {
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

/* -- Filter Toolbar ------------------------------------------------ */
.filter-toolbar[b-psv76x285b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
}

.filter-group[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.filter-label[b-psv76x285b] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3, #707070);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-dropdown[b-psv76x285b] {
    width: 100%;
}

.filter-search[b-psv76x285b] {
    width: 100%;
}

.filter-actions[b-psv76x285b] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

.btn-filter-clear[b-psv76x285b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.15s;
    font-family: inherit;
}

.btn-filter-clear:hover[b-psv76x285b] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

/* -- Grid Section -------------------------------------------------- */
.erp-page-content[b-psv76x285b] {
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

/* -- Cell: Employee (name + code stacked) -------------------------- */
.cell-employee[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.emp-name[b-psv76x285b] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 0.8125rem;
}

.emp-code[b-psv76x285b] {
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Cell: Pending From (name + code + email stacked) -------------- */
.cell-pending-from[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.pf-name[b-psv76x285b] {
    font-weight: 600;
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
    font-size: 0.8125rem;
}

.pf-detail[b-psv76x285b] {
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.cell-na[b-psv76x285b] {
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Due Date: overdue highlight ----------------------------------- */
.due-overdue[b-psv76x285b] {
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
    font-weight: 600;
}

/* -- Badge Styles -------------------------------------------------- */
.badge[b-psv76x285b] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Stage badge colours */
.badge-stage.badge-draft[b-psv76x285b] {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.badge-stage.badge-inprogress[b-psv76x285b] {
    background: var(--BEC-colorBrandBackground2, #e0ebf5);
    color: var(--BEC-colorBrandForeground1, #003366);
}

.badge-stage.badge-pendingapproval[b-psv76x285b] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, #fdf0e0);
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.badge-stage.badge-returnedforcorrection[b-psv76x285b] {
    background: rgba(196, 49, 75, 0.1);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.badge-stage.badge-completed[b-psv76x285b] {
    background: var(--BEC-colorPaletteGreenBackground2, #e0f2e9);
    color: var(--BEC-colorPaletteGreenForeground2, #0d6e3d);
}

/* -- Responsive ---------------------------------------------------- */
@media (max-width: 768px) {
    .erp-page-container[b-psv76x285b] {
        padding: 12px 12px 16px;
    }

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

    .filter-toolbar[b-psv76x285b] {
        flex-direction: column;
    }

    .filter-group[b-psv76x285b] {
        min-width: 100%;
    }
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .summary-row[b-psv76x285b] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .summary-card[b-psv76x285b] {
        padding: 12px 8px;
    }

    .summary-count[b-psv76x285b] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .summary-row[b-psv76x285b] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/AuditLogs/EvaluationStageHistory/EvaluationStageHistory.razor.rz.scp.css */
/* ================================================================
   Evaluation Stage History — Scoped Styles
   ================================================================ */

/* -- Page container ------------------------------------------------ */
.erp-page-container[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 24px;
    min-height: 0;
    overflow-y: auto;
}

/* -- Page header --------------------------------------------------- */
.erp-page-header[b-fd6bmgpwie] {
    margin-bottom: 4px;
}

.page-title-row[b-fd6bmgpwie] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-icon[b-fd6bmgpwie] {
    font-size: 22px;
    color: var(--BEC-colorBrandForeground1, #003366);
}

.erp-page-header h4[b-fd6bmgpwie] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- Loading / Error ----------------------------------------------- */
.loading-container[b-fd6bmgpwie],
.error-container[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.error-container i[b-fd6bmgpwie] {
    font-size: 32px;
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.btn-retry[b-fd6bmgpwie] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #003366);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s;
}

.btn-retry:hover[b-fd6bmgpwie] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #003366);
}

/* -- Selector Section ---------------------------------------------- */
.selector-section[b-fd6bmgpwie] {
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
}

.selector-row[b-fd6bmgpwie] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.filter-group[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group--search[b-fd6bmgpwie] {
    flex: 1;
    min-width: 280px;
}

.filter-label[b-fd6bmgpwie] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3, #707070);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* -- Info Card ----------------------------------------------------- */
.info-card[b-fd6bmgpwie] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
    border-left: 4px solid var(--BEC-colorBrandForeground1, #003366);
}

.info-card-item[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label[b-fd6bmgpwie] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.info-value[b-fd6bmgpwie] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- Stage Badges -------------------------------------------------- */
.stage-badge[b-fd6bmgpwie] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.stage-badge--draft[b-fd6bmgpwie] {
    background: var(--BEC-colorNeutralBackground4, #ebebeb);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.stage-badge--inprogress[b-fd6bmgpwie] {
    background: rgba(0, 51, 102, 0.10);
    color: var(--BEC-colorBrandForeground1, #003366);
}

.stage-badge--pendingapproval[b-fd6bmgpwie] {
    background: rgba(198, 122, 26, 0.10);
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.stage-badge--returnedforcorrection[b-fd6bmgpwie] {
    background: rgba(196, 49, 75, 0.10);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.stage-badge--completed[b-fd6bmgpwie],
.stage-badge--approved[b-fd6bmgpwie] {
    background: rgba(16, 124, 16, 0.10);
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.stage-badge--created[b-fd6bmgpwie] {
    background: rgba(0, 51, 102, 0.06);
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Empty State --------------------------------------------------- */
.empty-state[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.empty-icon[b-fd6bmgpwie] {
    font-size: 40px;
    opacity: 0.4;
}

/* -- Timeline ------------------------------------------------------ */
.timeline[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.timeline-entry[b-fd6bmgpwie] {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-marker[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}

.timeline-dot[b-fd6bmgpwie] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--BEC-colorBrandForeground1, #003366);
    border: 2px solid var(--BEC-colorNeutralBackground1, #ffffff);
    box-shadow: 0 0 0 2px var(--BEC-colorBrandForeground1, #003366);
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-line[b-fd6bmgpwie] {
    width: 2px;
    flex: 1;
    background: var(--BEC-colorNeutralStroke2, #e0e0e0);
    min-height: 16px;
}

.timeline-entry:last-child .timeline-line[b-fd6bmgpwie] {
    display: none;
}

.timeline-content[b-fd6bmgpwie] {
    flex: 1;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-header[b-fd6bmgpwie] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stage-transition[b-fd6bmgpwie] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transition-arrow[b-fd6bmgpwie] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.timeline-date[b-fd6bmgpwie] {
    font-size: 0.8rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-meta[b-fd6bmgpwie] {
    font-size: 0.8rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.changed-by[b-fd6bmgpwie] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-notes[b-fd6bmgpwie] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.4;
}

.timeline-notes i[b-fd6bmgpwie] {
    margin-top: 2px;
    color: var(--BEC-colorNeutralForeground3, #707070);
    flex-shrink: 0;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/AcknowledgeEvaluation/AcknowledgeEvaluation.razor.rz.scp.css */
/* ========================================
   ACKNOWLEDGE EVALUATION PAGE
   Side-by-side comparison view
   ======================================== */

.erp-page-container[b-e4nmrhgzyj] { display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; }
.erp-page-header[b-e4nmrhgzyj] { position: sticky; top: 0; z-index: 100; background: transparent; padding: 6px 24px; display: flex; align-items: center; min-height: 36px; gap: 8px; }
.header-left[b-e4nmrhgzyj] { flex: 1; display: flex; align-items: center; gap: 8px; }

.back-btn[b-e4nmrhgzyj] { background: transparent; border: none; color: var(--BEC-colorNeutralForeground2); font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: var(--BEC-borderRadiusSmall); transition: all 0.15s; }
.back-btn:hover[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); background: var(--BEC-colorNeutralBackground1Hover); }

.page-title[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); margin: 0; }
.page-title i[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); }

/* State Containers */
.state-container[b-e4nmrhgzyj] { display: flex; align-items: center; justify-content: center; flex: 1; padding: 60px; }
.loading-spinner[b-e4nmrhgzyj], .error-card[b-e4nmrhgzyj], .empty-card[b-e4nmrhgzyj] { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--BEC-colorNeutralForeground3); }
.error-card i[b-e4nmrhgzyj] { color: var(--BEC-colorPaletteRedForeground1); }
.retry-btn[b-e4nmrhgzyj], .back-link-btn[b-e4nmrhgzyj] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid var(--BEC-colorNeutralStroke1); background: var(--BEC-colorNeutralBackground1); color: var(--BEC-colorNeutralForeground1); border-radius: var(--BEC-borderRadiusMedium); cursor: pointer; font-size: 13px; }
.retry-btn:hover[b-e4nmrhgzyj], .back-link-btn:hover[b-e4nmrhgzyj] { border-color: var(--BEC-colorBrandForeground1); color: var(--BEC-colorBrandForeground1); }

/* Acknowledgment Content */
.ack-content[b-e4nmrhgzyj] { flex: 1; overflow-y: auto; padding: 0 24px 40px; display: flex; flex-direction: column; gap: 20px; }

/* Header Cards */
.ack-header-cards[b-e4nmrhgzyj] { display: flex; gap: 16px; flex-wrap: wrap; }
.meta-card[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--BEC-colorNeutralBackground2); border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); flex: 1; min-width: 180px; }
.meta-icon[b-e4nmrhgzyj] { font-size: 16px; color: var(--BEC-colorBrandForeground1); }
.meta-content[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 2px; }
.meta-label[b-e4nmrhgzyj] { font-size: 10px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground3); text-transform: uppercase; }
.meta-value[b-e4nmrhgzyj] { font-size: 13px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); }
.stage-badge[b-e4nmrhgzyj] { padding: 2px 8px; border-radius: var(--BEC-borderRadiusSmall); font-size: 11px; background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }

/* Score Comparison Section */
.comparison-section[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 8px; }
.section-title[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); margin: 0; }
.section-title i[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); }

/* Comparison Table */
.comparison-table[b-e4nmrhgzyj] { border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); overflow: hidden; }

.comp-header-row[b-e4nmrhgzyj] { display: flex; background: var(--BEC-colorNeutralBackground3); font-size: 11px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground2); text-transform: uppercase; border-bottom: 1px solid var(--BEC-colorNeutralStroke2); }
.comp-row[b-e4nmrhgzyj] { display: flex; border-bottom: 1px solid var(--BEC-colorNeutralStroke2); background: var(--BEC-colorNeutralBackground1); font-size: 13px; transition: background 0.1s; }
.comp-row:hover[b-e4nmrhgzyj] { background: var(--BEC-colorNeutralBackground1Hover); }
.comp-row:last-child[b-e4nmrhgzyj] { border-bottom: none; }
.comp-totals-row[b-e4nmrhgzyj] { display: flex; background: var(--BEC-colorNeutralBackground3); font-size: 13px; border-top: 2px solid var(--BEC-colorNeutralStroke1); }

.comp-col[b-e4nmrhgzyj] { padding: 10px 12px; display: flex; align-items: center; }
.comp-question[b-e4nmrhgzyj] { flex: 2; }
.comp-score[b-e4nmrhgzyj] { flex: 0 0 100px; justify-content: center; text-align: center; }
.comp-gap[b-e4nmrhgzyj] { flex: 0 0 80px; justify-content: center; text-align: center; }
.comp-comment[b-e4nmrhgzyj] { flex: 2; color: var(--BEC-colorNeutralForeground2); font-size: 12px; }

/* Gap Colors */
.gap-value[b-e4nmrhgzyj] { font-weight: var(--BEC-fontWeightBold); padding: 2px 8px; border-radius: var(--BEC-borderRadiusSmall); font-size: 12px; }
.gap-positive[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteGreenBackground2); color: var(--BEC-colorPaletteGreenForeground2); }
.gap-negative[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteRedBackground2); color: var(--BEC-colorPaletteRedForeground1); }
.gap-neutral[b-e4nmrhgzyj] { background: var(--BEC-colorNeutralBackground3); color: var(--BEC-colorNeutralForeground3); }

/* Acknowledgment Form */
.ack-form-section[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--BEC-colorNeutralBackground2); border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); }

/* Weight badge on question text */
.weight-badge[b-e4nmrhgzyj] { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--BEC-borderRadiusSmall); font-size: 10px; font-weight: var(--BEC-fontWeightSemibold); background: var(--BEC-colorNeutralBackground3); color: var(--BEC-colorNeutralForeground3); }

/* Score display: weighted + raw */
.score-weighted[b-e4nmrhgzyj] { display: block; font-weight: var(--BEC-fontWeightSemibold); font-size: 13px; }
.score-raw[b-e4nmrhgzyj] { display: block; font-size: 10px; color: var(--BEC-colorNeutralForeground3); }

/* Manager Details Section */
.manager-details-section[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 8px; }

.manager-details-grid[b-e4nmrhgzyj] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.detail-card[b-e4nmrhgzyj] { display: flex; flex-direction: column; background: var(--BEC-colorNeutralBackground1); border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); overflow: hidden; }
.detail-card-full[b-e4nmrhgzyj] { grid-column: 1 / -1; }

.detail-card-header[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--BEC-colorNeutralBackground3); font-size: 12px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground2); text-transform: uppercase; }
.detail-card-header i[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); font-size: 12px; }

.detail-card-body[b-e4nmrhgzyj] { padding: 10px 12px; }

/* Recommended Action badge */
.action-badge[b-e4nmrhgzyj] { display: inline-block; padding: 4px 12px; border-radius: var(--BEC-borderRadiusMedium); font-size: 13px; font-weight: var(--BEC-fontWeightSemibold); background: var(--BEC-colorBrandBackground2); color: var(--BEC-colorBrandForeground2); }

/* Tag lists for strengths/weaknesses */
.tag-list[b-e4nmrhgzyj] { display: flex; flex-wrap: wrap; gap: 6px; }
.tag[b-e4nmrhgzyj] { display: inline-block; padding: 4px 10px; border-radius: var(--BEC-borderRadiusMedium); font-size: 12px; font-weight: var(--BEC-fontWeightMedium); }
.tag-strength[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteGreenBackground2); color: var(--BEC-colorPaletteGreenForeground2); }
.tag-development[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }

/* Detail text (for contributions and comments) */
.detail-text[b-e4nmrhgzyj] { margin: 0; font-size: 13px; color: var(--BEC-colorNeutralForeground1); line-height: 1.5; white-space: pre-wrap; }

.ack-checkbox-row[b-e4nmrhgzyj] { padding: 8px 0; }
[b-e4nmrhgzyj] .ack-checkbox .e-label { font-size: 13px; font-weight: var(--BEC-fontWeightMedium); color: var(--BEC-colorNeutralForeground1); }

.ack-comment-group[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 4px; }
.form-label[b-e4nmrhgzyj] { font-size: 12px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground2); }
[b-e4nmrhgzyj] .ack-comment-input textarea { min-height: 80px; }

.ack-actions[b-e4nmrhgzyj] { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }

/* Buttons */
.btn[b-e4nmrhgzyj] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border: none; border-radius: var(--BEC-borderRadiusMedium); font-size: 13px; font-weight: var(--BEC-fontWeightSemibold); cursor: pointer; transition: all 0.15s; }
.btn:disabled[b-e4nmrhgzyj] { opacity: 0.5; cursor: not-allowed; }
.btn-secondary[b-e4nmrhgzyj] { background: var(--BEC-colorNeutralBackground1); color: var(--BEC-colorNeutralForeground1); border: 1px solid var(--BEC-colorNeutralStroke1); }
.btn-secondary:hover:not(:disabled)[b-e4nmrhgzyj] { border-color: var(--BEC-colorBrandForeground1); color: var(--BEC-colorBrandForeground1); }
.btn-primary[b-e4nmrhgzyj] { background: var(--BEC-colorBrandBackground); color: var(--BEC-colorNeutralForegroundOnBrand); }
.btn-primary:hover:not(:disabled)[b-e4nmrhgzyj] { background: var(--BEC-colorBrandBackgroundHover); }

/* Arabic question text */
.q-text-arabic[b-e4nmrhgzyj] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .comparison-table[b-e4nmrhgzyj] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comp-header-row[b-e4nmrhgzyj],
    .comp-row[b-e4nmrhgzyj],
    .comp-totals-row[b-e4nmrhgzyj] {
        min-width: 560px;
    }

    .manager-details-grid[b-e4nmrhgzyj] {
        grid-template-columns: 1fr;
    }

    .ack-content[b-e4nmrhgzyj] {
        padding: 0 12px 24px;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/AllEvaluations/AllEvaluations.razor.rz.scp.css */
/* ========================================
   EVALUATION ADMINISTRATION PAGE
   100% Identical to Employee Evaluator Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-d7wu06z1m2] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-d7wu06z1m2] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-d7wu06z1m2] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-d7wu06z1m2] {
    transform: scale(0.98);
}

.page-subtitle[b-d7wu06z1m2] {
    display: none;
}

.header-right[b-d7wu06z1m2] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-d7wu06z1m2] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-d7wu06z1m2] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-d7wu06z1m2] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-d7wu06z1m2] {
    flex: 1;
    padding: 10px 20px 20px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   FILTER BAR — Year & Stage dropdowns
   ======================================== */
.filter-bar[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.filter-group[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label[b-d7wu06z1m2] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

[b-d7wu06z1m2] .filter-dropdown.e-input-group,
[b-d7wu06z1m2] .filter-dropdown .e-input-group {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-d7wu06z1m2] .filter-dropdown .e-input {
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.filter-actions[b-d7wu06z1m2] {
    margin-left: auto;
}

.filter-clear-btn[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-clear-btn:hover[b-d7wu06z1m2] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.filter-clear-btn i[b-d7wu06z1m2] {
    font-size: 10px;
}

/* ========================================
   STAT VALUE COLOR VARIANTS
   ======================================== */
.stat-draft[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3) !important;
}

.stat-pending[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2) !important;
}

.stat-approved[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2) !important;
}

.stat-inprogress[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1) !important;
}

.stat-completed[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2) !important;
}

/* ========================================
   CELL VERSION TAG
   ======================================== */
.cell-version[b-d7wu06z1m2] {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    vertical-align: middle;
}

/* ========================================
   SCORE VALUE
   ======================================== */
.score-value[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightBold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.score-max[b-d7wu06z1m2] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 1px;
}

.score-muted[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
}

/* ========================================
   APPROVAL STATUS CELL
   ======================================== */
.approval-status-cell[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
}

.approval-icon[b-d7wu06z1m2] {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1);
}

.approval-text[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-d7wu06z1m2] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-d7wu06z1m2] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-d7wu06z1m2] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-d7wu06z1m2] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-d7wu06z1m2] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
/* ⚠️ CRITICAL: Do NOT use overflow: hidden on .e-grid - it clips the pager */
[b-d7wu06z1m2] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    /* overflow: hidden removed - pager must be visible */
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Grid Header - Rounded Top Corners */
[b-d7wu06z1m2] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-d7wu06z1m2] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Fixed position to escape overflow:hidden
   ======================================== */
[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-d7wu06z1m2] .e-grid .e-row.e-selectionbackground,
[b-d7wu06z1m2] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.e-selectionbackground:hover,
[b-d7wu06z1m2] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-d7wu06z1m2] .e-grid .e-row.e-selectionbackground td:first-child,
[b-d7wu06z1m2] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-d7wu06z1m2] .e-grid .e-row {
    height: 32px !important;
}

[b-d7wu06z1m2] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Dim completed evaluations - Visual indication that they're done */
[b-d7wu06z1m2] .e-grid .e-row.evaluation-completed {
    opacity: 0.5;
    background-color: var(--BEC-colorNeutralBackground2) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-completed:hover {
    opacity: 0.6;
    background-color: var(--BEC-colorNeutralBackground3) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-completed td {
    color: var(--BEC-colorNeutralForeground3);
}

/* Overdue Row Styling */
[b-d7wu06z1m2] .e-grid .e-row.evaluation-overdue {
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
}

/* Overdue Badge Pulse Animation */
.overdue-badge[b-d7wu06z1m2] {
    margin-left: 4px;
    animation: pulse-overdue-b-d7wu06z1m2 2s ease-in-out infinite;
}

@keyframes pulse-overdue-b-d7wu06z1m2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Per-Row Action Buttons */
.btn-action[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    background: transparent;
}

.btn-action-view[b-d7wu06z1m2] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-view:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-action i[b-d7wu06z1m2] {
    font-size: 10px;
}

/* Stacked Cell Formatting (Name on top, Code on bottom) */
.cell-stacked[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-name[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    line-height: 1.2;
}

.cell-code[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.2;
}

/* Inline Cell Formatting (Name (Code) on same line) */
.cell-inline[b-d7wu06z1m2] {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1);
}

/* Clickable Row Styling - Better UX */
[b-d7wu06z1m2] .e-grid .e-row.evaluation-clickable {
    cursor: pointer;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-clickable:hover {
    background-color: var(--BEC-colorNeutralBackground2) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-clickable:hover td {
    background-color: transparent !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-d7wu06z1m2] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-d7wu06z1m2] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-d7wu06z1m2 1s linear infinite;
}

@keyframes spin-b-d7wu06z1m2 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-d7wu06z1m2] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-d7wu06z1m2] {
    font-size: 48px;
}

.error-container p[b-d7wu06z1m2] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-info[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-submitted[b-d7wu06z1m2] {
    background: rgba(0, 128, 128, 0.12);
    color: var(--BEC-colorBrandForeground1);
}

.badge-completed[b-d7wu06z1m2] {
    background: rgba(0, 100, 0, 0.12);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-danger[b-d7wu06z1m2] {
    background: rgba(209, 52, 56, 0.12);
    color: var(--BEC-colorPaletteRedForeground1);
}

.badge-selfappraisal[b-d7wu06z1m2] {
    background: rgba(0, 128, 128, 0.12);
    color: #0e7c7b;
}

.badge-managerreview[b-d7wu06z1m2] {
    background: rgba(0, 90, 158, 0.12);
    color: #005a9e;
}

.badge-returnedcorrection[b-d7wu06z1m2] {
    background: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.badge-returned[b-d7wu06z1m2] {
    background: rgba(230, 126, 34, 0.15);
    color: #d35400;
    font-weight: var(--BEC-fontWeightBold, 700);
}

.badge-pendingack[b-d7wu06z1m2] {
    background: rgba(136, 23, 152, 0.12);
    color: #881798;
}

/* ── Returned for Correction Banner (View Panel) ── */
.returned-banner[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 12px;
    border-radius: 0 var(--BEC-borderRadiusSmall, 2px) var(--BEC-borderRadiusSmall, 2px) 0;
}

.returned-banner-header[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 12.5px;
}

.returned-banner-header i[b-d7wu06z1m2] {
    font-size: 14px;
    flex-shrink: 0;
}

.returned-banner-reason[b-d7wu06z1m2] {
    font-style: italic;
    color: #a04000;
    padding-left: 22px;
    font-size: 12px;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-d7wu06z1m2] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-d7wu06z1m2] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-d7wu06z1m2] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-d7wu06z1m2] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-d7wu06z1m2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-d7wu06z1m2] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-d7wu06z1m2] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-d7wu06z1m2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px; /* Add bottom padding to prevent content from being hidden behind footer */
    position: relative;
}

/* Prevent horizontal scroll in wizard grid */
.sidebar-step-content[b-d7wu06z1m2]  .e-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

.sidebar-step-content[b-d7wu06z1m2]  .e-grid .e-gridcontent {
    overflow-x: auto !important;
}

.sidebar-step-content[b-d7wu06z1m2]  .e-grid .e-content {
    overflow-x: auto !important;
}

.wizard-step[b-d7wu06z1m2] {
    max-width: 100%;
}

.step-title[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-d7wu06z1m2] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-d7wu06z1m2] {
    margin-bottom: 20px;
}

.form-label[b-d7wu06z1m2] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-label.required[b-d7wu06z1m2]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ========================================
   COMPACT FORM STYLES (Edit Wizard)
   ======================================== */

/* 2-Column Grid Layout */
.form-grid-2col[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Compact Form Group */
.form-group-compact[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact Form Label */
.form-label-compact[b-d7wu06z1m2] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    text-align: left;
}

.form-label-compact.required[b-d7wu06z1m2]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* Compact Input Fields */
[b-d7wu06z1m2] .compact-input .e-input-group {
    height: 28px !important;
}

[b-d7wu06z1m2] .compact-input .e-input-group input {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Compact Textarea */
[b-d7wu06z1m2] .compact-textarea .e-input-group {
    min-height: 60px !important;
}

[b-d7wu06z1m2] .compact-textarea .e-input-group textarea {
    font-size: 11px !important;
    padding: 6px 8px !important;
    line-height: 1.4 !important;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-d7wu06z1m2] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-d7wu06z1m2 2s ease-in-out infinite;
}

@keyframes sparkle-b-d7wu06z1m2 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-d7wu06z1m2] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-d7wu06z1m2] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer - Positioned at absolute bottom */
.sidebar-footer[b-d7wu06z1m2] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Footer Buttons Container - Right Aligned */
.footer-buttons[b-d7wu06z1m2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Buttons (HTML buttons with custom CSS) - Standardized */
.btn[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
}

.btn:disabled[b-d7wu06z1m2] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary/Cancel Button - Gray */
.btn-secondary[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active:not(:disabled)[b-d7wu06z1m2] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Success/Save Button - Green */
.btn-success[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-success:active:not(:disabled)[b-d7wu06z1m2] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn i[b-d7wu06z1m2] {
    font-size: 14px;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-d7wu06z1m2] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-d7wu06z1m2] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-d7wu06z1m2] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-d7wu06z1m2] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-d7wu06z1m2] .notification-success .e-dlg-content,
[b-d7wu06z1m2] .notification-error .e-dlg-content,
[b-d7wu06z1m2] .notification-warning .e-dlg-content,
[b-d7wu06z1m2] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-d7wu06z1m2] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-d7wu06z1m2] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-d7wu06z1m2] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-d7wu06z1m2] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-section[b-d7wu06z1m2] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-d7wu06z1m2] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.form-section h4[b-d7wu06z1m2] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.required[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.warning-text-red[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
}

.warning-icon-red[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.warning-icon-orange[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* ========================================
   RESET DIALOG STYLES
   ======================================== */
[b-d7wu06z1m2] .reset-dialog .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-footer-content .e-btn.e-warning {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-footer-content .e-btn.e-warning:hover {
    opacity: 0.9;
}

.reset-warning-box[b-d7wu06z1m2] {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin-top: 12px;
    background: #fff5f0;
    border: 1px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
}

.reset-warning-box > i[b-d7wu06z1m2] {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    margin-top: 2px;
}

.reset-warning-box ul[b-d7wu06z1m2] {
    margin: 4px 0 8px 16px;
    padding: 0;
}

.reset-warning-box li[b-d7wu06z1m2] {
    margin-bottom: 2px;
}

.reset-warning-box p[b-d7wu06z1m2] {
    margin: 0 0 4px 0;
}

/* ========================================
   GRID PAGER STYLING
   ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager)
   DO NOT add pager CSS here - it will override the global styles
   ======================================== */

/* ========================================
   TABS - Evaluation / Pending Approval
   ======================================== */
[b-d7wu06z1m2] .e-tab .e-tab-header {
    background: transparent;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    padding: 0 4px;
    min-height: 36px;
}

[b-d7wu06z1m2] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: none;
    padding: 6px 14px;
}

[b-d7wu06z1m2] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

[b-d7wu06z1m2] .e-tab .e-tab-header .e-indicator {
    background: var(--BEC-colorBrandForeground1);
    height: 2px;
}

[b-d7wu06z1m2] .e-tab .e-content {
    padding: 0;
    border: none;
}

/* ========================================
   PENDING APPROVALS TAB
   ======================================== */
.loading-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.loading-container .spinner[b-d7wu06z1m2] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-d7wu06z1m2 0.8s linear infinite;
}

@keyframes spin-b-d7wu06z1m2 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-d7wu06z1m2] {
    font-size: 13px;
    margin: 0;
}

.empty-pending[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.empty-pending i[b-d7wu06z1m2] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground4);
    margin-bottom: 8px;
}

.empty-pending p[b-d7wu06z1m2] {
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.empty-pending span[b-d7wu06z1m2] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Review button in pending grid */
.btn-review[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorBrandForeground1);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    border-radius: 4px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-review:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-review i[b-d7wu06z1m2] {
    font-size: 11px;
}

/* Badge styles for pending grid */
.badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 1.4;
}

.badge-primary[b-d7wu06z1m2] {
    background: rgba(0, 120, 212, 0.1);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-d7wu06z1m2] {
    background: rgba(16, 124, 16, 0.1);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-danger[b-d7wu06z1m2] {
    background: rgba(209, 52, 56, 0.1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.text-danger[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Cell inline layout for pending grid */
.cell-inline[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cell-inline strong[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* Pending Approver cell */
.approver-cell[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.approver-name[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.approver-email[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.approver-step[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1, #4682B4);
    font-style: italic;
}

.text-muted[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3, #707070);
    font-size: 11px;
}

/* ── HR Proxy Badge ── */
.badge-proxy[b-d7wu06z1m2] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorBrandForeground1, #1e40af);
    background: var(--BEC-colorBrandBackground1, #dbeafe);
    border: 1px solid var(--BEC-colorBrandStroke1, #3b82f6);
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ========================================
   VIEW SIDEBAR — SCORE COMPARISON TABLE
   ======================================== */
.view-loading-comparison[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
}

.view-loading-comparison i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.view-comp-table[b-d7wu06z1m2] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    font-size: 12px;
}

.view-comp-header[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorBrandBackground);
    padding: 8px 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.view-comp-row[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    align-items: center;
    transition: background 0.15s ease;
}

.view-comp-row:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.view-comp-row:last-of-type[b-d7wu06z1m2] {
    border-bottom: none;
}

.view-comp-totals[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-col[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.view-comp-question[b-d7wu06z1m2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-weight[b-d7wu06z1m2] {
    justify-content: center;
}

.view-comp-score[b-d7wu06z1m2] {
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    text-align: center;
}

.view-comp-gap[b-d7wu06z1m2] {
    justify-content: center;
}

.view-weight-badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-score-weighted[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-score-raw[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.view-gap-value[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 11px;
    padding: 1px 5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-gap-positive[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-gap-negative[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    background: rgba(209, 52, 56, 0.12);
}

.view-gap-neutral[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Comments row below each question */
.view-comp-comments-row[b-d7wu06z1m2] {
    padding: 4px 10px 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-comment-block[b-d7wu06z1m2] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.view-comment-label[b-d7wu06z1m2] {
    flex-shrink: 0;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 80px;
}

.view-comment-label i[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1);
}

.view-comment-text[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

/* ========================================
   VIEW SIDEBAR — MANAGER DETAILS GRID
   ======================================== */
.view-details-grid[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.view-detail-card[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.view-detail-card-full[b-d7wu06z1m2] {
    grid-column: 1 / -1;
}

.view-detail-header[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-detail-header i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
}

.view-detail-body[b-d7wu06z1m2] {
    padding: 10px 12px;
}

.view-detail-text[b-d7wu06z1m2] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.view-action-badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-list[b-d7wu06z1m2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.view-tag[b-d7wu06z1m2] {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-strength[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-tag-development[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
}

/* ========================================
   SIDEBAR PRINT BUTTON
   ======================================== */
.sidebar-header-actions[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-print-btn[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.sidebar-print-header[b-d7wu06z1m2],
.sidebar-print-footer[b-d7wu06z1m2] {
    display: none;
}

/* Arabic question text */
.q-text-arabic[b-d7wu06z1m2] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ========================================
   SELF-RESULT BADGE STYLES (distinguished from manager result)
   ======================================== */
.badge-self-success[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
    border: 1px dashed var(--BEC-colorPaletteGreenForeground2);
}

.badge-self-primary[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    border: 1px dashed var(--BEC-colorBrandForeground1);
}

.badge-self-warning[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    border: 1px dashed var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-self-danger[b-d7wu06z1m2] {
    background: rgba(209, 52, 56, 0.12);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px dashed var(--BEC-colorPaletteRedForeground1);
}

.badge-self-secondary[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px dashed var(--BEC-colorNeutralForeground3);
}

/* ========================================
   VIEW LOADING CONTAINER
   ======================================== */
.view-loading-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.view-loading-container .spinner[b-d7wu06z1m2] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-d7wu06z1m2 0.8s linear infinite;
}

.view-loading-container p[b-d7wu06z1m2] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   SCORE SUMMARY GRID (Section 2)
   ======================================== */
.score-summary-grid[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.score-summary-card[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.score-card-manager[b-d7wu06z1m2] {
    border-left: 3px solid var(--BEC-colorBrandForeground1);
}

.score-card-self[b-d7wu06z1m2] {
    border-left: 3px solid #0e7c7b;
}

.score-card-gap[b-d7wu06z1m2] {
    border-left: 3px solid var(--BEC-colorNeutralForeground3);
}

.score-card-label[b-d7wu06z1m2] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.score-card-value[b-d7wu06z1m2] {
    font-size: 14px;
}

.score-card-badge[b-d7wu06z1m2] {
    margin-top: 2px;
}

.score-gap-display[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightBold);
    font-size: 16px;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.score-gap-positive[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.score-gap-negative[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    background: rgba(209, 52, 56, 0.12);
}

.score-gap-neutral[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3);
    background: var(--BEC-colorNeutralBackground4);
}

/* ========================================
   DETAILED SCORES TABLE (Section 3)
   ======================================== */
.detail-category-block[b-d7wu06z1m2] {
    margin-bottom: 12px;
}

.detail-category-header[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    padding: 6px 10px;
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0 0;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-bottom: none;
}

.detail-scores-table[b-d7wu06z1m2] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 0 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall);
    overflow: hidden;
    font-size: 11px;
}

.detail-scores-header[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorBrandBackground);
    padding: 6px 8px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-scores-row[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    align-items: center;
}

.detail-scores-row:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.detail-scores-subtotal[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    padding: 5px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    font-weight: var(--BEC-fontWeightSemibold);
}

.detail-grand-totals[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    padding: 8px;
    background: var(--BEC-colorBrandBackground2);
    border: 2px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 8px;
    font-weight: var(--BEC-fontWeightBold);
    font-size: 12px;
}

.detail-col[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.detail-col-criteria[b-d7wu06z1m2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 6px;
}

.detail-col-weight[b-d7wu06z1m2],
.detail-col-max[b-d7wu06z1m2],
.detail-col-self[b-d7wu06z1m2],
.detail-col-mgr[b-d7wu06z1m2],
.detail-col-gap[b-d7wu06z1m2] {
    justify-content: center;
    text-align: center;
}

/* ========================================
   FEEDBACK SECTION (Section 4)
   ======================================== */
.feedback-item[b-d7wu06z1m2] {
    padding: 8px;
    margin-bottom: 8px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.feedback-question[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

/* ========================================
   STAGE HISTORY TIMELINE (Section 7)
   ======================================== */
.stage-history-timeline[b-d7wu06z1m2] {
    position: relative;
    padding-left: 20px;
}

.stage-history-timeline[b-d7wu06z1m2]::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-entry[b-d7wu06z1m2] {
    position: relative;
    padding-bottom: 16px;
    padding-left: 12px;
}

.timeline-entry:last-child[b-d7wu06z1m2] {
    padding-bottom: 0;
}

.timeline-dot[b-d7wu06z1m2] {
    position: absolute;
    left: -17px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorBrandForeground1);
    border: 2px solid var(--BEC-colorNeutralBackground1);
}

.timeline-content[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-stages[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.timeline-arrow[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-meta[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-date[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
}

.timeline-reason[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.timeline-notes[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.timeline-changed-by[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.timeline-changed-by i[b-d7wu06z1m2] {
    font-size: 10px;
}

.pending-approval-banner[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--BEC-colorPaletteYellowBackground2) 30%, transparent);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.pending-approval-banner i[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

.pending-review-banner[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--BEC-colorBrandBackground2) 20%, transparent);
    border: 1px solid var(--BEC-colorBrandStroke1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.pending-review-banner i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   PRINT EMPLOYEE INFO
   ======================================== */
.print-employee-info[b-d7wu06z1m2] {
    display: none;
}

/* ========================================
   ENHANCED PRINT STYLES — @media print
   ======================================== */
@media print {
    /* HIDE the entire background page — only the sidebar prints */
    .erp-page-container[b-d7wu06z1m2] {
        display: none !important;
    }

    /* Show the sidebar print header and footer */
    .sidebar-print-header[b-d7wu06z1m2] {
        display: block !important;
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-employee-info[b-d7wu06z1m2] {
        display: block !important;
        font-size: 14px;
        font-weight: 500;
        color: #444;
        margin-top: 4px;
    }

    .sidebar-print-footer[b-d7wu06z1m2] {
        display: block !important;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-company-name[b-d7wu06z1m2] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-d7wu06z1m2] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-copyright[b-d7wu06z1m2] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-d7wu06z1m2] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Hide interactive elements */
    .sidebar-print-btn[b-d7wu06z1m2],
    .sidebar-close-btn[b-d7wu06z1m2],
    .sidebar-header-actions[b-d7wu06z1m2],
    .sidebar-footer[b-d7wu06z1m2],
    .view-loading-container[b-d7wu06z1m2] {
        display: none !important;
    }

    /* Make sidebar fill the page for printing */
    [b-d7wu06z1m2] .e-sidebar {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Hide the sidebar overlay */
    [b-d7wu06z1m2] .e-sidebar-overlay,
    [b-d7wu06z1m2] .e-overlay {
        display: none !important;
    }

    .sidebar-content[b-d7wu06z1m2] {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .sidebar-step-content[b-d7wu06z1m2] {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

    .sidebar-header[b-d7wu06z1m2] {
        border-bottom: none;
        padding: 8px 0;
    }

    .sidebar-title[b-d7wu06z1m2] {
        display: none !important;
    }

    /* Clean printing colors */
    *[b-d7wu06z1m2] {
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .form-value[b-d7wu06z1m2] {
        background: #f8f8f8 !important;
        border-color: #ddd !important;
    }

    /* Score Summary prominent at top */
    .score-summary-grid[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .score-summary-card[b-d7wu06z1m2] {
        border: 1px solid #ddd !important;
        background: #f9f9f9 !important;
    }

    /* Detailed scores table */
    .detail-category-block[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .detail-category-header[b-d7wu06z1m2] {
        background: #e8e8e8 !important;
        color: #333 !important;
        border-color: #ccc !important;
    }

    .detail-scores-header[b-d7wu06z1m2] {
        background: #eee !important;
    }

    .detail-grand-totals[b-d7wu06z1m2] {
        background: #e8e8e8 !important;
        border-color: #999 !important;
    }

    /* Let form sections flow naturally with page breaks */
    .form-section[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    /* Badges preserve colors */
    .badge[b-d7wu06z1m2] {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        border: 1px solid #999 !important;
    }

    /* Stage history timeline */
    .stage-history-timeline[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .timeline-dot[b-d7wu06z1m2] {
        background: #333 !important;
    }

    .stage-history-timeline[b-d7wu06z1m2]::before {
        background: #ccc !important;
    }

    /* View details grid */
    .view-details-grid[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .view-detail-card[b-d7wu06z1m2] {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    /* Gap colors */
    .view-gap-positive[b-d7wu06z1m2],
    .score-gap-positive[b-d7wu06z1m2] {
        color: #107c10 !important;
        background: #e8f5e8 !important;
    }

    .view-gap-negative[b-d7wu06z1m2],
    .score-gap-negative[b-d7wu06z1m2] {
        color: #d13438 !important;
        background: #fde8e8 !important;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;

        @bottom-center {
            content: counter(page) " / " counter(pages);
            font-size: 10px;
            color: #666;
        }
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/FillFormevaluation/FillFormevaluation.razor.rz.scp.css */
/* ========================================
   FILL EVALUATION FORM PAGE - COMPACT LAYOUT
   100% Identical Header/Toolbar to All Evaluations
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Fixed height to enable internal scrolling
   ======================================== */
.erp-page-container[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--BEC-dashboard-header-height) - 16px);
    max-height: calc(100vh - var(--BEC-dashboard-header-height) - 16px);
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - WITH EMPLOYEE INFO
   STICKY: Stays at top when scrolling
   ======================================== */
.erp-page-header[b-jv58okxham] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
    flex-shrink: 0;
}

.header-left[b-jv58okxham] {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Employee Info Header (Horizontal Layout) */
.employee-info-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-item-header[b-jv58okxham] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.info-item-header label[b-jv58okxham] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item-header span[b-jv58okxham] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.header-divider[b-jv58okxham] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.page-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jv58okxham] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jv58okxham] {
    transform: scale(0.98);
}

.header-right[b-jv58okxham] {
    flex-shrink: 0;
}

/* ========================================
   PAGE CONTENT - SCROLLABLE AREA
   This is where questions scroll vertically
   NO TOP PADDING - to eliminate gap between toolbar and progress bar
   ======================================== */
.erp-page-content[b-jv58okxham] {
    flex: 1;
    padding: 0 20px 30px 20px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke1) var(--BEC-colorNeutralBackground2);
}

/* Custom scrollbar for webkit browsers */
.erp-page-content[b-jv58okxham]::-webkit-scrollbar {
    width: 8px;
}

.erp-page-content[b-jv58okxham]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 4px;
}

.erp-page-content[b-jv58okxham]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.erp-page-content[b-jv58okxham]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LISTING MODE OVERRIDES
   ======================================== */
.listing-mode .erp-page-content[b-jv58okxham] {
    padding: 10px 20px 20px 20px;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   STATS CONTAINER (Listing Mode Header)
   ======================================== */
.stats-container[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jv58okxham] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jv58okxham] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jv58okxham] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.stat-pending[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2) !important;
}

.stat-submitted[b-jv58okxham] {
    color: rgba(0, 128, 128, 1) !important;
}

.stat-completed[b-jv58okxham] {
    color: #006400 !important;
}

/* ========================================
   FILTER BAR
   ======================================== */
.filter-bar[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.filter-group[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label[b-jv58okxham] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

[b-jv58okxham] .filter-dropdown.e-input-group,
[b-jv58okxham] .filter-dropdown .e-input-group {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jv58okxham] .filter-dropdown .e-input {
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.filter-actions[b-jv58okxham] {
    margin-left: auto;
}

.filter-clear-btn[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-clear-btn:hover[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.filter-clear-btn i[b-jv58okxham] {
    font-size: 10px;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to All Evaluations
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT)
   STICKY: Stays below header when scrolling */
[b-jv58okxham] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jv58okxham] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* Search textbox in toolbar */
[b-jv58okxham] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jv58okxham] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jv58okxham] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING — ROUNDED CORNERS & SELECTED ROW
   ======================================== */
[b-jv58okxham] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

[b-jv58okxham] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-jv58okxham] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

[b-jv58okxham] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jv58okxham] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-jv58okxham] .e-grid .e-row {
    height: 32px !important;
}

[b-jv58okxham] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-jv58okxham] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting */
[b-jv58okxham] .e-grid .e-row.e-selectionbackground,
[b-jv58okxham] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jv58okxham] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jv58okxham] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

[b-jv58okxham] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   CELL TEMPLATES
   ======================================== */
.cell-stacked[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-name[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    line-height: 1.2;
}

.cell-code[b-jv58okxham] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.2;
}

.cell-inline[b-jv58okxham] {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1);
}

.cell-version[b-jv58okxham] {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    vertical-align: middle;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-jv58okxham] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-jv58okxham] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-info[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-submitted[b-jv58okxham] {
    background: rgba(0, 128, 128, 0.12);
    color: #008080;
}

.badge-completed[b-jv58okxham] {
    background: rgba(0, 100, 0, 0.12);
    color: #006400;
}

.badge-danger[b-jv58okxham] {
    background: rgba(209, 52, 56, 0.12);
    color: #d13438;
}

/* ========================================
   ACTION BUTTONS (Listing Mode Grid)
   ======================================== */
.btn-action[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    background: transparent;
}

.btn-action i[b-jv58okxham] {
    font-size: 10px;
}

.btn-action-fill[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-fill:hover[b-jv58okxham] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

.btn-action-view[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-view:hover[b-jv58okxham] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

.btn-action-view-completed[b-jv58okxham] {
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.btn-action-view-completed:hover[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: #fff;
}

.action-group[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.approval-status-text[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
}

/* ========================================
   APPROVAL STATUS CELL (Listing Mode)
   ======================================== */
.approval-status-cell[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
    cursor: default;
    padding: 2px 0;
}

.approval-step[b-jv58okxham] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-approver[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-person-icon[b-jv58okxham] {
    flex-shrink: 0;
    font-size: 9px;
    color: var(--BEC-colorBrandForeground2);
}

.due-date-cell[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.overdue-badge[b-jv58okxham] {
    margin-left: 4px;
    animation: pulse-overdue-b-jv58okxham 2s ease-in-out infinite;
}

@keyframes pulse-overdue-b-jv58okxham {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-jv58okxham] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jv58okxham 1s linear infinite;
}

@keyframes spin-b-jv58okxham {
    to { transform: rotate(360deg); }
}

.loading-container p[b-jv58okxham] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-jv58okxham] {
    font-size: 48px;
}

.error-container p[b-jv58okxham] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   COMPACT STATS (Form Mode — Above Progress Bar)
   ======================================== */
.compact-stats[b-jv58okxham] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 24px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    flex-shrink: 0;
}

.compact-stat[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightMedium);
}

.stat-separator[b-jv58okxham] {
    color: var(--BEC-colorNeutralStroke2);
    font-size: 8px;
}

.compact-stat-score[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   PROGRESS BAR (Form Mode)
   ======================================== */
.progress-container[b-jv58okxham] {
    padding: 0 24px 8px 24px;
    flex-shrink: 0;
}

.progress-bar[b-jv58okxham] {
    height: 4px;
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-jv58okxham] {
    height: 100%;
    background: var(--BEC-colorBrandBackground);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ========================================
   WORKFLOW APPROVAL CHAIN (Form Mode)
   ======================================== */
.workflow-chain[b-jv58okxham] {
    margin: 8px 24px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    flex-shrink: 0;
}

.workflow-chain-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.workflow-chain-header i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

.workflow-steps[b-jv58okxham] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.workflow-step[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    position: relative;
}

.workflow-step.step-completed[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenBackground2);
}

.workflow-step.step-current[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
}

.workflow-step.step-pending[b-jv58okxham] {
    background: transparent;
    opacity: 0.6;
}

.workflow-step.step-rejected[b-jv58okxham] {
    background: rgba(209, 52, 56, 0.08);
}

.step-icon-wrapper[b-jv58okxham] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.step-completed .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: #fff;
}

.step-current .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

.step-pending .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
}

.step-rejected .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorPaletteRedForeground1);
    color: #fff;
}

.step-info[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.step-name[b-jv58okxham] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.step-user[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2);
}

.step-date[b-jv58okxham] {
    font-size: 9px;
    color: var(--BEC-colorNeutralForeground3);
}

.step-date.pending[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-style: italic;
}

.step-connector[b-jv58okxham] {
    width: 24px;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 4px;
    align-self: center;
}

/* ========================================
   QUESTIONS LIST (Form Mode)
   ======================================== */
.questions-list[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}

.category-tile[b-jv58okxham] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-left: 3px solid var(--BEC-colorBrandBackground);
    margin-top: 12px;
    margin-bottom: 4px;
    border-radius: 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0;
}

.category-name[b-jv58okxham] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.category-meta[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.question-row[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    transition: background 0.15s ease;
}

.question-row:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.question-row.answered[b-jv58okxham] {
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground2);
}

.question-row.unanswered[b-jv58okxham] {
    border-left: 3px solid var(--BEC-colorNeutralStroke2);
}

.q-number[b-jv58okxham] {
    min-width: 32px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

.q-text[b-jv58okxham] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.q-meta[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Integrated two-tone pill badge */
.scale-badge-wrap[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.score-pill[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    height: 20px;
    line-height: 20px;
}

.score-pill .normal-part[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground3, #e8eaed);
    color: var(--BEC-colorNeutralForeground2, #4a4f5e);
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.score-pill .pill-divider[b-jv58okxham] {
    width: 1px;
    height: 100%;
    background: var(--BEC-colorNeutralStroke2, #d0d3da);
}

.score-pill .over-part[b-jv58okxham] {
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
    color: #7c3aed;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3px;
}

.score-pill .over-part .star[b-jv58okxham] {
    color: #d97706;
    font-size: 9px;
}

/* Info icon with hover tooltip */
.info-icon[b-jv58okxham] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3, #8a8fa0);
    cursor: help;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.info-tooltip[b-jv58okxham] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #1a1a2e);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d4d7de);
    border-radius: var(--BEC-borderRadiusMedium, 6px);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.info-icon:hover .info-tooltip[b-jv58okxham],
.info-icon:focus .info-tooltip[b-jv58okxham] {
    visibility: visible;
    opacity: 1;
}

.q-input[b-jv58okxham] {
    flex-shrink: 0;
}

[b-jv58okxham] .score-input-compact.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 28px !important;
}

[b-jv58okxham] .score-input-compact .e-input {
    font-size: 12px !important;
    text-align: center !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Employee Self-Score (read-only reference for manager) */
.q-self-score[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px 8px;
    background: rgba(0, 128, 128, 0.08);
    border: 1px solid rgba(0, 128, 128, 0.2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
}

.self-score-label[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightRegular);
}

.self-score-value[b-jv58okxham] {
    color: #0e7c7b;
    font-weight: var(--BEC-fontWeightSemibold);
    min-width: 20px;
    text-align: center;
}

/* Question Item Wrapper */
.question-item[b-jv58okxham] {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.question-item .question-row[b-jv58okxham] {
    border-bottom: none;
}

/* ========================================
   INLINE COMPACT COMMENT STRIP
   ======================================== */

/* 💬 Comment toggle button */
.comment-toggle[b-jv58okxham] {
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: all 0.15s ease;
    position: relative;
}

.comment-toggle:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-colorBrandForeground1);
}

.comment-toggle.has-comments[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.comment-toggle.has-comments[b-jv58okxham]::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    background: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
}

.comment-toggle.active[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Comment strip — hidden by default */
.comment-strip[b-jv58okxham] {
    display: none;
    padding: 0 16px 10px 16px;
    animation: slideDown-b-jv58okxham 0.2s ease;
}

.comment-strip.open[b-jv58okxham] {
    display: block;
}

@keyframes slideDown-b-jv58okxham {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.comment-strip-inner[b-jv58okxham] {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.comment-col[b-jv58okxham] {
    flex: 1;
    min-width: 0;
}

.comment-col-label[b-jv58okxham] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.comment-col-label.emp[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground3);
}

.comment-col-label.mgr[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.emp-comment[b-jv58okxham] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.4;
    font-style: italic;
    padding: 6px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    min-height: 32px;
}

.emp-comment.empty[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.mgr-comment-input[b-jv58okxham] {
    width: 100%;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
    padding: 6px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    resize: none;
    min-height: 32px;
    font-family: inherit;
}

.mgr-comment-input:focus[b-jv58okxham] {
    outline: none;
    border-color: var(--BEC-colorBrandForeground1);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}

.comment-divider[b-jv58okxham] {
    width: 1px;
    background: var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
}

/* Employee Self-Score stat in compact bar */
.compact-stat-self-score[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: #0e7c7b;
}

/* ========================================
   STRENGTHS & WEAKNESSES SECTION (Form Mode)
   ======================================== */
.sw-section[b-jv58okxham] {
    margin-top: 16px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.sw-section-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.sw-section-title-row[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sw-section-title-row i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sw-title-text[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
}

.sw-hint[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.sw-category[b-jv58okxham] {
    padding: 12px 16px;
}

.sw-category + .sw-category[b-jv58okxham] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.sw-category-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.sw-category-header.strengths[b-jv58okxham] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sw-category-header.strengths i[b-jv58okxham] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sw-category-header.weaknesses[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sw-category-header.weaknesses i[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sw-badge[b-jv58okxham] {
    font-size: 9px;
    padding: 1px 6px;
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-weight: var(--BEC-fontWeightSemibold);
}

.sw-chips-container[b-jv58okxham] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sw-chip[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sw-chip:hover:not(.disabled)[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.sw-chip.selected[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.sw-chip.disabled[b-jv58okxham] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sw-chip-code[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 10px;
}

.sw-chip.selected .sw-chip-code[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sw-chip-text[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground1);
}

.sw-chip.selected .sw-chip-text[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sw-chip-check[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 10px;
}

/* ========================================
   EVALUATOR FEEDBACK SECTION (Form Mode)
   ======================================== */
.evaluator-feedback-section[b-jv58okxham] {
    margin-top: 16px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.feedback-section-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.feedback-section-header i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.feedback-field[b-jv58okxham] {
    padding: 12px 16px;
}

.feedback-field + .feedback-field[b-jv58okxham] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.feedback-label[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.feedback-label i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

[b-jv58okxham] .feedback-input.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jv58okxham] .feedback-input .e-input {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.feedback-char-count[b-jv58okxham] {
    text-align: right;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

[b-jv58okxham] .feedback-dropdown.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 30px !important;
}

[b-jv58okxham] .feedback-dropdown .e-input {
    font-size: 12px !important;
}

/* ========================================
   EMPLOYEE ACKNOWLEDGMENT SECTION (Read-Only)
   ======================================== */
.acknowledgment-section[b-jv58okxham] {
    margin-top: 16px;
    border: 1px solid rgba(135, 100, 184, 0.3);
    border-left: 4px solid #8764B8;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.acknowledgment-section-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(135, 100, 184, 0.08);
    border-bottom: 1px solid rgba(135, 100, 184, 0.15);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: #6B4FA0;
}

.acknowledgment-section-header i[b-jv58okxham] {
    color: #8764B8;
}

.acknowledgment-date-badge[b-jv58okxham] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground3);
}

.acknowledgment-date-badge i[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.acknowledgment-content[b-jv58okxham] {
    padding: 12px 16px;
}

.acknowledgment-quote[b-jv58okxham] {
    margin: 0;
    padding: 10px 14px;
    background: rgba(135, 100, 184, 0.04);
    border-left: 3px solid #8764B8;
    border-radius: 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
    font-style: italic;
    white-space: pre-wrap;
}

/* ========================================
   NO QUESTIONS STATE
   ======================================== */
.no-questions[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.no-questions i[b-jv58okxham] {
    font-size: 48px;
}

.no-questions p[b-jv58okxham] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   CERTIFICATION DIALOG (Submit)
   ======================================== */
[b-jv58okxham] .certification-dialog .e-dlg-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jv58okxham] .certification-dialog .e-dlg-header i {
    color: var(--BEC-colorBrandForeground1) !important;
}

.certification-content[b-jv58okxham] {
    padding: 0;
}

.certification-summary[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.summary-row[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.summary-label[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    min-width: 90px;
}

.summary-value[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground1);
}

.certification-warning[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.certification-warning i[b-jv58okxham] {
    font-size: 16px;
    flex-shrink: 0;
}

.certification-statement[b-jv58okxham] {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border-left: 3px solid var(--BEC-colorBrandBackground);
    margin-bottom: 16px;
}

.certification-icon[b-jv58okxham] {
    flex-shrink: 0;
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.certification-text[b-jv58okxham] {
    font-size: 12px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.certification-checkbox[b-jv58okxham] {
    padding: 8px 0;
}

[b-jv58okxham] .certification-check .e-label {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   APPROVE / REJECT DIALOGS
   ======================================== */
.approve-dialog-content p[b-jv58okxham],
.reject-dialog-content p[b-jv58okxham] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 16px;
}

.approval-summary[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.summary-item[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.summary-item label[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    min-width: 70px;
}

.summary-item span[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground1);
}

.warning-message[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 12px;
    font-size: 12px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.warning-message i[b-jv58okxham] {
    font-size: 14px;
    flex-shrink: 0;
}

.form-group[b-jv58okxham] {
    margin-top: 16px;
}

.form-label[b-jv58okxham] {
    display: block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-jv58okxham]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR / HELP WIZARD
   ======================================== */
.sidebar-content[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-header[b-jv58okxham] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-jv58okxham] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.sidebar-close-btn i[b-jv58okxham] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-step-content[b-jv58okxham] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px;
    position: relative;
}

.wizard-step[b-jv58okxham] {
    max-width: 100%;
}

.step-icon[b-jv58okxham] {
    text-align: center;
    margin-bottom: 16px;
}

.sidebar-step-content .step-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-jv58okxham] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

.form-section[b-jv58okxham] {
    margin-bottom: 24px;
}

.section-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
}

.section-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sidebar-footer[b-jv58okxham] {
    position: sticky;
    bottom: 0;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    z-index: 50;
}

.footer-buttons[b-jv58okxham] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── HR Proxy Banner ── */
.proxy-eval-banner[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--BEC-colorBrandBackground1, #eff6ff);
    border-left: 4px solid var(--BEC-colorBrandStroke1, #3b82f6);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.proxy-eval-banner i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1, #2563eb);
    font-size: 16px;
    flex-shrink: 0;
}

/* ── Returned for Correction Banner ── */
.returned-banner[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.returned-banner-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 13px;
}

.returned-banner-header i[b-jv58okxham] {
    font-size: 15px;
    flex-shrink: 0;
}

.returned-banner-reason[b-jv58okxham] {
    font-style: italic;
    color: #a04000;
    padding-left: 23px;
    font-size: 12.5px;
}

.returned-banner-instruction[b-jv58okxham] {
    padding-left: 23px;
    color: var(--BEC-colorNeutralForeground2, #555);
    font-size: 12.5px;
}

/* Badge styles for listing mode */
.badge-returned[b-jv58okxham] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold, 700);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    background: rgba(230, 126, 34, 0.15);
    color: #d35400;
}

/* Revise & Resubmit button in listing mode */
.btn-action-returned[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #d35400;
    background: transparent;
    white-space: nowrap;
    color: #d35400;
}

.btn-action-returned:hover[b-jv58okxham] {
    background: #d35400;
    color: #fff;
}

/* ============================================
   RATING SCALE POPUP TABLE
   ============================================ */
[b-jv58okxham] .rating-scale-dialog {
    max-height: 92vh !important;
}

[b-jv58okxham] .rating-scale-dialog .e-dlg-header-content {
    background: #003d6b;
    padding: 10px 16px;
}

[b-jv58okxham] .rating-scale-dialog .e-dlg-header {
    color: white !important;
    font-size: 14px;
}

[b-jv58okxham] .rating-scale-dialog .e-icon-dlg-close {
    color: white;
}

[b-jv58okxham] .rating-scale-dialog .e-dlg-content {
    padding: 0;
    overflow: hidden;
}

.rating-scale-table-container[b-jv58okxham] {
    overflow: hidden;
}

.rating-scale-table[b-jv58okxham] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.35;
    table-layout: fixed;
}

.rating-scale-table thead tr[b-jv58okxham] {
    background: #003d6b;
    color: white;
}

.rating-scale-table th[b-jv58okxham] {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}

.rating-scale-table td[b-jv58okxham] {
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
    color: #333;
    word-wrap: break-word;
}

.rating-rate[b-jv58okxham] {
    font-weight: 600;
    white-space: nowrap;
    color: #003d6b;
    font-size: 11.5px;
}

.rating-group-cell[b-jv58okxham] {
    text-align: center;
    vertical-align: middle;
    border-right: 3px solid;
    padding: 6px !important;
    width: 70px;
}

.rating-group-label[b-jv58okxham] {
    font-size: 11px;
    line-height: 1.3;
    color: #555;
}

.rating-group-high[b-jv58okxham] {
    border-right-color: #2e7d32;
    background: #e8f5e9;
}

.rating-group-normal[b-jv58okxham] {
    border-right-color: #1565c0;
    background: #e3f2fd;
}

.rating-group-improve[b-jv58okxham] {
    border-right-color: #e65100;
    background: #fff3e0;
}

.rating-row.rating-outstanding td:not(.rating-group-cell)[b-jv58okxham] { background: #f1f8e9; }
.rating-row.rating-exceed td:not(.rating-group-cell)[b-jv58okxham] { background: #f1f8e9; }
.rating-row.rating-meet td:not(.rating-group-cell)[b-jv58okxham] { background: #e3f2fd; }
.rating-row.rating-partial td:not(.rating-group-cell)[b-jv58okxham] { background: #fff8e1; }
.rating-row.rating-notmeet td:not(.rating-group-cell)[b-jv58okxham] { background: #fce4ec; }

[b-jv58okxham] .rating-scale-dialog .e-footer-content {
    padding: 8px 16px;
    border-top: 1px solid #e0e0e0;
}

/* ============================================
   RECOMMENDED ACTIONS DROPDOWN WITH HINTS
   ============================================ */
.recommended-action-item[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.recommended-action-name[b-jv58okxham] {
    font-weight: 600;
    font-size: 13px;
    color: #1a1a1a;
}

.recommended-action-hint[b-jv58okxham] {
    font-size: 11.5px;
    color: #666;
    font-style: italic;
    line-height: 1.4;
}

[b-jv58okxham] .recommended-action-dropdown .e-dropdownbase .e-list-item {
    height: auto !important;
    line-height: normal !important;
    padding: 6px 12px;
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.print-only-header[b-jv58okxham],
.print-only-footer[b-jv58okxham] {
    display: none;
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {
    /* Show print header and footer */
    .print-only-header[b-jv58okxham],
    .print-only-footer[b-jv58okxham] {
        display: block !important;
    }

    .print-only-header[b-jv58okxham] {
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-company-name[b-jv58okxham] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-jv58okxham] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-meta-grid[b-jv58okxham] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 24px;
        text-align: left;
        margin-top: 10px;
        font-size: 11px;
    }

    .print-meta-label[b-jv58okxham] {
        font-weight: 700;
        color: #1a1a2e;
    }

    .print-only-footer[b-jv58okxham] {
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-footer-line[b-jv58okxham] {
        display: none;
    }

    .print-copyright[b-jv58okxham] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-jv58okxham] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Remove fixed height and overflow so full content prints */
    .erp-page-container[b-jv58okxham] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .erp-page-content[b-jv58okxham] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide non-printable UI: toolbar, filter bar, header buttons, dialogs, sidebar */
    [b-jv58okxham] .e-toolbar,
    .filter-bar[b-jv58okxham],
    .header-right[b-jv58okxham],
    .help-icon-btn[b-jv58okxham],
    [b-jv58okxham] .e-dialog,
    [b-jv58okxham] .e-sidebar,
    [b-jv58okxham] .e-overlay,
    .listing-mode[b-jv58okxham],
    .proxy-eval-banner[b-jv58okxham],
    .workflow-chain[b-jv58okxham],
    .comment-toggle[b-jv58okxham],
    .btn-action[b-jv58okxham],
    .btn-action-fill[b-jv58okxham],
    .btn-action-view[b-jv58okxham] {
        display: none !important;
    }

    /* Ensure progress bar and stats print cleanly */
    .compact-stats[b-jv58okxham] {
        padding: 4px 0;
        font-size: 10px;
    }

    .progress-container[b-jv58okxham] {
        padding: 0 0 8px 0;
    }

    .progress-bar[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .progress-fill[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Category tiles */
    .category-tile[b-jv58okxham] {
        background: #f0f0f0 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        padding: 6px 12px;
        margin: 8px 0 4px 0;
        page-break-inside: avoid;
    }

    /* Question rows */
    .question-row[b-jv58okxham],
    .question-item[b-jv58okxham] {
        page-break-inside: avoid;
        padding: 4px 8px;
    }

    /* Score inputs: show as plain text */
    [b-jv58okxham] .e-numeric .e-input,
    [b-jv58okxham] .score-input-compact .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-weight: 600;
    }

    /* Textbox inputs: show as plain text */
    [b-jv58okxham] .e-textbox,
    [b-jv58okxham] .feedback-input .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Comment strips: expand all for printing */
    .comment-strip[b-jv58okxham] {
        max-height: none !important;
        overflow: visible !important;
    }

    .comment-strip.open[b-jv58okxham] {
        max-height: none !important;
    }

    /* Strengths & Development section */
    .sw-section[b-jv58okxham] {
        page-break-inside: avoid;
    }

    .sw-chip.selected[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        border: 1px solid #333 !important;
    }

    .sw-chip:not(.selected)[b-jv58okxham] {
        opacity: 0.4;
    }

    /* Evaluator feedback section */
    .evaluator-feedback-section[b-jv58okxham] {
        page-break-inside: avoid;
    }

    /* Badges: preserve colors */
    .badge[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* Arabic question text */
.q-text-arabic[b-jv58okxham] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/FillSelfAppraisal/FillSelfAppraisal.razor.rz.scp.css */
/* ========================================
   FILL SELF-APPRAISAL PAGE — COMPACT LAYOUT
   Mirrors FillFormevaluation single-line row design
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-gvjn9bbmhw] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--BEC-dashboard-header-height, 48px) - 16px);
    max-height: calc(100vh - var(--BEC-dashboard-header-height, 48px) - 16px);
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER — STICKY
   ======================================== */
.erp-page-header[b-gvjn9bbmhw] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    flex-shrink: 0;
}

.header-left[b-gvjn9bbmhw] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-gvjn9bbmhw] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Employee Info Header */
.employee-info-header[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.info-item-header[b-gvjn9bbmhw] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.info-item-header label[b-gvjn9bbmhw] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item-header span[b-gvjn9bbmhw] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.header-divider[b-gvjn9bbmhw] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* Badge */
.badge-selfappraisal[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* ========================================
   COMPACT STATS & PROGRESS BAR
   ======================================== */

/* ── Read-only banner ── */
.readonly-banner[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 24px 8px;
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.readonly-banner i[b-gvjn9bbmhw] {
    font-size: 14px;
}

.compact-stats[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 24px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    flex-shrink: 0;
}

.compact-stat[b-gvjn9bbmhw] {
    font-weight: var(--BEC-fontWeightMedium);
}

.compact-stat-score[b-gvjn9bbmhw] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.result-badge[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
    letter-spacing: 0.3px;
}

.stat-separator[b-gvjn9bbmhw] {
    color: var(--BEC-colorNeutralStroke2);
    font-size: 8px;
}

.progress-container[b-gvjn9bbmhw] {
    padding: 0 24px 8px 24px;
    flex-shrink: 0;
}

.progress-bar[b-gvjn9bbmhw] {
    height: 4px;
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-gvjn9bbmhw] {
    height: 100%;
    background: var(--BEC-colorBrandBackground);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ========================================
   PAGE CONTENT — SCROLLABLE
   ======================================== */
.erp-page-content[b-gvjn9bbmhw] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px 30px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke1) var(--BEC-colorNeutralBackground2);
}

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

.erp-page-content[b-gvjn9bbmhw]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 4px;
}

.erp-page-content[b-gvjn9bbmhw]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.erp-page-content[b-gvjn9bbmhw]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LOADING / ERROR / EMPTY STATES
   ======================================== */
.loading-container[b-gvjn9bbmhw],
.error-container[b-gvjn9bbmhw],
.empty-container[b-gvjn9bbmhw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

.spinner[b-gvjn9bbmhw] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-gvjn9bbmhw 1s linear infinite;
}

@keyframes spin-b-gvjn9bbmhw {
    to { transform: rotate(360deg); }
}

.loading-container p[b-gvjn9bbmhw] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.error-container i[b-gvjn9bbmhw] {
    font-size: 32px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.empty-container i[b-gvjn9bbmhw] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   TOOLBAR — Sticky below header
   ======================================== */
[b-gvjn9bbmhw] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    height: 32px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-gvjn9bbmhw] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   QUESTIONS LIST — Compact single-line rows
   Matches FillFormevaluation layout exactly
   ======================================== */
.questions-list[b-gvjn9bbmhw] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}

/* Category Tile — left-border accent */
.category-tile[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-left: 3px solid var(--BEC-colorBrandBackground);
    margin-top: 12px;
    margin-bottom: 4px;
    border-radius: 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0;
}

.category-name[b-gvjn9bbmhw] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.category-meta[b-gvjn9bbmhw] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Question Row — single-line, compact */
.question-row[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    transition: background 0.15s ease;
}

.question-row:hover[b-gvjn9bbmhw] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.question-row.answered[b-gvjn9bbmhw] {
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground2);
}

.question-row.unanswered[b-gvjn9bbmhw] {
    border-left: 3px solid var(--BEC-colorNeutralStroke2);
}

/* Question Number */
.q-number[b-gvjn9bbmhw] {
    min-width: 32px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

/* Question Text */
.q-text[b-gvjn9bbmhw] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

/* Score Range Meta */
.q-meta[b-gvjn9bbmhw] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Integrated two-tone pill badge */
.scale-badge-wrap[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.score-pill[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    height: 20px;
    line-height: 20px;
}

.score-pill .normal-part[b-gvjn9bbmhw] {
    background: var(--BEC-colorNeutralBackground3, #e8eaed);
    color: var(--BEC-colorNeutralForeground2, #4a4f5e);
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.score-pill .pill-divider[b-gvjn9bbmhw] {
    width: 1px;
    height: 100%;
    background: var(--BEC-colorNeutralStroke2, #d0d3da);
}

.score-pill .over-part[b-gvjn9bbmhw] {
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
    color: #7c3aed;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3px;
}

.score-pill .over-part .star[b-gvjn9bbmhw] {
    color: #d97706;
    font-size: 9px;
}

/* Info icon with hover tooltip */
.info-icon[b-gvjn9bbmhw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3, #8a8fa0);
    cursor: help;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.info-tooltip[b-gvjn9bbmhw] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #1a1a2e);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d4d7de);
    border-radius: var(--BEC-borderRadiusMedium, 6px);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.info-icon:hover .info-tooltip[b-gvjn9bbmhw],
.info-icon:focus .info-tooltip[b-gvjn9bbmhw] {
    visibility: visible;
    opacity: 1;
}

/* Score Input */
.q-input[b-gvjn9bbmhw] {
    flex-shrink: 0;
}

[b-gvjn9bbmhw] .score-input-compact.e-input-group,
[b-gvjn9bbmhw] .score-input-compact .e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 28px !important;
    max-height: 28px !important;
}

[b-gvjn9bbmhw] .score-input-compact .e-input {
    font-size: 12px !important;
    text-align: center !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    padding: 2px 4px !important;
}

/* Comment Input — auto-resize multiline */
.q-comment[b-gvjn9bbmhw] {
    flex-shrink: 0;
    width: 180px;
}

[b-gvjn9bbmhw] .comment-input-compact.e-input-group,
[b-gvjn9bbmhw] .comment-input-compact .e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 28px !important;
}

[b-gvjn9bbmhw] .comment-input-compact .e-input {
    font-size: 11px !important;
    padding: 4px 8px !important;
    line-height: 1.3 !important;
}

/* Auto-resize textarea: grows with content, shrinks when text removed */
[b-gvjn9bbmhw] .comment-auto-resize textarea.e-input {
    field-sizing: content;
    min-height: 28px;
    max-height: 120px;
    overflow-y: auto;
    resize: vertical;
}

/* ========================================
   NOTIFICATION DIALOG
   ======================================== */
[b-gvjn9bbmhw] .notification-dialog-warning .e-dlg-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablets / narrow screens */
@media (max-width: 1024px) {
    .question-row[b-gvjn9bbmhw] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .q-text[b-gvjn9bbmhw] {
        flex-basis: calc(100% - 44px);
        order: 1;
    }

    .q-number[b-gvjn9bbmhw] {
        order: 0;
    }

    .q-meta[b-gvjn9bbmhw] {
        order: 2;
        margin-left: 44px;
    }

    .q-input[b-gvjn9bbmhw] {
        order: 3;
    }

    .q-comment[b-gvjn9bbmhw] {
        order: 4;
        flex: 1;
        width: auto;
        min-width: 140px;
    }

    .employee-info-header[b-gvjn9bbmhw] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .erp-page-header[b-gvjn9bbmhw] {
        padding: 6px 12px;
    }

    .erp-page-content[b-gvjn9bbmhw] {
        padding: 0 8px 24px 8px;
    }

    .category-tile[b-gvjn9bbmhw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 12px;
    }

    .question-row[b-gvjn9bbmhw] {
        padding: 8px 8px;
    }

    .q-comment[b-gvjn9bbmhw] {
        width: 100%;
    }

    .compact-stats[b-gvjn9bbmhw] {
        padding: 4px 12px;
        font-size: 10px;
    }

    .progress-container[b-gvjn9bbmhw] {
        padding: 0 12px 6px 12px;
    }
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.print-only-header[b-gvjn9bbmhw],
.print-only-footer[b-gvjn9bbmhw] {
    display: none;
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {
    /* Show print header and footer */
    .print-only-header[b-gvjn9bbmhw],
    .print-only-footer[b-gvjn9bbmhw] {
        display: block !important;
    }

    .print-only-header[b-gvjn9bbmhw] {
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-company-name[b-gvjn9bbmhw] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-gvjn9bbmhw] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-meta-grid[b-gvjn9bbmhw] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 24px;
        text-align: left;
        margin-top: 10px;
        font-size: 11px;
    }

    .print-meta-label[b-gvjn9bbmhw] {
        font-weight: 700;
        color: #1a1a2e;
    }

    .print-only-footer[b-gvjn9bbmhw] {
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-copyright[b-gvjn9bbmhw] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-gvjn9bbmhw] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Remove fixed height and overflow so full content prints */
    .erp-page-container[b-gvjn9bbmhw] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .erp-page-content[b-gvjn9bbmhw] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide non-printable UI: toolbar, header buttons, dialogs */
    [b-gvjn9bbmhw] .e-toolbar,
    .header-right[b-gvjn9bbmhw],
    [b-gvjn9bbmhw] .e-dialog,
    [b-gvjn9bbmhw] .e-overlay,
    .readonly-banner[b-gvjn9bbmhw] {
        display: none !important;
    }

    /* Compact stats and progress print cleanly */
    .compact-stats[b-gvjn9bbmhw] {
        padding: 4px 0;
        font-size: 10px;
    }

    .progress-bar[b-gvjn9bbmhw] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .progress-fill[b-gvjn9bbmhw] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Category tiles */
    .category-tile[b-gvjn9bbmhw] {
        background: #f0f0f0 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        padding: 6px 12px;
        margin: 8px 0 4px 0;
        page-break-inside: avoid;
    }

    /* Question rows */
    .question-row[b-gvjn9bbmhw] {
        page-break-inside: avoid;
        padding: 4px 8px;
    }

    /* Score inputs: show as plain text */
    [b-gvjn9bbmhw] .e-numeric .e-input,
    [b-gvjn9bbmhw] .score-input-compact .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-weight: 600;
    }

    /* Textbox inputs: show as plain text */
    [b-gvjn9bbmhw] .e-textbox,
    [b-gvjn9bbmhw] .comment-input-compact .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Badges: preserve colors */
    .badge[b-gvjn9bbmhw] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* Arabic question text */
.q-text-arabic[b-gvjn9bbmhw] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .question-row[b-gvjn9bbmhw] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
    }

    .q-number[b-gvjn9bbmhw] {
        min-width: unset;
    }

    .q-text[b-gvjn9bbmhw] {
        flex: 1 1 100%;
        order: 1;
    }

    .q-text-arabic[b-gvjn9bbmhw] {
        order: 2;
    }

    .scale-badge-wrap[b-gvjn9bbmhw] {
        order: 3;
    }

    .q-meta[b-gvjn9bbmhw] {
        order: 4;
    }

    .q-input[b-gvjn9bbmhw] {
        order: 5;
        flex: 1 1 auto;
    }

    .q-comment[b-gvjn9bbmhw] {
        order: 6;
        flex: 1 1 100%;
    }

    .category-tile[b-gvjn9bbmhw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .info-tooltip[b-gvjn9bbmhw] {
        left: auto;
        right: 0;
        transform: none;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/HrProxyEvaluations/HrProxyEvaluations.razor.rz.scp.css */
/* ========================================
   HR PROXY EVALUATIONS — Card List Design
   Blue proxy accent, matching MySelfAppraisals layout
   ======================================== */

/* ── Page wrapper ── */
.proxy-page[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 24px 32px;
    overflow-y: auto;
}

/* ── Header ── */
.proxy-header[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    margin-bottom: 16px;
}

.proxy-header-left[b-bhidsc0e43] {
    flex: 1;
}

.proxy-header-right[b-bhidsc0e43] {
    flex-shrink: 0;
}

.proxy-title[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.proxy-title svg[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
}

/* ── Stats ── */
.proxy-stats[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.proxy-stat[b-bhidsc0e43] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.proxy-stat-value[b-bhidsc0e43] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.proxy-stat-label[b-bhidsc0e43] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.proxy-stat-divider[b-bhidsc0e43] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.proxy-stat-sa[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-stat-ack[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

/* ── Search bar ── */
.proxy-search-bar[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    margin-bottom: 16px;
}

.proxy-search-icon[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
}

.proxy-search-input[b-bhidsc0e43] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
}

.proxy-search-input[b-bhidsc0e43]::placeholder {
    color: var(--BEC-colorNeutralForeground3);
}

/* ── State containers (loading / error / empty) ── */
.proxy-state-container[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-state-container i[b-bhidsc0e43] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
}

.proxy-state-container.proxy-error i[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.proxy-state-container.proxy-empty svg[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-state-container h3[b-bhidsc0e43] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.proxy-state-container p[b-bhidsc0e43] {
    font-size: 14px;
    margin: 0;
}

.proxy-spinner[b-bhidsc0e43] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: proxy-spin-b-bhidsc0e43 0.8s linear infinite;
}

@keyframes proxy-spin-b-bhidsc0e43 {
    to { transform: rotate(360deg); }
}

/* ── List container ── */
.proxy-list-container[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── List item card ── */
.proxy-list-item[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow2);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.proxy-list-item:hover[b-bhidsc0e43] {
    box-shadow: 0 4px 16px rgba(0, 90, 180, 0.10), 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* ── Left accent bar ── */
.proxy-accent-bar[b-bhidsc0e43] {
    width: 5px;
    flex-shrink: 0;
    border-radius: var(--BEC-borderRadiusMedium) 0 0 var(--BEC-borderRadiusMedium);
}

.proxy-accent-sa[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-accent-ack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.proxy-accent-mr[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-accent-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.proxy-accent-pending[b-bhidsc0e43] {
    background: var(--BEC-colorBrandForeground1);
}

.proxy-accent-default[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralStroke2);
}

/* ── Item content area ── */
.proxy-item-content[b-bhidsc0e43] {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Top row: employee info + stage badge ── */
.proxy-item-top[b-bhidsc0e43] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.proxy-employee-group[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.proxy-employee-avatar[b-bhidsc0e43] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.proxy-title-group h3[b-bhidsc0e43] {
    font-size: 17px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.3;
}

.proxy-subtitle[b-bhidsc0e43] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

/* ── Stage icon + badge ── */
.proxy-stage-group[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proxy-stage-icon[b-bhidsc0e43] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proxy-stage-icon-sa[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-stage-icon-ack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueBackground2);
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.proxy-stage-icon-mr[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-stage-icon-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.proxy-stage-icon-pending[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.proxy-stage-icon-default[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-badge[b-bhidsc0e43] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    white-space: nowrap;
}

.proxy-badge-sa[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-badge-ack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueBackground2);
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.proxy-badge-mr[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-badge-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.proxy-badge-pending[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.proxy-badge-default[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Meta chips row ── */
.proxy-item-meta[b-bhidsc0e43] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.proxy-meta-chip[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-meta-chip svg[b-bhidsc0e43] {
    flex-shrink: 0;
    opacity: 0.5;
}

.proxy-meta-value[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.proxy-overdue-tag[b-bhidsc0e43] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ── Bottom row: proxy indicator + action ── */
.proxy-item-bottom[b-bhidsc0e43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.proxy-acting-as[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.proxy-acting-as svg[b-bhidsc0e43] {
    flex-shrink: 0;
}

/* ── Buttons ── */
.proxy-btn[b-bhidsc0e43] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.proxy-btn-primary[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.proxy-btn-primary:hover[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.proxy-btn-acknowledge[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.proxy-btn-acknowledge:hover[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.proxy-btn-outline[b-bhidsc0e43] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.proxy-btn-outline:hover[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
}

/* View Button */
.proxy-btn-view[b-bhidsc0e43] {
    background: transparent;
    border: 1px solid var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.proxy-btn-view:hover[b-bhidsc0e43] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

/* Action buttons container */
.proxy-action-buttons[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Manager Review stat color */
.proxy-stat-mr[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Completed stat color */
.proxy-stat-completed[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* Score highlight in meta chips */
.proxy-score-highlight[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

.proxy-score-max[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

/* Print button in header */
.proxy-print-btn[b-bhidsc0e43] {
    margin-left: 12px;
    padding: 4px 12px;
    font-size: 12px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.print-only-header[b-bhidsc0e43],
.print-only-footer[b-bhidsc0e43] {
    display: none;
}

/* Sidebar print elements hidden on screen */
.sidebar-print-header[b-bhidsc0e43],
.sidebar-print-footer[b-bhidsc0e43] {
    display: none;
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {

    /* ── PAGE PRINT MODE — print the card list view ── */
    .proxy-page.print-page-mode[b-bhidsc0e43] {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }

    /* Show print header and footer in page mode */
    .print-page-mode .print-only-header[b-bhidsc0e43],
    .print-page-mode .print-only-footer[b-bhidsc0e43] {
        display: block !important;
    }

    .print-page-mode .print-only-header[b-bhidsc0e43] {
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-page-mode .print-only-footer[b-bhidsc0e43] {
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    /* Hide interactive elements in page mode */
    .print-page-mode .proxy-print-btn[b-bhidsc0e43],
    .print-page-mode .proxy-search-bar[b-bhidsc0e43],
    .print-page-mode .proxy-action-buttons[b-bhidsc0e43] {
        display: none !important;
    }

    /* Card list items: avoid page breaks inside */
    .print-page-mode .proxy-list-item[b-bhidsc0e43] {
        page-break-inside: avoid;
        box-shadow: none !important;
    }

    /* Preserve accent bar colors */
    .print-page-mode .proxy-accent-bar[b-bhidsc0e43],
    .print-page-mode .proxy-badge[b-bhidsc0e43] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* ── SIDEBAR PRINT MODE — print the sidebar view panel ── */
    .proxy-page.print-sidebar-mode[b-bhidsc0e43] {
        display: none !important;
    }

    /* Show the sidebar print header and footer */
    .sidebar-print-header[b-bhidsc0e43] {
        display: block !important;
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .sidebar-print-footer[b-bhidsc0e43] {
        display: block !important;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-company-name[b-bhidsc0e43] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-bhidsc0e43] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-copyright[b-bhidsc0e43] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-bhidsc0e43] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Hide interactive elements in sidebar mode */
    .proxy-print-btn[b-bhidsc0e43],
    .sidebar-close-btn[b-bhidsc0e43],
    .sidebar-header-actions[b-bhidsc0e43],
    .sidebar-footer[b-bhidsc0e43] {
        display: none !important;
    }

    /* Make sidebar fill the page for printing */
    [b-bhidsc0e43] .e-sidebar {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Hide the sidebar overlay */
    [b-bhidsc0e43] .e-sidebar-overlay,
    [b-bhidsc0e43] .e-overlay {
        display: none !important;
    }

    .sidebar-content[b-bhidsc0e43] {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .sidebar-step-content[b-bhidsc0e43] {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .sidebar-header[b-bhidsc0e43] {
        border-bottom: none;
        padding: 8px 0;
    }

    /* Let form sections flow naturally */
    .form-section[b-bhidsc0e43] {
        page-break-inside: avoid;
    }

    /* Preserve colors */
    .badge[b-bhidsc0e43],
    .proxy-badge[b-bhidsc0e43] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* ========================================
   VIEW SIDEBAR
   ======================================== */
.sidebar-content[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-header[b-bhidsc0e43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-title[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
}

.sidebar-header-actions[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-close-btn[b-bhidsc0e43] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.15s ease;
}

.sidebar-close-btn:hover[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-step-content[b-bhidsc0e43] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px;
    position: relative;
}

.wizard-step[b-bhidsc0e43] {
    max-width: 100%;
}

.sidebar-footer[b-bhidsc0e43] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.footer-buttons[b-bhidsc0e43] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* ========================================
   FORM SECTIONS (View Panel)
   ======================================== */
.form-section[b-bhidsc0e43] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-bhidsc0e43] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-bhidsc0e43] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

/* ── Returned for Correction Banner ── */
.returned-banner[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 12px;
    border-radius: 0 var(--BEC-borderRadiusSmall, 2px) var(--BEC-borderRadiusSmall, 2px) 0;
}

.returned-banner-header[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 12.5px;
}

.returned-banner-header i[b-bhidsc0e43] {
    font-size: 14px;
    flex-shrink: 0;
}

.returned-banner-reason[b-bhidsc0e43] {
    font-style: italic;
    color: #a04000;
    padding-left: 22px;
    font-size: 12px;
}

.form-group[b-bhidsc0e43] {
    margin-bottom: 20px;
}

.form-label[b-bhidsc0e43] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-value[b-bhidsc0e43] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Badges in view panel */
.badge[b-bhidsc0e43] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 1.4;
}

.badge-selfappraisal[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-managerreview[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-inactive[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-info[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-pendingack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueBackground2);
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.badge-warning[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-submitted[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-bhidsc0e43] {
    background: rgba(16, 124, 16, 0.1);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-danger[b-bhidsc0e43] {
    background: rgba(209, 52, 56, 0.1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.badge-secondary[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-primary[b-bhidsc0e43] {
    background: rgba(0, 120, 212, 0.1);
    color: var(--BEC-colorBrandForeground1);
}

.score-value[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.score-max[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   SCORE COMPARISON TABLE
   ======================================== */
.view-loading-comparison[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
}

.view-loading-comparison i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.view-comp-table[b-bhidsc0e43] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    font-size: 12px;
}

.view-comp-header[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorBrandBackground);
    padding: 8px 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.view-comp-row[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    align-items: center;
    transition: background 0.15s ease;
}

.view-comp-row:hover[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.view-comp-totals[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-col[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.view-comp-question[b-bhidsc0e43] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-weight[b-bhidsc0e43] {
    justify-content: center;
}

.view-comp-score[b-bhidsc0e43] {
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    text-align: center;
}

.view-comp-gap[b-bhidsc0e43] {
    justify-content: center;
}

.view-weight-badge[b-bhidsc0e43] {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-score-weighted[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-score-raw[b-bhidsc0e43] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.view-gap-value[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 11px;
    padding: 1px 5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-gap-positive[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-gap-negative[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteRedForeground1);
    background: rgba(209, 52, 56, 0.12);
}

.view-gap-neutral[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Comments row */
.view-comp-comments-row[b-bhidsc0e43] {
    padding: 4px 10px 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-comment-block[b-bhidsc0e43] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.view-comment-label[b-bhidsc0e43] {
    flex-shrink: 0;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 80px;
}

.view-comment-label i[b-bhidsc0e43] {
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1);
}

.view-comment-text[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

/* ========================================
   MANAGER DETAILS GRID
   ======================================== */
.view-details-grid[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.view-detail-card[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.view-detail-card-full[b-bhidsc0e43] {
    grid-column: 1 / -1;
}

.view-detail-header[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-detail-header i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
}

.view-detail-body[b-bhidsc0e43] {
    padding: 10px 12px;
}

.view-detail-text[b-bhidsc0e43] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.view-action-badge[b-bhidsc0e43] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-list[b-bhidsc0e43] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.view-tag[b-bhidsc0e43] {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-strength[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-tag-development[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
}

/* Arabic question text */
.q-text-arabic[b-bhidsc0e43] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .proxy-header[b-bhidsc0e43] {
        flex-direction: column;
        align-items: flex-start;
    }

    .proxy-stats[b-bhidsc0e43] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .proxy-stat-divider[b-bhidsc0e43] {
        display: none;
    }

    .proxy-page[b-bhidsc0e43] {
        padding: 12px 12px 24px;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/MyAcknowledgments/MyAcknowledgments.razor.rz.scp.css */
/* ========================================
   MY ACKNOWLEDGMENTS PAGE
   Consistent with MyEvaluations design
   ======================================== */

.erp-page-container[b-rcxj5ssvy6] { display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; }
.erp-page-header[b-rcxj5ssvy6] { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: none; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.header-left[b-rcxj5ssvy6] { flex: 1; display: flex; align-items: center; }
.header-right[b-rcxj5ssvy6] { flex-shrink: 0; }
.page-title[b-rcxj5ssvy6] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); margin: 0; }
.page-title i[b-rcxj5ssvy6] { color: var(--BEC-colorBrandForeground1); font-size: 14px; }
.stats-container[b-rcxj5ssvy6] { display: flex; align-items: center; gap: 16px; }
.stat-card[b-rcxj5ssvy6] { display: flex; align-items: baseline; gap: 4px; }
.stat-value[b-rcxj5ssvy6] { font-size: 14px; font-weight: var(--BEC-fontWeightBold); color: var(--BEC-colorBrandForeground1); line-height: 1; }
.stat-label[b-rcxj5ssvy6] { font-size: 10px; color: var(--BEC-colorNeutralForeground3); font-weight: var(--BEC-fontWeightMedium); }
.stat-divider[b-rcxj5ssvy6] { width: 1px; height: 16px; background: var(--BEC-colorNeutralStroke2); }
.stat-pending[b-rcxj5ssvy6] { color: var(--BEC-colorPaletteDarkOrangeForeground2); }
.stat-completed[b-rcxj5ssvy6] { color: var(--BEC-colorPaletteGreenForeground2); }

.erp-page-content[b-rcxj5ssvy6] { flex: 1; min-height: 0; padding: 10px 20px 30px 20px; display: flex; flex-direction: column; }

.loading-container[b-rcxj5ssvy6], .error-container[b-rcxj5ssvy6], .empty-container[b-rcxj5ssvy6] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 12px; color: var(--BEC-colorNeutralForeground3); }
.error-container i[b-rcxj5ssvy6] { font-size: 32px; color: var(--BEC-colorPaletteRedForeground1); }
.empty-container i[b-rcxj5ssvy6] { font-size: 32px; color: var(--BEC-colorBrandForeground1); }

.cell-stacked[b-rcxj5ssvy6] { display: flex; flex-direction: column; gap: 2px; }
.cell-name[b-rcxj5ssvy6] { font-weight: var(--BEC-fontWeightSemibold); font-size: 13px; color: var(--BEC-colorNeutralForeground1); }
.cell-code[b-rcxj5ssvy6] { font-size: 11px; color: var(--BEC-colorNeutralForeground3); }

.badge[b-rcxj5ssvy6] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--BEC-borderRadiusSmall); font-size: 11px; font-weight: var(--BEC-fontWeightSemibold); white-space: nowrap; }
.badge-stage-pendingack[b-rcxj5ssvy6] { background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }
.badge-stage-submitted[b-rcxj5ssvy6] { background: var(--BEC-colorPaletteMarigoldBackground2); color: var(--BEC-colorPaletteMarigoldForeground2); }
.badge-stage-completed[b-rcxj5ssvy6] { background: var(--BEC-colorPaletteGreenBackground2); color: var(--BEC-colorPaletteGreenForeground2); }
.badge-stage-default[b-rcxj5ssvy6] { background: var(--BEC-colorNeutralBackground3); color: var(--BEC-colorNeutralForeground3); }

.btn-action[b-rcxj5ssvy6] { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border: none; border-radius: var(--BEC-borderRadiusSmall); font-size: 12px; font-weight: var(--BEC-fontWeightSemibold); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.btn-action-acknowledge[b-rcxj5ssvy6] { background: var(--BEC-colorBrandBackground); color: var(--BEC-colorNeutralForegroundOnBrand); }
.btn-action-acknowledge:hover[b-rcxj5ssvy6] { background: var(--BEC-colorBrandBackgroundHover); }

[b-rcxj5ssvy6] .e-toolbar.e-control { position: sticky; top: 36px; z-index: 90; background: var(--BEC-colorNeutralBackground1); border: 1px solid var(--BEC-colorNeutralStroke1); border-radius: var(--BEC-borderRadiusMedium); margin: 4px 20px; box-shadow: var(--BEC-shadow2); min-height: 32px; height: 32px; }
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/MyEvaluations/MyEvaluations.razor.rz.scp.css */
/* ========================================
   MY EVALUATIONS — MANAGER VIEW
   100% Design-consistent with AllEvaluations
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-jt5fem50in] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jt5fem50in] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jt5fem50in] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.header-right[b-jt5fem50in] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jt5fem50in] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jt5fem50in] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jt5fem50in] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jt5fem50in] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.stat-pending[b-jt5fem50in] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2) !important;
}

.stat-submitted[b-jt5fem50in] {
    color: var(--BEC-colorBrandForeground1) !important;
}

.stat-completed[b-jt5fem50in] {
    color: var(--BEC-colorPaletteGreenForeground2) !important;
}

/* ========================================
   FILTER BAR
   ======================================== */
.filter-bar[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.filter-group[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label[b-jt5fem50in] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

[b-jt5fem50in] .filter-dropdown.e-input-group,
[b-jt5fem50in] .filter-dropdown .e-input-group {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jt5fem50in] .filter-dropdown .e-input {
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.filter-actions[b-jt5fem50in] {
    margin-left: auto;
}

.filter-clear-btn[b-jt5fem50in] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-clear-btn:hover[b-jt5fem50in] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.filter-clear-btn i[b-jt5fem50in] {
    font-size: 10px;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-jt5fem50in] {
    flex: 1;
    min-height: 0;
    padding: 10px 20px 30px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-jt5fem50in] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jt5fem50in] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   SEARCH TEXTBOX
   ======================================== */
[b-jt5fem50in] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jt5fem50in] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jt5fem50in] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-jt5fem50in] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

[b-jt5fem50in] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-jt5fem50in] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Fixed position to escape overflow:hidden
   ======================================== */
[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jt5fem50in] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-jt5fem50in] .e-grid .e-row {
    height: 32px !important;
}

[b-jt5fem50in] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-jt5fem50in] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-jt5fem50in] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

[b-jt5fem50in] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jt5fem50in] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Completed rows dimmed */
[b-jt5fem50in] .e-grid .e-row.evaluation-completed {
    opacity: 0.5;
    background-color: var(--BEC-colorNeutralBackground2) !important;
}

[b-jt5fem50in] .e-grid .e-row.evaluation-completed:hover {
    opacity: 0.6;
    background-color: var(--BEC-colorNeutralBackground3) !important;
}

[b-jt5fem50in] .e-grid .e-row.evaluation-completed td {
    color: var(--BEC-colorNeutralForeground3);
}

/* Overdue row highlight */
[b-jt5fem50in] .e-grid .e-row.evaluation-overdue {
    background-color: rgba(209, 52, 56, 0.03) !important;
}

[b-jt5fem50in] .e-grid .e-row.evaluation-overdue:hover {
    background-color: rgba(209, 52, 56, 0.06) !important;
}

/* ========================================
   CELL FORMATTING
   ======================================== */
.cell-stacked[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-name[b-jt5fem50in] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    line-height: 1.2;
}

.cell-code[b-jt5fem50in] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.2;
}

.cell-inline[b-jt5fem50in] {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1);
}

.cell-version[b-jt5fem50in] {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    vertical-align: middle;
}

.score-value[b-jt5fem50in] {
    font-weight: var(--BEC-fontWeightBold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   APPROVAL STATUS CELL
   ======================================== */
.approval-status-cell[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
    cursor: default;
    padding: 2px 0;
}

.approval-step[b-jt5fem50in] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-approver[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-person-icon[b-jt5fem50in] {
    flex-shrink: 0;
    font-size: 9px;
    color: var(--BEC-colorBrandForeground2);
}

/* ========================================
   DUE DATE CELL
   ======================================== */
.due-date-cell[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.overdue-badge[b-jt5fem50in] {
    font-size: 8px !important;
    padding: 1px 4px !important;
    animation: pulse-overdue-b-jt5fem50in 2s ease-in-out infinite;
}

@keyframes pulse-overdue-b-jt5fem50in {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-jt5fem50in] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-jt5fem50in] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-jt5fem50in] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-jt5fem50in] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-danger[b-jt5fem50in] {
    background: rgba(209, 52, 56, 0.1);
    color: #d13438;
}

/* ========================================
   ACTION BUTTONS (in grid rows)
   ======================================== */
.btn-action[b-jt5fem50in] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid;
    background: transparent;
    white-space: nowrap;
}

.btn-action i[b-jt5fem50in] {
    font-size: 10px;
}

/* Fill Form — Orange accent (action needed) */
.btn-action-fill[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.btn-action-fill:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: #fff;
}

/* View — Blue accent */
.btn-action-view[b-jt5fem50in] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-view:hover[b-jt5fem50in] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

/* Scores — Green accent */
.btn-action-scores[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.btn-action-scores:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: #fff;
}

/* Self-Appraisal — Teal accent */
.btn-action-selfappraisal[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteTealForeground2, var(--BEC-colorPaletteDarkOrangeForeground2));
    color: var(--BEC-colorPaletteTealForeground2, var(--BEC-colorPaletteDarkOrangeForeground2));
}

.btn-action-selfappraisal:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteTealForeground2, var(--BEC-colorPaletteDarkOrangeForeground2));
    color: #fff;
}

/* Acknowledge — Purple accent */
.btn-action-acknowledge[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorBrandForeground1));
    color: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorBrandForeground1));
}

.btn-action-acknowledge:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorBrandForeground1));
    color: #fff;
}

/* New stage badges */
.badge-selfappraisal[b-jt5fem50in] { background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }
.badge-managerreview[b-jt5fem50in] { background: var(--BEC-colorPaletteMarigoldBackground2); color: var(--BEC-colorPaletteMarigoldForeground2); }
.badge-returnedcorrection[b-jt5fem50in] { background: rgba(198, 40, 40, 0.12); color: #c62828; }
.badge-returned[b-jt5fem50in] { background: rgba(230, 126, 34, 0.15); color: #d35400; font-weight: var(--BEC-fontWeightBold); }
.badge-pendingack[b-jt5fem50in] { background: var(--BEC-colorPaletteBerryBackground2, var(--BEC-colorPaletteDarkOrangeBackground2)); color: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorPaletteDarkOrangeForeground2)); }

/* Revise & Resubmit — Amber/orange accent (returned for correction) */
.btn-action-returned[b-jt5fem50in] {
    border-color: #d35400;
    color: #d35400;
}

.btn-action-returned:hover[b-jt5fem50in] {
    background: #d35400;
    color: #fff;
}

/* Returned reason info icon */
.returned-reason-icon[b-jt5fem50in] {
    color: #d35400;
    font-size: 11px;
    margin-left: 4px;
    cursor: help;
}

/* ── Returned for Correction Banner (View Sidebar) ── */
.returned-banner[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 12px;
    border-radius: 0 var(--BEC-borderRadiusSmall, 2px) var(--BEC-borderRadiusSmall, 2px) 0;
}

.returned-banner-header[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 12.5px;
}

.returned-banner-header i[b-jt5fem50in] {
    font-size: 14px;
    flex-shrink: 0;
}

.returned-banner-reason[b-jt5fem50in] {
    font-style: italic;
    color: #a04000;
    padding-left: 22px;
    font-size: 12px;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-jt5fem50in] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jt5fem50in 1s linear infinite;
}

@keyframes spin-b-jt5fem50in {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-jt5fem50in] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-jt5fem50in] {
    font-size: 48px;
}

.error-container p[b-jt5fem50in] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   SIDEBAR
   ======================================== */
.sidebar-header[b-jt5fem50in] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jt5fem50in] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jt5fem50in] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jt5fem50in] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jt5fem50in] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jt5fem50in] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px;
    position: relative;
}

.wizard-step[b-jt5fem50in] {
    max-width: 100%;
}

/* ========================================
   FORM SECTIONS (View Sidebar)
   ======================================== */
.form-section[b-jt5fem50in] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-jt5fem50in] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-jt5fem50in] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-jt5fem50in] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.form-group[b-jt5fem50in] {
    margin-bottom: 20px;
}

.form-label[b-jt5fem50in] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-value[b-jt5fem50in] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-jt5fem50in] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Sidebar footer */
.sidebar-footer[b-jt5fem50in] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.footer-buttons[b-jt5fem50in] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-jt5fem50in] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
}

.btn:disabled[b-jt5fem50in] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-success[b-jt5fem50in] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: #ffffff;
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-jt5fem50in] {
    background: #0b5c0b;
    border-color: #0b5c0b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn i[b-jt5fem50in] {
    font-size: 14px;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   ======================================== */

[b-jt5fem50in] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-jt5fem50in] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-jt5fem50in] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

[b-jt5fem50in] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-jt5fem50in] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-jt5fem50in] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

[b-jt5fem50in] .notification-error .e-dlg-content,
[b-jt5fem50in] .notification-warning .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

[b-jt5fem50in] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-jt5fem50in] .notification-warning .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ============================================
   RATING SCALE POPUP TABLE
   ============================================ */
[b-jt5fem50in] .rating-scale-dialog {
    max-height: 92vh !important;
}

[b-jt5fem50in] .rating-scale-dialog .e-dlg-header-content {
    background: #003d6b;
    padding: 10px 16px;
}

[b-jt5fem50in] .rating-scale-dialog .e-dlg-header {
    color: white !important;
    font-size: 14px;
}

[b-jt5fem50in] .rating-scale-dialog .e-icon-dlg-close {
    color: white;
}

[b-jt5fem50in] .rating-scale-dialog .e-dlg-content {
    padding: 0;
    overflow: hidden;
}

.rating-scale-table-container[b-jt5fem50in] {
    overflow: hidden;
}

.rating-scale-table[b-jt5fem50in] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.35;
    table-layout: fixed;
}

.rating-scale-table thead tr[b-jt5fem50in] {
    background: #003d6b;
    color: white;
}

.rating-scale-table th[b-jt5fem50in] {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}

.rating-scale-table td[b-jt5fem50in] {
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
    color: #333;
    word-wrap: break-word;
}

.rating-scale-table colgroup col:nth-child(1)[b-jt5fem50in] { width: 70px; }
.rating-scale-table colgroup col:nth-child(2)[b-jt5fem50in] { width: 130px; }
.rating-scale-table colgroup col:nth-child(4)[b-jt5fem50in] { width: 100px; }

.rating-rate[b-jt5fem50in] {
    font-weight: 600;
    white-space: nowrap;
    color: #003d6b;
    font-size: 11.5px;
}

.rating-group-cell[b-jt5fem50in] {
    text-align: center;
    vertical-align: middle;
    border-right: 3px solid;
    padding: 6px !important;
    width: 70px;
}

.rating-group-label[b-jt5fem50in] {
    font-size: 11px;
    line-height: 1.3;
    color: #555;
}

.rating-group-high[b-jt5fem50in] {
    border-right-color: #2e7d32;
    background: #e8f5e9;
}

.rating-group-normal[b-jt5fem50in] {
    border-right-color: #1565c0;
    background: #e3f2fd;
}

.rating-group-improve[b-jt5fem50in] {
    border-right-color: #e65100;
    background: #fff3e0;
}

.rating-row.rating-outstanding td:not(.rating-group-cell)[b-jt5fem50in] { background: #f1f8e9; }
.rating-row.rating-exceed td:not(.rating-group-cell)[b-jt5fem50in] { background: #f1f8e9; }
.rating-row.rating-meet td:not(.rating-group-cell)[b-jt5fem50in] { background: #e3f2fd; }
.rating-row.rating-partial td:not(.rating-group-cell)[b-jt5fem50in] { background: #fff8e1; }
.rating-row.rating-notmeet td:not(.rating-group-cell)[b-jt5fem50in] { background: #fce4ec; }

[b-jt5fem50in] .rating-scale-dialog .e-footer-content {
    padding: 8px 16px;
    border-top: 1px solid #e0e0e0;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/MySelfAppraisals/MySelfAppraisals.razor.rz.scp.css */
/* ========================================
   MY SELF-APPRAISALS — Timeline List Design
   Full-width, accent-bar cards
   ======================================== */

/* ── Page wrapper ── */
.sa-timeline-page[b-nyw02zzl28] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 24px 32px;
    overflow-y: auto;
}

/* ── State containers (loading / error / empty) ── */
.sa-state-container[b-nyw02zzl28] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.sa-state-container i[b-nyw02zzl28] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
}

.sa-state-container.sa-error i[b-nyw02zzl28] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.sa-state-container.sa-empty i[b-nyw02zzl28] {
    color: var(--BEC-colorNeutralForeground3);
}

.sa-state-container h3[b-nyw02zzl28] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.sa-state-container p[b-nyw02zzl28] {
    font-size: 14px;
    margin: 0;
}

.sa-spinner[b-nyw02zzl28] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: sa-spin-b-nyw02zzl28 0.8s linear infinite;
}

@keyframes sa-spin-b-nyw02zzl28 {
    to { transform: rotate(360deg); }
}

/* ── List container — full width, no max-width ── */
.sa-list-container[b-nyw02zzl28] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── List item card ── */
.sa-list-item[b-nyw02zzl28] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow2);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.sa-list-item:hover[b-nyw02zzl28] {
    box-shadow: 0 4px 16px rgba(0, 120, 212, 0.10), 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* ── Left accent bar ── */
.sa-accent-bar[b-nyw02zzl28] {
    width: 5px;
    flex-shrink: 0;
    border-radius: var(--BEC-borderRadiusMedium) 0 0 var(--BEC-borderRadiusMedium);
}

.sa-accent-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-accent-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

/* ── Item content area ── */
.sa-item-content[b-nyw02zzl28] {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Top row: title + stage badge ── */
.sa-item-top[b-nyw02zzl28] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.sa-title-group h3[b-nyw02zzl28] {
    font-size: 17px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.3;
}

.sa-subtitle[b-nyw02zzl28] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

/* ── Stage icon + badge ── */
.sa-stage-group[b-nyw02zzl28] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-stage-icon[b-nyw02zzl28] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-stage-icon-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-stage-icon-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sa-badge[b-nyw02zzl28] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    white-space: nowrap;
}

.sa-badge-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-badge-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* ── Meta chips row ── */
.sa-item-meta[b-nyw02zzl28] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.sa-meta-chip[b-nyw02zzl28] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

.sa-meta-chip svg[b-nyw02zzl28] {
    flex-shrink: 0;
    opacity: 0.5;
}

.sa-meta-value[b-nyw02zzl28] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sa-overdue-tag[b-nyw02zzl28] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ── Bottom row: progress + action ── */
.sa-item-bottom[b-nyw02zzl28] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.sa-progress-section[b-nyw02zzl28] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
}

.sa-progress-bar-bg[b-nyw02zzl28] {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    overflow: hidden;
}

.sa-progress-fill[b-nyw02zzl28] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.sa-fill-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-fill-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.sa-progress-label[b-nyw02zzl28] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
}

/* ── Buttons ── */
.sa-btn[b-nyw02zzl28] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.sa-btn-primary[b-nyw02zzl28] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.sa-btn-primary:hover[b-nyw02zzl28] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.sa-btn-ghost[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sa-btn-ghost:hover[b-nyw02zzl28] {
    opacity: 0.85;
}

.sa-btn-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sa-btn-submitted:hover[b-nyw02zzl28] {
    opacity: 0.85;
}

.sa-btn-outline[b-nyw02zzl28] {
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    border: 1.5px solid var(--BEC-colorNeutralStroke1);
}

.sa-btn-outline:hover[b-nyw02zzl28] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorBrandForeground1);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .sa-timeline-page[b-nyw02zzl28] {
        padding: 12px 16px 24px;
    }

    .sa-item-content[b-nyw02zzl28] {
        padding: 16px;
    }

    .sa-item-meta[b-nyw02zzl28] {
        gap: 12px;
    }

    .sa-item-bottom[b-nyw02zzl28] {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-btn[b-nyw02zzl28] {
        justify-content: center;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/ViewEvaluation/ViewEvaluation.razor.rz.scp.css */
/* ========================================
   VIEW EVALUATION — READ-ONLY DETAIL PAGE
   BEC Design System Tokens
   ======================================== */

/* ── Page Container ── */
.erp-page-container[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background: var(--BEC-colorNeutralBackground3);
    font-family: 'Inter', sans-serif;
    color: var(--BEC-colorNeutralForeground1);
}

/* ── Page Header ── */
.erp-page-header[b-8frg99ptd4] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--BEC-shadow2);
    min-height: 42px;
    flex-shrink: 0;
}

.header-left[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

.back-btn:hover[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandStroke1);
}

.page-title[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.printed-no-badge[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* ── State Containers (Loading / Error / Empty) ── */
.state-container[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    padding: 2rem;
}

.loading-spinner[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--BEC-colorBrandForeground1);
}

.loading-spinner p[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    margin: 0;
}

.error-card[b-8frg99ptd4],
.empty-card[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 2rem;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
    max-width: 480px;
}

.error-card i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.empty-card i[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
}

.error-card h3[b-8frg99ptd4],
.empty-card h3[b-8frg99ptd4] {
    margin: 0;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.error-card p[b-8frg99ptd4],
.empty-card p[b-8frg99ptd4] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.5;
}

.retry-btn[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.retry-btn:hover[b-8frg99ptd4] {
    opacity: 0.9;
}

.back-link-btn[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-link-btn:hover[b-8frg99ptd4] {
    border-color: var(--BEC-colorBrandStroke1);
    color: var(--BEC-colorBrandForeground1);
}

/* ── Main Content ── */
.eval-content[b-8frg99ptd4] {
    padding: 16px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ═══════════════════════════════════════════
   SECTION 1 — Metadata
   ═══════════════════════════════════════════ */

.metadata-section[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Score Highlight */
.score-highlight-card[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
}

.score-divider[b-8frg99ptd4] {
    width: 1px;
    height: 48px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 8px;
    flex-shrink: 0;
}

.self-score-circle[b-8frg99ptd4] {
    border-color: #0e7c7b !important;
    background: rgba(14, 124, 123, 0.08);
}

.self-assessment-label[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0e7c7b;
}

.score-circle[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--BEC-colorNeutralBackground3);
    border: 3px solid var(--BEC-colorNeutralStroke1);
}

.score-circle.score-outstanding[b-8frg99ptd4] {
    border-color: #FFD700;
    background: linear-gradient(135deg, #FFF8E1, #FFFDE7);
}

.score-circle.score-excellent[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteGreenBorder1);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.score-circle.score-good[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteBlueBorder1, var(--BEC-colorBrandStroke1));
    background: var(--BEC-colorPaletteBlueBackground2, var(--BEC-colorBrandBackground2));
}

.score-circle.score-average[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteDarkOrangeBorder1, var(--BEC-colorPaletteYellowBorder1));
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
}

.score-circle.score-below[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteRedBorder1);
    background: var(--BEC-colorPaletteRedBackground2);
}

.score-value[b-8frg99ptd4] {
    font-size: 24px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.score-details[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.result-badge[b-8frg99ptd4] {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 3px 12px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.result-excellent[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.result-good[b-8frg99ptd4] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground2);
}

.result-average[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
    color: var(--BEC-colorPaletteDarkOrangeForeground2, var(--BEC-colorPaletteYellowForeground2));
}

.result-below[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.result-default[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.verdict-text[b-8frg99ptd4] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

/* Metadata Grid */
.metadata-grid[b-8frg99ptd4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.meta-card[b-8frg99ptd4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: box-shadow 0.15s ease;
}

.meta-card:hover[b-8frg99ptd4] {
    box-shadow: var(--BEC-shadow2);
}

.meta-icon[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
    flex-shrink: 0;
}

.meta-content[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.meta-label[b-8frg99ptd4] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.meta-value[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-sub[b-8frg99ptd4] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Stage Badge */
.stage-badge[b-8frg99ptd4] {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 2px 8px;
    border-radius: 9999px;
}

.stage-draft[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.stage-inprogress[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
    color: var(--BEC-colorPaletteDarkOrangeForeground2, var(--BEC-colorPaletteYellowForeground2));
}

.stage-pending[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.stage-completed[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.stage-default[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.stage-selfappraisal[b-8frg99ptd4] {
    background: rgba(0, 128, 128, 0.12);
    color: #0e7c7b;
}

.stage-managerreview[b-8frg99ptd4] {
    background: rgba(0, 90, 158, 0.12);
    color: #005a9e;
}

.stage-pendingack[b-8frg99ptd4] {
    background: rgba(136, 23, 152, 0.12);
    color: #881798;
}

/* Self-Score Row within question cards */
.self-score-row[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 4px 28px;
    font-size: 12px;
    color: #0e7c7b;
}

.self-score-row i[b-8frg99ptd4] {
    font-size: 11px;
    color: #0e7c7b;
}

.self-comment[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Additional Info Grid */
.additional-info-grid[b-8frg99ptd4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.info-block[b-8frg99ptd4] {
    padding: 14px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.info-block h4[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-block h4 i[b-8frg99ptd4] {
    font-size: 12px;
}

.info-block p[b-8frg99ptd4] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════
   SECTION 2 — Questions & Scores
   ═══════════════════════════════════════════ */

.questions-section[b-8frg99ptd4],
.sw-section[b-8frg99ptd4],
.history-section[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
    padding: 16px 20px;
}

.section-header[b-8frg99ptd4] {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.section-header h2[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.section-header h2 i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 15px;
}

/* No Data Notice */
.no-data-notice[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
    justify-content: center;
}

.no-data-notice.compact[b-8frg99ptd4] {
    padding: 12px;
    font-size: 12px;
}

.no-data-notice i[b-8frg99ptd4] {
    font-size: 16px;
}

/* Category Group */
.category-group[b-8frg99ptd4] {
    margin-bottom: 16px;
}

.category-group:last-child[b-8frg99ptd4] {
    margin-bottom: 0;
}

.category-header[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 8px;
}

.category-header h3[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0;
}

.category-score[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

/* Question Card */
.question-card[b-8frg99ptd4] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    transition: background 0.1s ease;
}

.question-card:last-child[b-8frg99ptd4] {
    border-bottom: none;
}

.question-card:hover[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
}

.question-row[b-8frg99ptd4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.question-text[b-8frg99ptd4] {
    flex: 1;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    min-width: 0;
}

.q-number[b-8frg99ptd4] {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground3);
    background: var(--BEC-colorNeutralBackground3);
    padding: 1px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    margin-right: 6px;
    vertical-align: middle;
}

.question-score-group[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.score-pill[b-8frg99ptd4] {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.score-pill.qscore-outstanding[b-8frg99ptd4] {
    background: linear-gradient(135deg, #FFF8E1, #FFFDE7);
    color: #B8860B;
    border: 1px solid #FFD700;
}

.score-pill.qscore-high[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.score-pill.qscore-mid[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
    color: var(--BEC-colorPaletteDarkOrangeForeground2, var(--BEC-colorPaletteYellowForeground2));
}

.score-pill.qscore-low[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.score-num[b-8frg99ptd4] {
    font-weight: var(--BEC-fontWeightBold);
}

.score-sep[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-weight: normal;
}

.score-max[b-8frg99ptd4] {
    font-weight: normal;
    font-size: 11px;
}

.weighting-badge[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    padding: 2px 6px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* Sub-rows under questions */
.adjusted-score-row[b-8frg99ptd4],
.self-score-row[b-8frg99ptd4],
.comment-row[b-8frg99ptd4],
.manager-feedback-row[b-8frg99ptd4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding-left: 28px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

.adjusted-score-row i[b-8frg99ptd4],
.self-score-row i[b-8frg99ptd4],
.comment-row i[b-8frg99ptd4],
.manager-feedback-row i[b-8frg99ptd4] {
    margin-top: 2px;
    font-size: 11px;
    flex-shrink: 0;
}

.adjusted-score-row i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.self-score-row i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
}

.comment-row i[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
}

.manager-feedback-row i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

.adjustment-reason[b-8frg99ptd4],
.self-comment[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ═══════════════════════════════════════════
   SECTION 3 — Strengths & Weaknesses
   ═══════════════════════════════════════════ */

.sw-section[b-8frg99ptd4] {
    padding: 16px 20px;
}

.sw-columns[b-8frg99ptd4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .sw-columns[b-8frg99ptd4] {
        grid-template-columns: 1fr;
    }
}

.sw-column[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sw-column-header[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 4px;
}

.sw-column-header h3[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
    flex: 1;
}

.strengths-header[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.weaknesses-header[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.sw-count[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightBold);
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
}

.sw-card[b-8frg99ptd4] {
    padding: 10px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: box-shadow 0.15s ease;
}

.sw-card:hover[b-8frg99ptd4] {
    box-shadow: var(--BEC-shadow2);
}

.sw-card-body[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sw-description[b-8frg99ptd4] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.5;
}

.sw-category-tag[b-8frg99ptd4],
.sw-impact-tag[b-8frg99ptd4] {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 2px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sw-category-tag[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.sw-impact-tag[b-8frg99ptd4] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground2);
}

/* ═══════════════════════════════════════════
   SECTION 3B — Employee Acknowledgment
   ═══════════════════════════════════════════ */

.acknowledgment-section[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
    padding: 0;
    overflow: hidden;
    border-left: 4px solid #8764B8;
}

.acknowledgment-card[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
}

.acknowledgment-header[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(135, 100, 184, 0.08);
    border-bottom: 1px solid rgba(135, 100, 184, 0.15);
}

.acknowledgment-icon[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusMedium);
    background: rgba(135, 100, 184, 0.15);
    color: #8764B8;
    font-size: 16px;
    flex-shrink: 0;
}

.acknowledgment-title-group[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acknowledgment-title[b-8frg99ptd4] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: #6B4FA0;
    margin: 0;
}

.acknowledgment-date[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.acknowledgment-date i[b-8frg99ptd4] {
    font-size: 10px;
}

.acknowledgment-body[b-8frg99ptd4] {
    padding: 16px 20px;
}

.acknowledgment-comment[b-8frg99ptd4] {
    margin: 0;
    padding: 12px 16px;
    background: rgba(135, 100, 184, 0.04);
    border-left: 3px solid #8764B8;
    border-radius: 0 var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium) 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
    font-style: italic;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════
   SECTION 4 — Stage History Timeline
   ═══════════════════════════════════════════ */

.timeline-container[b-8frg99ptd4] {
    position: relative;
    padding-left: 20px;
}

.timeline-container[b-8frg99ptd4]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-entry[b-8frg99ptd4] {
    position: relative;
    padding: 0 0 16px 16px;
}

.timeline-entry:last-child[b-8frg99ptd4] {
    padding-bottom: 0;
}

.timeline-dot-marker[b-8frg99ptd4] {
    position: absolute;
    left: -16px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    border: 2px solid var(--BEC-colorNeutralBackground1);
    z-index: 1;
}

.timeline-entry-content[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.timeline-transition[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.stage-from[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-transition i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.stage-to[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground1);
}

.timeline-meta-row[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.timeline-date[b-8frg99ptd4],
.timeline-user[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-date i[b-8frg99ptd4],
.timeline-user i[b-8frg99ptd4] {
    font-size: 10px;
}

.timeline-reason[b-8frg99ptd4],
.timeline-notes[b-8frg99ptd4] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.4;
}

.timeline-reason strong[b-8frg99ptd4],
.timeline-notes strong[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground1);
}

.timeline-changed-by[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #555);
    font-style: italic;
    margin-top: 2px;
}

.timeline-changed-by i[b-8frg99ptd4] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #888);
}

.pending-approval-banner[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteYellowBackground1, #fff8e1);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1, #ffe082);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.pending-approval-banner i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteYellowForeground1, #f9a825);
}

.pending-review-banner[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteBlueBorderActive, #e3f2fd);
    border: 1px solid var(--BEC-colorPaletteBlueBorder1, #90caf9);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.pending-review-banner i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandBackground, #1976d2);
}

.stage-returnedcorrection[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground1, #ffebee);
    color: var(--BEC-colorPaletteRedForeground1, #c62828);
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

.page-footer[b-8frg99ptd4] {
    padding: 16px 0 0;
    display: flex;
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 600px) {
    .eval-content[b-8frg99ptd4] {
        padding: 12px 12px 24px;
    }

    .metadata-grid[b-8frg99ptd4] {
        grid-template-columns: 1fr;
    }

    .score-highlight-card[b-8frg99ptd4] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .question-row[b-8frg99ptd4] {
        flex-direction: column;
        gap: 6px;
    }

    .question-score-group[b-8frg99ptd4] {
        align-self: flex-end;
    }

    .additional-info-grid[b-8frg99ptd4] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {
    /* Remove fixed height and overflow so full content prints */
    .erp-page-container[b-8frg99ptd4] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: white !important;
    }

    .eval-content[b-8frg99ptd4] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide the page header (back button, title) */
    .erp-page-header[b-8frg99ptd4] {
        display: none !important;
    }

    /* Hide interactive state containers */
    .state-container[b-8frg99ptd4] {
        display: none !important;
    }

    /* Hide the footer back button */
    .page-footer[b-8frg99ptd4] {
        display: none !important;
    }

    /* Score highlight card: preserve colors */
    .score-highlight-card[b-8frg99ptd4] {
        box-shadow: none !important;
        border: 1px solid #ccc;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .score-circle[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .result-badge[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Metadata cards: simplify for print */
    .metadata-grid[b-8frg99ptd4] {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .meta-card[b-8frg99ptd4] {
        box-shadow: none !important;
        border: 1px solid #ddd;
        padding: 8px 10px;
        page-break-inside: avoid;
    }

    .meta-icon[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Sections: remove shadows for print */
    .questions-section[b-8frg99ptd4],
    .sw-section[b-8frg99ptd4],
    .history-section[b-8frg99ptd4] {
        box-shadow: none !important;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    /* Category headers: preserve color */
    .category-header[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        page-break-after: avoid;
    }

    /* Question cards: avoid breaks */
    .question-card[b-8frg99ptd4] {
        page-break-inside: avoid;
    }

    /* Score pills: preserve colors */
    .score-pill[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Stage badge: preserve colors */
    .stage-badge[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Strengths/Weaknesses headers: preserve colors */
    .sw-column-header[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Timeline: preserve for print */
    .timeline-container[b-8frg99ptd4]::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .timeline-dot-marker[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .timeline-entry[b-8frg99ptd4] {
        page-break-inside: avoid;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* Arabic question text */
.q-text-arabic[b-8frg99ptd4] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/EmployeeEvaluator/EmployeeEvaluatorAdministration.razor.rz.scp.css */
/* ========================================
   EMPLOYEE EVALUATOR ADMINISTRATION PAGE
   100% Identical to Evaluation Template Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-j1w3mnfhnl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-j1w3mnfhnl] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-j1w3mnfhnl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-j1w3mnfhnl] {
    transform: scale(0.98);
}

.page-subtitle[b-j1w3mnfhnl] {
    display: none;
}

.header-right[b-j1w3mnfhnl] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-j1w3mnfhnl] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-j1w3mnfhnl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-j1w3mnfhnl] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-j1w3mnfhnl] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-j1w3mnfhnl] {
    flex: 1;
    min-height: 0;
    padding: 4px 20px 0 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-j1w3mnfhnl] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-j1w3mnfhnl] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-j1w3mnfhnl] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-j1w3mnfhnl] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-j1w3mnfhnl] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-j1w3mnfhnl] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Grid Header - Rounded Top Corners */
[b-j1w3mnfhnl] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-j1w3mnfhnl] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-j1w3mnfhnl] .e-grid .e-row.e-selectionbackground,
[b-j1w3mnfhnl] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-j1w3mnfhnl] .e-grid .e-row.e-selectionbackground:hover,
[b-j1w3mnfhnl] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-j1w3mnfhnl] .e-grid .e-row.e-selectionbackground td:first-child,
[b-j1w3mnfhnl] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-j1w3mnfhnl] .e-grid .e-row {
    height: 32px !important;
}

[b-j1w3mnfhnl] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-j1w3mnfhnl] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-j1w3mnfhnl] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-j1w3mnfhnl 1s linear infinite;
}

@keyframes spin-b-j1w3mnfhnl {
    to { transform: rotate(360deg); }
}

.loading-container p[b-j1w3mnfhnl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-j1w3mnfhnl] {
    font-size: 48px;
}

.error-container p[b-j1w3mnfhnl] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-j1w3mnfhnl] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-j1w3mnfhnl] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ── HR Proxy Badge ── */
.badge-proxy[b-j1w3mnfhnl] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorBrandForeground1, #1e40af);
    background: var(--BEC-colorBrandBackground1, #dbeafe);
    border: 1px solid var(--BEC-colorBrandStroke1, #3b82f6);
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-j1w3mnfhnl] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-j1w3mnfhnl] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-j1w3mnfhnl] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-j1w3mnfhnl] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-j1w3mnfhnl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-j1w3mnfhnl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-j1w3mnfhnl] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-j1w3mnfhnl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px; /* Add bottom padding to prevent content from being hidden behind footer */
    position: relative;
}

/* Prevent horizontal scroll in wizard grid */
.sidebar-step-content[b-j1w3mnfhnl]  .e-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

.sidebar-step-content[b-j1w3mnfhnl]  .e-grid .e-gridcontent {
    overflow-x: auto !important;
}

.sidebar-step-content[b-j1w3mnfhnl]  .e-grid .e-content {
    overflow-x: auto !important;
}

.wizard-step[b-j1w3mnfhnl] {
    max-width: 100%;
}

.step-title[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-j1w3mnfhnl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-j1w3mnfhnl] {
    margin-bottom: 20px;
}

.form-label[b-j1w3mnfhnl] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-label.required[b-j1w3mnfhnl]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ========================================
   COMPACT FORM STYLES (Edit Wizard)
   ======================================== */

/* 2-Column Grid Layout */
.form-grid-2col[b-j1w3mnfhnl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Compact Form Group */
.form-group-compact[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact Form Label */
.form-label-compact[b-j1w3mnfhnl] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    text-align: left;
}

.form-label-compact.required[b-j1w3mnfhnl]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* Compact Input Fields */
[b-j1w3mnfhnl] .compact-input .e-input-group {
    height: 28px !important;
}

[b-j1w3mnfhnl] .compact-input .e-input-group input {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Compact Textarea */
[b-j1w3mnfhnl] .compact-textarea .e-input-group {
    min-height: 60px !important;
}

[b-j1w3mnfhnl] .compact-textarea .e-input-group textarea {
    font-size: 11px !important;
    padding: 6px 8px !important;
    line-height: 1.4 !important;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-j1w3mnfhnl] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-j1w3mnfhnl 2s ease-in-out infinite;
}

@keyframes sparkle-b-j1w3mnfhnl {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-j1w3mnfhnl] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-j1w3mnfhnl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-j1w3mnfhnl] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer - Positioned at absolute bottom */
.sidebar-footer[b-j1w3mnfhnl] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Create Validation Hint */
.create-validation-hint[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.create-validation-hint i[b-j1w3mnfhnl] {
    flex-shrink: 0;
}

/* Footer Buttons Container - Right Aligned */
.footer-buttons[b-j1w3mnfhnl] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Buttons (HTML buttons with custom CSS) - Standardized */
.btn[b-j1w3mnfhnl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
}

.btn:disabled[b-j1w3mnfhnl] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary/Cancel Button - Gray */
.btn-secondary[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active:not(:disabled)[b-j1w3mnfhnl] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Success/Save Button - Green */
.btn-success[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-success:active:not(:disabled)[b-j1w3mnfhnl] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn i[b-j1w3mnfhnl] {
    font-size: 14px;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-j1w3mnfhnl] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-j1w3mnfhnl] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-j1w3mnfhnl] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-j1w3mnfhnl] .notification-success .e-dlg-content,
[b-j1w3mnfhnl] .notification-error .e-dlg-content,
[b-j1w3mnfhnl] .notification-warning .e-dlg-content,
[b-j1w3mnfhnl] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-j1w3mnfhnl] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-j1w3mnfhnl] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-j1w3mnfhnl] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-j1w3mnfhnl] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-j1w3mnfhnl] {
    margin-bottom: 24px;
    animation: fadeInUp-b-j1w3mnfhnl 0.6s ease;
}

.step-title[b-j1w3mnfhnl] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-j1w3mnfhnl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Help List */
.help-list[b-j1w3mnfhnl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
    list-style-type: disc;
}

.help-list li[b-j1w3mnfhnl] {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
}

/* Features List */
.features-list[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-j1w3mnfhnl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-j1w3mnfhnl] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
    font-size: 14px;
}

.example-step ul[b-j1w3mnfhnl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground2);
}

.use-case i[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteGreenForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-j1w3mnfhnl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-j1w3mnfhnl] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-j1w3mnfhnl] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-j1w3mnfhnl] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wizard-actions .btn-next[b-j1w3mnfhnl] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorBrandBackground);
}

.wizard-actions .btn-next:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
}

.wizard-actions .btn-cancel[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.wizard-actions .btn-cancel:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
}

/* Animations */
@keyframes fadeInUp-b-j1w3mnfhnl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-section[b-j1w3mnfhnl] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-j1w3mnfhnl] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-j1w3mnfhnl] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.form-section h4[b-j1w3mnfhnl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.required[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   WIZARD CONTAINER
   ======================================== */
.wizard-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wizard-header[b-j1w3mnfhnl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.wizard-header h3[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.wizard-header h3 i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.close-button[b-j1w3mnfhnl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-button:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2);
}

.close-button i[b-j1w3mnfhnl] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.wizard-content[b-j1w3mnfhnl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
}

.wizard-footer[b-j1w3mnfhnl] {
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Footer buttons styling is handled by .footer-buttons and .btn classes above */

.spinner-small[b-j1w3mnfhnl] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-j1w3mnfhnl 0.6s linear infinite;
}

/* ========================================
   DIALOG STYLES
   ======================================== */
.dialog-header-danger[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
    font-size: 18px;
}

.dialog-header-danger i[b-j1w3mnfhnl] {
    font-size: 20px;
}

.warning-text[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
    font-size: 14px;
}

.warning-text-red[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
}

/* ========================================
   DETAIL TEMPLATE STYLING - SEAMLESS EXPANSION
   ======================================== */
.detail-template-container[b-j1w3mnfhnl] {
    padding: 0;
    background: transparent;
    border: none;
    margin: 0;
}

.detail-header[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.detail-header h4[b-j1w3mnfhnl] {
    margin: 0;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-header .badge[b-j1w3mnfhnl] {
    font-size: 12px;
    padding: 4px 8px;
}

/* Remove nested grid borders/boxes - seamless expansion */
.detail-template-container .e-grid[b-j1w3mnfhnl],
.detail-nested-grid[b-j1w3mnfhnl] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.detail-template-container .e-grid .e-gridheader[b-j1w3mnfhnl],
.detail-nested-grid .e-gridheader[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
}

.detail-template-container .e-grid .e-gridcontent[b-j1w3mnfhnl],
.detail-nested-grid .e-gridcontent[b-j1w3mnfhnl] {
    background: transparent !important;
    border: none !important;
}

.detail-template-container .e-grid .e-row[b-j1w3mnfhnl],
.detail-nested-grid .e-row[b-j1w3mnfhnl] {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

.detail-template-container .e-grid .e-altrow[b-j1w3mnfhnl],
.detail-nested-grid .e-altrow[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2) !important;
}

.detail-template-container .e-grid .e-row:hover[b-j1w3mnfhnl],
.detail-nested-grid .e-row:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground3) !important;
}

/* Remove grid container padding/margins */
.detail-template-container .e-grid .e-content[b-j1w3mnfhnl],
.detail-nested-grid .e-content[b-j1w3mnfhnl] {
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove grid toolbar if any */
.detail-template-container .e-grid .e-grid-toolbar[b-j1w3mnfhnl],
.detail-nested-grid .e-grid-toolbar[b-j1w3mnfhnl] {
    display: none !important;
}

/* ========================================
   ORGANIZATION CHART CONTAINER
   ======================================== */
.org-chart-container[b-j1w3mnfhnl] {
    width: 100%;
    height: 400px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}

.no-hierarchy-message[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.no-hierarchy-message i[b-j1w3mnfhnl] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   ORGANIZATION CHART NODE TEMPLATE (100% Syncfusion Standard)
   Exact match from: https://blazor.syncfusion.com/demos/diagram/organization-model
   ======================================== */
.e-orgchart-template-div-style[b-j1w3mnfhnl] {
    position: absolute;
    width: 177px;
    height: 54px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    box-sizing: border-box;
    border-radius: 5px;
}

.e-orgchart-selected[b-j1w3mnfhnl] {
    border-color: var(--BEC-colorBrandBackground) !important;
    border-width: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
}

.e-orgchart-template-image-placeholder[b-j1w3mnfhnl] {
    width: 52px;
    height: 52px;
    float: left;
    background-size: 100% 100%;
}

.e-orgchart-template-code-style[b-j1w3mnfhnl] {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 0.1px;
    color: var(--BEC-colorBrandForeground1);
    margin: 0;
    padding: 0;
}

.e-orgchart-template-name-style[b-j1w3mnfhnl] {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.1px;
    color: var(--BEC-colorNeutralForeground1);
    margin-top: 8px;
    height: 8px;
}

.e-orgchart-template-role-style[b-j1w3mnfhnl] {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.1px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   EVALUATION CARDS (View Fields)
   ======================================== */
.evaluation-card[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.evaluation-card:hover[b-j1w3mnfhnl] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.evaluation-card-header[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.evaluation-year[b-j1w3mnfhnl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding: 4px 8px;
    white-space: nowrap;
}

.evaluation-period[b-j1w3mnfhnl] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    white-space: nowrap;
}

.evaluation-type[b-j1w3mnfhnl] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground);
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    white-space: nowrap;
}

.no-evaluations-message[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.no-evaluations-message i[b-j1w3mnfhnl] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   BULK ASSIGN WIZARD - TEAM MEMBERS
   ======================================== */
.team-members-list[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.team-member-card[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.team-member-card:hover[b-j1w3mnfhnl] {
    border-color: var(--BEC-colorBrandBackground);
    background: var(--BEC-colorNeutralBackground2);
}

.member-info[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.member-code[b-j1w3mnfhnl] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground);
    padding: 3px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    min-width: 70px;
    text-align: center;
}

.member-name[b-j1w3mnfhnl] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.remove-member-btn[b-j1w3mnfhnl] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground2);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.remove-member-btn:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteRedBackground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.remove-member-btn i[b-j1w3mnfhnl] {
    font-size: 14px;
}

.info-message[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
}

.info-message i[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Matches Excel Filter Design
   ======================================== */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

/* Column Chooser Dialog Header */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

/* Column Chooser Dialog Content */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

/* Column Chooser Dialog Footer (OK/Cancel buttons) */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Column Chooser Search Box - Matches Excel Filter Search */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

/* Column Chooser List Items - Matches Excel Filter Checkbox List */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Column Chooser Checkbox Items */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Column Chooser Buttons */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   TOOLBAR DANGER BUTTON (Full Delete)
   ======================================== */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .toolbar-btn-danger .e-tbar-btn .e-icons,
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .toolbar-btn-danger .e-tbar-btn .e-tbar-btn-text,
[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn .e-icons,
[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorPaletteRedForeground1) !important;
}

[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorPaletteRedForeground2) !important;
}

/* ========================================
   REASSIGN WARNING BANNER (inside sidebar)
   ======================================== */
.reassign-warning-banner[b-j1w3mnfhnl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

.reassign-warning-banner i[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   REASSIGN CURRENT ASSIGNMENT SUMMARY
   ======================================== */
.reassign-current-summary[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.reassign-current-summary .summary-item[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.reassign-current-summary .summary-label[b-j1w3mnfhnl] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    min-width: 130px;
}

.reassign-current-summary .summary-value[b-j1w3mnfhnl] {
    color: var(--BEC-colorNeutralForeground1);
}

.reassign-current-summary .summary-assigned[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.reassign-current-summary .summary-assigned i[b-j1w3mnfhnl] {
    font-size: 12px;
}

.reassign-current-summary .summary-not-assigned[b-j1w3mnfhnl] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.reassign-current-summary .summary-not-assigned i[b-j1w3mnfhnl] {
    font-size: 12px;
}

/* ========================================
   FULL DELETE PREVIEW LIST
   ======================================== */
.full-delete-preview-list[b-j1w3mnfhnl] {
    padding: 12px 16px;
    margin: 12px 0;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.full-delete-preview-list ul[b-j1w3mnfhnl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.full-delete-preview-list li[b-j1w3mnfhnl] {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1);
}

.full-delete-final-warning[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorPaletteRedBackground1);
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 14px;
}

.full-delete-final-warning i[b-j1w3mnfhnl] {
    font-size: 18px;
    flex-shrink: 0;
}

/* Danger button in dialog footer */
[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-danger,
[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-btn.e-danger {
    background: var(--BEC-colorPaletteRedForeground1) !important;
    border-color: var(--BEC-colorPaletteRedForeground1) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
}

[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-danger:hover,
[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-btn.e-danger:hover {
    background: var(--BEC-colorPaletteRedForeground2) !important;
    border-color: var(--BEC-colorPaletteRedForeground2) !important;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .stats-container[b-j1w3mnfhnl] {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 4px 12px;
    }

    .stat-divider[b-j1w3mnfhnl] {
        display: none;
    }
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/EvaluationPeriod/EvaluationPeriodAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION PERIOD ADMINISTRATION - CALENDAR FIRST
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-4kfbn5vd27] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-4kfbn5vd27] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-4kfbn5vd27] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-4kfbn5vd27] {
    transform: scale(0.98);
}

.header-right[b-4kfbn5vd27] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-4kfbn5vd27] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4kfbn5vd27] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4kfbn5vd27] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4kfbn5vd27] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.page-content[b-4kfbn5vd27] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-4kfbn5vd27] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-4kfbn5vd27] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-4kfbn5vd27] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-4kfbn5vd27] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-4kfbn5vd27] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-4kfbn5vd27] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-4kfbn5vd27] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */
.loading-state[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.spinner[b-4kfbn5vd27] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralBackground3);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-4kfbn5vd27 1s linear infinite;
}

@keyframes spin-b-4kfbn5vd27 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-state p[b-4kfbn5vd27],
.error-state p[b-4kfbn5vd27] {
    margin-top: 16px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

.error-state[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.error-state i[b-4kfbn5vd27] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
    margin-bottom: 16px;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-4kfbn5vd27] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    margin-top: 1px;
}

[b-4kfbn5vd27] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

[b-4kfbn5vd27] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

[b-4kfbn5vd27] .e-grid .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-4kfbn5vd27] .e-grid .e-row {
    height: 32px !important;
}

[b-4kfbn5vd27] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-4kfbn5vd27] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-4kfbn5vd27] .e-grid .e-row.e-selectionbackground,
[b-4kfbn5vd27] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-4kfbn5vd27] .e-grid .e-row.e-selectionbackground:hover,
[b-4kfbn5vd27] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-4kfbn5vd27] .e-grid .e-row.e-selectionbackground td:first-child,
[b-4kfbn5vd27] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* ========================================
   BADGE STYLING
   ======================================== */
.badge[b-4kfbn5vd27] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.badge-inactive[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-info[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteBlueForeground3);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.badge-warning[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.badge-secondary[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground5);
    color: var(--BEC-colorNeutralForeground2);
}

.duration-days[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
    margin-left: 8px;
}

/* ========================================
   WIZARD SIDEBAR CONTAINER
   ======================================== */
[b-4kfbn5vd27] .e-sidebar {
    box-shadow: var(--BEC-shadow16);
}

.wizard-container[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-colorNeutralBackground1);
}

.wizard-header[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-bottom: 1px solid var(--BEC-colorBrandBackground2);
}

.wizard-header h2[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.wizard-header .close-btn[b-4kfbn5vd27] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.wizard-header .close-btn:hover[b-4kfbn5vd27] {
    background: rgba(255, 255, 255, 0.2);
}

.wizard-content[b-4kfbn5vd27] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.wizard-footer[b-4kfbn5vd27] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-4kfbn5vd27] {
    margin-bottom: 20px;
}

.form-label[b-4kfbn5vd27] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.required[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: 2px;
}

/* ========================================
   CALENDAR SECTION - FEATURED STYLING (KEY FEATURE)
   ======================================== */
.calendar-section[b-4kfbn5vd27] {
    background: linear-gradient(135deg, 
        var(--BEC-colorBrandBackground2) 0%, 
        var(--BEC-colorNeutralBackground1) 100%);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 20px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    margin: 24px 0;
}

.calendar-section .form-label[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-section .form-label i[b-4kfbn5vd27] {
    font-size: 16px;
}

.date-summary[b-4kfbn5vd27] {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-summary i[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   SELF-APPRAISAL & ACKNOWLEDGMENT SETTINGS
   ======================================== */
.form-group-divider[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-group-divider span[b-4kfbn5vd27] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    white-space: nowrap;
}

.toggle-group[b-4kfbn5vd27] {
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.toggle-group .form-label[b-4kfbn5vd27] {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-group .form-label i[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

/* ========================================
   AUTO-GENERATION BANNER WITH SPARKLE ANIMATION
   ======================================== */
.auto-gen-banner[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, 
        var(--BEC-colorPalettePurpleBackground2) 0%, 
        var(--BEC-colorPaletteBerryBackground2) 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 8px;
    border: 1px solid var(--BEC-colorPalettePurpleBorderActive);
}

.auto-gen-banner span[b-4kfbn5vd27] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorPalettePurpleForeground1);
}

.sparkle-icon[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorPalettePurpleForeground1);
    animation: sparkle-b-4kfbn5vd27 2s ease-in-out infinite;
}

@keyframes sparkle-b-4kfbn5vd27 {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2) rotate(180deg);
    }
}

[b-4kfbn5vd27] .auto-gen-field.e-input-group {
    background: var(--BEC-colorNeutralBackground3) !important;
}

[b-4kfbn5vd27] .auto-gen-field .e-input {
    background: var(--BEC-colorNeutralBackground3) !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-style: italic;
}

/* ========================================
   VALIDATION ERROR MESSAGE
   ======================================== */
.validation-error[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorPaletteRedBackground2);
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    margin-top: 16px;
}

.validation-error i[b-4kfbn5vd27] {
    font-size: 16px;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-secondary[b-4kfbn5vd27],
.btn-success[b-4kfbn5vd27] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-success[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-success:hover:not(:disabled)[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary:disabled[b-4kfbn5vd27],
.btn-success:disabled[b-4kfbn5vd27] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================================
   NOTIFICATION DIALOGS
   ======================================== */
[b-4kfbn5vd27] .notification-dialog-success .e-dlg-header-content {
    background: linear-gradient(90deg, 
        var(--BEC-colorPaletteGreenBackground3) 0%, 
        var(--BEC-colorPaletteGreenBackground2) 100%);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 16px 20px;
}

[b-4kfbn5vd27] .notification-dialog-warning .e-dlg-header-content {
    background: linear-gradient(90deg, 
        var(--BEC-colorPaletteYellowBackground3) 0%, 
        var(--BEC-colorPaletteYellowBackground2) 100%);
    color: var(--BEC-colorNeutralForeground1);
    padding: 16px 20px;
}

[b-4kfbn5vd27] .notification-dialog-error .e-dlg-header-content {
    background: linear-gradient(90deg, 
        var(--BEC-colorPaletteRedBackground3) 0%, 
        var(--BEC-colorPaletteRedBackground2) 100%);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 16px 20px;
}

/* ========================================
   HELP WIZARD SIDEBAR
   ======================================== */
.help-wizard-container[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-header[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-bottom: 1px solid var(--BEC-colorBrandBackground2);
}

.sidebar-header h2[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.sidebar-header .close-btn[b-4kfbn5vd27] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.sidebar-header .close-btn:hover[b-4kfbn5vd27] {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-content[b-4kfbn5vd27] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.sidebar-footer[b-4kfbn5vd27] {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.help-section[b-4kfbn5vd27] {
    margin-bottom: 24px;
}

.help-section h3[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 12px 0;
}

.help-section p[b-4kfbn5vd27],
.help-section li[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.help-section ul[b-4kfbn5vd27],
.help-section ol[b-4kfbn5vd27] {
    padding-left: 20px;
    margin: 8px 0;
}

.help-section li[b-4kfbn5vd27] {
    margin-bottom: 8px;
}

.help-section strong[b-4kfbn5vd27] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   SYNCFUSION ADAPTIVE UI OVERRIDES
   ======================================== */

[b-4kfbn5vd27] .e-input-group.e-control-wrapper .e-control.e-input,
[b-4kfbn5vd27] .e-float-input.e-control-wrapper .e-control.e-input {
    border-color: var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

[b-4kfbn5vd27] .e-input-group.e-input-focus .e-control.e-input,
[b-4kfbn5vd27] .e-float-input.e-input-focus .e-control.e-input {
    border-color: var(--BEC-colorBrandBackground) !important;
}

[b-4kfbn5vd27] .e-checkbox-wrapper .e-frame {
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

[b-4kfbn5vd27] .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   UTILITY CLASSES (Match Template Page)
   ======================================== */
.flex-row-gap-6[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flex-row-gap-8[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.duration-days[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   START PERIOD CONFIRMATION DIALOG
   ======================================== */
.start-period-confirm p[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
}

.confirm-details[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.confirm-row[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.confirm-row + .confirm-row[b-4kfbn5vd27] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.confirm-label[b-4kfbn5vd27] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    min-width: 60px;
}

.confirm-value[b-4kfbn5vd27] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

.year-selector[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
}

.confirm-warning[b-4kfbn5vd27] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

.confirm-warning i[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteYellowForeground1);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   START PERIOD PROCESSING STATE
   ======================================== */
.processing-state[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
}

.processing-state p[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-top: 16px;
    text-align: center;
}

.processing-hint[b-4kfbn5vd27] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

/* ========================================
   START PERIOD RESULTS SUMMARY
   ======================================== */
.results-summary[b-4kfbn5vd27] {
    padding: 8px 0;
}

.results-grid[b-4kfbn5vd27] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.result-card[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
}

.result-value[b-4kfbn5vd27] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
}

.result-label[b-4kfbn5vd27] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-total[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackground2);
}

.result-total .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
}

.result-total .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
}

.result-created[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteGreenBackground2);
}

.result-created .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.result-created .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.result-skipped[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteYellowBackground2);
}

.result-skipped .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.result-skipped .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.result-failed[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteRedBackground2);
}

.result-failed .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.result-failed .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.result-emails[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3);
}

.result-emails .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground1);
}

.result-emails .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   FAILED DETAILS EXPANDABLE
   ======================================== */
.failed-details[b-4kfbn5vd27] {
    margin-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    padding-top: 12px;
}

.toggle-details-btn[b-4kfbn5vd27] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorPaletteRedForeground1);
    padding: 4px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-details-btn:hover[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteRedBackground2);
}

.failed-list[b-4kfbn5vd27] {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.failed-item[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 12px;
}

.failed-item:last-child[b-4kfbn5vd27] {
    border-bottom: none;
}

.failed-emp[b-4kfbn5vd27] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.failed-error[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 11px;
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/EvaluationStatus/EvaluationStatusAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION STATUS ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-ibfmmcuka5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ibfmmcuka5] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ibfmmcuka5] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ibfmmcuka5] {
    transform: scale(0.98);
}

.page-subtitle[b-ibfmmcuka5] {
    display: none;
}

.header-right[b-ibfmmcuka5] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ibfmmcuka5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-ibfmmcuka5] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-ibfmmcuka5] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-ibfmmcuka5] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ibfmmcuka5] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ibfmmcuka5] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ibfmmcuka5] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-ibfmmcuka5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-ibfmmcuka5] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-ibfmmcuka5] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ibfmmcuka5] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ibfmmcuka5] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-ibfmmcuka5] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

/* Grid Header - Rounded Top Corners */
[b-ibfmmcuka5] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-ibfmmcuka5] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-ibfmmcuka5] .e-grid .e-row.e-selectionbackground,
[b-ibfmmcuka5] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-ibfmmcuka5] .e-grid .e-row.e-selectionbackground:hover,
[b-ibfmmcuka5] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-ibfmmcuka5] .e-grid .e-row.e-selectionbackground td:first-child,
[b-ibfmmcuka5] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-ibfmmcuka5] .e-grid .e-row {
    height: 32px !important;
}

[b-ibfmmcuka5] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-ibfmmcuka5] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-ibfmmcuka5] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-ibfmmcuka5 1s linear infinite;
}

@keyframes spin-b-ibfmmcuka5 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-ibfmmcuka5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-ibfmmcuka5] {
    font-size: 48px;
}

.error-container p[b-ibfmmcuka5] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-ibfmmcuka5] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-ibfmmcuka5] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-ibfmmcuka5] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-ibfmmcuka5] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-ibfmmcuka5] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-ibfmmcuka5] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-ibfmmcuka5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-ibfmmcuka5] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-ibfmmcuka5] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-ibfmmcuka5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-ibfmmcuka5] {
    max-width: 100%;
}

.step-title[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-ibfmmcuka5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-ibfmmcuka5] {
    margin-bottom: 20px;
}

.form-label[b-ibfmmcuka5] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-ibfmmcuka5]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-ibfmmcuka5] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-ibfmmcuka5 2s ease-in-out infinite;
}

@keyframes sparkle-b-ibfmmcuka5 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-ibfmmcuka5] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-ibfmmcuka5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-ibfmmcuka5] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-ibfmmcuka5] {
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ibfmmcuka5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ibfmmcuka5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-success[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.btn i[b-ibfmmcuka5] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-ibfmmcuka5] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-ibfmmcuka5] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-ibfmmcuka5] {
        font-size: 18px;
    }

    [b-ibfmmcuka5] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-ibfmmcuka5] {
        grid-template-columns: 1fr;
    }

    [b-ibfmmcuka5] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-ibfmmcuka5],
    .sidebar-footer[b-ibfmmcuka5] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-ibfmmcuka5] {
        padding: 16px 20px;
    }
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-ibfmmcuka5] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-ibfmmcuka5] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-ibfmmcuka5] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-ibfmmcuka5] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-ibfmmcuka5] .notification-success .e-dlg-content,
[b-ibfmmcuka5] .notification-error .e-dlg-content,
[b-ibfmmcuka5] .notification-warning .e-dlg-content,
[b-ibfmmcuka5] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-ibfmmcuka5] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-ibfmmcuka5] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-ibfmmcuka5] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-ibfmmcuka5] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-ibfmmcuka5] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-ibfmmcuka5] {
    margin-bottom: 24px;
    animation: fadeInUp-b-ibfmmcuka5 0.6s ease;
}

.step-title[b-ibfmmcuka5] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-ibfmmcuka5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ibfmmcuka5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ibfmmcuka5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ibfmmcuka5] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-ibfmmcuka5] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground2);
}

.use-case i[b-ibfmmcuka5] {
    color: var(--BEC-colorPaletteGreenForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ibfmmcuka5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ibfmmcuka5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ibfmmcuka5] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ibfmmcuka5] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ibfmmcuka5] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-ibfmmcuka5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions - Fix button layout */
.wizard-actions[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-cancel:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-next[b-ibfmmcuka5] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-next:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorBrandForeground1);
}

/* Animations */
@keyframes fadeInUp-b-ibfmmcuka5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SYNCFUSION STANDARDS - INLINE STYLE REPLACEMENTS
   ======================================== */

/* Notification Dialog Header Styles */
.flex-align-center-gap-10[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-dialog-icon[b-ibfmmcuka5] {
    font-size: 20px;
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/QuestionCategory/QuestionCategoryAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION STATUS ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-g4nseeny06] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-g4nseeny06] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-g4nseeny06] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-g4nseeny06] {
    transform: scale(0.98);
}

.page-subtitle[b-g4nseeny06] {
    display: none;
}

.header-right[b-g4nseeny06] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-g4nseeny06] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-g4nseeny06] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-g4nseeny06] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-g4nseeny06] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-g4nseeny06] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-g4nseeny06] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-g4nseeny06] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-g4nseeny06] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-g4nseeny06] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-g4nseeny06] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-g4nseeny06] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-g4nseeny06] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-g4nseeny06] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-g4nseeny06] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-g4nseeny06] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-g4nseeny06] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG POSITIONING
   ======================================== */

/* Fix Column Chooser Dialog Position - Align to Columns Button */
[b-g4nseeny06] .e-ccdlg.e-dialog {
    position: fixed !important;
    top: 80px !important;
    right: 40px !important;
    left: auto !important;
    transform: none !important;
}

[b-g4nseeny06] .e-ccdlg .e-dlg-header-content {
    background: var(--BEC-colorBrandBackground) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
}

[b-g4nseeny06] .e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground2) !important;
    padding: 12px 16px !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-g4nseeny06] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

/* Grid Header - Rounded Top Corners */
[b-g4nseeny06] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-g4nseeny06] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-g4nseeny06] .e-grid .e-row.e-selectionbackground,
[b-g4nseeny06] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-g4nseeny06] .e-grid .e-row.e-selectionbackground:hover,
[b-g4nseeny06] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-g4nseeny06] .e-grid .e-row.e-selectionbackground td:first-child,
[b-g4nseeny06] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-g4nseeny06] .e-grid .e-row {
    height: 32px !important;
}

[b-g4nseeny06] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-g4nseeny06] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-g4nseeny06] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-g4nseeny06 1s linear infinite;
}

@keyframes spin-b-g4nseeny06 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-g4nseeny06] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-g4nseeny06] {
    font-size: 48px;
}

.error-container p[b-g4nseeny06] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-g4nseeny06] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-g4nseeny06] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-g4nseeny06] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-g4nseeny06] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-g4nseeny06] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-g4nseeny06] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-g4nseeny06] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-g4nseeny06] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-g4nseeny06] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-g4nseeny06] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-g4nseeny06] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-g4nseeny06] {
    max-width: 100%;
}

.step-title[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-g4nseeny06] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-g4nseeny06] {
    margin-bottom: 20px;
}

.form-label[b-g4nseeny06] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-g4nseeny06]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-g4nseeny06] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-g4nseeny06 2s ease-in-out infinite;
}

@keyframes sparkle-b-g4nseeny06 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-g4nseeny06] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-g4nseeny06] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-g4nseeny06] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-g4nseeny06] {
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-g4nseeny06] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-g4nseeny06] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-success[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.btn i[b-g4nseeny06] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN - Now handled by Syncfusion Adaptive UI
   ======================================== */

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-g4nseeny06] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-g4nseeny06] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-g4nseeny06] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-g4nseeny06] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-g4nseeny06] .notification-success .e-dlg-content,
[b-g4nseeny06] .notification-error .e-dlg-content,
[b-g4nseeny06] .notification-warning .e-dlg-content,
[b-g4nseeny06] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-g4nseeny06] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-g4nseeny06] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-g4nseeny06] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-g4nseeny06] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-g4nseeny06] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-g4nseeny06] {
    margin-bottom: 24px;
    animation: fadeInUp-b-g4nseeny06 0.6s ease;
}

.step-title[b-g4nseeny06] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-g4nseeny06] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-g4nseeny06] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-g4nseeny06] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-g4nseeny06] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-g4nseeny06] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground2);
}

.use-case i[b-g4nseeny06] {
    color: var(--BEC-colorPaletteGreenForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-g4nseeny06] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-g4nseeny06] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-g4nseeny06] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-g4nseeny06] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-g4nseeny06] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-g4nseeny06] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions - Fix button layout */
.wizard-actions[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-cancel:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-next[b-g4nseeny06] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-next:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorBrandForeground1);
}

/* Animations */
@keyframes fadeInUp-b-g4nseeny06 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SYNCFUSION STANDARDS - INLINE STYLE REPLACEMENTS
   ======================================== */

/* Notification Dialog Header Styles */
.flex-align-center-gap-10[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-dialog-icon[b-g4nseeny06] {
    font-size: 20px;
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/Report/PerformanceEvaluationDashboard.razor.rz.scp.css */
/* Performance Evaluation Dashboard - Using BEC Theme Colors */

.dashboard-container[b-86b04ci52r] {
    font-family: 'Inter', sans-serif;
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
    padding: 2rem;
    width: 100%;
    margin: 0;
    height: 100vh;
    overflow-y: auto;
}

/* ── Two-Panel Layout: Timeline + Detail ── */
.eval-layout[b-86b04ci52r] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    min-height: 600px;
}

@media (max-width: 992px) {
    .eval-layout[b-86b04ci52r] {
        grid-template-columns: 1fr;
    }
}

/* ── Timeline Sidebar ── */
.eval-timeline[b-86b04ci52r] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXXLarge);
    box-shadow: var(--BEC-shadow4);
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    position: sticky;
    top: 80px;
}

.timeline-header[b-86b04ci52r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

    .timeline-header i[b-86b04ci52r] {
        color: var(--BEC-colorBrandForeground1);
        font-size: 1.1rem;
    }

    .timeline-header h3[b-86b04ci52r] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: var(--BEC-colorNeutralForeground1);
    }

.timeline-summary[b-86b04ci52r] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.summary-badge[b-86b04ci52r] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

    .summary-badge.pending[b-86b04ci52r] {
        background: var(--BEC-colorPaletteDarkOrangeBackground2);
        color: var(--BEC-colorPaletteDarkOrangeForeground2);
    }

.timeline-year-group[b-86b04ci52r] {
    margin-bottom: 1rem;
}

.timeline-year-label[b-86b04ci52r] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--BEC-colorNeutralForeground3);
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
}

.timeline-item[b-86b04ci52r] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: var(--BEC-borderRadiusLarge);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    font-family: inherit;
    color: inherit;
}

    .timeline-item:hover[b-86b04ci52r] {
        background: var(--BEC-colorNeutralBackground3);
    }

    .timeline-item.selected[b-86b04ci52r] {
        background: var(--BEC-colorBrandBackground2);
        box-shadow: inset 3px 0 0 var(--BEC-colorBrandBackground);
    }

.timeline-dot[b-86b04ci52r] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralStroke1);
    margin-top: 5px;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

    .timeline-dot.active[b-86b04ci52r] {
        background: var(--BEC-colorBrandBackground);
        box-shadow: 0 0 0 3px rgba(var(--BEC-colorBrandBackground), 0.2);
    }

.timeline-content[b-86b04ci52r] {
    flex: 1;
    min-width: 0;
}

.timeline-period[b-86b04ci52r] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-meta[b-86b04ci52r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.timeline-score[b-86b04ci52r] {
    font-size: 0.85rem;
    font-weight: 700;
}

.timeline-result[b-86b04ci52r] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-date[b-86b04ci52r] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 0.1rem;
}

/* ── Detail Panel ── */
.eval-detail[b-86b04ci52r] {
    min-width: 0; /* prevent grid blowout */
}

/* Header */
.header[b-86b04ci52r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: var(--BEC-colorNeutralBackground1);
    padding: 1.5rem 2rem;
    border-radius: var(--BEC-borderRadiusXXLarge);
    box-shadow: var(--BEC-shadow2);
    border-left: 5px solid var(--BEC-colorBrandBackground);
}

.header-info h1[b-86b04ci52r] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--BEC-colorBrandBackground);
    margin: 0;
}

.header-info p[b-86b04ci52r] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
}

.header-status[b-86b04ci52r] {
    text-align: right;
}

.badge[b-86b04ci52r] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success[b-86b04ci52r] {
    background-color: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-warning[b-86b04ci52r] {
    background-color: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-danger[b-86b04ci52r] {
    background-color: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

.badge-info[b-86b04ci52r] {
    background-color: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-86b04ci52r] {
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-light[b-86b04ci52r] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
}

/* Grid Layout */
.dashboard-grid[b-86b04ci52r] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.card[b-86b04ci52r] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXXLarge);
    padding: 1.5rem;
    box-shadow: var(--BEC-shadow4);
    transition: transform 0.2s ease;
}

    .card:hover[b-86b04ci52r] {
        transform: translateY(-2px);
    }

.col-span-12[b-86b04ci52r] {
    grid-column: span 12;
}

.col-span-8[b-86b04ci52r] {
    grid-column: span 8;
}

.col-span-4[b-86b04ci52r] {
    grid-column: span 4;
}

.col-span-6[b-86b04ci52r] {
    grid-column: span 6;
}

@media (max-width: 768px) {
    .col-span-8[b-86b04ci52r], .col-span-4[b-86b04ci52r], .col-span-6[b-86b04ci52r] {
        grid-column: span 12;
    }

    /* ── Additional Mobile Responsive ── */
    .dashboard-container[b-86b04ci52r] {
        padding: 1rem;
    }

    .header[b-86b04ci52r] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .header-status[b-86b04ci52r] {
        text-align: left;
    }
}

/* Score Card */
.score-card[b-86b04ci52r] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground), var(--BEC-colorBrandForeground1));
    color: var(--BEC-colorNeutralBackground1);
}

.score-value[b-86b04ci52r] {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.score-label[b-86b04ci52r] {
    font-size: 1.1rem;
    opacity: 0.9;
}

.score-verdict[b-86b04ci52r] {
    margin-top: 1rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: var(--BEC-borderRadiusXXLarge);
}

/* Section Titles */
.section-title[b-86b04ci52r] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .section-title[b-86b04ci52r]::before {
        content: '';
        display: block;
        width: 4px;
        height: 1.2rem;
        background-color: var(--BEC-colorBrandForeground1);
        border-radius: 2px;
    }

/* Lists */
.list-item[b-86b04ci52r] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

    .list-item:last-child[b-86b04ci52r] {
        border-bottom: none;
    }

.list-icon[b-86b04ci52r] {
    margin-right: 1rem;
    font-size: 1.2rem;
}

.strength-icon[b-86b04ci52r] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.weakness-icon[b-86b04ci52r] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.list-content h4[b-86b04ci52r] {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.list-content p[b-86b04ci52r] {
    font-size: 0.85rem;
    color: var(--BEC-colorNeutralForeground3);
}

/* Info Grid */
.info-grid[b-86b04ci52r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-item label[b-86b04ci52r] {
    display: block;
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.info-item span[b-86b04ci52r] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

/* Evaluator Profile */
.evaluator-profile[b-86b04ci52r] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar[b-86b04ci52r] {
    width: 48px;
    height: 48px;
    background-color: var(--BEC-colorNeutralBackground4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Pending Notice ── */
.pending-notice[b-86b04ci52r] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusXLarge);
    margin-top: 2rem;
}

.pending-notice-icon[b-86b04ci52r] {
    margin-bottom: 1.5rem;
}

/* ── Action Tags ── */
.action-tag[b-86b04ci52r] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    padding: 0.5rem 1rem;
    border-radius: var(--BEC-borderRadiusLarge);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ── Badge Variants (override) ── */
.badge-info[b-86b04ci52r] {
    background-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Templates/EvaluationTemplateAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION TEMPLATE ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-o3dmwcxyuk] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-o3dmwcxyuk] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-o3dmwcxyuk] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-o3dmwcxyuk] {
    transform: scale(0.98);
}

.page-subtitle[b-o3dmwcxyuk] {
    display: none;
}

.header-right[b-o3dmwcxyuk] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-o3dmwcxyuk] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-o3dmwcxyuk] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-o3dmwcxyuk] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-o3dmwcxyuk] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-o3dmwcxyuk] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-o3dmwcxyuk] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important; /* Center the search icon and text vertically */
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-o3dmwcxyuk] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-o3dmwcxyuk] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-o3dmwcxyuk] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-o3dmwcxyuk] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

[b-o3dmwcxyuk] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 1 !important;
}

[b-o3dmwcxyuk] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-o3dmwcxyuk] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

/* Grid Header - Styling & Rounded Top Corners */
[b-o3dmwcxyuk] .e-grid .e-gridheader {
    /* Background & Borders */
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
    
    /* Rounded Corners */
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-o3dmwcxyuk] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-o3dmwcxyuk] .e-grid .e-row.e-selectionbackground,
[b-o3dmwcxyuk] .e-grid .e-row[aria-selected="true"],
[b-o3dmwcxyuk] .e-grid .e-selectionbackground {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-o3dmwcxyuk] .e-grid .e-row.e-selectionbackground:hover,
[b-o3dmwcxyuk] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-o3dmwcxyuk] .e-grid .e-row.e-selectionbackground td:first-child,
[b-o3dmwcxyuk] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-o3dmwcxyuk] .e-grid .e-row {
    height: 32px !important;
}

/* Grid Row Hover State */
[b-o3dmwcxyuk] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Grid Row Cell Styling */
[b-o3dmwcxyuk] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-o3dmwcxyuk] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-o3dmwcxyuk] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-o3dmwcxyuk 1s linear infinite;
}

@keyframes spin-b-o3dmwcxyuk {
    to { transform: rotate(360deg); }
}

.loading-container p[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-o3dmwcxyuk] {
    font-size: 48px;
}

.error-container p[b-o3dmwcxyuk] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-o3dmwcxyuk] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-info[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteLightBlueBackground2);
    color: var(--BEC-colorPaletteLightBlueForeground2);
}

.badge-danger[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

/* Help text styling */
.form-help-text[b-o3dmwcxyuk] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.badge-primary[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
/* Note: .e-gridheader styles are now consolidated above in the "Grid Header" section */
/* Note: .e-row:hover styles are now consolidated above in the "Grid Row" section */
/* Note: .e-selectionbackground styles are now consolidated above in the "Selected Row" section */

/* Grid Header Cell - Additional Styling */
[b-o3dmwcxyuk] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-o3dmwcxyuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-o3dmwcxyuk] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-o3dmwcxyuk] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.sidebar-step-content[b-o3dmwcxyuk] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px; /* Prevent content from being hidden by fixed footer */
    position: relative;
}

.wizard-step[b-o3dmwcxyuk] {
    max-width: 100%;
}

.step-title[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-o3dmwcxyuk] {
    margin-bottom: 20px;
}

.form-label[b-o3dmwcxyuk] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-o3dmwcxyuk]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ========================================
   COMPACT FORM STYLES (Edit Wizard)
   ======================================== */

/* 2-Column Grid Layout */
.form-grid-2col[b-o3dmwcxyuk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Compact Form Group */
.form-group-compact[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact Form Label */
.form-label-compact[b-o3dmwcxyuk] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.form-label-compact.required[b-o3dmwcxyuk]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* Compact Input Fields */
[b-o3dmwcxyuk] .compact-input .e-input-group {
    height: 28px !important;
}

[b-o3dmwcxyuk] .compact-input .e-input-group input {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Compact Textarea */
[b-o3dmwcxyuk] .compact-textarea .e-input-group {
    min-height: 60px !important;
}

[b-o3dmwcxyuk] .compact-textarea .e-input-group textarea {
    font-size: 11px !important;
    padding: 6px 8px !important;
    line-height: 1.4 !important;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-o3dmwcxyuk] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-o3dmwcxyuk 2s ease-in-out infinite;
}

@keyframes sparkle-b-o3dmwcxyuk {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-o3dmwcxyuk] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-o3dmwcxyuk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-o3dmwcxyuk] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer - Positioned at absolute bottom (matches Employee Evaluators) */
.sidebar-footer[b-o3dmwcxyuk] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Footer Buttons Container - Right Aligned */
.footer-buttons[b-o3dmwcxyuk] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Buttons (HTML buttons with custom CSS) - Standardized (matches Employee Evaluators) */
.btn[b-o3dmwcxyuk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-width: 120px;
    height: 36px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    border-radius: var(--BEC-borderRadiusMedium);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn:disabled[b-o3dmwcxyuk] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary/Cancel Button - Gray */
.btn-secondary[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active:not(:disabled)[b-o3dmwcxyuk] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Success/Save Button - Green */
.btn-success[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-success:active:not(:disabled)[b-o3dmwcxyuk] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn i[b-o3dmwcxyuk] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN - Now handled by Syncfusion Adaptive UI
   ======================================== */

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-o3dmwcxyuk] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-o3dmwcxyuk] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-o3dmwcxyuk] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-o3dmwcxyuk] .notification-success .e-dlg-content,
[b-o3dmwcxyuk] .notification-error .e-dlg-content,
[b-o3dmwcxyuk] .notification-warning .e-dlg-content,
[b-o3dmwcxyuk] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-o3dmwcxyuk] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-o3dmwcxyuk] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-o3dmwcxyuk] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-o3dmwcxyuk] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-o3dmwcxyuk] {
    margin-bottom: 24px;
    animation: fadeInUp-b-o3dmwcxyuk 0.6s ease;
}

.step-title[b-o3dmwcxyuk] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-o3dmwcxyuk] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeInUp-b-o3dmwcxyuk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   MULTI-STEP WIZARD STYLES
   ======================================== */

/* Wizard Container */
.wizard-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Step Indicator */
.wizard-steps[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.step[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-circle[b-o3dmwcxyuk] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 16px;
    transition: all 0.3s ease;
}

.step.active .step-circle[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3);
}

.step.completed .step-circle[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

.step-label[b-o3dmwcxyuk] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.step.active .step-label[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.step-separator[b-o3dmwcxyuk] {
    width: 80px;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 16px;
}

/* Wizard Step Content */
.wizard-step-content[b-o3dmwcxyuk] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.step-header[b-o3dmwcxyuk] {
    margin-bottom: 24px;
}

.step-header h3[b-o3dmwcxyuk] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-header .step-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
    margin: 0;
}

/* Version Info Banner */
.version-info-banner[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
}

.version-info-banner i[b-o3dmwcxyuk] {
    font-size: 16px;
}

/* Questions Section in View Wizard */
.form-section[b-o3dmwcxyuk] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-o3dmwcxyuk] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-o3dmwcxyuk] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.questions-grid[b-o3dmwcxyuk] {
    margin-top: 16px;
}

/* Total Weighting Display */
.total-weighting[b-o3dmwcxyuk] {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.total-weighting strong[b-o3dmwcxyuk] {
    color: var(--BEC-colorNeutralForeground1);
}

/* No Data State */
.no-data[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground2);
    text-align: center;
}

.no-data i[b-o3dmwcxyuk] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-data p[b-o3dmwcxyuk] {
    margin: 0;
    font-size: 14px;
}

/* Wizard Footer */
.wizard-footer[b-o3dmwcxyuk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   WIZARD LOADING (SYNCFUSION STANDARD)
   ======================================== */

.wizard-loading-container[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px;
}

.loading-content[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.spinner-wrapper[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ Syncfusion Bootstrap 4 Spinner Styles */
.e-spinner-pane[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60px;
    height: 60px;
}

.e-spinner-inner[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.e-spin-bootstrap4[b-o3dmwcxyuk] {
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-radius: 50%;
    border-top-color: var(--BEC-colorBrandBackground);
    width: 48px;
    height: 48px;
    animation: spin-b-o3dmwcxyuk 0.8s linear infinite;
}

@keyframes spin-b-o3dmwcxyuk {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    text-align: center;
    animation: fadeIn-b-o3dmwcxyuk 0.3s ease-in;
}

@keyframes fadeIn-b-o3dmwcxyuk {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   SYNCFUSION STANDARDS - INLINE STYLE REPLACEMENTS
   ======================================== */

/* Column Template Styles */
.flex-row-gap-6[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flex-row-gap-8[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-icon[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandBackground);
    font-size: 14px;
}

.question-count[b-o3dmwcxyuk] {
    font-weight: 500;
}

/* Warning Styles */
.warning-icon-red[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.warning-text-red[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
}

.flex-align-center-gap-10[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-dialog-icon[b-o3dmwcxyuk] {
    font-size: 20px;
}

/* Wizard Styles */
.wizard-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 16px;
}

.help-note[b-o3dmwcxyuk] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 4px 0 0 24px;
}

.help-icon-large[b-o3dmwcxyuk] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.help-list[b-o3dmwcxyuk] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

/* ============================================
   VERSION MANAGEMENT WIZARD STYLES - COMPACT MS DESIGN
   ============================================ */

/* Compact Version Selector - One Line Per Version */
.version-selector-compact[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.version-radio-item-compact[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    transition: all 0.15s ease;
    background: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    font-size: 13px;
}

.version-radio-item-compact:hover[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    background: var(--BEC-colorNeutralBackground2);
}

.version-radio-item-compact.selected[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    background: var(--BEC-colorBrandBackground2);
    border-width: 2px;
}

.version-radio-item-compact input[type="radio"][b-o3dmwcxyuk] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--BEC-colorBrandBackground);
}

.version-number-compact[b-o3dmwcxyuk] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    min-width: 30px;
}

.version-meta[b-o3dmwcxyuk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.version-meta i[b-o3dmwcxyuk] {
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
}

/* Compact Version Details - Inline Layout */
.version-details-compact[b-o3dmwcxyuk] {
    margin-top: 8px;
}

.details-inline[b-o3dmwcxyuk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 10px;
    margin-top: 8px;
    max-height: 60px; /* Max 2 lines */
    overflow: hidden;
}

.detail-item-inline[b-o3dmwcxyuk] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.detail-label-inline[b-o3dmwcxyuk] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
}

.detail-value-inline[b-o3dmwcxyuk] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* Loading Questions Indicator */
.loading-questions[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 11px;
}

.spinner-small[b-o3dmwcxyuk] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-o3dmwcxyuk 0.6s linear infinite;
}

@keyframes spin-b-o3dmwcxyuk {
    to { transform: rotate(360deg); }
}

/* Questions by Category */
.questions-by-category[b-o3dmwcxyuk] {
    margin-top: 10px;
}

.category-section[b-o3dmwcxyuk] {
    margin-bottom: 12px;
}

.category-header[b-o3dmwcxyuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-colorBrandForeground1) 100%);
    border-radius: 4px;
    margin-bottom: 6px;
}

.category-name[b-o3dmwcxyuk] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralBackground1);
}

.category-weight[b-o3dmwcxyuk] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralBackground1);
    opacity: 0.95;
}

/* Question List */
.question-list[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.question-item[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.question-item:hover[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
}

.question-serial[b-o3dmwcxyuk] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    font-weight: 600;
    font-size: 10px;
}

.question-text[b-o3dmwcxyuk] {
    flex: 1;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
    text-align: left;
}

.question-scores[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2);
    flex-shrink: 0;
}

.question-scores .score-label[b-o3dmwcxyuk] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
}

.question-weight[b-o3dmwcxyuk] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    min-width: 45px;
    text-align: right;
}

.question-status[b-o3dmwcxyuk] {
    flex-shrink: 0;
    min-width: 55px;
}

.question-status .badge[b-o3dmwcxyuk] {
    font-size: 8px;
    padding: 2px 6px;
}

/* Total Weighting Summary */
.total-weighting[b-o3dmwcxyuk] {
    margin-top: 10px;
    padding: 6px 10px;
    background: var(--BEC-colorPaletteGreenForeground2);
    border-radius: 4px;
    color: var(--BEC-colorNeutralBackground1);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 1px 4px rgba(40, 167, 69, 0.15);
}

/* ========================================
   ASSIGNED EMPLOYEES SECTION
   ======================================== */
.assigned-employees-list[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.employee-assignment-card[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 10px 12px;
    transition: all 0.2s ease;
    width: 100%;
}

.employee-assignment-card:hover[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.employee-row-line1[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    width: 100%;
}

.employee-row-line2[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.employee-code[b-o3dmwcxyuk] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding: 0;
    min-width: 80px;
}

.employee-name[b-o3dmwcxyuk] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    flex: 1;
}

.employee-detail-item[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.detail-label[b-o3dmwcxyuk] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.detail-value[b-o3dmwcxyuk] {
    color: var(--BEC-colorNeutralForeground1);
}

/* Activation Warning */
.activation-warning[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border: 1px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: 4px;
    margin-bottom: 8px;
}

.activation-warning i[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 12px;
    flex-shrink: 0;
}

.activation-warning span[b-o3dmwcxyuk] {
    font-size: 9px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    line-height: 1.2;
    flex: 1;
}

/* Activation Warning Inline (below title) */
.activation-warning-inline[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border: 1px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.activation-warning-inline i[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 12px;
    flex-shrink: 0;
}

.activation-warning-inline span[b-o3dmwcxyuk] {
    font-size: 11px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    line-height: 1.4;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Version Details Tabs */
.version-details-tabs[b-o3dmwcxyuk] {
    margin-top: 16px;
    width: 100%;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    width: 100%;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar {
    width: 100%;
    display: flex;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item {
    padding: 0 16px;
    flex: 1;
    text-align: center;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item .e-tab-text i {
    font-size: 14px;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-content {
    padding: 0;
    background: var(--BEC-colorNeutralBackground1);
    width: 100%;
}

.version-details-tabs .tab-content[b-o3dmwcxyuk] {
    padding: 16px 0;
    min-height: 200px;
    width: 100%;
}

/* Footer Buttons Container */
/* Footer buttons styling is handled by .footer-buttons and .btn classes above */

/* ========================================
   COLUMN CHOOSER DIALOG - Matches Excel Filter Design
   ======================================== */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

/* Column Chooser Dialog Header */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

/* Column Chooser Dialog Content */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

/* Column Chooser Dialog Footer (OK/Cancel buttons) */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Column Chooser Search Box - Matches Excel Filter Search */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

/* Column Chooser List Items - Matches Excel Filter Checkbox List */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Column Chooser Checkbox Items */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Column Chooser Buttons */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   NOTIFICATION BUTTON IN GRID ROW
   ======================================== */
.btn-notification-row[b-o3dmwcxyuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorBrandBackground);
    background: transparent;
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-notification-row:hover[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 215, 0.2);
}

.btn-notification-row:active[b-o3dmwcxyuk] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 120, 215, 0.2);
}

.btn-notification-row i[b-o3dmwcxyuk] {
    font-size: 11px;
}

.btn-notification-row span[b-o3dmwcxyuk] {
    font-size: 11px;
}

/* Badge Styles */
.badge-primary[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Arabic question text */
.q-text-arabic[b-o3dmwcxyuk] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Templates/EvaluationTemplateVersionManagement.razor.rz.scp.css */
/* ========================================
   CREATE NEW VERSION PAGE - Matches EvaluationTemplateAdministration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-opjdboukl7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-opjdboukl7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-opjdboukl7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-opjdboukl7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-opjdboukl7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-opjdboukl7] {
    transform: scale(0.98);
}

.header-right[b-opjdboukl7] {
    flex-shrink: 0;
}

/* Header Info - Inline Template Details */
.header-info[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.info-label[b-opjdboukl7] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.info-value[b-opjdboukl7] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.info-separator[b-opjdboukl7] {
    color: var(--BEC-colorNeutralStroke2);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ✅ Weight Validation Colors in Header */
.info-value.weight-valid[b-opjdboukl7] {
    color: var(--BEC-colorPaletteGreenForeground1) !important;
}

.info-value.weight-invalid[b-opjdboukl7] {
    color: var(--BEC-colorPaletteRedForeground1) !important;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-opjdboukl7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-opjdboukl7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-opjdboukl7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-opjdboukl7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
/* Inline Edit Hint - Subtle, minimal space, positioned above grid */
.inline-edit-hint[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    margin-bottom: 2px;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.6;
    transition: opacity 0.2s ease;
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 10;
}

.inline-edit-hint:hover[b-opjdboukl7] {
    opacity: 0.9;
}

.inline-edit-hint i[b-opjdboukl7] {
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.8;
}

.inline-edit-hint .hint-text[b-opjdboukl7] {
    font-style: italic;
    white-space: nowrap;
}

.erp-page-content[b-opjdboukl7] {
    position: relative;
    flex: 1;
    padding: 10px 20px 30px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - MICROSOFT ULTRA COMPACT
   ======================================== */

/* Toolbar Container */
[b-opjdboukl7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important; /* ✅ No background - flat, clean look */
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ✅ CLEAR BLUE ICONS - User-friendly, no background */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 14px !important; /* Increased size for better clarity */
    margin-right: 0 !important;
    color: var(--BEC-colorBrandBackground) !important; /* 🔵 Blue icons */
    transition: color 0.2s ease !important;
    background: transparent !important; /* No background on icons */
}

/* ✅ CSV icon (fa-file-csv) - Orange/Red color for CSV recognition */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .fa-file-csv {
    color: #E97451 !important; /* CSV orange/red color for instant recognition */
}

/* ✅ Excel icon (fa-file-excel) - Green color for Excel recognition */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .fa-file-excel {
    color: #217346 !important; /* Excel green color for instant recognition */
}

/* ✅ Upload arrow (fa-arrow-up) - Blue color */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .fa-arrow-up {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandForeground1) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

[b-opjdboukl7] .e-toolbar .e-separator {
    width: 1px !important;
    height: 14px !important;
    background: var(--BEC-colorBrandBackground) !important;
    margin: 0 4px !important;
}

/* Primary Button Styling */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary {
    background: var(--BEC-colorBrandBackground) !important;
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary .e-icons,
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
}

/* ========================================
   TOTAL WEIGHT DISPLAY - TEXT COLOR VALIDATION ONLY
   ======================================== */
.total-weight-display[b-opjdboukl7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    transition: color 0.3s ease;
    margin-right: 8px;
    background: transparent; /* ✅ No background */
    border: none; /* ✅ No border */
}

.total-weight-display .weight-label[b-opjdboukl7] {
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.total-weight-display .weight-value[b-opjdboukl7] {
    font-size: 15px;
    font-weight: var(--BEC-fontWeightBold);
    margin-left: 4px;
    transition: color 0.3s ease;
}

.total-weight-display .weight-error-icon[b-opjdboukl7] {
    margin-left: 4px;
    font-size: 14px;
    animation: pulse-b-opjdboukl7 1.5s ease-in-out infinite;
}

/* ✅ Valid weight (100%) - Green text only */
.total-weight-display.weight-valid .weight-value[b-opjdboukl7] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

/* ❌ Invalid weight (≠ 100%) - Red text only */
.total-weight-display.weight-invalid .weight-value[b-opjdboukl7] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.total-weight-display.weight-invalid .weight-error-icon[b-opjdboukl7] {
    color: var(--BEC-colorPaletteRedForeground1);
}

/* Pulse animation for error icon */
@keyframes pulse-b-opjdboukl7 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ========================================
   LOADING STATE - SYNCFUSION STANDARD
   ======================================== */
.loading-container[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.loading-spinner[b-opjdboukl7] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 16px;
}

.loading-spinner i[b-opjdboukl7] {
    animation: spin-b-opjdboukl7 1s linear infinite;
}

@keyframes spin-b-opjdboukl7 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-message[b-opjdboukl7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.error-icon[b-opjdboukl7] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
    margin-bottom: 16px;
}

.error-message[b-opjdboukl7] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 24px;
}

/* ========================================
   FORM INLINE - NO BOX (Direct on Background)
   ======================================== */
.form-inline[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 20px 12px 20px; /* ✅ Reduced top padding */
    margin-bottom: 12px; /* ✅ Reduced bottom margin */
    background: transparent;
}

.form-field[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 6px; /* ✅ Reduced gap */
}

.field-label[b-opjdboukl7] {
    font-size: 11px; /* ✅ Slightly smaller */
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

/* ========================================
   COMPACT FORM CONTROLS - ULTRA-CLEAN
   ======================================== */

/* ✅ Input Group Container - Reduced height + Clean borders */
[b-opjdboukl7] .compact-datepicker.e-input-group,
[b-opjdboukl7] .compact-textbox.e-input-group {
    height: 24px !important;
    min-height: 24px !important;
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ✅ Remove ALL Syncfusion focus styling (no blue underlines!) */
[b-opjdboukl7] .compact-datepicker.e-input-group.e-input-focus,
[b-opjdboukl7] .compact-textbox.e-input-group.e-input-focus,
[b-opjdboukl7] .compact-datepicker.e-input-group:focus-within,
[b-opjdboukl7] .compact-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ✅ Remove bottom border animation */
[b-opjdboukl7] .compact-datepicker.e-input-group::before,
[b-opjdboukl7] .compact-textbox.e-input-group::before,
[b-opjdboukl7] .compact-datepicker.e-input-group::after,
[b-opjdboukl7] .compact-textbox.e-input-group::after {
    display: none !important;
}

/* ✅ Input field itself */
[b-opjdboukl7] .compact-datepicker .e-input,
[b-opjdboukl7] .compact-textbox .e-input {
    height: 22px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    border: none !important;
    background: transparent !important;
}

/* ✅ Input focus - no outline */
[b-opjdboukl7] .compact-datepicker .e-input:focus,
[b-opjdboukl7] .compact-textbox .e-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ✅ Icon button */
[b-opjdboukl7] .compact-datepicker .e-input-group-icon,
[b-opjdboukl7] .compact-textbox .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
}

/* ✅ Checkbox */
[b-opjdboukl7] .compact-checkbox {
    height: 24px !important;
    min-height: 24px !important;
}

[b-opjdboukl7] .compact-checkbox .e-checkbox-wrapper {
    font-size: 12px !important;
}

[b-opjdboukl7] .compact-checkbox .e-frame {
    width: 16px !important;
    height: 16px !important;
}

/* ========================================
   QUESTIONS CARD
   ======================================== */
.questions-card[b-opjdboukl7] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 20px;
    margin-bottom: 16px;
}

.questions-card-title[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.questions-card-title i[b-opjdboukl7] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-state i[b-opjdboukl7] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.empty-state p[b-opjdboukl7] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.empty-state span[b-opjdboukl7] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO QUESTION CATEGORY
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-opjdboukl7] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    margin-top: 1px; /* ✅ Minimal spacing to match Evaluation Templates page */
}

/* Grid Header - Rounded Top Corners */
[b-opjdboukl7] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-opjdboukl7] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Header Cells */
[b-opjdboukl7] .e-grid .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-opjdboukl7] .e-grid .e-row {
    height: 32px !important;
}

[b-opjdboukl7] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Row Hover */
[b-opjdboukl7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-opjdboukl7] .e-grid .e-row.e-selectionbackground,
[b-opjdboukl7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-opjdboukl7] .e-grid .e-row.e-selectionbackground:hover,
[b-opjdboukl7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-opjdboukl7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-opjdboukl7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* ========================================
   BATCH EDIT MODE - VISUAL INDICATORS
   ======================================== */

/* ✅ Changed Cells ONLY (Yellow) - NOT entire row */
[b-opjdboukl7] .e-grid .e-updatedtd {
    background: var(--BEC-colorPaletteYellowBackground2) !important;
    border: 1px solid var(--BEC-colorPaletteYellowForeground1) !important;
}

/* ✅ Added Rows (Green) - ONLY for truly new rows */
[b-opjdboukl7] .e-grid .e-addedrow {
    background: var(--BEC-colorPaletteGreenBackground2) !important;
    height: 32px !important; /* ✅ Match normal row height */
}

/* ✅ NEW: Ensure added row cells match height too */
[b-opjdboukl7] .e-grid .e-addedrow td {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

/* ✅ Deleted Rows (Red) */
[b-opjdboukl7] .e-grid .e-hiddenrow {
    background: var(--BEC-colorPaletteRedBackground2) !important;
    text-decoration: line-through !important;
    opacity: 0.6 !important;
}

/* ========================================
   PAGER STYLING - IDENTICAL TO QUESTION CATEGORY
   ======================================== */
[b-opjdboukl7] .e-grid .e-gridpager {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 8px !important;
}

[b-opjdboukl7] .e-grid .e-gridpager .e-pagercontainer {
    font-size: 12px !important;
}

/* ========================================
   EDIT CELL INPUT (Batch Edit Mode) - COMPACT HEIGHT
   ======================================== */

/* ✅ CRITICAL: Edit mode rows MUST match normal row height (32px) */
[b-opjdboukl7] .e-grid .e-row.e-editedrow {
    height: 32px !important;
}

[b-opjdboukl7] .e-grid .e-row.e-editedrow td {
    padding: 0 !important;
    vertical-align: middle !important;
}

/* ✅ Input fields - Ultra compact to fit 32px row (applies to both edit and add modes) */
[b-opjdboukl7] .e-grid .e-input-group,
[b-opjdboukl7] .e-grid .e-numerictextbox {
    height: 28px !important;
    min-height: 28px !important;
    margin: 2px 0 !important;
}

[b-opjdboukl7] .e-grid .e-input-group .e-input,
[b-opjdboukl7] .e-grid .e-numerictextbox .e-input {
    height: 28px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

/* ✅ CRITICAL: Input fields in ADDED rows must also be compact */
[b-opjdboukl7] .e-grid .e-addedrow .e-input-group,
[b-opjdboukl7] .e-grid .e-addedrow .e-numerictextbox {
    height: 28px !important;
    min-height: 28px !important;
    margin: 2px 0 !important;
}

[b-opjdboukl7] .e-grid .e-addedrow .e-input-group .e-input,
[b-opjdboukl7] .e-grid .e-addedrow .e-numerictextbox .e-input {
    height: 28px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
}

/* ✅ HIDE SPIN BUTTONS (up/down arrows) in ALL numeric fields - Comprehensive removal */
[b-opjdboukl7] .e-grid .e-numerictextbox .e-spin-up,
[b-opjdboukl7] .e-grid .e-numerictextbox .e-spin-down,
[b-opjdboukl7] .e-grid .e-numeric .e-spin-up,
[b-opjdboukl7] .e-grid .e-numeric .e-spin-down,
[b-opjdboukl7] .e-grid .e-input-group .e-spin-up,
[b-opjdboukl7] .e-grid .e-input-group .e-spin-down,
[b-opjdboukl7] .e-grid input[type="number"]::-webkit-inner-spin-button,
[b-opjdboukl7] .e-grid input[type="number"]::-webkit-outer-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ✅ Force numeric input to be text-like (no native browser arrows) */
[b-opjdboukl7] .e-grid input[type="number"] {
    -moz-appearance: textfield !important;
        appearance: textfield !important;

}

/* ✅ Dropdown in edit mode */
[b-opjdboukl7] .e-grid .e-dropdownlist {
    height: 28px !important;
}

[b-opjdboukl7] .e-grid .e-dropdownlist .e-input-group {
    height: 28px !important;
}

[b-opjdboukl7] .e-grid .e-dropdownlist .e-input {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
}

/* Checkbox Column */
[b-opjdboukl7] .e-grid .e-checkbox-wrapper .e-frame {
    width: 16px !important;
    height: 16px !important;
}

[b-opjdboukl7] .e-grid .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   BADGE STYLING - MATCHES EVALUATION TEMPLATES
   ======================================== */
.badge[b-opjdboukl7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary[b-opjdboukl7] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-opjdboukl7] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.badge-inactive[b-opjdboukl7] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-info[b-opjdboukl7] {
    background: var(--BEC-colorPaletteBlueForeground3);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   NOTIFICATION DIALOG - MATCHES EVALUATION TEMPLATES
   ======================================== */
[b-opjdboukl7] .e-notification-dialog .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-colorBrandBackground2) 100%);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 12px 20px;
    border-top-left-radius: var(--BEC-borderRadiusMedium);
    border-top-right-radius: var(--BEC-borderRadiusMedium);
}

.notification-header[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.notification-header i[b-opjdboukl7] {
    font-size: 20px;
}

[b-opjdboukl7] .e-notification-dialog.e-success .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorPaletteGreenBackground3) 0%, var(--BEC-colorPaletteGreenBackground2) 100%);
}

[b-opjdboukl7] .e-notification-dialog.e-error .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorPaletteRedBackground3) 0%, var(--BEC-colorPaletteRedBackground2) 100%);
}

[b-opjdboukl7] .e-notification-dialog.e-warning .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorPaletteYellowBackground3) 0%, var(--BEC-colorPaletteYellowBackground2) 100%);
}

.notification-content[b-opjdboukl7] {
    padding: 20px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   HELP SIDEBAR - MATCHES EVALUATION TEMPLATES
   ======================================== */
[b-opjdboukl7] .help-sidebar {
    width: 600px !important;
    box-shadow: var(--BEC-shadow16);
}

.help-content[b-opjdboukl7] {
    padding: 0;
}

.help-header[b-opjdboukl7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.help-header h2[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.help-header .close-btn[b-opjdboukl7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.help-header .close-btn:hover[b-opjdboukl7] {
    background: rgba(255, 255, 255, 0.2);
}

.help-body[b-opjdboukl7] {
    padding: 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.help-section[b-opjdboukl7] {
    margin-bottom: 24px;
}

.help-section h3[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 12px 0;
}

.help-section p[b-opjdboukl7],
.help-section li[b-opjdboukl7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.help-section ul[b-opjdboukl7],
.help-section ol[b-opjdboukl7] {
    padding-left: 20px;
    margin: 8px 0;
}

.help-section li[b-opjdboukl7] {
    margin-bottom: 8px;
}

/* ========================================
   SYNCFUSION COMPONENT OVERRIDES
   ======================================== */
[b-opjdboukl7] .e-input-group.e-control-wrapper .e-control.e-input,
[b-opjdboukl7] .e-float-input.e-control-wrapper .e-control.e-input {
    border-color: var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

[b-opjdboukl7] .e-input-group.e-input-focus .e-control.e-input,
[b-opjdboukl7] .e-float-input.e-input-focus .e-control.e-input {
    border-color: var(--BEC-colorBrandBackground) !important;
}

[b-opjdboukl7] .e-checkbox-wrapper .e-frame {
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

[b-opjdboukl7] .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   HIDDEN UPLOADER - Syncfusion Standard Approach
   ======================================== */
[b-opjdboukl7] .hidden-uploader .e-file-drop {
    display: none !important;
}

[b-opjdboukl7] .hidden-uploader.e-upload.e-control-wrapper {
    border: 0px !important;
    padding: 0px !important;
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Arabic question text */
.q-text-arabic[b-opjdboukl7] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/Personal_Leave/Master/PersonalLeave.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-sit30ghgs1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-sit30ghgs1] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-sit30ghgs1] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-sit30ghgs1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-sit30ghgs1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-sit30ghgs1] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-sit30ghgs1] {
    transform: scale(0.98);
}

.page-subtitle[b-sit30ghgs1] {
    display: none;
}

.header-right[b-sit30ghgs1] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-sit30ghgs1] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-sit30ghgs1] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-sit30ghgs1] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-sit30ghgs1] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-sit30ghgs1] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-sit30ghgs1] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Request Leave Button - Primary Action Style */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
    padding: 0 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn .e-icons {
    color: white !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.3) !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Toolbar Items */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-sit30ghgs1] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-sit30ghgs1] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-sit30ghgs1] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-sit30ghgs1] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-sit30ghgs1] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* NumericTextBox in Toolbar */
[b-sit30ghgs1] .e-toolbar .e-numerictextbox {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-numerictextbox .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-numerictextbox:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-sit30ghgs1] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-sit30ghgs1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   DATE WIZARD SIDEBAR
   ======================================== */
[b-sit30ghgs1] .date-wizard-sidebar.e-sidebar {
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
    [b-sit30ghgs1] .date-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {
    [b-sit30ghgs1] .date-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }
    
    .sidebar-header[b-sit30ghgs1],
    .sidebar-footer[b-sit30ghgs1] {
        padding: 16px 20px;
    }
    
    .sidebar-step-content[b-sit30ghgs1] {
        padding: 16px 20px;
    }
}

.sidebar-header[b-sit30ghgs1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-sit30ghgs1] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-sit30ghgs1] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-sit30ghgs1] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-sit30ghgs1] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-sit30ghgs1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-sit30ghgs1] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-sit30ghgs1] {
    max-width: 100%;
}

.step-title[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-sit30ghgs1] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-sit30ghgs1] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-sit30ghgs1] {
    margin-bottom: 20px;
}

.form-label[b-sit30ghgs1] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-sit30ghgs1]::after {
    content: " *";
    color: #d13438;
}

.field-hint[b-sit30ghgs1] {
    display: block;
    font-size: 11px;
    color: #8a8886;
    margin-top: 4px;
    font-style: italic;
}

.error-message[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #d13438;
    margin-top: 6px;
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */
.sidebar-footer[b-sit30ghgs1] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.btn[b-sit30ghgs1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-sit30ghgs1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-sit30ghgs1] {
    background: #0078d4;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-sit30ghgs1] {
    background: #106ebe;
}

.btn-secondary[b-sit30ghgs1] {
    background: #f3f3f3;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-sit30ghgs1] {
    background: #e1e1e1;
}

.btn i[b-sit30ghgs1] {
    font-size: 14px;
}

/* /Components/Pages/MainLayout/Recruitment/ManagementDashboard/RecruitmentManagementDashboard.razor.rz.scp.css */
.erp-page-container[b-3l8coi4uxh] {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.dashboard-header[b-3l8coi4uxh] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-title[b-3l8coi4uxh] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--BEC-Text-Primary);
}

.page-subtitle[b-3l8coi4uxh] {
    margin: 4px 0 0;
    color: var(--BEC-Text-Secondary);
}

.header-actions[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-input[b-3l8coi4uxh],
.status-filter[b-3l8coi4uxh],
.notes-area[b-3l8coi4uxh] {
    width: 100%;
    border: 1px solid var(--BEC-Border-Primary);
    border-radius: 8px;
    background: var(--BEC-Surface-Primary);
    color: var(--BEC-Text-Primary);
    padding: 8px 10px;
}

.search-input[b-3l8coi4uxh] {
    min-width: 260px;
}

.status-filter[b-3l8coi4uxh] {
    min-width: 170px;
}

.notes-area[b-3l8coi4uxh] {
    min-height: 96px;
    resize: vertical;
}

.state-banner[b-3l8coi4uxh] {
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid var(--BEC-Border-Primary);
}

.state-banner.info[b-3l8coi4uxh] {
    background: var(--BEC-Info-Soft);
}

.state-banner.error[b-3l8coi4uxh] {
    background: var(--BEC-Error-Soft);
}

.state-banner.success[b-3l8coi4uxh] {
    background: var(--BEC-Success-Soft);
}

.state-card[b-3l8coi4uxh],
.panel[b-3l8coi4uxh],
.stat-card[b-3l8coi4uxh] {
    border: 1px solid var(--BEC-Border-Primary);
    border-radius: 12px;
    background: var(--BEC-Surface-Primary);
}

.state-card[b-3l8coi4uxh] {
    padding: 20px;
}

.stats-grid[b-3l8coi4uxh] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.stat-card[b-3l8coi4uxh] {
    padding: 12px;
    display: grid;
    gap: 4px;
}

.stat-label[b-3l8coi4uxh] {
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary);
}

.stat-value[b-3l8coi4uxh] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--BEC-Text-Primary);
}

.content-grid[b-3l8coi4uxh] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
}

.panel[b-3l8coi4uxh] {
    padding: 12px;
    min-height: 360px;
}

.panel-header[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.panel-header h2[b-3l8coi4uxh] {
    margin: 0;
    font-size: 1.1rem;
}

.panel-meta[b-3l8coi4uxh] {
    color: var(--BEC-Text-Secondary);
    font-size: 0.85rem;
}

.table-wrap[b-3l8coi4uxh] {
    overflow: auto;
}

.applications-table[b-3l8coi4uxh] {
    width: 100%;
    border-collapse: collapse;
}

.applications-table th[b-3l8coi4uxh],
.applications-table td[b-3l8coi4uxh] {
    padding: 10px 8px;
    border-bottom: 1px solid var(--BEC-Border-Secondary);
    text-align: left;
    vertical-align: middle;
}

.applications-table tbody tr[b-3l8coi4uxh] {
    cursor: pointer;
}

.applications-table tbody tr:hover[b-3l8coi4uxh] {
    background: var(--BEC-Surface-Hover);
}

.applications-table tbody tr.row-selected[b-3l8coi4uxh] {
    background: var(--BEC-Surface-Selected);
}

.status-chip[b-3l8coi4uxh] {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--BEC-Info-Soft);
    color: var(--BEC-Text-Primary);
    font-size: 0.8rem;
}

.status-chip--hired[b-3l8coi4uxh] {
    background: var(--BEC-Success-Soft);
    color: var(--BEC-Success-Text, #166534);
}

.status-chip--rejected[b-3l8coi4uxh] {
    background: var(--BEC-Error-Soft);
    color: var(--BEC-Error-Text, #991b1b);
}

.status-chip--interview[b-3l8coi4uxh] {
    background: var(--BEC-Warning-Soft, #fef3c7);
    color: var(--BEC-Warning-Text, #92400e);
}

.status-chip--review[b-3l8coi4uxh] {
    background: var(--BEC-Info-Soft);
    color: var(--BEC-Info-Text, #1e40af);
}

.status-chip--shortlisted[b-3l8coi4uxh] {
    background: var(--BEC-Purple-Soft, #ede9fe);
    color: var(--BEC-Purple-Text, #5b21b6);
}

.status-chip--offered[b-3l8coi4uxh] {
    background: var(--BEC-Teal-Soft, #ccfbf1);
    color: var(--BEC-Teal-Text, #0f766e);
}

.status-chip--default[b-3l8coi4uxh] {
    background: var(--BEC-Surface-Secondary, #f3f4f6);
    color: var(--BEC-Text-Secondary);
}

.reviewed-by-locked[b-3l8coi4uxh] {
    font-style: italic;
    font-size: 0.9rem;
}

.confirm-banner[b-3l8coi4uxh] {
    background: var(--BEC-Warning-Soft, #fef3c7);
    border: 1px solid var(--BEC-Border-Primary);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.confirm-actions[b-3l8coi4uxh] {
    display: flex;
    gap: 8px;
}

.pager[b-3l8coi4uxh] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.state-inline[b-3l8coi4uxh] {
    padding: 12px;
    border: 1px dashed var(--BEC-Border-Primary);
    border-radius: 8px;
    color: var(--BEC-Text-Secondary);
}

.detail-grid[b-3l8coi4uxh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-label[b-3l8coi4uxh] {
    display: block;
    font-size: 0.75rem;
    color: var(--BEC-Text-Secondary);
}

.detail-value[b-3l8coi4uxh] {
    display: block;
    color: var(--BEC-Text-Primary);
}

.divider[b-3l8coi4uxh] {
    border: 0;
    border-top: 1px solid var(--BEC-Border-Secondary);
    margin: 14px 0;
}

.update-form[b-3l8coi4uxh] {
    display: grid;
    gap: 8px;
}

.update-form h3[b-3l8coi4uxh] {
    margin: 0 0 2px;
    font-size: 1rem;
}

.update-form label[b-3l8coi4uxh] {
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary);
}

.update-actions[b-3l8coi4uxh] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .content-grid[b-3l8coi4uxh] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-3l8coi4uxh] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MainLayout/Recruitment/PublicApplication/PublicJobApplication.razor.rz.scp.css */
.public-job-app-shell[b-m0jp6zpxpa] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px;
    display: grid;
    gap: 10px;
    color: var(--BEC-Text-Primary);
    background: var(--BEC-dashboard-bg);
    min-height: 100vh;
    font-family: "Segoe UI", "Segoe UI Variable", "Tajawal", "Noto Sans Arabic", "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.4;
}

.card-surface[b-m0jp6zpxpa] {
    background: var(--BEC-Surface-Base);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-depth-1);
}

.public-job-app-header[b-m0jp6zpxpa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.public-job-app-brand[b-m0jp6zpxpa] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.public-job-app-logo[b-m0jp6zpxpa] {
    width: 118px;
    height: auto;
    flex-shrink: 0;
}

.public-job-app-kicker[b-m0jp6zpxpa] {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--BEC-Brand-Primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-job-app-header-text h1[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--BEC-neutralPrimary);
}

.public-job-app-header-text p[b-m0jp6zpxpa] {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--BEC-neutralSecondary);
}

.public-job-app-public-badge[b-m0jp6zpxpa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--BEC-Brand-Primary);
    color: var(--BEC-Brand-Primary);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 5px 9px;
    white-space: nowrap;
}

.public-job-app-body[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 10px;
    align-items: start;
}

.public-job-app-main[b-m0jp6zpxpa] {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.public-job-app-aside[b-m0jp6zpxpa] {
    min-width: 0;
}

.status-stack[b-m0jp6zpxpa] {
    display: grid;
    gap: 6px;
}

.status-panel[b-m0jp6zpxpa] {
    padding: 8px 10px;
}

.status-panel p[b-m0jp6zpxpa] {
    margin: 0;
}

.application-card[b-m0jp6zpxpa],
.track-card[b-m0jp6zpxpa] {
    padding: 12px;
}

.track-card[b-m0jp6zpxpa] {
    position: sticky;
    top: 10px;
}

.track-card h2[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
}

.validation-summary[b-m0jp6zpxpa] {
    margin: 0;
    padding: 7px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Error-Subtle);
    color: var(--BEC-Error-Main);
    border: 1px solid var(--BEC-Error-Main);
}

.form-section[b-m0jp6zpxpa] {
    display: grid;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--BEC-Border-Subtle);
}

.form-section:first-of-type[b-m0jp6zpxpa] {
    border-top: 0;
    padding-top: 6px;
}

.section-head[b-m0jp6zpxpa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.section-head h2[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.005em;
    color: var(--BEC-neutralPrimary);
}

.state-text[b-m0jp6zpxpa],
.section-note[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--BEC-neutralSecondary);
}

.error-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Error-Main);
    background: var(--BEC-Error-Subtle);
    color: var(--BEC-Error-Main);
}

.warning-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Warning-Main);
    background: var(--BEC-Warning-Subtle);
    color: var(--BEC-neutralPrimary);
}

.success-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Success-Main);
    background: var(--BEC-Success-Subtle);
    color: var(--BEC-Success-Main);
}

.info-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Info-Main);
    background: var(--BEC-Info-Subtle);
    color: var(--BEC-neutralPrimary);
}

.grid[b-m0jp6zpxpa] {
    display: grid;
    gap: 8px;
}

.grid-2[b-m0jp6zpxpa] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3[b-m0jp6zpxpa] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field[b-m0jp6zpxpa] {
    display: grid;
    gap: 3px;
}

.field-full[b-m0jp6zpxpa] {
    grid-column: 1 / -1;
}

.field-tight[b-m0jp6zpxpa] {
    max-width: 250px;
}

.field label[b-m0jp6zpxpa] {
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--BEC-Text-Primary);
}

.toggle-field[b-m0jp6zpxpa] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--BEC-neutralPrimary);
}

.toggle-field.compact[b-m0jp6zpxpa] {
    font-weight: 600;
}

.compact-check-grid[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
}

.declaration-field[b-m0jp6zpxpa] {
    padding: 8px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
}

.actions-row[b-m0jp6zpxpa] {
    display: flex;
    gap: 6px;
    margin: 0;
}

.repeatable-list[b-m0jp6zpxpa] {
    display: grid;
    gap: 6px;
}

.repeatable-item[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
    align-items: center;
}

.repeatable-item-wide[b-m0jp6zpxpa] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.repeatable-item-wide .textarea[b-m0jp6zpxpa] {
    grid-column: 1 / span 3;
}

.bec-input[b-m0jp6zpxpa] {
    width: 100%;
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 6px 8px;
    background: var(--BEC-Surface-Base);
    color: var(--BEC-neutralPrimary);
    min-height: 34px;
    line-height: 1.35;
}

.bec-input.textarea[b-m0jp6zpxpa] {
    min-height: 52px;
}

.bec-btn[b-m0jp6zpxpa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.bec-btn:focus-visible[b-m0jp6zpxpa] {
    outline: none;
    box-shadow: 0 0 0 2px var(--BEC-Surface-Base), 0 0 0 4px var(--BEC-Brand-Primary);
}

.bec-btn:disabled[b-m0jp6zpxpa] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.bec-btn-primary[b-m0jp6zpxpa] {
    background: var(--BEC-Brand-Primary);
    color: var(--BEC-neutral-background-1);
    border-color: var(--BEC-Brand-Primary);
    box-shadow: var(--BEC-depth-1);
}

.bec-btn-primary:hover:not(:disabled)[b-m0jp6zpxpa] {
    background: var(--BEC-Brand-Secondary);
    border-color: var(--BEC-Brand-Secondary);
}

.bec-btn-primary:active:not(:disabled)[b-m0jp6zpxpa] {
    transform: translateY(1px);
}

.bec-btn-secondary[b-m0jp6zpxpa] {
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Brand-Primary);
    border-color: var(--BEC-Brand-Primary);
}

.bec-btn-secondary:hover:not(:disabled)[b-m0jp6zpxpa] {
    background: var(--BEC-Info-Subtle);
}

.bec-btn-secondary:active:not(:disabled)[b-m0jp6zpxpa] {
    transform: translateY(1px);
}

.bec-btn-danger[b-m0jp6zpxpa] {
    background: var(--BEC-Error-Main);
    color: var(--BEC-neutral-background-1);
    border-color: var(--BEC-Error-Main);
}

.bec-btn-danger:hover:not(:disabled)[b-m0jp6zpxpa] {
    background: var(--BEC-Error-Main);
    border-color: var(--BEC-Error-Main);
    filter: brightness(0.92);
}

.bec-btn-danger:focus-visible[b-m0jp6zpxpa] {
    box-shadow: 0 0 0 2px var(--BEC-Surface-Base), 0 0 0 4px var(--BEC-Error-Main);
}

.bec-btn-danger:active:not(:disabled)[b-m0jp6zpxpa] {
    transform: translateY(1px);
}

.actions-row-submit[b-m0jp6zpxpa] {
    justify-content: flex-start;
}

.track-row[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    margin-top: 2px;
}

.tracking-summary[b-m0jp6zpxpa] {
    display: grid;
    gap: 5px;
}

.tracking-item[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 6px;
    padding: 6px 7px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
}

.tracking-key[b-m0jp6zpxpa] {
    font-weight: 700;
    font-size: 0.83rem;
    color: var(--BEC-neutralPrimary);
}

.tracking-value[b-m0jp6zpxpa] {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--BEC-neutralSecondary);
    word-break: break-word;
}

[b-m0jp6zpxpa] .e-input-group,
[b-m0jp6zpxpa] .e-control-wrapper,
[b-m0jp6zpxpa] .e-ddl.e-input-group,
[b-m0jp6zpxpa] .e-datepicker.e-input-group {
    min-height: 34px;
}

[b-m0jp6zpxpa] .e-input-group input.e-input,
[b-m0jp6zpxpa] .e-control-wrapper input.e-input,
[b-m0jp6zpxpa] .e-input-group textarea.e-input {
    min-height: 34px;
    line-height: 1.35;
    padding-block: 5px;
}

[b-m0jp6zpxpa] .e-ddl .e-input,
[b-m0jp6zpxpa] .e-datepicker .e-input {
    min-height: 34px;
}

@media (max-width: 1366px) {
    .public-job-app-shell[b-m0jp6zpxpa] {
        max-width: 1220px;
        padding: 14px;
    }

    .public-job-app-body[b-m0jp6zpxpa] {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    }
}

@media (max-width: 1280px) {
    .public-job-app-shell[b-m0jp6zpxpa] {
        max-width: 1160px;
        padding: 12px;
    }

    .public-job-app-body[b-m0jp6zpxpa] {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    }
}

@media (max-width: 1024px) {
    .public-job-app-body[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }

    .track-card[b-m0jp6zpxpa] {
        position: static;
    }

    .grid-3[b-m0jp6zpxpa],
    .compact-check-grid[b-m0jp6zpxpa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repeatable-item-wide[b-m0jp6zpxpa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repeatable-item-wide .textarea[b-m0jp6zpxpa] {
        grid-column: 1 / -1;
    }

    .grid-2[b-m0jp6zpxpa],
    .repeatable-item[b-m0jp6zpxpa],
    .tracking-item[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .public-job-app-shell[b-m0jp6zpxpa] {
        padding: 12px;
    }

    .public-job-app-header[b-m0jp6zpxpa] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    .public-job-app-brand[b-m0jp6zpxpa] {
        width: 100%;
    }

    .public-job-app-logo[b-m0jp6zpxpa] {
        width: 102px;
    }

    .public-job-app-header-text h1[b-m0jp6zpxpa] {
        font-size: 1.1rem;
    }

    .application-card[b-m0jp6zpxpa],
    .track-card[b-m0jp6zpxpa] {
        padding: 12px;
    }

    .section-head[b-m0jp6zpxpa] {
        flex-direction: column;
        align-items: flex-start;
    }

    .compact-check-grid[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }

    .actions-row[b-m0jp6zpxpa] {
        flex-direction: column;
        align-items: stretch;
    }

    .bec-btn[b-m0jp6zpxpa] {
        width: 100%;
    }
}
/* /Components/Pages/MainLayout/Referral/ExternalReferral/ExternalReferral.razor.rz.scp.css */
/* ========================================
   BEC Aspire - External Referral Public Form
   Architecture: Mobile-First Flexbox Layout
   Design: Mirrors PublicVisitorForm exactly
   ======================================== */

/* Local scoped variables — moved from :root to avoid global leak.
   Values now aliased from global tokens in _z-index.css & _motion-extended.css */

/* ── RESET & STRUCTURE ────────────────── */
.public-form-container[b-pwgbzq4men] {
    --bec-transition: var(--BEC-transitionPremium);
    --bec-shadow-premium: var(--BEC-shadowPremium);
    --z-header: var(--BEC-zIndex-Header);
    --z-footer: var(--BEC-zIndex-Footer);
    --z-content: var(--BEC-zIndex-Content);
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI', system-ui, -apple-system, sans-serif);
}

.app-container[b-pwgbzq4men] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── SIDEBAR (Mobile Default: HIDDEN) ──────────────── */
.app-sidebar[b-pwgbzq4men] {
    display: none;
}

/* ── HEADER (Mobile Only) ──────────────── */
.mobile-header[b-pwgbzq4men] {
    height: 60px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    z-index: var(--z-header);
}

.mobile-header-logo[b-pwgbzq4men] {
    font-weight: 700;
    font-size: 18px;
    color: var(--BEC-themePrimary, #0078d4);
    letter-spacing: -0.5px;
}

.mobile-progress-bar[b-pwgbzq4men] {
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
    width: 100%;
    flex-shrink: 0;
}

.mobile-progress-fill[b-pwgbzq4men] {
    height: 100%;
    background: var(--BEC-themePrimary, #0078d4);
    transition: width 0.4s ease;
}

/* ── MAIN SCROLLABLE CONTENT ────────────────── */
.app-content[b-pwgbzq4men] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.app-content > form[b-pwgbzq4men] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── WIZARD STEPS ────────────────── */
.wizard-step[b-pwgbzq4men] {
    flex: 1;
    padding: 24px 24px 120px 24px;
    display: none;
    flex-direction: column;
    animation: fadeIn-b-pwgbzq4men 0.4s ease;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.wizard-step.active[b-pwgbzq4men] {
    display: flex;
}

@keyframes fadeIn-b-pwgbzq4men {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Typography */
h1[b-pwgbzq4men] {
    font-size: 28px;
    font-weight: 800;
    color: #1a1f2c;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

h2[b-pwgbzq4men] {
    font-size: 24px;
    font-weight: 700;
    color: #1a1f2c;
    margin-bottom: 8px;
}

p.subtitle[b-pwgbzq4men] {
    font-size: 16px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 32px;
}

/* ── INPUT GROUPS ────────────────── */
.input-group[b-pwgbzq4men] {
    margin-bottom: 20px;
    position: relative;
}

.e-float-input.e-control-wrapper[b-pwgbzq4men] {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 16px 4px !important;
    height: 56px !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}

.e-float-input.e-control-wrapper.e-input-focus[b-pwgbzq4men] {
    border-color: var(--BEC-themePrimary, #0078d4) !important;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1) !important;
}

.e-float-input.e-control-wrapper .e-float-line[b-pwgbzq4men],
.e-float-input.e-control-wrapper .e-float-text-overflow[b-pwgbzq4men] {
    display: none !important;
}

.e-input-group.e-error[b-pwgbzq4men] {
    border-color: #ef4444 !important;
    animation: shake-b-pwgbzq4men 0.4s;
}

.validation-message[b-pwgbzq4men] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    margin-left: 4px;
}

@keyframes shake-b-pwgbzq4men {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ── FIXED ACTION BAR ────────────────── */
.fixed-action-bar[b-pwgbzq4men] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px 24px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-footer);
    display: flex;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.action-btn[b-pwgbzq4men] {
    flex: 1;
    height: 50px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.action-btn:active[b-pwgbzq4men] {
    transform: scale(0.96);
}

.btn[b-pwgbzq4men] {
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    border-radius: 25px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 48px;
}

.btn-primary[b-pwgbzq4men] {
    background: var(--BEC-themePrimary, #0078d4);
    color: white;
}

.btn-secondary[b-pwgbzq4men] {
    background: #e2e8f0;
    color: #475569;
}

.btn-success[b-pwgbzq4men] {
    background: #10b981;
    color: white;
}

/* ── UPLOAD AREA ──────────────── */
.upload-area[b-pwgbzq4men] {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.upload-icon[b-pwgbzq4men] {
    margin-bottom: 12px;
    color: var(--BEC-themePrimary, #0078d4);
}

.file-input-hidden[b-pwgbzq4men] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
}

[b-pwgbzq4men] input[type="file"].file-input-hidden {
    opacity: 0 !important;
}

.upload-area:hover[b-pwgbzq4men] {
    border-color: var(--BEC-themePrimary, #0078d4);
    background: #f0f9ff;
}

.upload-text-title[b-pwgbzq4men] {
    font-weight: 600;
    font-size: 16px;
    color: #334155;
    margin: 0;
}

.upload-text-subtitle[b-pwgbzq4men] {
    font-size: 13px;
    color: #94a3b8;
    margin: 4px 0 0;
}

/* File Preview */
.file-preview[b-pwgbzq4men] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 12px;
    border: 1px solid #dbeafe;
}

.file-preview-info[b-pwgbzq4men] {
    flex: 1;
}

.file-preview-name[b-pwgbzq4men] {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.file-preview-size[b-pwgbzq4men] {
    font-size: 12px;
    color: #64748b;
}

.btn-icon-remove[b-pwgbzq4men] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    display: flex;
    opacity: 0.7;
    transition: 0.2s;
}

.btn-icon-remove:hover[b-pwgbzq4men] {
    opacity: 1;
    transform: scale(1.1);
}

/* Start Button Large */
.btn-lg[b-pwgbzq4men] {
    height: 56px;
    font-size: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
    border-radius: 28px !important;
}

/* Success Page */
.success-container[b-pwgbzq4men] {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-icon[b-pwgbzq4men] {
    width: 96px;
    height: 96px;
    background: #dcfce7;
    color: #166534;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 32px;
    font-size: 48px;
    box-shadow: 0 10px 30px -10px rgba(22, 101, 52, 0.3);
    animation: popIn-b-pwgbzq4men 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-pwgbzq4men {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.success-subtitle[b-pwgbzq4men] {
    font-size: 18px;
    color: #334155;
    margin-bottom: 8px;
}

.success-thankyou[b-pwgbzq4men] {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 48px;
}

.btn--auto-width[b-pwgbzq4men] {
    min-width: 200px;
    width: auto;
    padding: 0 32px;
}

.spacer-md[b-pwgbzq4men] {
    height: 24px;
}

/* ── DESKTOP ONLY OVERRIDES ──────────────── */
@media (min-width: 900px) {
    .public-form-container[b-pwgbzq4men] {
        padding: 40px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f0f2f5 0%, #e1e4e8 100%);
    }

    .app-container[b-pwgbzq4men] {
        max-width: 1000px;
        height: 80vh;
        max-height: 800px;
        background: white;
        border-radius: 24px;
        box-shadow: var(--bec-shadow-premium);
        flex-direction: row;
        overflow: hidden;
    }

    .app-sidebar[b-pwgbzq4men] {
        width: 320px;
        padding: 40px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .sidebar-bg-deco[b-pwgbzq4men],
    .sidebar-logo[b-pwgbzq4men],
    .sidebar-stepper[b-pwgbzq4men],
    .sidebar-footer[b-pwgbzq4men] {
        display: block;
    }

    .mobile-header[b-pwgbzq4men],
    .mobile-progress-bar[b-pwgbzq4men] {
        display: none !important;
    }

    .app-content[b-pwgbzq4men] {
        padding: 0;
    }

    .wizard-step[b-pwgbzq4men] {
        padding: 60px 80px;
        max-width: none;
    }

    .fixed-action-bar[b-pwgbzq4men] {
        position: absolute;
        width: 100%;
        border-radius: 0 0 24px 0;
    }
}

/* Side Bar Premium Polish */
.app-sidebar[b-pwgbzq4men] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

.sidebar-bg-deco[b-pwgbzq4men] {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.logo-brand[b-pwgbzq4men] {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.logo-tagline[b-pwgbzq4men] {
    font-size: 14px;
    opacity: 0.6;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sidebar-stepper[b-pwgbzq4men] {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.stepper-item[b-pwgbzq4men] {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0.4;
    transition: 0.3s;
}

.stepper-item.active[b-pwgbzq4men] {
    opacity: 1;
}

.stepper-item.completed[b-pwgbzq4men] {
    opacity: 1;
}

.stepper-item.completed .step-indicator[b-pwgbzq4men] {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.step-indicator[b-pwgbzq4men] {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}

.stepper-item.active .step-indicator[b-pwgbzq4men] {
    background: white;
    color: #0f172a;
    border-color: white;
    transform: scale(1.1);
}

.step-text-title[b-pwgbzq4men] {
    font-weight: 600;
    font-size: 16px;
}

.step-text-subtitle[b-pwgbzq4men] {
    font-size: 13px;
    opacity: 0.7;
}

.sidebar-footer[b-pwgbzq4men] {
    font-size: 12px;
    opacity: 0.3;
    margin-top: auto;
}

/* ================= MIGRATED INLINE STYLES ================= */

.ref-validation-centered[b-pwgbzq4men] {
    text-align: center;
}
/* /Components/Pages/MainLayout/Referral/FraudMonitoring/Components/FraudFlagReviewModal.razor.rz.scp.css */
/* ============================================================================
   FraudFlagReviewModal - Official Design System Tokens
   ============================================================================
   Pattern: SfDialog with .sp-* form classes
   Module: Referral - Fraud Monitoring
   ============================================================================ */

/* ── DIALOG HEADER ── */
.dialog-header[b-3wkqarb2ox] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dialog-header-icon[b-3wkqarb2ox] {
    color: var(--BEC-Warning-Main, #ffb900);
    font-size: 18px;
}

.dialog-header--danger[b-3wkqarb2ox] {
    color: var(--BEC-Error-Main, #a4262c);
}

/* ── SUMMARY BOX ── */
.summary-box[b-3wkqarb2ox] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.summary-row[b-3wkqarb2ox] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.summary-row:last-child[b-3wkqarb2ox] {
    margin-bottom: 0;
}

.summary-label[b-3wkqarb2ox] {
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    min-width: 100px;
}

.summary-value[b-3wkqarb2ox] {
    color: var(--BEC-Text-Primary, #323130);
}

.confidence-badge[b-3wkqarb2ox] {
    background: var(--BEC-Brand-Primary, #0078d4);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ── FORM ELEMENTS ── */
.sp-form-group[b-3wkqarb2ox] {
    margin-bottom: 16px;
}

.sp-label[b-3wkqarb2ox] {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--BEC-Text-Primary, #323130);
}

.sp-required[b-3wkqarb2ox] {
    color: var(--BEC-Error-Main, #a4262c);
}

/* ── DECISION OPTIONS ── */
.decision-options[b-3wkqarb2ox] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.decision-option[b-3wkqarb2ox] {
    padding: 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    background: var(--BEC-Surface-Base, #fff);
    transition: all 0.15s ease;
}

.decision-option:hover[b-3wkqarb2ox] {
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-color: var(--BEC-Brand-Primary, #0078d4);
}

.decision-option--danger:hover[b-3wkqarb2ox] {
    border-color: var(--BEC-Error-Main, #a4262c);
    background: var(--BEC-Error-Subtle, #fde7e9);
}

/* ── ALERT ── */
.sp-alert[b-3wkqarb2ox] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

.sp-alert--error[b-3wkqarb2ox] {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Main, #a4262c);
    border: 1px solid var(--BEC-Error-Main, #a4262c);
}

.sp-alert--warning[b-3wkqarb2ox] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-Text-Primary, #323130);
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
}

.sp-alert-dismiss[b-3wkqarb2ox] {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    color: inherit;
    opacity: 0.7;
}

.sp-alert-dismiss:hover[b-3wkqarb2ox] {
    opacity: 1;
}

/* ── CONFIRMATION DIALOG ── */
[b-3wkqarb2ox] .confirmation-dialog .e-dlg-header-content {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Main, #a4262c);
}

.confirmation-content[b-3wkqarb2ox] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.confirmation-icon[b-3wkqarb2ox] {
    flex-shrink: 0;
}

.confirmation-icon .e-icons[b-3wkqarb2ox] {
    font-size: 48px;
    color: var(--BEC-Error-Main, #a4262c);
}

.confirmation-text[b-3wkqarb2ox] {
    flex: 1;
}

.confirmation-text p[b-3wkqarb2ox] {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.confirmation-emphasis[b-3wkqarb2ox] {
    font-weight: 600;
}

.confirmation-list[b-3wkqarb2ox] {
    margin: 12px 0;
    padding-left: 20px;
}

.confirmation-list li[b-3wkqarb2ox] {
    margin-bottom: 6px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.confirmation-question[b-3wkqarb2ox] {
    font-weight: 600;
    margin-top: 16px !important;
    color: var(--BEC-Error-Main, #a4262c);
}

/* ── DANGER BUTTON ── */
[b-3wkqarb2ox] .e-danger.e-btn {
    background-color: var(--BEC-Error-Main, #d13438) !important;
    border-color: var(--BEC-Error-Main, #d13438) !important;
    color: white !important;
}

[b-3wkqarb2ox] .e-danger.e-btn:hover {
    background-color: var(--BEC-Error-Dark, #a4262c) !important;
    border-color: var(--BEC-Error-Dark, #a4262c) !important;
}

/* ── DIALOG ANIMATION ── */
[b-3wkqarb2ox] .confirmation-dialog {
    animation: dialog-shake-b-3wkqarb2ox 0.3s ease-in-out;
}

@keyframes dialog-shake-b-3wkqarb2ox {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
/* /Components/Pages/MainLayout/Referral/FraudMonitoring/Components/TrustScoreIndicator.razor.rz.scp.css */
/* ============================================================================
   TrustScoreIndicator - Official Design System Tokens
   ============================================================================
   Purpose: Trust score gauge styling with visual indicators
   Module: Referral - Fraud Monitoring
   ============================================================================ */

.trust-card[b-h23za46w8b] {
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.trust-card-title[b-h23za46w8b] {
    margin: 0 0 20px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── GAUGE ── */
.score-gauge[b-h23za46w8b] {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px auto;
    position: relative;
}

.gauge-svg[b-h23za46w8b] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.gauge-back[b-h23za46w8b] {
    stroke: var(--BEC-Surface-Alt, #f3f2f1);
    stroke-width: 10;
}

.gauge-front[b-h23za46w8b] {
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.gauge-value[b-h23za46w8b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-number[b-h23za46w8b] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1;
}

.gauge-max[b-h23za46w8b] {
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── STATS ── */
.trust-stats[b-h23za46w8b] {
    text-align: left;
}

.trust-row[b-h23za46w8b] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--BEC-Border-Subtle, #edebe9);
    font-size: 13px;
}

.trust-row:last-child[b-h23za46w8b] {
    border-bottom: none;
}

.trust-label[b-h23za46w8b] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

.trust-value[b-h23za46w8b] {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.trust-value--danger[b-h23za46w8b] {
    color: var(--BEC-Error-Main, #d13438);
}
/* /Components/Pages/MainLayout/Referral/FraudMonitoring/FraudMonitoring.razor.rz.scp.css */
.BEC-Layout[b-7543j81688] {
    padding: var(--BEC-spacingHorizontalL);
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.BEC-Header[b-7543j81688] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.BEC-Controls[b-7543j81688] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: center;
}

.BEC-Stats-Row[b-7543j81688] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.BEC-Stat-Card[b-7543j81688] {
    flex: 1;
    background: var(--BEC-neutral-background-1);
    border: 1px solid var(--BEC-neutralQuaternaryAlt);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: var(--BEC-spacingHorizontalM);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.BEC-Stat-Label[b-7543j81688] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-neutralSecondary);
    text-transform: uppercase;
}

.BEC-Stat-Value[b-7543j81688] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: 700;
    color: var(--BEC-themePrimary);
}

.text-warning .BEC-Stat-Value[b-7543j81688] {
    color: var(--BEC-warningText);
}

.text-danger .BEC-Stat-Value[b-7543j81688] {
    color: var(--BEC-errorText);
}

.BEC-Badge--warning[b-7543j81688] {
    background: var(--BEC-warningBackground);
    color: var(--BEC-warningText);
}

.BEC-Badge--neutral[b-7543j81688] {
    background: var(--BEC-neutralLighter);
    color: var(--BEC-neutralSecondary);
}

/* Dashboard Overrides */
[b-7543j81688] .e-panel {
    border: 1px solid var(--BEC-neutralQuaternaryAlt) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-neutral-background-1) !important;
}

[b-7543j81688] .e-panel-header {
    background: var(--BEC-neutral-background-2) !important;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM) !important;
}

.w-100[b-7543j81688] {
    width: 100%;
}

.mt-4[b-7543j81688] {
    margin-top: var(--BEC-spacingHorizontalL);
}

.p-3[b-7543j81688] {
    padding: var(--BEC-spacingHorizontalM);
}

.text-center[b-7543j81688] {
    text-align: center;
}

.text-muted[b-7543j81688] {
    color: var(--BEC-neutralSecondary);
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/DetailedScoreViewer.razor.rz.scp.css */
/* ============================================================================
   [UID: DETAILED_SCORE_VIEWER] - AI Score Breakdown Component
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Badge classes come from global BEC_Theme.css (no duplicates here)
   ============================================================================ */

.BEC-Detail-View[b-pf79o2eu4i] {
    background: var(--BEC-Surface-Base, #fff);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-Detail-Header[b-pf79o2eu4i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.BEC-Detail-Title[b-pf79o2eu4i] {
    margin: 0;
    font-size: 16px;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Detail-Subtitle[b-pf79o2eu4i] {
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 13px;
}

.BEC-Detail-Score[b-pf79o2eu4i] {
    text-align: right;
    background: var(--BEC-Surface-Alt, #faf9f8);
    padding: 8px 12px;
    border-radius: 6px;
}

.BEC-Score-Label[b-pf79o2eu4i] {
    display: block;
    font-size: 10px;
    color: var(--BEC-Text-Secondary, #605e5c);
    letter-spacing: 1px;
}

.BEC-Score-Value[b-pf79o2eu4i] {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Brand-Primary, #0078d4);
}

.BEC-Grid-2[b-pf79o2eu4i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.BEC-Info-Card[b-pf79o2eu4i] {
    display: flex;
    flex-direction: column;
}

.BEC-Label-Small[b-pf79o2eu4i] {
    font-size: 10px;
    color: var(--BEC-Text-Secondary, #605e5c);
    margin-bottom: 2px;
    text-transform: uppercase;
}

.BEC-Divider[b-pf79o2eu4i] {
    height: 1px;
    background: var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

.BEC-Section-Title[b-pf79o2eu4i] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin-bottom: 12px;
}

.BEC-Breakdown-Table[b-pf79o2eu4i] {
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-radius: 6px;
    padding: 12px;
}

.BEC-Breakdown-Row[b-pf79o2eu4i] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--BEC-Border-Subtle, #edebe9);
    font-size: 13px;
}

.BEC-Breakdown-Row:last-child[b-pf79o2eu4i] {
    border-bottom: none;
}

.BEC-Notes-Box[b-pf79o2eu4i] {
    margin-top: 16px;
    padding: 12px;
    background: var(--BEC-Warning-Subtle, #fff4ce);
    border-radius: 6px;
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
}

.BEC-Notes-Box p[b-pf79o2eu4i] {
    margin: 4px 0 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Helper text colors ── */
.text-success[b-pf79o2eu4i] {
    color: var(--BEC-Success-Main, #107c10);
}

.text-danger[b-pf79o2eu4i] {
    color: var(--BEC-Error-Main, #d13438);
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/HRReviewWizard.razor.rz.scp.css */
/* HRReviewWizard.razor.css — Migrated inline styles */

.ref-external-badge[b-0clmaiky3v] {
    font-size: 10px;
    padding: 1px 6px;
    margin-right: 4px;
}

.ref-alert-mt[b-0clmaiky3v] {
    margin-top: 8px;
}

.ref-text-muted[b-0clmaiky3v] {
    color: #94a3b8;
}

.ref-confirm-title[b-0clmaiky3v] {
    margin: 0 0 8px 0;
}

.ref-confirm-body[b-0clmaiky3v] {
    margin: 0 0 12px 0;
    font-size: 13px;
}

.ref-confirm-actions[b-0clmaiky3v] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ref-reject-reason-input[b-0clmaiky3v] {
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--BEC-border-color, #e2e8f0);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/JobOpeningSideWizard.razor.rz.scp.css */
/* ============================================================================
   [UID: JOB_OPENING_SIDE_WIZARD] - Job Opening Side Wizard Scoped Styles
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Pattern: WIZARD_SIDE with .sp-* base, .jw-* wizard-specific
   ============================================================================ */

/* ── Step Indicator ── */
.jw-step-indicator[b-9cgjdvml7z] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 16px;
}

.jw-step[b-9cgjdvml7z] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
    border: 2px solid var(--BEC-Border-Subtle, #edebe9);
    transition: all 0.2s ease;
}

.jw-step--active[b-9cgjdvml7z] {
    background: var(--BEC-colorBrandBackground, #2b579a);
    color: #fff;
    border-color: var(--BEC-colorBrandBackground, #2b579a);
}

.jw-step-line[b-9cgjdvml7z] {
    width: 20px;
    height: 2px;
    background: var(--BEC-Border-Subtle, #edebe9);
    transition: background 0.2s ease;
}

.jw-step-line--active[b-9cgjdvml7z] {
    background: var(--BEC-colorBrandBackground, #2b579a);
}

/* ── Step Title & Description ── */
.jw-step-title[b-9cgjdvml7z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin-bottom: 4px;
}

.jw-step-desc[b-9cgjdvml7z] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
    margin: 0 0 16px 0;
    line-height: 1.4;
}

/* ── Form Fields ── */
.jw-form[b-9cgjdvml7z] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jw-field[b-9cgjdvml7z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jw-field-row[b-9cgjdvml7z] {
    display: flex;
    gap: 16px;
}

.jw-field--half[b-9cgjdvml7z] {
    flex: 1;
    min-width: 0;
}

.jw-label[b-9cgjdvml7z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.jw-required[b-9cgjdvml7z] {
    color: var(--BEC-Error-Main, #d13438);
}

.jw-optional[b-9cgjdvml7z] {
    font-weight: 400;
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 12px;
}

.jw-input[b-9cgjdvml7z] {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.jw-input:focus[b-9cgjdvml7z] {
    border-color: var(--BEC-colorBrandBackground, #2b579a);
    outline: none;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #2b579a);
}

.jw-textarea[b-9cgjdvml7z] {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.jw-textarea:focus[b-9cgjdvml7z] {
    border-color: var(--BEC-colorBrandBackground, #2b579a);
    outline: none;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #2b579a);
}

.jw-textarea--tall[b-9cgjdvml7z] {
    min-height: 160px;
}

.jw-textarea--editor[b-9cgjdvml7z] {
    min-height: 480px;
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── Label Row (label + toggle button) ── */
.jw-label-row[b-9cgjdvml7z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.jw-toggle-btn[b-9cgjdvml7z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.jw-toggle-btn:hover[b-9cgjdvml7z] {
    background: var(--BEC-colorBrandBackground, #2b579a);
    color: #fff;
    border-color: var(--BEC-colorBrandBackground, #2b579a);
}

/* ── Markdown Preview Panel ── */
.jw-markdown-preview[b-9cgjdvml7z] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 24px 28px;
    background: #fff;
    max-height: 520px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

.jw-markdown-preview--compact[b-9cgjdvml7z] {
    max-height: 320px;
    padding: 16px 20px;
}

.jw-markdown-preview--review[b-9cgjdvml7z] {
    max-height: 400px;
    margin-top: 12px;
}

/* ── Deep: Markdown Rendered HTML ── */
[b-9cgjdvml7z] .jw-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-9cgjdvml7z] .jw-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-9cgjdvml7z] .jw-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-9cgjdvml7z] .jw-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-9cgjdvml7z] .jw-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-9cgjdvml7z] .jw-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-9cgjdvml7z] .jw-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-9cgjdvml7z] .jw-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-9cgjdvml7z] .jw-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-9cgjdvml7z] .jw-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-9cgjdvml7z] .jw-markdown-preview th,
[b-9cgjdvml7z] .jw-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-9cgjdvml7z] .jw-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}

/* ── Metadata Section ── */
.jw-metadata-section[b-9cgjdvml7z] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jw-label--section[b-9cgjdvml7z] {
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.jw-label--small[b-9cgjdvml7z] {
    font-size: 12px;
}

/* ── AI Generation State ── */
.jw-generating[b-9cgjdvml7z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
}

.jw-spinner[b-9cgjdvml7z] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-Border-Subtle, #edebe9);
    border-top-color: var(--BEC-colorBrandBackground, #2b579a);
    border-radius: 50%;
    animation: jw-spin-b-9cgjdvml7z 0.8s linear infinite;
}

@keyframes jw-spin-b-9cgjdvml7z {
    to { transform: rotate(360deg); }
}

.jw-generating-text[b-9cgjdvml7z] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

.jw-generating-hint[b-9cgjdvml7z] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
    margin: 0;
}

/* ── Skills Chips ── */
.jw-chips[b-9cgjdvml7z] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jw-chip[b-9cgjdvml7z] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Primary, #323130);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jw-chip--brand[b-9cgjdvml7z] {
    background: rgba(43, 87, 154, 0.08);
    color: var(--BEC-colorBrandForeground1, #2b579a);
    border-color: rgba(43, 87, 154, 0.2);
}

/* ── AI Badge ── */
.jw-ai-badge[b-9cgjdvml7z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(43, 87, 154, 0.06);
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 11px;
    margin-top: 8px;
}

.jw-regenerate[b-9cgjdvml7z] {
    margin-top: 12px;
}

.jw-readonly-value[b-9cgjdvml7z] {
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    padding: 4px 0;
}

/* ── Review Section (Step 3) ── */
.jw-review-bar[b-9cgjdvml7z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

.jw-review-bar-item[b-9cgjdvml7z] {
    flex: 1 1 calc(50% - 1px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--BEC-Surface-Elevated, #f9f8f7);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-right: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jw-review-bar-item:nth-child(even)[b-9cgjdvml7z] {
    border-right: none;
}

.jw-review-bar-label[b-9cgjdvml7z] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jw-review-bar-value[b-9cgjdvml7z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Footer Spacer ── */
.jw-footer-spacer[b-9cgjdvml7z] {
    flex: 1;
}

/* ── Dropdown overrides ── */
.jw-dropdown[b-9cgjdvml7z],
.jw-datepicker[b-9cgjdvml7z] {
    width: 100%;
}

/* ================= MIGRATED INLINE STYLES ================= */

.ref-mt-12[b-9cgjdvml7z] {
    margin-top: 12px;
}

[b-9cgjdvml7z] .ref-mt-12 {
    margin-top: 12px;
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/JobPdfExportPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   JobPdfExportPanel — Scoped CSS
   ══════════════════════════════════════════════════════════════ */

[b-4714xg6mii] .e-sidebar.export-panel-sidebar {
    z-index: 1050 !important;
}

.export-panel[b-4714xg6mii] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ── Header ── */
.export-panel-header[b-4714xg6mii] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
}

.export-header-content[b-4714xg6mii] {
    flex: 1;
}

.export-header-content h3[b-4714xg6mii] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.export-header-subtitle[b-4714xg6mii] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605E5C);
}

/* ── Body ── */
.export-panel-body[b-4714xg6mii] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ── Export All Button ── */
.export-top-action[b-4714xg6mii] {
    margin-bottom: 24px;
}

.export-all-btn[b-4714xg6mii] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background-color: var(--BEC-Surface-Elevated, #F3F2F1);
    border: 1px dashed var(--BEC-Primary, #2B579A);
    color: var(--BEC-Primary, #2B579A);
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.export-all-btn:hover:not(:disabled)[b-4714xg6mii] {
    background-color: #e3effd;
}

.export-all-btn:disabled[b-4714xg6mii] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Error ── */
.export-error[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background-color: #fde7e9;
    border: 1px solid #d13438;
    border-radius: 4px;
    font-size: 13px;
    color: #a4262c;
}

/* ── Filters ── */
.export-filter-bar[b-4714xg6mii] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.export-filter-select[b-4714xg6mii] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    border-radius: 4px;
    color: var(--BEC-Text-Primary, #323130);
    font-size: 14px;
    background-color: var(--BEC-Surface, #FFFFFF);
    min-width: 0;
}

.export-filter-select:focus[b-4714xg6mii] {
    outline: none;
    border-color: var(--BEC-Primary, #2B579A);
}

/* ── TreeView ── */
.export-tree-view[b-4714xg6mii] {
    border: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    border-radius: 4px;
    overflow: hidden;
}

.export-tree-group[b-4714xg6mii] {
    border-bottom: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
}

.export-tree-group:last-child[b-4714xg6mii] {
    border-bottom: none;
}

/* ── Group Header ── */
.export-group-header[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: var(--BEC-Surface-Elevated, #F3F2F1);
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    cursor: pointer;
    user-select: none;
}

.export-group-header:hover[b-4714xg6mii] {
    background-color: #eaeae8;
}

.export-toggle-icon[b-4714xg6mii] {
    font-size: 16px;
    font-weight: bold;
    color: var(--BEC-Text-Secondary, #605E5C);
    width: 16px;
    text-align: center;
}

.export-group-name[b-4714xg6mii] {
    flex: 1;
}

.export-group-count[b-4714xg6mii] {
    font-weight: 400;
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605E5C);
}

.export-group-header input[type="checkbox"][b-4714xg6mii] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--BEC-Primary, #2B579A);
}

/* ── Tree Children ── */
.export-tree-children[b-4714xg6mii] {
    display: block;
}

/* ── Tree Item ── */
.export-tree-item[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 44px;
    border-top: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    background-color: var(--BEC-Surface, #FFFFFF);
    transition: background-color 0.15s;
}

.export-tree-item:hover[b-4714xg6mii] {
    background-color: #faf9f8;
}

.export-tree-item input[type="checkbox"][b-4714xg6mii] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--BEC-Primary, #2B579A);
    flex-shrink: 0;
}

.export-item-details[b-4714xg6mii] {
    flex: 1;
    min-width: 0;
}

.export-item-title[b-4714xg6mii] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-Text-Primary, #323130);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.export-item-meta[b-4714xg6mii] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605E5C);
}

/* ── Status Badges ── */
.export-status-badge[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.export-status-dot[b-4714xg6mii] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge--published[b-4714xg6mii] {
    color: #107C10;
}

.status-badge--published .export-status-dot[b-4714xg6mii] {
    background-color: #107C10;
}

.status-badge--draft[b-4714xg6mii] {
    color: #797775;
}

.status-badge--draft .export-status-dot[b-4714xg6mii] {
    background-color: #797775;
}

.status-badge--onhold[b-4714xg6mii] {
    color: #ca5010;
}

.status-badge--onhold .export-status-dot[b-4714xg6mii] {
    background-color: #ca5010;
}

.status-badge--closed[b-4714xg6mii] {
    color: #a19f9d;
}

.status-badge--closed .export-status-dot[b-4714xg6mii] {
    background-color: #a19f9d;
}

.status-badge--filled[b-4714xg6mii] {
    color: #2B579A;
}

.status-badge--filled .export-status-dot[b-4714xg6mii] {
    background-color: #2B579A;
}

/* ── Empty State ── */
.export-empty-state[b-4714xg6mii] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--BEC-Text-Secondary, #605E5C);
    font-size: 14px;
}

/* ── Footer ── */
.export-panel-footer[b-4714xg6mii] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    background-color: var(--BEC-Surface-Elevated, #F3F2F1);
}

.export-selection-count[b-4714xg6mii] {
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605E5C);
    font-weight: 500;
}

.export-footer-actions[b-4714xg6mii] {
    display: flex;
    gap: 12px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .export-filter-bar[b-4714xg6mii] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/PayoutManagement.razor.rz.scp.css */
/* PayoutManagement - use --BEC- tokens only. */
/* /Components/Pages/MainLayout/Referral/HRDashboard/HRDashboard.razor.rz.scp.css */
/* ============================================================================
   [UID: HR_DASHBOARD] - HR Dashboard Page Layout
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Mirrors MyReferrals pattern for module consistency
   ============================================================================ */

/* ── Layout ── */
.BEC-Layout[b-pvpj5widno] {
    padding: 0;
    /* Full viewport */
    display: flex;
    flex-direction: column;
    gap: 0;
    height: calc(100vh - 60px);
}

/* ── Header (compact) ── */
.BEC-Header[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 8px 24px;
    /* Internal padding */
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
}

/* ── Header layout ── */
.BEC-Header-Row[b-pvpj5widno] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* ── Header inline stats (IT Support pattern) ── */
.BEC-Stat-Group[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.BEC-Stat-Group .BEC-Stat[b-pvpj5widno] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    background: none;
    border-radius: 0;
    min-width: 0;
    flex-direction: row;
}

.BEC-Stat-Value[b-pvpj5widno] {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Stat-Group .BEC-Stat-Label[b-pvpj5widno] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

.BEC-Stat--qualified .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Stat--hired .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-colorBrandForeground1, #2b579a);
}

.BEC-Stat--scoring .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Stat--rejected .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Stat--flagged .BEC-Stat-Value[b-pvpj5widno] {
    color: #986f0b;
}

.BEC-Stat--pending .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Header actions (Export + New Job Opening) ── */
.BEC-Header-Actions[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Force all primary buttons to BEC blue */
.BEC-Header-Row[b-pvpj5widno]  .e-btn.e-primary {
    background: var(--BEC-Info-Main, #0078d4) !important;
    border-color: var(--BEC-Info-Main, #0078d4) !important;
    color: #fff !important;
}

.BEC-Export-Btn[b-pvpj5widno] {
    white-space: nowrap;
}

.BEC-Title[b-pvpj5widno] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Stat-Label[b-pvpj5widno] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.2;
}

/* ── Grid Container (Full Width) ── */

/* ── Syncfusion Tab full-height overrides ── */
.BEC-Tabs[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.BEC-Tabs[b-pvpj5widno]  .e-tab-header {
    flex-shrink: 0;
}

.BEC-Tabs[b-pvpj5widno]  .e-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.BEC-Tabs[b-pvpj5widno]  .e-content > .e-item.e-active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.BEC-Grid-Container[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--BEC-Surface-Base, #fff);
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

/* ── Syncfusion Grid border overrides ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-grid {
    border: none !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-gridheader {
    border-bottom: 1px solid #cccccc !important;
    /* Darker, sharper divider */
    background: var(--BEC-Surface-Elevated, #f3f2f1) !important;
    height: 42px;
    min-height: 42px;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-headercell {
    border: none !important;
    color: var(--BEC-Text-Primary, #323130);
    font-weight: 600;
    font-size: 13px;
    padding: 0 12px !important;
    text-align: left !important;
    line-height: 42px;
    height: 42px;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-headercell:last-child {
    border-right: none !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-rowcell {
    border-bottom: 1px solid #eeeeee !important;
    border-right: none !important;
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    padding: 0 12px !important;
    text-align: left !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row:hover .e-rowcell {
    background: var(--BEC-Surface-Alt, #faf9f8) !important;
}

/* ── Button Action Styling (solid primary — excludes flat action buttons) ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-btn.e-primary:not(.e-flat) {
    border-radius: 4px !important;
    height: 32px !important;
    line-height: normal !important;
    font-weight: 600 !important;
    background-color: var(--BEC-colorBrandBackground, #0078d4) !important;
    color: #fff !important;
    padding: 0 16px !important;
}

/* ============================================================================
   [UID: BULK_TOOLBAR] - Bulk Action Toolbar
   ============================================================================ */

.BEC-Bulk-Toolbar[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--BEC-Info-Subtle, #deecf9);
    border: 1px solid var(--BEC-Info-Main, #0078d4);
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}

.BEC-Bulk-Toolbar-Label[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    flex: 1;
}

.BEC-Bulk-Toolbar-Note[b-pvpj5widno] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
    font-style: italic;
}

/* ── Checkbox selection row highlight ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row.e-active .e-rowcell {
    background: var(--BEC-Info-Subtle, #deecf9) !important;
}

/* ── Loading State ── */
.BEC-Loading-State[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

/* ============================================================================
   [UID: SKELETON_GRID] - Skeleton Loading
   ============================================================================ */

.skeleton-grid[b-pvpj5widno] {
    width: 100%;
    padding: 16px;
}

.skeleton-row[b-pvpj5widno] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.skeleton-cell[b-pvpj5widno] {
    height: 16px;
    background: linear-gradient(90deg, #f3f2f1 25%, #e1dfdd 50%, #f3f2f1 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

.skeleton-cell:nth-child(1)[b-pvpj5widno] {
    width: 160px;
}

.skeleton-cell:nth-child(2)[b-pvpj5widno] {
    width: 140px;
}

.skeleton-cell:nth-child(3)[b-pvpj5widno] {
    width: 120px;
}

.skeleton-cell:nth-child(4)[b-pvpj5widno] {
    width: 100px;
}

.skeleton-cell:nth-child(5)[b-pvpj5widno] {
    width: 80px;
}

.skeleton-pulse[b-pvpj5widno] {
    animation: skeleton-pulse-b-pvpj5widno 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-pvpj5widno {

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

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

/* ============================================================================
   [UID: EMPTY_STATE] - Empty State
   ============================================================================ */

.BEC-Empty-State[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.BEC-Empty-Title[b-pvpj5widno] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Empty-Text[b-pvpj5widno] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Grid clickable link (candidate name) ── */
.BEC-Grid-Link[b-pvpj5widno] {
    color: var(--BEC-colorBrandForeground1, #2b579a);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.BEC-Grid-Link:hover[b-pvpj5widno] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground1Hover, #1a3a6b);
}

/* ── Row clickable cursor ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row {
    cursor: pointer;
}

/* ============================================================================
   [UID: STATUS_TEXT] - Text-only Status Labels (no background)
   Per design: grid status uses colored text only, no badge BG
   ============================================================================ */

.BEC-Status-Text[b-pvpj5widno] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.BEC-Status-Text--success[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Status-Text--info[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Status-Text--error[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Status-Text--warning[b-pvpj5widno] {
    color: #986f0b;
}

.BEC-Status-Text--accent[b-pvpj5widno] {
    color: var(--BEC-colorBrandForeground1, #2b579a);
    font-weight: 700;
}

.BEC-Status-Text--neutral[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Stacked Cell (name + secondary info in one column) ── */
.BEC-Stacked-Cell[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.BEC-Stacked-Primary[b-pvpj5widno] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BEC-Stacked-Secondary[b-pvpj5widno] {
    font-size: 11px;
    font-weight: 400;
    color: var(--BEC-Text-Secondary, #605e5c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Muted text (N/A, disabled values) ── */
.BEC-Muted[b-pvpj5widno] {
    font-size: 12px;
    color: var(--BEC-Text-Disabled, #a19f9d);
    font-style: italic;
}

.BEC-Badge--info[b-pvpj5widno] {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.BEC-Badge--small[b-pvpj5widno] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 16px;
}

/* ============================================================================
   [UID: PAY_WIZARD] - Payroll Payment Slide-Out Panel
   ============================================================================
   Uses same sp-* / dp-* pattern as HRReviewWizard for unified look.
   ============================================================================ */

/* ── Panel structure (mirrors HRReviewWizard) ── */
.sp-panel[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--BEC-Surface-Base, #fff);
}

.sp-header[b-pvpj5widno] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
    flex-shrink: 0;
}

.sp-title[b-pvpj5widno] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-close-btn[b-pvpj5widno] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    color: var(--BEC-Text-Secondary, #605e5c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-close-btn:hover[b-pvpj5widno] {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Primary, #323130);
}

.sp-body[b-pvpj5widno] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.sp-content[b-pvpj5widno] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-footer[b-pvpj5widno] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    flex-shrink: 0;
}

/* ── Persona header (candidate card) ── */
.dp-persona[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--BEC-Surface-Elevated, #f8f8f8);
    border-radius: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.dp-persona-avatar[b-pvpj5widno] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.dp-persona-info[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dp-persona-name[b-pvpj5widno] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.dp-persona-role[b-pvpj5widno] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Section (reusable) ── */
.dp-section[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-section-header[b-pvpj5widno] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── Detail grid (key-value pairs) ── */
.dp-detail-grid[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-detail-item[b-pvpj5widno] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: var(--BEC-Surface-Elevated, #faf9f8);
    border-radius: 8px;
}

.dp-detail-label[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
    font-weight: 500;
}

.dp-detail-value[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    font-weight: 600;
}

.dp-detail-value--highlight[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
    font-size: 15px;
    font-weight: 700;
}

/* ── Bulk pay info card ── */
.BEC-Pay-Bulk-Info[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--BEC-Info-Subtle, #deecf9);
    border: 1px solid var(--BEC-Info-Main, #0078d4);
    border-radius: 8px;
}

.BEC-Pay-Bulk-Count[b-pvpj5widno] {
    font-size: 32px;
    font-weight: 700;
    color: var(--BEC-Info-Main, #0078d4);
    min-width: 48px;
    text-align: center;
}

.BEC-Pay-Bulk-Text[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.5;
}

/* ── Payroll reference input ── */
.BEC-Pay-Field[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.BEC-Required[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Pay-Input[b-pvpj5widno] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #8a8886);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    background: var(--BEC-Surface-Base, #fff);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.BEC-Pay-Input:focus[b-pvpj5widno] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.BEC-Pay-Hint[b-pvpj5widno] {
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Badge accent (for "Hired" status in persona) ── */
.BEC-Badge--hired-pill[b-pvpj5widno] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Payment Badge in Grid ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-btn.e-success.e-outline {
    border-color: var(--BEC-Success-Main, #107c10) !important;
    color: var(--BEC-Success-Main, #107c10) !important;
    border-radius: 4px !important;
    height: 28px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-btn.e-success.e-outline:hover {
    background: rgba(16, 124, 16, 0.08) !important;
}

/* ============================================================================
   [UID: JOB_OPENINGS_TAB] - Job Openings Tab Styles
   ============================================================================ */

/* ── Tab Content Layout ── */
.BEC-Tab-Content[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0 0 0;
}

.BEC-Tab-Content--grid[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    padding: 16px 0 0 0;
    gap: 8px;
    overflow: hidden;
}

/* BEC-Tab-Header-Row removed — search/filter removed from JO tab */

/* BEC-Search-Box removed — search removed from Referrals tab */

/* ── JO Inline Stat Colors (header) ── */
.BEC-Stat--draft .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Stat--published .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Stat--onhold .BEC-Stat-Value[b-pvpj5widno] {
    color: #986f0b;
}

.BEC-Stat--closed .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Stat--filled .BEC-Stat-Value[b-pvpj5widno] {
    color: #5c2d91;
}

.BEC-Stat--cancelled .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

/* ── Code Cell ── */
.BEC-Code-Cell[b-pvpj5widno] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 12px;
    color: var(--BEC-Text-Accent, #0078d4);
}

/* ── Positions Cell ── */
.BEC-Positions-Cell[b-pvpj5widno] {
    font-weight: 600;
    font-size: 13px;
}

/* ── Badge (full palette) ── */
.BEC-Badge[b-pvpj5widno] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.BEC-Badge--success[b-pvpj5widno] {
    background: #dff6dd;
    color: #107c10;
}

.BEC-Badge--warning[b-pvpj5widno] {
    background: #fff4ce;
    color: #797600;
}

.BEC-Badge--error[b-pvpj5widno] {
    background: #fde7e9;
    color: #a80000;
}

/* BEC-Badge--neutral: inherits from global _badges-helpers.css SSOT */

.BEC-Badge--accent[b-pvpj5widno] {
    background: #e0d7ef;
    color: #5c2d91;
}

/* ── Tags ── */
.BEC-Tag-List[b-pvpj5widno] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.BEC-Tag[b-pvpj5widno] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.BEC-Tag--primary[b-pvpj5widno] {
    background: #cce4f6;
    color: #004578;
}

.BEC-Tag--accent[b-pvpj5widno] {
    background: #e0d7ef;
    color: #5c2d91;
}

/* ── Action Cell ── */
.BEC-Action-Cell[b-pvpj5widno] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat {
    background: transparent !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    min-width: auto !important;
    text-transform: none !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat.e-primary {
    color: var(--BEC-colorBrandForeground1, #2b579a) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat.e-success {
    color: var(--BEC-Success-Main, #107c10) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat.e-warning {
    color: var(--BEC-Warning-Main, #ca5010) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat:hover {
    background: var(--BEC-Surface-Elevated, #f3f2f1) !important;
    border-radius: 4px !important;
}

/* ── Detail Sidebar ── */
.BEC-Sidebar-Header[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-Sidebar-Header h3[b-pvpj5widno] {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Sidebar-Body[b-pvpj5widno] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.BEC-Detail-Row[b-pvpj5widno] {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.BEC-Detail-Label[b-pvpj5widno] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    min-width: 120px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.BEC-Detail-Value[b-pvpj5widno] {
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Detail-Section[b-pvpj5widno] {
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    padding-top: 16px;
}

.BEC-Detail-Section h4[b-pvpj5widno] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 8px 0;
}

.BEC-Detail-Section p[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
    line-height: 1.5;
}

.BEC-Detail-Rich[b-pvpj5widno] {
    white-space: pre-wrap;
}

.BEC-Detail-Actions[b-pvpj5widno] {
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    padding-top: 16px;
}

.BEC-Detail-Actions h4[b-pvpj5widno] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 8px 0;
}

.BEC-Action-Buttons[b-pvpj5widno] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.BEC-Sidebar-Footer[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* BEC-Filter-Dropdown removed — filter removed from JO tab */

/* ============================================================================
   [UID: FOCUS_VISIBLE] - Keyboard Focus States (WCAG 2.4.7)
   ============================================================================ */

.BEC-Grid-Link:focus-visible[b-pvpj5widno] {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    outline-offset: 2px;
    border-radius: 2px;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row:focus-visible .e-rowcell {
    background: var(--BEC-Info-Subtle, #deecf9) !important;
    outline: none;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row:focus-within .e-rowcell {
    background: var(--BEC-Surface-Alt, #faf9f8) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn:focus-visible {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4) !important;
    outline-offset: 2px !important;
}

.BEC-Badge:focus-visible[b-pvpj5widno],
.BEC-Tag:focus-visible[b-pvpj5widno] {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    outline-offset: 2px;
}

.sp-close-btn:focus-visible[b-pvpj5widno] {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    outline-offset: 2px;
}

/* ============================================================================
   [UID: TAB_FADE] - Tab Switch Animation
   ============================================================================ */

.BEC-Tabs[b-pvpj5widno]  .e-content > .e-item.e-active {
    animation: BEC-tab-fade-in-b-pvpj5widno 0.2s ease-out;
}

@keyframes BEC-tab-fade-in-b-pvpj5widno {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   [UID: RESPONSIVE] - Responsive Breakpoints
   ============================================================================ */

/* ── Tablet (1024px) ── */
@media (max-width: 1024px) {
    .BEC-Header-Row[b-pvpj5widno] {
        flex-wrap: wrap;
    }

    .BEC-Stat-Group[b-pvpj5widno] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Sidebar-Body[b-pvpj5widno] {
        padding: 16px;
    }

    .BEC-Sidebar-Header[b-pvpj5widno],
    .BEC-Sidebar-Footer[b-pvpj5widno] {
        padding: 16px;
    }
}

/* ── Mobile (768px) ── */
@media (max-width: 768px) {
    .BEC-Layout[b-pvpj5widno] {
        padding: 16px;
    }

    .BEC-Header[b-pvpj5widno] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .BEC-Header-Row[b-pvpj5widno] {
        flex-direction: column;
        align-items: flex-start;
    }

    .BEC-Stat-Group[b-pvpj5widno] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    .BEC-Detail-Row[b-pvpj5widno] {
        flex-direction: column;
        gap: 4px;
    }

    .BEC-Detail-Label[b-pvpj5widno] {
        min-width: 0;
    }

    .BEC-Bulk-Toolbar[b-pvpj5widno] {
        flex-wrap: wrap;
    }
}

/* ── Small Phone (480px) ── */
@media (max-width: 480px) {
    .BEC-Header[b-pvpj5widno] {
        padding: 8px 16px;
    }

    .BEC-Title[b-pvpj5widno] {
        font-size: 16px;
    }

    .BEC-Header-Actions[b-pvpj5widno] {
        flex-direction: column;
        width: 100%;
    }

    .BEC-Header-Actions[b-pvpj5widno]  .e-btn {
        width: 100% !important;
    }

    .BEC-Action-Cell[b-pvpj5widno] {
        flex-direction: column;
        gap: 4px;
    }

    .dp-persona[b-pvpj5widno] {
        flex-direction: column;
        text-align: center;
    }
}

/* ── Markdown Preview for Job Description ── */
.jd-markdown-preview[b-pvpj5widno] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 16px 24px;
    background: var(--BEC-Surface-Base, #fff);
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

[b-pvpj5widno] .jd-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-pvpj5widno] .jd-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-pvpj5widno] .jd-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-pvpj5widno] .jd-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-pvpj5widno] .jd-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-pvpj5widno] .jd-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-pvpj5widno] .jd-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-pvpj5widno] .jd-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-pvpj5widno] .jd-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-pvpj5widno] .jd-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-pvpj5widno] .jd-markdown-preview th,
[b-pvpj5widno] .jd-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-pvpj5widno] .jd-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}
/* /Components/Pages/MainLayout/Referral/JobOpenings/JobOpeningForm.razor.rz.scp.css */
/* ============================================================================
   Job Opening Form Page — Scoped CSS
   ============================================================================
   Module: Referral > Job Opening Create/Edit
   Tokens: --BEC-* design tokens
   ============================================================================ */

/* ── Layout ── */
.BEC-Form-Layout[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-Surface-Base, #fff);
}

/* ── Header ── */
.BEC-Form-Header[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    flex-shrink: 0;
}

.BEC-Form-Header-Left[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Form-Header-Right[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Form-Title[b-6w8okuncdy] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

/* ── Body ── */
.BEC-Form-Body[b-6w8okuncdy] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
}

/* ── Sections ── */
.BEC-Form-Section[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-Form-Section:last-of-type[b-6w8okuncdy] {
    border-bottom: none;
}

.BEC-Section-Title[b-6w8okuncdy] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

/* ── Form Rows ── */
.BEC-Form-Row[b-6w8okuncdy] {
    display: flex;
    gap: 16px;
}

.BEC-Form-Row--split[b-6w8okuncdy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.BEC-Form-Row--triple[b-6w8okuncdy] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── Form Group ── */
.BEC-Form-Group[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.BEC-Form-Group--checkbox[b-6w8okuncdy] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

.BEC-Form-Group--error[b-6w8okuncdy]  .e-input-group {
    border-color: var(--BEC-Status-Error, #a80000) !important;
}

/* ── Labels ── */
.BEC-Form-Label[b-6w8okuncdy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Required[b-6w8okuncdy] {
    color: var(--BEC-Status-Error, #a80000);
    font-weight: 700;
}

/* ── Field Errors ── */
.BEC-Field-Error[b-6w8okuncdy] {
    font-size: 12px;
    color: var(--BEC-Status-Error, #a80000);
    margin-top: 2px;
}

/* ── Tag Input ── */
.BEC-Tag-Input[b-6w8okuncdy] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.BEC-Tag-Input[b-6w8okuncdy]  .e-input-group {
    flex: 1;
}

.BEC-Tag-List[b-6w8okuncdy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.BEC-Tag[b-6w8okuncdy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.BEC-Tag--primary[b-6w8okuncdy] {
    background: #cce4f6;
    color: #004578;
}

.BEC-Tag--accent[b-6w8okuncdy] {
    background: #e0d7ef;
    color: #5c2d91;
}

.BEC-Tag-Remove[b-6w8okuncdy] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    color: inherit;
    opacity: 0.7;
}

.BEC-Tag-Remove:hover[b-6w8okuncdy] {
    opacity: 1;
}

/* ── AI Banner ── */
.BEC-AI-Banner[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-Surface-Accent-Light, #e0d7ef);
    border-radius: 6px;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    animation: ai-pulse-b-6w8okuncdy 1.5s ease-in-out infinite;
}

@keyframes ai-pulse-b-6w8okuncdy {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ── Footer ── */
.BEC-Form-Footer[b-6w8okuncdy] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    flex-shrink: 0;
}

/* ── Loading Skeleton ── */
.BEC-Form-Loading[b-6w8okuncdy] {
    flex: 1;
    padding: 24px;
}

.skeleton-form[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
}

.skeleton-field[b-6w8okuncdy] {
    height: 56px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    border-radius: 4px;
}

.skeleton-pulse[b-6w8okuncdy] {
    animation: skeleton-pulse-b-6w8okuncdy 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-6w8okuncdy {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .BEC-Form-Row--split[b-6w8okuncdy],
    .BEC-Form-Row--triple[b-6w8okuncdy] {
        grid-template-columns: 1fr;
    }

    .BEC-Form-Header[b-6w8okuncdy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .BEC-Form-Body[b-6w8okuncdy] {
        padding: 16px;
    }

    .BEC-Form-Footer[b-6w8okuncdy] {
        padding: 12px 16px;
    }
}

/* ── Toggle Button for Edit/Preview ── */
.jw-label-row[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.jw-toggle-btn[b-6w8okuncdy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.jw-toggle-btn:hover[b-6w8okuncdy] {
    background: var(--BEC-colorBrandBackground, #2b579a);
    color: #fff;
    border-color: var(--BEC-colorBrandBackground, #2b579a);
}

/* ── Markdown Preview for Job Description ── */
.jd-markdown-preview[b-6w8okuncdy] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 16px 24px;
    background: var(--BEC-Surface-Base, #fff);
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

[b-6w8okuncdy] .jd-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-6w8okuncdy] .jd-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-6w8okuncdy] .jd-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-6w8okuncdy] .jd-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-6w8okuncdy] .jd-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-6w8okuncdy] .jd-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-6w8okuncdy] .jd-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-6w8okuncdy] .jd-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-6w8okuncdy] .jd-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-6w8okuncdy] .jd-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-6w8okuncdy] .jd-markdown-preview th,
[b-6w8okuncdy] .jd-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-6w8okuncdy] .jd-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/JobOpeningDetailWizard.razor.rz.scp.css */
/* ============================================================================
   [UID: JOB_OPENING_DETAIL_WIZARD] - Job Opening Detail Wizard Scoped Styles
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Pattern: WIZARD_SIDE with .sp-* base, .jd-* detail-specific
   ============================================================================ */

/* ── Title Row ── */
.jd-title-row[b-77sqhn1vzb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.jd-title[b-77sqhn1vzb] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.3;
    flex: 1;
}

/* ── Metadata Bar ── */
.jd-meta-bar[b-77sqhn1vzb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    margin-bottom: 16px;
}

.jd-meta-item[b-77sqhn1vzb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.jd-meta-icon[b-77sqhn1vzb] {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin-top: 2px;
    flex-shrink: 0;
}

.jd-meta-content[b-77sqhn1vzb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.jd-meta-label[b-77sqhn1vzb] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.jd-meta-value[b-77sqhn1vzb] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Sections ── */
.jd-section[b-77sqhn1vzb] {
    margin-bottom: 24px;
}

.jd-section-header[b-77sqhn1vzb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Markdown Preview ── */
.jd-markdown-preview[b-77sqhn1vzb] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 16px 24px;
    background: var(--BEC-Surface-Base, #fff);
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Deep: Markdown Rendered HTML (scoped) ── */
[b-77sqhn1vzb] .jd-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-77sqhn1vzb] .jd-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-77sqhn1vzb] .jd-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-77sqhn1vzb] .jd-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-77sqhn1vzb] .jd-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-77sqhn1vzb] .jd-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-77sqhn1vzb] .jd-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-77sqhn1vzb] .jd-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-77sqhn1vzb] .jd-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-77sqhn1vzb] .jd-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-77sqhn1vzb] .jd-markdown-preview th,
[b-77sqhn1vzb] .jd-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-77sqhn1vzb] .jd-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}

/* ── Summary Text (fallback when no full description) ── */
.jd-summary-text[b-77sqhn1vzb] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

/* ── Skills Chips ── */
.jd-chips[b-77sqhn1vzb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-chip[b-77sqhn1vzb] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Primary, #323130);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jd-chip--required[b-77sqhn1vzb] {
    background: rgba(43, 87, 154, 0.08);
    color: var(--BEC-colorBrandForeground1, #2b579a);
    border-color: rgba(43, 87, 154, 0.2);
}

.jd-chip--cert[b-77sqhn1vzb] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    border-color: rgba(138, 108, 0, 0.3);
}


/* ── Empty State ── */
.jd-empty[b-77sqhn1vzb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
    text-align: center;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .jd-meta-bar[b-77sqhn1vzb] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/ReferralDetailWizard.razor.rz.scp.css */
/* ReferralDetailWizard.razor.css — Migrated inline styles */

.ref-alert-mt[b-cuincysfve] {
    margin-top: 8px;
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/SubmitReferralWizard.razor.rz.scp.css */
/* ============================================================================
   Submit Referral Wizard - Side Panel [UID: WIZARD_SIDE]
   Phone row: country dropdown + number input
   ============================================================================ */

.sp-form-row[b-usrehmc05a] {
    display: flex;
    gap: 16px;
}

.sp-form-col[b-usrehmc05a] {
    flex: 1;
    min-width: 0;
}

.sp-phone-row[b-usrehmc05a] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sp-phone-row > *:first-child[b-usrehmc05a] {
    min-width: 160px;
    width: 160px;
}

.sp-phone-row > *:last-child[b-usrehmc05a] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/WinnerStatusBanner.razor.rz.scp.css */
/* ============================================================================
   [UID: TOOLBAR] - Compact Stats Bar
   ============================================================================
   Redesigned from multi-row to single 48-56px bar
   Reference: ERP_Design_System_Master_Comprehensive.html
   8px Grid Compliant
   ============================================================================ */

.BEC-CompactBar[b-nb5bpo28de] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    max-height: 56px;
    padding: 8px 24px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-CompactBar-Item[b-nb5bpo28de] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-right: 1px solid var(--BEC-Border-Subtle, #edebe9);
    white-space: nowrap;
}

.BEC-CompactBar-Item:last-of-type[b-nb5bpo28de] {
    border-right: none;
}

.BEC-CompactBar-Item--highlight[b-nb5bpo28de] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    border-radius: 4px;
    padding: 4px 12px;
    margin-right: 8px;
}

.BEC-CompactBar-Label[b-nb5bpo28de] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
}

.BEC-CompactBar-Value[b-nb5bpo28de] {
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Badge Layout Override (compact bar positioning) ── */
.BEC-Badge[b-nb5bpo28de] {
    margin-left: auto;
}

/* ── Badge Warning Contrast Override (WCAG AA) ── */
.BEC-Badge--warning[b-nb5bpo28de] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

.BEC-CompactBar-Label--subtle[b-nb5bpo28de] {
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* Responsive */
@media (max-width: 768px) {
    .BEC-CompactBar[b-nb5bpo28de] {
        flex-wrap: wrap;
        max-height: none;
        padding: 8px 16px;
    }
    
    .BEC-CompactBar-Item[b-nb5bpo28de] {
        padding: 0 8px;
    }
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/MyReferrals.razor.rz.scp.css */
/* ============================================================================
   [UID: MY_REFERRALS] - My Referrals Page Layout
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   ============================================================================ */

/* ── Layout ── */
.BEC-Layout[b-jnrqejhlmo] {
    padding: 0;
    /* Full viewport */
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Removed gap, spacing handled by padding */
    height: calc(100vh - 60px);
}

/* ── Header (compact) ── */
.BEC-Header[b-jnrqejhlmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    /* Add padding back here */
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
}

.BEC-Title[b-jnrqejhlmo] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Header-Actions[b-jnrqejhlmo] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Grid Container (Full Width) ── */
.BEC-Grid-Container[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--BEC-Surface-Base, #fff);
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    min-height: 0;
    padding: 0;
}

/* ── Syncfusion Grid border overrides ── */
.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid {
    border: none !important;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-gridheader {
    border-bottom: 1px solid #cccccc !important;
    background: var(--BEC-Surface-Elevated, #f3f2f1) !important;
    height: 42px;
    min-height: 42px;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-headercell {
    border: none !important;
    color: var(--BEC-Text-Primary, #323130);
    font-weight: 600;
    font-size: 13px;
    padding: 0 12px !important;
    text-align: left !important;
    line-height: 42px;
    height: 42px;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-headercell:last-child {
    border-right: none !important;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-rowcell {
    border-bottom: 1px solid #eeeeee !important;
    border-right: none !important;
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    padding: 0 12px !important;
    text-align: left !important;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-row:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0) !important;
    cursor: pointer;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-row.e-altrow .e-rowcell {
    background: var(--BEC-Surface-Alt, #faf9f8);
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-row.e-altrow:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0) !important;
}

/* ── Pager ── */
.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-pager {
    background: var(--BEC-Surface-Base, #fff);
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── Badge Warning Contrast Override (WCAG AA) ── */
.BEC-Badge--warning[b-jnrqejhlmo] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

/* ============================================================================
   [UID: BAN_BANNER] - Submission Banned Banner
   ============================================================================ */

.BEC-Ban-Banner[b-jnrqejhlmo] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    background: var(--BEC-Error-Subtle, #fde7e9);
    border: 1px solid var(--BEC-Error-Main, #d13438);
    border-radius: 8px;
    margin-bottom: 8px;
}

.BEC-Ban-Banner-Icon[b-jnrqejhlmo] {
    flex-shrink: 0;
    margin-top: 2px;
}

.BEC-Ban-Banner-Content[b-jnrqejhlmo] {
    flex: 1;
    min-width: 0;
}

.BEC-Ban-Banner-Title[b-jnrqejhlmo] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-Error-Main, #d13438);
    margin-bottom: 4px;
}

.BEC-Ban-Banner-Text[b-jnrqejhlmo] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Loading State ── */
.BEC-Loading-State[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

/* ============================================================================
   [UID: SKELETON_GRID] - Skeleton Loading
   ============================================================================ */

.skeleton-grid[b-jnrqejhlmo] {
    width: 100%;
    padding: 16px;
}

.skeleton-row[b-jnrqejhlmo] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.skeleton-cell[b-jnrqejhlmo] {
    height: 16px;
    background: linear-gradient(90deg, #f3f2f1 25%, #e1dfdd 50%, #f3f2f1 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

.skeleton-cell:nth-child(1)[b-jnrqejhlmo] {
    width: 160px;
}

.skeleton-cell:nth-child(2)[b-jnrqejhlmo] {
    width: 140px;
}

.skeleton-cell:nth-child(3)[b-jnrqejhlmo] {
    width: 120px;
}

.skeleton-cell:nth-child(4)[b-jnrqejhlmo] {
    width: 100px;
}

.skeleton-pulse[b-jnrqejhlmo] {
    animation: skeleton-pulse-b-jnrqejhlmo 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-jnrqejhlmo {

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

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

/* ============================================================================
   [UID: EMPTY_STATE] - Empty State
   ============================================================================ */

.BEC-Empty-State[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.BEC-Empty-Title[b-jnrqejhlmo] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Empty-Text[b-jnrqejhlmo] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ============================================================================
   [UID: TAB_OVERRIDES] - Syncfusion Tab Overrides
   ============================================================================ */

.BEC-Tabs[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.BEC-Tabs[b-jnrqejhlmo]  .e-tab-header {
    background: var(--BEC-Surface-Base, #fff);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    padding: 0 24px;
}

.BEC-Tabs[b-jnrqejhlmo]  .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Tabs[b-jnrqejhlmo]  .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Tabs[b-jnrqejhlmo]  .e-content {
    flex: 1;
    overflow: auto;
}

.BEC-Tab-Content[b-jnrqejhlmo] {
    padding: 24px;
    animation: tabFadeIn-b-jnrqejhlmo 200ms cubic-bezier(0.33, 0, 0.1, 1);
}

@keyframes tabFadeIn-b-jnrqejhlmo {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.BEC-Tab-Content--grid[b-jnrqejhlmo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

/* BEC-Grid-Search removed — search moved to header */

/* ── Search Box ── */
.BEC-Search-Box[b-jnrqejhlmo] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 200px;
    max-width: 300px;
    background: var(--BEC-Surface-Base, #fff);
    transition: border-color 0.15s ease, min-width 0.2s ease;
}

.BEC-Search-Box:focus-within[b-jnrqejhlmo] {
    border-color: var(--BEC-Info-Main, #0078d4);
    min-width: 260px;
}

.BEC-Search-Box input[b-jnrqejhlmo] {
    border: none;
    outline: none;
    font-size: 13px;
    flex: 1;
    background: transparent;
    color: var(--BEC-Text-Primary, #323130);
}

/* ============================================================================
   [UID: JOB_CARDS] - Open Positions Card Grid
   ============================================================================ */

.jc-cards-grid[b-jnrqejhlmo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.jc-card[b-jnrqejhlmo] {
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.jc-card:hover[b-jnrqejhlmo] {
    border-color: var(--BEC-Info-Main, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.jc-card:focus-visible[b-jnrqejhlmo] {
    outline: 2px solid var(--BEC-Info-Main, #0078d4);
    outline-offset: 2px;
}

.jc-card-header[b-jnrqejhlmo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.jc-card-title[b-jnrqejhlmo] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.3;
}

.jc-card-meta[b-jnrqejhlmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jc-meta-item[b-jnrqejhlmo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jc-meta-item .e-icons[b-jnrqejhlmo] {
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jc-card-summary[b-jnrqejhlmo] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-Text-Secondary, #605e5c);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jc-card-skills[b-jnrqejhlmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jc-skill-chip[b-jnrqejhlmo] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Info-Main, #0078d4);
}

.jc-skill-chip--more[b-jnrqejhlmo] {
    background: var(--BEC-Surface-Alt, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jc-card-footer[b-jnrqejhlmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jc-card-actions[b-jnrqejhlmo] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.jc-posted-date[b-jnrqejhlmo] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Skeleton for Job Cards ── */

.jc-skeleton-grid[b-jnrqejhlmo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    width: 100%;
}

.jc-skeleton-card[b-jnrqejhlmo] {
    height: 200px;
    background: linear-gradient(90deg, #f3f2f1 25%, #e1dfdd 50%, #f3f2f1 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .BEC-Header[b-jnrqejhlmo] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .BEC-Layout[b-jnrqejhlmo] {
        padding: 0;
    }

    .BEC-Header[b-jnrqejhlmo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
    }

    .BEC-Header-Actions[b-jnrqejhlmo] {
        width: 100%;
        flex-wrap: wrap;
    }

    .BEC-Tab-Content[b-jnrqejhlmo] {
        padding: 16px;
    }

    .jc-cards-grid[b-jnrqejhlmo] {
        grid-template-columns: 1fr;
    }

    .jc-skeleton-grid[b-jnrqejhlmo] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .BEC-Header[b-jnrqejhlmo] {
        padding: 8px 16px;
    }

    .BEC-Title[b-jnrqejhlmo] {
        font-size: 16px;
    }
}

/* /Components/Pages/MainLayout/Referral/SharedComponents/ReferralErrorToast.razor.rz.scp.css */
/* ============================================================================
   ReferralErrorToast - Official Design System Tokens
   ============================================================================
   Purpose: Standardized error toast styling with TraceId display
   Module: Referral - Shared Components
   ============================================================================ */

.error-toast-content[b-yk67p9qo4m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-message[b-yk67p9qo4m] {
    margin: 0;
    line-height: 1.4;
}

.trace-id-section[b-yk67p9qo4m] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-radius: 4px;
    font-size: 12px;
}

.trace-id-label[b-yk67p9qo4m] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

.trace-id-value[b-yk67p9qo4m] {
    font-family: var(--BEC-Font-Mono, Consolas, monospace);
    background: var(--BEC-Surface-Base, #f3f2f1);
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    user-select: all;
    color: var(--BEC-Text-Primary, #323130);
}

.trace-id-value:hover[b-yk67p9qo4m] {
    background: var(--BEC-Surface-Hover, #edebe9);
}

.copied-indicator[b-yk67p9qo4m] {
    color: var(--BEC-Success-Main, #107c10);
    font-size: 11px;
    animation: fadeIn-b-yk67p9qo4m 0.2s ease-in;
}

.retry-section[b-yk67p9qo4m] {
    margin-top: 4px;
}

@keyframes fadeIn-b-yk67p9qo4m {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/MainLayout/Reporting/AccountingReporting/AccountingReporting.razor.rz.scp.css */
.rpt-doc[b-wcjtjagu2n],
.rpt-loading-gate[b-wcjtjagu2n] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-wcjtjagu2n] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-wcjtjagu2n] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-wcjtjagu2n] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-wcjtjagu2n 0.85s linear infinite; }
@keyframes rpt-spin-b-wcjtjagu2n { to { transform: rotate(360deg); } }
.rpt-loading-title[b-wcjtjagu2n] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-wcjtjagu2n] { font-size: 15px; color: var(--light); }

.rpt-page[b-wcjtjagu2n] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-wcjtjagu2n] { justify-content: space-between; }
.rpt-page--cover[b-wcjtjagu2n] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-wcjtjagu2n] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-wcjtjagu2n] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-wcjtjagu2n] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-wcjtjagu2n] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-wcjtjagu2n] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-wcjtjagu2n] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-wcjtjagu2n] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.rpt-page__header[b-wcjtjagu2n] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-wcjtjagu2n] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-wcjtjagu2n] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-wcjtjagu2n] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-wcjtjagu2n] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.rpt-big-numbers[b-wcjtjagu2n] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-wcjtjagu2n] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-wcjtjagu2n] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-wcjtjagu2n] { border-right: none; }
.rpt-big-num__val[b-wcjtjagu2n] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-wcjtjagu2n] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-wcjtjagu2n] { color: var(--accent); }

.rpt-card-grid[b-wcjtjagu2n] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-wcjtjagu2n] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-wcjtjagu2n] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-wcjtjagu2n] { border-color: var(--stroke); }
.rpt-card__num[b-wcjtjagu2n] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-wcjtjagu2n] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-wcjtjagu2n] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-wcjtjagu2n] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-wcjtjagu2n] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-wcjtjagu2n] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-wcjtjagu2n] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-wcjtjagu2n] { height: 18px; }
.rpt-callout[b-wcjtjagu2n] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout__text[b-wcjtjagu2n] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-wcjtjagu2n] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-wcjtjagu2n],
.rpt-card--dark .rpt-card__title[b-wcjtjagu2n],
.rpt-card--dark .rpt-card__desc[b-wcjtjagu2n] { color: var(--white); }
.rpt-big-num--warn .rpt-big-num__val[b-wcjtjagu2n] { color: var(--critical); }
.bold[b-wcjtjagu2n] { font-weight: 700; }

.rpt-table[b-wcjtjagu2n] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-wcjtjagu2n],
.rpt-table td[b-wcjtjagu2n] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-wcjtjagu2n] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-wcjtjagu2n] { border-bottom: none; }
.rpt-table .right[b-wcjtjagu2n],
.rpt-num[b-wcjtjagu2n] { text-align: right; }

.rpt-table--compact td[b-wcjtjagu2n] { padding-top: 6px; padding-bottom: 6px; }

.rpt-empty-card[b-wcjtjagu2n] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-wcjtjagu2n] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-wcjtjagu2n] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-wcjtjagu2n] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-wcjtjagu2n],
  .rpt-card-grid--4[b-wcjtjagu2n],
  .rpt-two-col[b-wcjtjagu2n] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-wcjtjagu2n] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/CEOReporting/CEOReporting.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   CEO DASHBOARD — Enterprise Report Design System
   All classes prefixed ceo- to avoid Blazor scoping collisions
   ══════════════════════════════════════════════════════════════ */

/* ── Variables ── */
.ceo-doc[b-3tx5pejew7], .ceo-loading-gate[b-3tx5pejew7] {
  --black:   #000000;
  --dark:    #1a1a1a;
  --mid:     #555555;
  --light:   #999999;
  --faint:   #cccccc;
  --stroke:  #e0e0e0;
  --surface: #f6f6f6;
  --white:   #ffffff;
  --accent:  #0071e3;
  --critical:#7a0012;
  --critical-bg: #fff5f7;
  --amber-bg:#ffffff;
  --blue-bg: #ffffff;

  /* Consistent typographic scale across all pages */
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  --fs-body: 0.75rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Document wrapper ── */
.ceo-doc[b-3tx5pejew7] {
  background: #ffffff;
  padding: 0;
  font-size: 0.92rem;
}

/* ── Loading gate ── */
.ceo-loading-gate[b-3tx5pejew7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 18px;
}

.ceo-loading-spinner[b-3tx5pejew7] {
  width: 44px;
  height: 44px;
  border: 3px solid var(--stroke);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ceo-spin-b-3tx5pejew7 0.85s linear infinite;
}

@keyframes ceo-spin-b-3tx5pejew7 { to { transform: rotate(360deg); } }

.ceo-loading-title[b-3tx5pejew7] {
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.4px;
}

.ceo-loading-text[b-3tx5pejew7] {
  font-size: 15px;
  color: var(--light);
}

/* ══════════════════════════════════════════════════════════════
   PAGE CONTAINER — Full-viewport slide
   ══════════════════════════════════════════════════════════════ */
.ceo-page[b-3tx5pejew7] {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 34px 46px 28px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
  page-break-after: auto;
  break-after: auto;
  overflow: visible;
}

.ceo-page:not(.ceo-page--cover)[b-3tx5pejew7] {
  justify-content: space-between;
}

.ceo-page--last[b-3tx5pejew7] {
  page-break-after: auto;
  break-after: auto;
}

.ceo-page--end[b-3tx5pejew7] {
  justify-content: center;
  align-items: center;
}

.ceo-page--end .ceo-cover__content[b-3tx5pejew7] {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ── Cover page ── */
.ceo-page--cover[b-3tx5pejew7] {
  background: var(--white);
  color: var(--black);
  justify-content: center;
  align-items: center;
  padding: 56px 62px;
}

.ceo-cover__content[b-3tx5pejew7] {
  width: min(980px, 100%);
  text-align: left;
}

.ceo-cover__eyebrow[b-3tx5pejew7] {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 22px;
}

.ceo-cover__title[b-3tx5pejew7] {
  font-size: 3.45rem;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -2.4px;
  color: var(--black);
  margin-bottom: 24px;
  max-width: 960px;
}

.ceo-cover__divider[b-3tx5pejew7] {
  width: 56px;
  height: 3px;
  background: var(--black);
  margin-bottom: 28px;
}

.ceo-cover__sub[b-3tx5pejew7] {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--dark);
  max-width: 1000px;
  margin-bottom: 24px;
}

.ceo-cover__period[b-3tx5pejew7] {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 20px;
}

.ceo-cover__footer[b-3tx5pejew7] {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  color: var(--dark);
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--black);
}

.ceo-badge-live[b-3tx5pejew7] {
  color: var(--black);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Page header ── */
.ceo-page__header[b-3tx5pejew7] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ceo-chapter[b-3tx5pejew7] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--light);
}

.ceo-page-num[b-3tx5pejew7] {
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 1px;
}

.ceo-page__title[b-3tx5pejew7] {
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.9px;
  color: var(--black);
  margin-bottom: 10px;
  line-height: 1.05;
}

.ceo-rule[b-3tx5pejew7] {
  width: 100%;
  height: 2px;
  background: var(--black);
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════
   BIG NUMBERS — KPI headline strip
   ══════════════════════════════════════════════════════════════ */
.ceo-big-numbers[b-3tx5pejew7] {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 16px;
}

.ceo-big-numbers--5[b-3tx5pejew7] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ceo-big-numbers--7[b-3tx5pejew7] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ceo-big-num[b-3tx5pejew7] {
  padding: 14px 10px 12px;
  border-right: 1px solid var(--stroke);
  text-align: center;
}

.ceo-big-num:last-child[b-3tx5pejew7] {
  border-right: none;
}

.ceo-big-num__val[b-3tx5pejew7] {
  font-size: var(--fs-kpi);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--black);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 4px;
}

.ceo-big-num--accent .ceo-big-num__val[b-3tx5pejew7] { color: var(--accent); }
.ceo-big-num--warn   .ceo-big-num__val[b-3tx5pejew7] { color: var(--critical); }

.ceo-big-numbers--pipeline[b-3tx5pejew7] {
  margin-top: 6px;
}

.ceo-big-num--pipeline[b-3tx5pejew7] {
  background: var(--white);
}

.ceo-big-num--pipeline .ceo-big-num__sub[b-3tx5pejew7] {
  display: none;
}

.ceo-big-num--active[b-3tx5pejew7] {
  background: var(--black);
}

.ceo-big-num--active .ceo-big-num__val[b-3tx5pejew7] {
  color: var(--white);
}

.ceo-big-num--active .ceo-big-num__lbl[b-3tx5pejew7] {
  color: #c8c8c8;
}

.ceo-big-num--ok[b-3tx5pejew7] {
  background: var(--blue-bg);
  border-top: 2px solid var(--accent);
}

.ceo-big-num--ok .ceo-big-num__val[b-3tx5pejew7] {
  color: var(--accent);
}

.ceo-big-num--danger[b-3tx5pejew7] {
  background: var(--critical-bg);
  border-top: 2px solid var(--critical);
}

.ceo-big-num--danger .ceo-big-num__val[b-3tx5pejew7] {
  color: var(--critical);
}

.ceo-big-num__lbl[b-3tx5pejew7] {
  font-size: 10px;
  font-weight: 600;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 3px;
}

.ceo-big-num__sub[b-3tx5pejew7] {
  font-size: 9px;
  color: var(--light);
}

/* ══════════════════════════════════════════════════════════════
   CARD GRID
   ══════════════════════════════════════════════════════════════ */
.ceo-card-grid[b-3tx5pejew7] {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.ceo-card-grid--4[b-3tx5pejew7] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ceo-card-grid--2[b-3tx5pejew7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ceo-card[b-3tx5pejew7] {
  border: 1px solid var(--stroke);
  border-radius: 7px;
  padding: 14px 12px;
  background: var(--white);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  position: relative;
}

.ceo-card:hover[b-3tx5pejew7] {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  border-color: #bfbfbf;
}

.ceo-card[data-tooltip][b-3tx5pejew7]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 20;
}

.ceo-card[data-tooltip][b-3tx5pejew7]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111;
  opacity: 0;
  transition: opacity 0.16s ease;
  z-index: 19;
}

.ceo-card[data-tooltip]:hover[b-3tx5pejew7]::after,
.ceo-card[data-tooltip]:hover[b-3tx5pejew7]::before {
  opacity: 1;
}

.ceo-card--dark[b-3tx5pejew7] {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.ceo-card--warn[b-3tx5pejew7] {
  border-color: var(--critical);
  background: var(--critical-bg);
}

.ceo-card--danger[b-3tx5pejew7] {
  border-color: var(--critical);
  background: var(--critical-bg);
}

.ceo-card__num[b-3tx5pejew7] {
  font-size: var(--fs-card);
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}

.ceo-card--dark .ceo-card__num[b-3tx5pejew7] { color: var(--white); }
.ceo-card--warn .ceo-card__num[b-3tx5pejew7] { color: var(--critical); }
.ceo-card--danger .ceo-card__num[b-3tx5pejew7] { color: var(--critical); }

.ceo-card__title[b-3tx5pejew7] {
  font-size: 11px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 3px;
}

.ceo-card--dark .ceo-card__title[b-3tx5pejew7] { color: var(--white); }

.ceo-card__desc[b-3tx5pejew7] {
  font-size: 10px;
  color: var(--light);
  line-height: 1.4;
}

/* removed duplicate old card block below to keep scale consistent */

/* ══════════════════════════════════════════════════════════════
   COLUMN LAYOUTS
   ══════════════════════════════════════════════════════════════ */
.ceo-two-col[b-3tx5pejew7] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

.ceo-three-col[b-3tx5pejew7] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.ceo-col[b-3tx5pejew7] { display: flex; flex-direction: column; }

.ceo-col__head[b-3tx5pejew7] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--black);
}

/* ══════════════════════════════════════════════════════════════
   COMPACT DATA TABLE
   ══════════════════════════════════════════════════════════════ */
.ceo-table[b-3tx5pejew7] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-table);
  color: var(--dark);
}

.ceo-table th[b-3tx5pejew7] {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--light);
  text-align: left;
  padding: 7px 8px;
  border-bottom: 2px solid var(--black);
}

.ceo-table td[b-3tx5pejew7] {
  padding: 8px;
  border-bottom: 1px solid var(--stroke);
  font-variant-numeric: tabular-nums;
}

.ceo-table--compact th[b-3tx5pejew7] { font-size: 8px; padding: 6px 7px; }
.ceo-table--compact td[b-3tx5pejew7] { font-size: 11px; padding: 6px 7px; }

.ceo-table--striped tbody tr:nth-child(even) td[b-3tx5pejew7] { background: var(--surface); }

.ceo-row-total td[b-3tx5pejew7] {
  background: var(--surface) !important;
  font-weight: 700;
  border-top: 2px solid var(--black);
}

.ceo-num[b-3tx5pejew7]  { text-align: right; }
.ceo-bold[b-3tx5pejew7] { font-weight: 700; color: var(--black); }
.ceo-positive[b-3tx5pejew7] { color: var(--accent); font-weight: 600; }
.ceo-warn[b-3tx5pejew7]     { color: var(--critical);  font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   PIPELINE
   ══════════════════════════════════════════════════════════════ */
.ceo-pipeline[b-3tx5pejew7] {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 8px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  padding: 10px 12px;
  background: var(--surface);
  margin-bottom: 10px;
}

.ceo-pipeline__arrow[b-3tx5pejew7] {
  font-size: 12px;
  color: var(--faint);
  padding: 0 4px;
  font-weight: 300;
}

.ceo-step[b-3tx5pejew7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--stroke);
  min-width: 78px;
  text-align: center;
}

.ceo-step--active[b-3tx5pejew7]  { border-color: var(--dark); background: var(--dark); color: var(--white); }
.ceo-step--ok[b-3tx5pejew7]      { border-color: var(--accent); background: var(--blue-bg); }
.ceo-step--warn[b-3tx5pejew7]    { border-color: var(--critical); background: var(--critical-bg); }
.ceo-step--danger[b-3tx5pejew7]  { border-color: var(--critical); background: var(--critical-bg); }

.ceo-step__num[b-3tx5pejew7] {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.ceo-step--active .ceo-step__num[b-3tx5pejew7] { color: var(--white); }
.ceo-step--ok     .ceo-step__num[b-3tx5pejew7] { color: var(--accent); }
.ceo-step--warn   .ceo-step__num[b-3tx5pejew7] { color: var(--critical); }
.ceo-step--danger .ceo-step__num[b-3tx5pejew7] { color: var(--critical); }

.ceo-step__lbl[b-3tx5pejew7] {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--light);
}

.ceo-step--active .ceo-step__lbl[b-3tx5pejew7] { color: rgba(255,255,255,0.65); }

/* ══════════════════════════════════════════════════════════════
   BAR CHART
   ══════════════════════════════════════════════════════════════ */
.ceo-bar-row[b-3tx5pejew7] {
  display: grid;
  grid-template-columns: 170px 1fr 108px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ceo-bar-label[b-3tx5pejew7] {
  font-size: 10px;
  font-weight: 600;
  color: var(--dark);
  text-align: right;
  line-height: 1.3;
}

.ceo-bar-label small[b-3tx5pejew7] { font-size: 10px; color: var(--light); font-weight: 400; }

.ceo-bar-track[b-3tx5pejew7] {
  height: 18px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}

.ceo-bar-fill[b-3tx5pejew7] {
  height: 100%;
  min-width: 2px;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ceo-bar--dark[b-3tx5pejew7]  { background: var(--black); }
.ceo-bar--muted[b-3tx5pejew7] { background: var(--faint); }

.ceo-bar-val[b-3tx5pejew7] {
  font-size: 10px;
  font-weight: 700;
  color: var(--dark);
  text-align: left;
  padding-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   CALLOUT
   ══════════════════════════════════════════════════════════════ */
.ceo-callout[b-3tx5pejew7] {
  background: var(--surface);
  border-radius: 7px;
  border-left: 3px solid var(--dark);
  padding: 10px 14px;
  margin: 10px 0;
}

.ceo-callout__text[b-3tx5pejew7] {
  font-size: var(--fs-body);
  color: var(--mid);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   SECTION LABEL
   ══════════════════════════════════════════════════════════════ */
.ceo-section-lbl[b-3tx5pejew7] {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--light);
  margin: 10px 0 8px;
}

/* ══════════════════════════════════════════════════════════════
   SEVERITY BADGES
   ══════════════════════════════════════════════════════════════ */
.ceo-badge[b-3tx5pejew7] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ceo-sev--critical[b-3tx5pejew7] { background: var(--critical-bg); color: var(--critical); }
.ceo-sev--high[b-3tx5pejew7]     { background: var(--critical-bg); color: var(--critical); }
.ceo-sev--medium[b-3tx5pejew7]   { background: var(--blue-bg); color: var(--accent); }
.ceo-sev--low[b-3tx5pejew7]      { background: var(--surface); color: var(--mid); }

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════ */
.ceo-empty[b-3tx5pejew7] {
  color: var(--light);
  font-size: 12px;
  font-style: italic;
  padding: 8px 0;
}

/* ══════════════════════════════════════════════════════════════
   LINE CHART SVG WRAPPER
   ══════════════════════════════════════════════════════════════ */
.ceo-chart-shell[b-3tx5pejew7] {
  width: 100%;
  flex: 1;
  min-height: 140px;
  max-height: 160px;
  margin: 8px 0 10px;
}

.ceo-svg[b-3tx5pejew7] {
  width: 100%;
  height: 100%;
  display: block;
  min-height: 140px;
  max-height: 160px;
}

.ceo-point[b-3tx5pejew7] {
  transition: r 0.14s ease;
}

.ceo-point:hover[b-3tx5pejew7] {
  r: 6;
}

.ceo-point-label[b-3tx5pejew7] {
  font-size: 11px;
  paint-order: stroke fill;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════════
   ACTION BAR + FOOTER
   ══════════════════════════════════════════════════════════════ */
.ceo-action-bar[b-3tx5pejew7] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
}

.ceo-gen-time[b-3tx5pejew7] {
  font-size: 11px;
  color: var(--light);
}

.ceo-report-footer[b-3tx5pejew7] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  font-size: 10px;
  color: var(--light);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .ceo-page[b-3tx5pejew7]         { padding: 24px 20px; min-height: calc(100vh - 64px); }
  .ceo-page--cover[b-3tx5pejew7]  { padding: 36px 26px; }
  .ceo-page--end[b-3tx5pejew7]    { padding: 36px 26px; }
  .ceo-cover__title[b-3tx5pejew7] { font-size: 2.55rem; letter-spacing: -1.4px; }
  .ceo-page__title[b-3tx5pejew7]  { font-size: 1.6rem; }

  .ceo-big-numbers[b-3tx5pejew7]  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ceo-big-num__val[b-3tx5pejew7] { font-size: 1.25rem; }
  .ceo-big-numbers--7[b-3tx5pejew7] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ceo-card-grid--4[b-3tx5pejew7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ceo-three-col[b-3tx5pejew7]    { grid-template-columns: 1fr 1fr; }
  .ceo-two-col[b-3tx5pejew7]      { grid-template-columns: 1fr; }

  .ceo-pipeline[b-3tx5pejew7] { flex-wrap: wrap; }
  .ceo-bar-row[b-3tx5pejew7]  { grid-template-columns: 120px 1fr 84px; }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════ */
@media print {
  .ceo-doc[b-3tx5pejew7]      { padding: 0; background: var(--white); }
  .ceo-page[b-3tx5pejew7]     { margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .ceo-page--last[b-3tx5pejew7] { break-after: auto; page-break-after: auto; }
  .ceo-action-bar[b-3tx5pejew7] { display: none; }
}


/* /Components/Pages/MainLayout/Reporting/ConcreteReporting/ConcreteReporting.razor.rz.scp.css */
.rpt-doc[b-wf6vyrw9vb],
.rpt-loading-gate[b-wf6vyrw9vb] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-wf6vyrw9vb] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-wf6vyrw9vb] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-wf6vyrw9vb] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-wf6vyrw9vb 0.85s linear infinite; }
@keyframes rpt-spin-b-wf6vyrw9vb { to { transform: rotate(360deg); } }
.rpt-loading-title[b-wf6vyrw9vb] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-wf6vyrw9vb] { font-size: 15px; color: var(--light); }

.rpt-page[b-wf6vyrw9vb] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-wf6vyrw9vb] { justify-content: space-between; }
.rpt-page--cover[b-wf6vyrw9vb] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-wf6vyrw9vb] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-wf6vyrw9vb] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-wf6vyrw9vb] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-wf6vyrw9vb] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-wf6vyrw9vb] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-wf6vyrw9vb] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-wf6vyrw9vb] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.rpt-page__header[b-wf6vyrw9vb] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-wf6vyrw9vb] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-wf6vyrw9vb] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-wf6vyrw9vb] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-wf6vyrw9vb] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.rpt-big-numbers[b-wf6vyrw9vb] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-wf6vyrw9vb] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-wf6vyrw9vb] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-wf6vyrw9vb] { border-right: none; }
.rpt-big-num__val[b-wf6vyrw9vb] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-wf6vyrw9vb] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-wf6vyrw9vb] { color: var(--accent); }

.rpt-card-grid[b-wf6vyrw9vb] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-wf6vyrw9vb] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-wf6vyrw9vb] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-wf6vyrw9vb] { border-color: var(--stroke); }
.rpt-card__num[b-wf6vyrw9vb] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-wf6vyrw9vb] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-wf6vyrw9vb] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-wf6vyrw9vb] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-wf6vyrw9vb] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-wf6vyrw9vb] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-wf6vyrw9vb] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-wf6vyrw9vb] { height: 18px; }
.rpt-callout[b-wf6vyrw9vb] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout__text[b-wf6vyrw9vb] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-wf6vyrw9vb] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-wf6vyrw9vb],
.rpt-card--dark .rpt-card__title[b-wf6vyrw9vb],
.rpt-card--dark .rpt-card__desc[b-wf6vyrw9vb] { color: var(--white); }
.rpt-big-num--warn .rpt-big-num__val[b-wf6vyrw9vb] { color: var(--critical); }
.bold[b-wf6vyrw9vb] { font-weight: 700; }

.rpt-table[b-wf6vyrw9vb] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-wf6vyrw9vb],
.rpt-table td[b-wf6vyrw9vb] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-wf6vyrw9vb] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-wf6vyrw9vb] { border-bottom: none; }
.rpt-table .right[b-wf6vyrw9vb],
.rpt-num[b-wf6vyrw9vb] { text-align: right; }

.rpt-table--compact td[b-wf6vyrw9vb] { padding-top: 6px; padding-bottom: 6px; }

.rpt-empty-card[b-wf6vyrw9vb] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-wf6vyrw9vb] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-wf6vyrw9vb] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-wf6vyrw9vb] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-wf6vyrw9vb],
  .rpt-card-grid--4[b-wf6vyrw9vb],
  .rpt-two-col[b-wf6vyrw9vb] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-wf6vyrw9vb] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/ContractingInventoryReporting/ContractingInventoryReporting.razor.rz.scp.css */
.con-doc[b-i9gvz55247],
.con-loading-gate[b-i9gvz55247] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.con-doc[b-i9gvz55247] { background: #fff; padding: 0; font-size: 0.92rem; }
.con-loading-gate[b-i9gvz55247] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.con-loading-spinner[b-i9gvz55247] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: con-spin-b-i9gvz55247 0.85s linear infinite; }
@keyframes con-spin-b-i9gvz55247 { to { transform: rotate(360deg); } }
.con-loading-title[b-i9gvz55247] { font-size: 24px; font-weight: 700; color: var(--black); }
.con-loading-text[b-i9gvz55247] { font-size: 15px; color: var(--light); }

.con-page[b-i9gvz55247] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.con-page:not(.con-page--cover)[b-i9gvz55247] { justify-content: space-between; }
.con-page--cover[b-i9gvz55247] { justify-content: center; align-items: center; padding: 56px 62px; }
.con-page--end[b-i9gvz55247] { justify-content: center; align-items: center; }
.con-page--end .con-cover__content[b-i9gvz55247] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.con-cover__content[b-i9gvz55247] { width: min(980px, 100%); text-align: left; }
.con-cover__eyebrow[b-i9gvz55247] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.con-cover__title[b-i9gvz55247] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.con-cover__divider[b-i9gvz55247] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.con-cover__sub[b-i9gvz55247] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.con-page__header[b-i9gvz55247] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.con-chapter[b-i9gvz55247] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.con-page-num[b-i9gvz55247] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.con-page__title[b-i9gvz55247] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.con-rule[b-i9gvz55247] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.con-big-numbers[b-i9gvz55247] { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.con-big-num[b-i9gvz55247] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.con-big-num:last-child[b-i9gvz55247] { border-right: none; }
.con-big-num__val[b-i9gvz55247] { font-size: var(--fs-kpi); font-weight: 800; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.con-big-num__lbl[b-i9gvz55247] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.con-big-num--accent .con-big-num__val[b-i9gvz55247] { color: var(--accent); }
.con-big-num--warn .con-big-num__val[b-i9gvz55247] { color: var(--critical); }

.con-two-col[b-i9gvz55247] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.con-col[b-i9gvz55247] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.con-col__head[b-i9gvz55247] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin-bottom: 6px; }

.con-table[b-i9gvz55247] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.con-table td[b-i9gvz55247] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); font-variant-numeric: tabular-nums; }
.con-table tr:last-child td[b-i9gvz55247] { border-bottom: none; }
.con-table--compact td[b-i9gvz55247] { padding-top: 6px; padding-bottom: 6px; }
.con-num[b-i9gvz55247] { text-align: right; }

.con-empty-card[b-i9gvz55247] {
  border: 1px solid var(--stroke);
  background: #fff;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.con-empty-card__icon[b-i9gvz55247] {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  font-size: 11px;
  font-weight: 700;
}

.con-empty-card__title[b-i9gvz55247] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.con-empty-card__sub[b-i9gvz55247] { font-size: 12px; color: var(--mid); max-width: 420px; line-height: 1.45; }

@media (max-width: 1100px) {
  .con-big-numbers[b-i9gvz55247],
  .con-two-col[b-i9gvz55247] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .con-cover__title[b-i9gvz55247] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/EmployeeReporting/EmployeeReporting.razor.rz.scp.css */
.emp-doc[b-gzrwujo1ya],
.emp-loading-gate[b-gzrwujo1ya] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.emp-doc[b-gzrwujo1ya] { background: #fff; padding: 0; font-size: 0.92rem; }

.emp-loading-gate[b-gzrwujo1ya] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.emp-loading-spinner[b-gzrwujo1ya] {
  width: 42px;
  height: 42px;
  border: 3px solid var(--stroke);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: emp-spin-b-gzrwujo1ya 0.85s linear infinite;
}

@keyframes emp-spin-b-gzrwujo1ya { to { transform: rotate(360deg); } }

.emp-loading-title[b-gzrwujo1ya] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.emp-loading-text[b-gzrwujo1ya] { font-size: 15px; color: var(--light); }

.emp-page[b-gzrwujo1ya] {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 34px 46px 28px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
}

.emp-page:not(.emp-page--cover)[b-gzrwujo1ya] { justify-content: space-between; }
.emp-page--cover[b-gzrwujo1ya] { justify-content: center; align-items: center; padding: 56px 62px; }
.emp-page--end[b-gzrwujo1ya] { justify-content: center; align-items: center; }
.emp-page--end .emp-cover__content[b-gzrwujo1ya] {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.emp-cover__content[b-gzrwujo1ya] { width: min(980px, 100%); text-align: left; }
.emp-cover__eyebrow[b-gzrwujo1ya] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.emp-cover__title[b-gzrwujo1ya] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.emp-cover__divider[b-gzrwujo1ya] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.emp-cover__sub[b-gzrwujo1ya] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.emp-page__header[b-gzrwujo1ya] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.emp-chapter[b-gzrwujo1ya] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.emp-page-num[b-gzrwujo1ya] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.emp-page__title[b-gzrwujo1ya] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.emp-rule[b-gzrwujo1ya] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.emp-big-numbers[b-gzrwujo1ya] { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.emp-big-num[b-gzrwujo1ya] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.emp-big-num:last-child[b-gzrwujo1ya] { border-right: none; }
.emp-big-num__val[b-gzrwujo1ya] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.emp-big-num__lbl[b-gzrwujo1ya] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.emp-big-num--accent .emp-big-num__val[b-gzrwujo1ya] { color: var(--accent); }
.emp-big-num--warn .emp-big-num__val[b-gzrwujo1ya] { color: var(--critical); }

.emp-card-grid[b-gzrwujo1ya] { display: grid; gap: 10px; }
.emp-card-grid--4[b-gzrwujo1ya] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.emp-card[b-gzrwujo1ya] {
  border: 1px solid var(--stroke);
  background: var(--surface);
  padding: 14px 12px;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.emp-card:hover[b-gzrwujo1ya] { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); border-color: #bfbfbf; }
.emp-card--dark[b-gzrwujo1ya] { background: var(--dark); border-color: var(--dark); color: #fff; }
.emp-card--warn[b-gzrwujo1ya] { background: #fff; border-color: var(--stroke); }
.emp-card__num[b-gzrwujo1ya] { font-size: var(--fs-card); font-weight: 800; letter-spacing: -0.4px; margin-bottom: 4px; }
.emp-card__title[b-gzrwujo1ya] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.emp-card__desc[b-gzrwujo1ya] { font-size: 11px; opacity: 0.85; }

.emp-card[data-tooltip][b-gzrwujo1ya]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 20;
}

.emp-card[data-tooltip]:hover[b-gzrwujo1ya]::after { opacity: 1; }

.emp-two-col[b-gzrwujo1ya] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.emp-col[b-gzrwujo1ya] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.emp-col__head[b-gzrwujo1ya] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin-bottom: 6px; }

.emp-table[b-gzrwujo1ya] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.emp-table td[b-gzrwujo1ya] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); font-variant-numeric: tabular-nums; }
.emp-table tr:last-child td[b-gzrwujo1ya] { border-bottom: none; }
.emp-table--compact td[b-gzrwujo1ya] { padding-top: 6px; padding-bottom: 6px; }
.emp-num[b-gzrwujo1ya] { text-align: right; }

.emp-empty-card[b-gzrwujo1ya] {
  border: 1px solid var(--stroke);
  background: #fff;
  padding: 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.emp-empty-card__icon[b-gzrwujo1ya] {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  font-size: 11px;
  font-weight: 700;
}

.emp-empty-card__title[b-gzrwujo1ya] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.emp-empty-card__sub[b-gzrwujo1ya] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .emp-big-numbers[b-gzrwujo1ya],
  .emp-card-grid--4[b-gzrwujo1ya],
  .emp-two-col[b-gzrwujo1ya] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .emp-cover__title[b-gzrwujo1ya] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/ExecutiveReporting/ExecutiveReporting.razor.rz.scp.css */
.exc-doc[b-xxnrj8hwv6],
.exc-loading-gate[b-xxnrj8hwv6] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.exc-doc[b-xxnrj8hwv6] { background: #fff; padding: 0; font-size: 0.92rem; }

.exc-loading-gate[b-xxnrj8hwv6] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.exc-loading-spinner[b-xxnrj8hwv6] {
  width: 42px;
  height: 42px;
  border: 3px solid var(--stroke);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: exc-spin-b-xxnrj8hwv6 0.85s linear infinite;
}

@keyframes exc-spin-b-xxnrj8hwv6 { to { transform: rotate(360deg); } }

.exc-loading-title[b-xxnrj8hwv6] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.exc-loading-text[b-xxnrj8hwv6] { font-size: 15px; color: var(--light); }

.exc-page[b-xxnrj8hwv6] {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 34px 46px 28px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
  page-break-after: auto;
  break-after: auto;
}

.exc-page:not(.exc-page--cover)[b-xxnrj8hwv6] { justify-content: space-between; }
.exc-page--cover[b-xxnrj8hwv6] { justify-content: center; align-items: center; padding: 56px 62px; }
.exc-page--end[b-xxnrj8hwv6] { justify-content: center; align-items: center; }
.exc-page--end .exc-cover__content[b-xxnrj8hwv6] {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.exc-cover__content[b-xxnrj8hwv6] { width: min(980px, 100%); text-align: left; }
.exc-cover__eyebrow[b-xxnrj8hwv6] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.exc-cover__title[b-xxnrj8hwv6] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.exc-cover__divider[b-xxnrj8hwv6] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.exc-cover__sub[b-xxnrj8hwv6] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.exc-page__header[b-xxnrj8hwv6] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.exc-chapter[b-xxnrj8hwv6] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.exc-page-num[b-xxnrj8hwv6] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.exc-page__title[b-xxnrj8hwv6] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.exc-rule[b-xxnrj8hwv6] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.exc-big-numbers[b-xxnrj8hwv6] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 16px;
}

.exc-big-num[b-xxnrj8hwv6] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.exc-big-num:last-child[b-xxnrj8hwv6] { border-right: none; }
.exc-big-num__val[b-xxnrj8hwv6] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.exc-big-num__lbl[b-xxnrj8hwv6] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.exc-big-num--accent .exc-big-num__val[b-xxnrj8hwv6] { color: var(--accent); }
.exc-big-num--warn .exc-big-num__val[b-xxnrj8hwv6] { color: var(--critical); }

.exc-card-grid[b-xxnrj8hwv6] { display: grid; gap: 10px; }
.exc-card-grid--4[b-xxnrj8hwv6] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.exc-card[b-xxnrj8hwv6] {
  border: 1px solid var(--stroke);
  background: var(--surface);
  padding: 14px 12px;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.exc-card:hover[b-xxnrj8hwv6] { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); border-color: #bfbfbf; }
.exc-card--dark[b-xxnrj8hwv6] { background: var(--dark); border-color: var(--dark); color: #fff; }
.exc-card--warn[b-xxnrj8hwv6] { background: #fff; border-color: var(--stroke); }
.exc-card__num[b-xxnrj8hwv6] { font-size: var(--fs-card); font-weight: 800; letter-spacing: -0.4px; margin-bottom: 4px; }
.exc-card__title[b-xxnrj8hwv6] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.exc-card__desc[b-xxnrj8hwv6] { font-size: 11px; opacity: 0.85; }

.exc-card[data-tooltip][b-xxnrj8hwv6]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 20;
}

.exc-card[data-tooltip]:hover[b-xxnrj8hwv6]::after { opacity: 1; }

.exc-three-col[b-xxnrj8hwv6] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.exc-col[b-xxnrj8hwv6] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.exc-col__head[b-xxnrj8hwv6] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin-bottom: 6px; }

.exc-table[b-xxnrj8hwv6] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.exc-table td[b-xxnrj8hwv6], .exc-table th[b-xxnrj8hwv6] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); font-variant-numeric: tabular-nums; }
.exc-table th[b-xxnrj8hwv6] { text-align: left; border-bottom: 2px solid var(--black); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--light); }
.exc-table tr:last-child td[b-xxnrj8hwv6] { border-bottom: none; }
.exc-table--compact td[b-xxnrj8hwv6], .exc-table--compact th[b-xxnrj8hwv6] { padding-top: 6px; padding-bottom: 6px; }
.exc-num[b-xxnrj8hwv6] { text-align: right; }

@media (max-width: 1100px) {
  .exc-big-numbers[b-xxnrj8hwv6],
  .exc-card-grid--4[b-xxnrj8hwv6],
  .exc-three-col[b-xxnrj8hwv6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exc-cover__title[b-xxnrj8hwv6] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/FleetReporting/FleetReporting.razor.rz.scp.css */
.flt-doc[b-f49j6unnxn],
.flt-loading-gate[b-f49j6unnxn] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #f7f7f7;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff5f7;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.flt-doc[b-f49j6unnxn] { background: #fff; padding: 0; font-size: 0.92rem; }

.flt-loading-gate[b-f49j6unnxn] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.flt-loading-spinner[b-f49j6unnxn] {
  width: 42px;
  height: 42px;
  border: 3px solid var(--stroke);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: flt-spin-b-f49j6unnxn 0.85s linear infinite;
}

@keyframes flt-spin-b-f49j6unnxn { to { transform: rotate(360deg); } }

.flt-loading-title[b-f49j6unnxn] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.flt-loading-text[b-f49j6unnxn] { font-size: 15px; color: var(--light); }

.flt-page[b-f49j6unnxn] {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 34px 46px 28px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
}

.flt-page:not(.flt-page--cover)[b-f49j6unnxn] { justify-content: space-between; }
.flt-page--cover[b-f49j6unnxn] { justify-content: center; align-items: center; padding: 56px 62px; }
.flt-page--end[b-f49j6unnxn] { justify-content: center; align-items: center; }
.flt-page--end .flt-cover__content[b-f49j6unnxn] {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flt-cover__content[b-f49j6unnxn] { width: min(980px, 100%); text-align: left; }
.flt-cover__eyebrow[b-f49j6unnxn] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.flt-cover__title[b-f49j6unnxn] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.flt-cover__divider[b-f49j6unnxn] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.flt-cover__sub[b-f49j6unnxn] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.flt-page__header[b-f49j6unnxn] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.flt-chapter[b-f49j6unnxn] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.flt-page-num[b-f49j6unnxn] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.flt-page__title[b-f49j6unnxn] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.flt-rule[b-f49j6unnxn] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.flt-big-numbers[b-f49j6unnxn] { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.flt-big-numbers--5[b-f49j6unnxn] { grid-template-columns: repeat(5, minmax(0,1fr)); }
.flt-big-num[b-f49j6unnxn] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.flt-big-num:last-child[b-f49j6unnxn] { border-right: none; }
.flt-big-num__val[b-f49j6unnxn] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.flt-big-num__lbl[b-f49j6unnxn] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.flt-big-num--accent .flt-big-num__val[b-f49j6unnxn] { color: var(--accent); }
.flt-big-num--warn .flt-big-num__val[b-f49j6unnxn] { color: var(--critical); }

.flt-card-grid[b-f49j6unnxn] { display: grid; gap: 10px; }
.flt-card-grid--4[b-f49j6unnxn] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.flt-card[b-f49j6unnxn] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.flt-card--dark[b-f49j6unnxn] { background: var(--dark); border-color: var(--dark); color: #fff; }
.flt-card--warn[b-f49j6unnxn] { background: var(--critical-bg); border-color: #f0d4da; }
.flt-card__num[b-f49j6unnxn] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.flt-card__title[b-f49j6unnxn] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.flt-card__desc[b-f49j6unnxn] { font-size: 11px; opacity: 0.85; }

.flt-table[b-f49j6unnxn] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.flt-table th[b-f49j6unnxn],
.flt-table td[b-f49j6unnxn] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.flt-table th[b-f49j6unnxn] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.flt-table tr:last-child td[b-f49j6unnxn] { border-bottom: none; }
.flt-table .right[b-f49j6unnxn] { text-align: right; }
.flt-table tbody tr:nth-child(n+11)[b-f49j6unnxn] { display: none; }

.flt-callout[b-f49j6unnxn] { border: 1px solid var(--stroke); background: #fafafa; padding: 12px 14px; }
.flt-callout__text[b-f49j6unnxn] { font-size: 12px; color: var(--mid); line-height: 1.45; }

@media (max-width: 1100px) {
  .flt-big-numbers[b-f49j6unnxn],
  .flt-big-numbers--5[b-f49j6unnxn],
  .flt-card-grid--4[b-f49j6unnxn] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flt-cover__title[b-f49j6unnxn] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/HRReporting/HrReporting.razor.rz.scp.css */
.hr-doc[b-evno1wb6bu],
.hr-loading-gate[b-evno1wb6bu] {
	--black: #000;
	--dark: #1a1a1a;
	--mid: #555;
	--light: #999;
	--faint: #ccc;
	--stroke: #e2e2e2;
	--surface: #fff;
	--white: #fff;
	--accent: #0071e3;
	--critical: #7a0012;
	--critical-bg: #fff;
	--fs-title: 1.95rem;
	--fs-kpi: 1.56rem;
	--fs-card: 1.45rem;
	--fs-table: 0.69rem;
	--fs-body: 0.75rem;
	font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.hr-doc[b-evno1wb6bu] {
	background: #ffffff;
	padding: 0;
	font-size: 0.92rem;
}

.hr-loading-gate[b-evno1wb6bu] {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.hr-loading-spinner[b-evno1wb6bu] {
	width: 42px;
	height: 42px;
	border: 3px solid var(--stroke);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: hr-spin-b-evno1wb6bu 0.85s linear infinite;
}

@keyframes hr-spin-b-evno1wb6bu { to { transform: rotate(360deg); } }

.hr-loading-title[b-evno1wb6bu] {
	font-size: 24px;
	font-weight: 700;
	color: var(--black);
	letter-spacing: -0.4px;
}

.hr-loading-text[b-evno1wb6bu] {
	font-size: 15px;
	color: var(--light);
}

.hr-page[b-evno1wb6bu] {
	width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 34px 46px 28px;
	background: var(--white);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	box-shadow: none;
	page-break-after: auto;
	break-after: auto;
	overflow: visible;
}

.hr-page:not(.hr-page--cover)[b-evno1wb6bu] {
	justify-content: space-between;
}

.hr-page--cover[b-evno1wb6bu] {
	justify-content: center;
	align-items: center;
	padding: 56px 62px;
}

.hr-page--end[b-evno1wb6bu] {
	justify-content: center;
	align-items: center;
}

.hr-page--end .hr-cover__content[b-evno1wb6bu] {
	min-height: 72vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.hr-page--last[b-evno1wb6bu] {
	page-break-after: auto;
	break-after: auto;
}

.hr-cover__content[b-evno1wb6bu] {
	width: min(980px, 100%);
	text-align: left;
}

.hr-cover__eyebrow[b-evno1wb6bu] {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--dark);
	margin-bottom: 22px;
}

.hr-cover__title[b-evno1wb6bu] {
	font-size: 3.45rem;
	line-height: 0.96;
	font-weight: 900;
	letter-spacing: -2.4px;
	color: var(--black);
	margin-bottom: 24px;
	max-width: 960px;
}

.hr-cover__divider[b-evno1wb6bu] {
	width: 56px;
	height: 3px;
	background: var(--black);
	margin-bottom: 28px;
}

.hr-cover__sub[b-evno1wb6bu] {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--dark);
	max-width: 1000px;
	margin-bottom: 24px;
}

.hr-cover__period[b-evno1wb6bu] {
	font-size: 12px;
	font-weight: 500;
	color: var(--dark);
	margin-bottom: 20px;
}

.hr-cover__footer[b-evno1wb6bu] {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 11px;
	color: var(--dark);
	margin-top: auto;
	padding-top: 26px;
	border-top: 1px solid var(--black);
}

.hr-badge-live[b-evno1wb6bu] {
	font-weight: 700;
	letter-spacing: 0.5px;
}

.hr-page__header[b-evno1wb6bu] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.hr-chapter[b-evno1wb6bu] {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3.5px;
	color: var(--light);
}

.hr-page-num[b-evno1wb6bu] {
	font-size: 11px;
	font-weight: 600;
	color: var(--faint);
	letter-spacing: 1px;
}

.hr-page__title[b-evno1wb6bu] {
	font-size: var(--fs-title);
	font-weight: 800;
	color: var(--black);
	letter-spacing: -0.9px;
	margin-bottom: 10px;
	line-height: 1.05;
}

.hr-rule[b-evno1wb6bu] {
	width: 100%;
	height: 2px;
	background: var(--black);
	margin-bottom: 16px;
}

.hr-big-numbers[b-evno1wb6bu] {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	border-top: 2px solid var(--black);
	border-bottom: 1px solid var(--stroke);
	margin-bottom: 16px;
}

.hr-big-numbers--4[b-evno1wb6bu] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-big-numbers--6[b-evno1wb6bu] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.hr-big-num[b-evno1wb6bu] {
	padding: 14px 10px 12px;
	border-right: 1px solid var(--stroke);
	text-align: center;
}

.hr-big-num:last-child[b-evno1wb6bu] { border-right: none; }

.hr-big-num__val[b-evno1wb6bu] {
	font-size: var(--fs-kpi);
	font-weight: 800;
	letter-spacing: -0.6px;
	color: var(--black);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin-bottom: 4px;
}

.hr-big-num__lbl[b-evno1wb6bu] {
	font-size: 10px;
	font-weight: 700;
	color: var(--mid);
	text-transform: uppercase;
	letter-spacing: 0.65px;
	margin-top: 4px;
}

.hr-big-num--accent .hr-big-num__val[b-evno1wb6bu] { color: var(--accent); }
.hr-big-num--warn .hr-big-num__val[b-evno1wb6bu] { color: var(--critical); }

.hr-card-grid[b-evno1wb6bu] {
	display: grid;
	gap: 10px;
}

.hr-card-grid--4[b-evno1wb6bu] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-card-grid--3[b-evno1wb6bu] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hr-card[b-evno1wb6bu] {
	border: 1px solid var(--stroke);
	background: var(--surface);
	padding: 14px 12px;
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	cursor: pointer;
}

.hr-card:hover[b-evno1wb6bu] {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
	border-color: #bfbfbf;
}

.hr-card[data-tooltip][b-evno1wb6bu]::after,
.hr-bar-row[data-tooltip][b-evno1wb6bu]::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	background: #111;
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
	padding: 7px 10px;
	border-radius: 6px;
	white-space: nowrap;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease;
	z-index: 20;
}

.hr-card[data-tooltip][b-evno1wb6bu]::before,
.hr-bar-row[data-tooltip][b-evno1wb6bu]::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 4px);
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #111;
	opacity: 0;
	transition: opacity 0.16s ease;
	z-index: 19;
}

.hr-card[data-tooltip]:hover[b-evno1wb6bu]::after,
.hr-card[data-tooltip]:hover[b-evno1wb6bu]::before,
.hr-bar-row[data-tooltip]:hover[b-evno1wb6bu]::after,
.hr-bar-row[data-tooltip]:hover[b-evno1wb6bu]::before {
	opacity: 1;
}

.hr-card--dark[b-evno1wb6bu] {
	background: var(--dark);
	border-color: var(--dark);
	color: #fff;
}

.hr-card--warn[b-evno1wb6bu] {
	background: #fff;
	border-color: var(--stroke);
}

.hr-card__num[b-evno1wb6bu] {
	font-size: var(--fs-card);
	font-weight: 800;
	letter-spacing: -0.4px;
	margin-bottom: 4px;
}

.hr-card__title[b-evno1wb6bu] {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	margin-bottom: 4px;
}

.hr-card__desc[b-evno1wb6bu] {
	font-size: 11px;
	color: inherit;
	opacity: 0.85;
}

.hr-section-lbl[b-evno1wb6bu] {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--light);
	margin: 2px 0 8px;
}

.hr-bar-section[b-evno1wb6bu] {
	width: 50%;
	max-width: 50%;
	margin: 0 auto 12px;
}

.hr-bar-list[b-evno1wb6bu] {
	display: grid;
	gap: 7px;
	margin-bottom: 0;
}

.hr-bar-row[b-evno1wb6bu] {
	display: grid;
	grid-template-columns: 90px 1fr 120px;
	gap: 8px;
	align-items: center;
	position: relative;
}

.hr-bar-row__label[b-evno1wb6bu] {
	font-size: 11px;
	color: var(--mid);
}

.hr-bar-row__track[b-evno1wb6bu] {
	height: 9px;
	background: #ececec;
	border-radius: 999px;
	overflow: hidden;
}

.hr-bar-row__fill[b-evno1wb6bu] {
	height: 100%;
	background: var(--accent);
}

.hr-bar-row__fill--warn[b-evno1wb6bu] {
	background: var(--critical);
}

.hr-bar-row__value[b-evno1wb6bu] {
	font-size: 11px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.hr-three-col[b-evno1wb6bu] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}

.hr-col[b-evno1wb6bu] {
	border: 1px solid var(--stroke);
	padding: 10px;
	background: #fafafa;
}

.hr-col__head[b-evno1wb6bu] {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--light);
	margin-bottom: 6px;
	font-weight: 700;
}

.hr-table[b-evno1wb6bu] {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-table);
}

.hr-table th[b-evno1wb6bu],
.hr-table td[b-evno1wb6bu] {
	padding: 6px 8px;
	border-bottom: 1px solid var(--stroke);
}

.hr-table thead th[b-evno1wb6bu] {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	text-align: left;
	color: var(--mid);
	background: #f5f5f5;
}

.hr-table--striped tbody tr:nth-child(even)[b-evno1wb6bu] {
	background: #fcfcfc;
}

.hr-num[b-evno1wb6bu] {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.hr-bold[b-evno1wb6bu] { font-weight: 700; }
.hr-positive[b-evno1wb6bu] { color: var(--accent); font-weight: 700; }
.hr-warn[b-evno1wb6bu] { color: var(--critical); font-weight: 700; }

.hr-empty[b-evno1wb6bu] {
	padding: 14px;
	border: 1px dashed var(--stroke);
	color: var(--light);
	text-align: center;
	font-size: 12px;
}

.hr-callout[b-evno1wb6bu] {
	border-left: 3px solid var(--accent);
	background: #f8fbff;
	padding: 10px 12px;
	margin-top: 12px;
}

.hr-callout__text[b-evno1wb6bu] {
	font-size: var(--fs-body);
	color: #3f4a57;
	line-height: 1.5;
}

@media (max-width: 1280px) {
	.hr-big-numbers--6[b-evno1wb6bu] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hr-big-numbers--4[b-evno1wb6bu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-card-grid--4[b-evno1wb6bu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-card-grid--3[b-evno1wb6bu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-three-col[b-evno1wb6bu] { grid-template-columns: 1fr; }
	.hr-bar-section[b-evno1wb6bu] { width: 70%; max-width: 70%; }
}

@media (max-width: 860px) {
	.hr-page[b-evno1wb6bu] {
		min-height: auto;
		padding: 20px 14px;
	}

	.hr-cover__title[b-evno1wb6bu] { font-size: 2.1rem; }
	.hr-bar-row[b-evno1wb6bu] { grid-template-columns: 70px 1fr 90px; }
	.hr-bar-section[b-evno1wb6bu] { width: 100%; max-width: 100%; }
}
/* /Components/Pages/MainLayout/Reporting/KpiOverviewReporting/KpiOverviewReporting.razor.rz.scp.css */
.kpi-doc[b-ermxe3couu],
.kpi-loading-gate[b-ermxe3couu] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.kpi-doc[b-ermxe3couu] { background: #fff; padding: 0; font-size: 0.92rem; }
.kpi-loading-gate[b-ermxe3couu] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.kpi-loading-spinner[b-ermxe3couu] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: kpi-spin-b-ermxe3couu 0.85s linear infinite; }
@keyframes kpi-spin-b-ermxe3couu { to { transform: rotate(360deg); } }
.kpi-loading-title[b-ermxe3couu] { font-size: 24px; font-weight: 700; color: var(--black); }
.kpi-loading-text[b-ermxe3couu] { font-size: 15px; color: var(--light); }

.kpi-page[b-ermxe3couu] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.kpi-page:not(.kpi-page--cover)[b-ermxe3couu] { justify-content: space-between; }
.kpi-page--cover[b-ermxe3couu] { justify-content: center; align-items: center; padding: 56px 62px; }
.kpi-page--end[b-ermxe3couu] { justify-content: center; align-items: center; }
.kpi-page--end .kpi-cover__content[b-ermxe3couu] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.kpi-cover__content[b-ermxe3couu] { width: min(980px, 100%); text-align: left; }
.kpi-cover__eyebrow[b-ermxe3couu] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.kpi-cover__title[b-ermxe3couu] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.kpi-cover__divider[b-ermxe3couu] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.kpi-cover__sub[b-ermxe3couu] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.kpi-page__header[b-ermxe3couu] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kpi-chapter[b-ermxe3couu] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.kpi-page-num[b-ermxe3couu] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.kpi-page__title[b-ermxe3couu] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.kpi-rule[b-ermxe3couu] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.kpi-big-numbers[b-ermxe3couu] { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.kpi-big-num[b-ermxe3couu] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.kpi-big-num:last-child[b-ermxe3couu] { border-right: none; }
.kpi-big-num__val[b-ermxe3couu] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.kpi-big-num__lbl[b-ermxe3couu] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.kpi-big-num--accent .kpi-big-num__val[b-ermxe3couu] { color: var(--accent); }
.kpi-big-num--warn .kpi-big-num__val[b-ermxe3couu] { color: var(--critical); }

.kpi-card-grid[b-ermxe3couu] { display: grid; gap: 10px; }
.kpi-card-grid--3[b-ermxe3couu] { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kpi-card[b-ermxe3couu] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.kpi-card--dark[b-ermxe3couu] { background: var(--dark); border-color: var(--dark); color: #fff; }
.kpi-card__num[b-ermxe3couu] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.kpi-card__title[b-ermxe3couu] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.kpi-card__desc[b-ermxe3couu] { font-size: 11px; opacity: 0.85; }

.kpi-three-col[b-ermxe3couu] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.kpi-col[b-ermxe3couu] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.kpi-col__head[b-ermxe3couu] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin-bottom: 6px; }

.kpi-table[b-ermxe3couu] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.kpi-table td[b-ermxe3couu] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); font-variant-numeric: tabular-nums; }
.kpi-table tr:last-child td[b-ermxe3couu] { border-bottom: none; }
.kpi-table--compact td[b-ermxe3couu] { padding-top: 6px; padding-bottom: 6px; }
.kpi-num[b-ermxe3couu] { text-align: right; }
.kpi-bold[b-ermxe3couu] { font-weight: 700; }

@media (max-width: 1100px) {
  .kpi-big-numbers[b-ermxe3couu],
  .kpi-card-grid--3[b-ermxe3couu],
  .kpi-three-col[b-ermxe3couu] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi-cover__title[b-ermxe3couu] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/MaintenanceReporting/MaintenanceReporting.razor.rz.scp.css */
.rpt-doc[b-5fdz4hczok],
.rpt-loading-gate[b-5fdz4hczok] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-5fdz4hczok] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-5fdz4hczok] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-5fdz4hczok] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-5fdz4hczok 0.85s linear infinite; }
@keyframes rpt-spin-b-5fdz4hczok { to { transform: rotate(360deg); } }
.rpt-loading-title[b-5fdz4hczok] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-5fdz4hczok] { font-size: 15px; color: var(--light); }

.rpt-page[b-5fdz4hczok] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-5fdz4hczok] { justify-content: space-between; }
.rpt-page--cover[b-5fdz4hczok] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-5fdz4hczok] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-5fdz4hczok] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-5fdz4hczok] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-5fdz4hczok] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-5fdz4hczok] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-5fdz4hczok] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-5fdz4hczok] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.rpt-page__header[b-5fdz4hczok] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-5fdz4hczok] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-5fdz4hczok] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-5fdz4hczok] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-5fdz4hczok] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.rpt-big-numbers[b-5fdz4hczok] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-5fdz4hczok] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-5fdz4hczok] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-5fdz4hczok] { border-right: none; }
.rpt-big-num__val[b-5fdz4hczok] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-5fdz4hczok] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-5fdz4hczok] { color: var(--accent); }

.rpt-card-grid[b-5fdz4hczok] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-5fdz4hczok] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-5fdz4hczok] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-5fdz4hczok] { border-color: var(--stroke); }
.rpt-card__num[b-5fdz4hczok] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-5fdz4hczok] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-5fdz4hczok] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-5fdz4hczok] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-5fdz4hczok] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-5fdz4hczok] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-5fdz4hczok] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-5fdz4hczok] { height: 18px; }
.rpt-callout[b-5fdz4hczok] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout__text[b-5fdz4hczok] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-5fdz4hczok] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-5fdz4hczok],
.rpt-card--dark .rpt-card__title[b-5fdz4hczok],
.rpt-card--dark .rpt-card__desc[b-5fdz4hczok] { color: var(--white); }
.rpt-big-num--warn .rpt-big-num__val[b-5fdz4hczok] { color: var(--critical); }
.bold[b-5fdz4hczok] { font-weight: 700; }

.rpt-table[b-5fdz4hczok] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-5fdz4hczok],
.rpt-table td[b-5fdz4hczok] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-5fdz4hczok] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-5fdz4hczok] { border-bottom: none; }
.rpt-table .right[b-5fdz4hczok],
.rpt-num[b-5fdz4hczok] { text-align: right; }

.rpt-table--compact td[b-5fdz4hczok] { padding-top: 6px; padding-bottom: 6px; }

.rpt-empty-card[b-5fdz4hczok] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-5fdz4hczok] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-5fdz4hczok] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-5fdz4hczok] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-5fdz4hczok],
  .rpt-card-grid--4[b-5fdz4hczok],
  .rpt-two-col[b-5fdz4hczok] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-5fdz4hczok] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/PlantReporting/PlantReporting.razor.rz.scp.css */
.rpt-doc[b-zo5pcsd2au],
.rpt-loading-gate[b-zo5pcsd2au] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-zo5pcsd2au] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-zo5pcsd2au] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-zo5pcsd2au] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-zo5pcsd2au 0.85s linear infinite; }
@keyframes rpt-spin-b-zo5pcsd2au { to { transform: rotate(360deg); } }
.rpt-loading-title[b-zo5pcsd2au] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-zo5pcsd2au] { font-size: 15px; color: var(--light); }

.rpt-page[b-zo5pcsd2au] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-zo5pcsd2au] { justify-content: space-between; }
.rpt-page--cover[b-zo5pcsd2au] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-zo5pcsd2au] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-zo5pcsd2au] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-zo5pcsd2au] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-zo5pcsd2au] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-zo5pcsd2au] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-zo5pcsd2au] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-zo5pcsd2au] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.rpt-page__header[b-zo5pcsd2au] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-zo5pcsd2au] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-zo5pcsd2au] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-zo5pcsd2au] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-zo5pcsd2au] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.rpt-big-numbers[b-zo5pcsd2au] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-zo5pcsd2au] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-zo5pcsd2au] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-zo5pcsd2au] { border-right: none; }
.rpt-big-num__val[b-zo5pcsd2au] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-zo5pcsd2au] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-zo5pcsd2au] { color: var(--accent); }

.rpt-card-grid[b-zo5pcsd2au] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-zo5pcsd2au] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-zo5pcsd2au] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-zo5pcsd2au] { border-color: var(--stroke); }
.rpt-card__num[b-zo5pcsd2au] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-zo5pcsd2au] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-zo5pcsd2au] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-zo5pcsd2au] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-zo5pcsd2au] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-zo5pcsd2au] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-zo5pcsd2au] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-zo5pcsd2au] { height: 18px; }
.rpt-callout[b-zo5pcsd2au] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout__text[b-zo5pcsd2au] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-zo5pcsd2au] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-zo5pcsd2au],
.rpt-card--dark .rpt-card__title[b-zo5pcsd2au],
.rpt-card--dark .rpt-card__desc[b-zo5pcsd2au] { color: var(--white); }
.rpt-big-num--warn .rpt-big-num__val[b-zo5pcsd2au] { color: var(--critical); }
.bold[b-zo5pcsd2au] { font-weight: 700; }

.rpt-table[b-zo5pcsd2au] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-zo5pcsd2au],
.rpt-table td[b-zo5pcsd2au] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-zo5pcsd2au] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-zo5pcsd2au] { border-bottom: none; }
.rpt-table .right[b-zo5pcsd2au],
.rpt-num[b-zo5pcsd2au] { text-align: right; }

.rpt-table--compact td[b-zo5pcsd2au] { padding-top: 6px; padding-bottom: 6px; }

.rpt-empty-card[b-zo5pcsd2au] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-zo5pcsd2au] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-zo5pcsd2au] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-zo5pcsd2au] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-zo5pcsd2au],
  .rpt-card-grid--4[b-zo5pcsd2au],
  .rpt-two-col[b-zo5pcsd2au] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-zo5pcsd2au] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/ProcurementReporting/ProcurementReporting.razor.rz.scp.css */
.proc-doc[b-0cpun9vrlo],
.proc-loading-gate[b-0cpun9vrlo] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  --fs-body: 0.75rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.proc-doc[b-0cpun9vrlo] {
  background: #ffffff;
  padding: 0;
  font-size: 0.92rem;
}

.proc-loading-gate[b-0cpun9vrlo] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.proc-loading-spinner[b-0cpun9vrlo] {
  width: 42px;
  height: 42px;
  border: 3px solid var(--stroke);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: proc-spin-b-0cpun9vrlo 0.85s linear infinite;
}

@keyframes proc-spin-b-0cpun9vrlo { to { transform: rotate(360deg); } }

.proc-loading-title[b-0cpun9vrlo] {
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.4px;
}

.proc-loading-text[b-0cpun9vrlo] {
  font-size: 15px;
  color: var(--light);
}

.proc-page[b-0cpun9vrlo] {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 34px 46px 28px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
  page-break-after: auto;
  break-after: auto;
  overflow: visible;
}

.proc-page:not(.proc-page--cover)[b-0cpun9vrlo] {
  justify-content: space-between;
}

.proc-page--cover[b-0cpun9vrlo] {
  justify-content: center;
  align-items: center;
  padding: 56px 62px;
}

.proc-page--end[b-0cpun9vrlo] {
  justify-content: center;
  align-items: center;
}

.proc-page--end .proc-cover__content[b-0cpun9vrlo] {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.proc-page--last[b-0cpun9vrlo] {
  page-break-after: auto;
  break-after: auto;
}

.proc-cover__content[b-0cpun9vrlo] {
  width: min(980px, 100%);
  text-align: left;
}

.proc-cover__eyebrow[b-0cpun9vrlo] {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 22px;
}

.proc-cover__title[b-0cpun9vrlo] {
  font-size: 3.45rem;
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -2.4px;
  color: var(--black);
  margin-bottom: 24px;
  max-width: 960px;
}

.proc-cover__divider[b-0cpun9vrlo] {
  width: 56px;
  height: 3px;
  background: var(--black);
  margin-bottom: 28px;
}

.proc-cover__sub[b-0cpun9vrlo] {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--dark);
  max-width: 1000px;
  margin-bottom: 24px;
}

.proc-cover__period[b-0cpun9vrlo] {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}

.proc-page__header[b-0cpun9vrlo] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.proc-chapter[b-0cpun9vrlo] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  color: var(--light);
}

.proc-page-num[b-0cpun9vrlo] {
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 1px;
}

.proc-page__title[b-0cpun9vrlo] {
  font-size: var(--fs-title);
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.9px;
  margin-bottom: 10px;
  line-height: 1.05;
}

.proc-rule[b-0cpun9vrlo] {
  width: 100%;
  height: 2px;
  background: var(--black);
  margin-bottom: 16px;
}

.proc-big-numbers[b-0cpun9vrlo] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 16px;
}

.proc-big-num[b-0cpun9vrlo] {
  padding: 14px 10px 12px;
  border-right: 1px solid var(--stroke);
  text-align: center;
}

.proc-big-num:last-child[b-0cpun9vrlo] { border-right: none; }

.proc-big-num__val[b-0cpun9vrlo] {
  font-size: var(--fs-kpi);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--black);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 4px;
}

.proc-big-num__lbl[b-0cpun9vrlo] {
  font-size: 10px;
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.65px;
  margin-top: 4px;
}

.proc-big-num--accent .proc-big-num__val[b-0cpun9vrlo] { color: var(--accent); }
.proc-big-num--warn .proc-big-num__val[b-0cpun9vrlo] { color: var(--critical); }

.proc-card-grid[b-0cpun9vrlo] {
  display: grid;
  gap: 10px;
}

.proc-card-grid--4[b-0cpun9vrlo] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.proc-card[b-0cpun9vrlo] {
  border: 1px solid var(--stroke);
  background: var(--surface);
  padding: 14px 12px;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.proc-card:hover[b-0cpun9vrlo] {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  border-color: #bfbfbf;
}

.proc-card[data-tooltip][b-0cpun9vrlo]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 20;
}

.proc-card[data-tooltip]:hover[b-0cpun9vrlo]::after { opacity: 1; }

.proc-card--dark[b-0cpun9vrlo] {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

.proc-card--warn[b-0cpun9vrlo] {
  background: #fff;
  border-color: var(--stroke);
}

.proc-card__num[b-0cpun9vrlo] {
  font-size: var(--fs-card);
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}

.proc-card__title[b-0cpun9vrlo] {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 4px;
}

.proc-card__desc[b-0cpun9vrlo] {
  font-size: 11px;
  color: inherit;
  opacity: 0.85;
}

.proc-chart-shell[b-0cpun9vrlo] {
  border: 1px solid var(--stroke);
  padding: 10px 8px 8px;
  margin-bottom: 12px;
}

.proc-svg[b-0cpun9vrlo] {
  width: 100%;
  height: 210px;
}

.proc-table[b-0cpun9vrlo] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-table);
}

.proc-table th[b-0cpun9vrlo] {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--black);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light);
}

.proc-table td[b-0cpun9vrlo] {
  padding: 7px 10px;
  border-bottom: 1px solid var(--stroke);
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

.proc-table--striped tbody tr:nth-child(even) td[b-0cpun9vrlo] {
  background: #fcfcfc;
}

.proc-table--compact td[b-0cpun9vrlo],
.proc-table--compact th[b-0cpun9vrlo] {
  padding-top: 6px;
  padding-bottom: 6px;
}

.proc-num[b-0cpun9vrlo] {
  text-align: right;
}

.proc-bold[b-0cpun9vrlo] {
  font-weight: 700;
}

.proc-three-col[b-0cpun9vrlo] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.proc-col[b-0cpun9vrlo] {
  border: 1px solid var(--stroke);
  padding: 8px;
  background: #fff;
}

.proc-col__head[b-0cpun9vrlo] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 6px;
}

.proc-callout[b-0cpun9vrlo] {
  margin-top: 6px;
  padding: 12px 14px;
  border-left: 3px solid var(--black);
  background: #fafafa;
}

.proc-callout__text[b-0cpun9vrlo] {
  font-size: 12px;
  color: var(--dark);
  line-height: 1.5;
}

.proc-empty-card[b-0cpun9vrlo] {
  border: 1px solid var(--stroke);
  background: #fff;
  padding: 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.proc-empty-card__icon[b-0cpun9vrlo] {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  font-size: 11px;
  font-weight: 700;
}

.proc-empty-card__title[b-0cpun9vrlo] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dark);
}

.proc-empty-card__sub[b-0cpun9vrlo] {
  font-size: 11px;
  color: var(--mid);
  max-width: 340px;
  line-height: 1.4;
}

.proc-report-footer[b-0cpun9vrlo] {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  font-size: 10px;
  color: var(--light);
  border-top: 1px solid var(--stroke);
  padding-top: 8px;
}

@media (max-width: 1100px) {
  .proc-big-numbers[b-0cpun9vrlo],
  .proc-card-grid--4[b-0cpun9vrlo],
  .proc-three-col[b-0cpun9vrlo],
  .proc-report-footer[b-0cpun9vrlo] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proc-cover__title[b-0cpun9vrlo] {
    font-size: 2.5rem;
  }
}
/* /Components/Pages/MainLayout/Reporting/ProjectReporting/ProjectReporting.razor.rz.scp.css */
.rpt-doc[b-sxri6z3uun],
.rpt-loading-gate[b-sxri6z3uun] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-sxri6z3uun] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-sxri6z3uun] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-sxri6z3uun] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-sxri6z3uun 0.85s linear infinite; }
@keyframes rpt-spin-b-sxri6z3uun { to { transform: rotate(360deg); } }
.rpt-loading-title[b-sxri6z3uun] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-sxri6z3uun] { font-size: 15px; color: var(--light); }

.rpt-page[b-sxri6z3uun] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-sxri6z3uun] { justify-content: space-between; }
.rpt-page--cover[b-sxri6z3uun] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-sxri6z3uun] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-sxri6z3uun] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-sxri6z3uun] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-sxri6z3uun] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-sxri6z3uun] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-sxri6z3uun] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-sxri6z3uun] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.rpt-page__header[b-sxri6z3uun] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-sxri6z3uun] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-sxri6z3uun] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-sxri6z3uun] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-sxri6z3uun] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.rpt-big-numbers[b-sxri6z3uun] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-sxri6z3uun] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-sxri6z3uun] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-sxri6z3uun] { border-right: none; }
.rpt-big-num__val[b-sxri6z3uun] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-sxri6z3uun] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-sxri6z3uun] { color: var(--accent); }

.rpt-card-grid[b-sxri6z3uun] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-sxri6z3uun] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-sxri6z3uun] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-sxri6z3uun] { border-color: var(--stroke); }
.rpt-card__num[b-sxri6z3uun] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-sxri6z3uun] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-sxri6z3uun] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-sxri6z3uun] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-sxri6z3uun] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-sxri6z3uun] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-sxri6z3uun] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-sxri6z3uun] { height: 18px; }
.rpt-callout[b-sxri6z3uun] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout__text[b-sxri6z3uun] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-sxri6z3uun] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-sxri6z3uun],
.rpt-card--dark .rpt-card__title[b-sxri6z3uun],
.rpt-card--dark .rpt-card__desc[b-sxri6z3uun] { color: var(--white); }
.rpt-big-num--warn .rpt-big-num__val[b-sxri6z3uun] { color: var(--critical); }
.bold[b-sxri6z3uun] { font-weight: 700; }

.rpt-table[b-sxri6z3uun] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-sxri6z3uun],
.rpt-table td[b-sxri6z3uun] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-sxri6z3uun] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-sxri6z3uun] { border-bottom: none; }
.rpt-table .right[b-sxri6z3uun],
.rpt-num[b-sxri6z3uun] { text-align: right; }

.rpt-table--compact td[b-sxri6z3uun] { padding-top: 6px; padding-bottom: 6px; }

.rpt-empty-card[b-sxri6z3uun] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-sxri6z3uun] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-sxri6z3uun] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-sxri6z3uun] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-sxri6z3uun],
  .rpt-card-grid--4[b-sxri6z3uun],
  .rpt-two-col[b-sxri6z3uun] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-sxri6z3uun] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/PurchasingReporting/PurchasingReporting.razor.rz.scp.css */
.rpt-doc[b-qb42liq1cs],
.rpt-loading-gate[b-qb42liq1cs] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-qb42liq1cs] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-qb42liq1cs] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-qb42liq1cs] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-qb42liq1cs 0.85s linear infinite; }
@keyframes rpt-spin-b-qb42liq1cs { to { transform: rotate(360deg); } }
.rpt-loading-title[b-qb42liq1cs] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-qb42liq1cs] { font-size: 15px; color: var(--light); }

.rpt-page[b-qb42liq1cs] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-qb42liq1cs] { justify-content: space-between; }
.rpt-page--cover[b-qb42liq1cs] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-qb42liq1cs] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-qb42liq1cs] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-qb42liq1cs] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-qb42liq1cs] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-qb42liq1cs] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-qb42liq1cs] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-qb42liq1cs] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }
.rpt-cover__period[b-qb42liq1cs] { font-size: 12px; font-weight: 600; color: var(--mid); letter-spacing: 0.5px; }

.rpt-page__header[b-qb42liq1cs] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-qb42liq1cs] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-qb42liq1cs] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-qb42liq1cs] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-qb42liq1cs] { display: none; height: 0; margin: 0; }

.rpt-big-numbers[b-qb42liq1cs] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-qb42liq1cs] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-qb42liq1cs] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-qb42liq1cs] { border-right: none; }
.rpt-big-num__val[b-qb42liq1cs] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-qb42liq1cs] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-qb42liq1cs] { color: var(--accent); }
.rpt-big-num--warn .rpt-big-num__val[b-qb42liq1cs] { color: var(--critical); }

.rpt-card-grid[b-qb42liq1cs] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-qb42liq1cs] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-qb42liq1cs] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-qb42liq1cs] { border-color: var(--stroke); }
.rpt-card__num[b-qb42liq1cs] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-qb42liq1cs] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-qb42liq1cs] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-qb42liq1cs] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-qb42liq1cs] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-qb42liq1cs] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-qb42liq1cs] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-qb42liq1cs] { height: 18px; }
.rpt-callout[b-qb42liq1cs] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout--info[b-qb42liq1cs] { border-color: var(--accent); background: rgba(0,113,227,0.04); }
.rpt-callout__text[b-qb42liq1cs] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-qb42liq1cs] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-qb42liq1cs],
.rpt-card--dark .rpt-card__title[b-qb42liq1cs],
.rpt-card--dark .rpt-card__desc[b-qb42liq1cs] { color: var(--white); }
.bold[b-qb42liq1cs] { font-weight: 700; }

.rpt-table[b-qb42liq1cs] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-qb42liq1cs],
.rpt-table td[b-qb42liq1cs] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-qb42liq1cs] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-qb42liq1cs] { border-bottom: none; }
.rpt-table .right[b-qb42liq1cs],
.rpt-num[b-qb42liq1cs] { text-align: right; }
.rpt-table--compact td[b-qb42liq1cs] { padding-top: 6px; padding-bottom: 6px; }
.rpt-row--warn[b-qb42liq1cs] { background: rgba(122,0,18,0.04); }
.rpt-row--total td[b-qb42liq1cs] { border-top: 2px solid var(--black); font-weight: 700; }

.rpt-empty-card[b-qb42liq1cs] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-qb42liq1cs] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-qb42liq1cs] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-qb42liq1cs] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-qb42liq1cs],
  .rpt-card-grid--4[b-qb42liq1cs],
  .rpt-two-col[b-qb42liq1cs] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-qb42liq1cs] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/SalesReporting/SalesReporting.razor.rz.scp.css */
.rpt-doc[b-io41b9ixlv],
.rpt-loading-gate[b-io41b9ixlv] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-io41b9ixlv] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-io41b9ixlv] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-io41b9ixlv] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-io41b9ixlv 0.85s linear infinite; }
@keyframes rpt-spin-b-io41b9ixlv { to { transform: rotate(360deg); } }
.rpt-loading-title[b-io41b9ixlv] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-io41b9ixlv] { font-size: 15px; color: var(--light); }

.rpt-page[b-io41b9ixlv] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-io41b9ixlv] { justify-content: space-between; }
.rpt-page--cover[b-io41b9ixlv] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-io41b9ixlv] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-io41b9ixlv] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-io41b9ixlv] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-io41b9ixlv] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-io41b9ixlv] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-io41b9ixlv] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-io41b9ixlv] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.rpt-page__header[b-io41b9ixlv] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-io41b9ixlv] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-io41b9ixlv] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-io41b9ixlv] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-io41b9ixlv] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.rpt-big-numbers[b-io41b9ixlv] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-io41b9ixlv] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-io41b9ixlv] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-io41b9ixlv] { border-right: none; }
.rpt-big-num__val[b-io41b9ixlv] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-io41b9ixlv] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-io41b9ixlv] { color: var(--accent); }

.rpt-card-grid[b-io41b9ixlv] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-io41b9ixlv] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-io41b9ixlv] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-io41b9ixlv] { border-color: var(--stroke); }
.rpt-card__num[b-io41b9ixlv] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-io41b9ixlv] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-io41b9ixlv] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-io41b9ixlv] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-io41b9ixlv] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-io41b9ixlv] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-io41b9ixlv] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-io41b9ixlv] { height: 18px; }
.rpt-callout[b-io41b9ixlv] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout__text[b-io41b9ixlv] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-io41b9ixlv] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-io41b9ixlv],
.rpt-card--dark .rpt-card__title[b-io41b9ixlv],
.rpt-card--dark .rpt-card__desc[b-io41b9ixlv] { color: var(--white); }
.rpt-big-num--warn .rpt-big-num__val[b-io41b9ixlv] { color: var(--critical); }
.bold[b-io41b9ixlv] { font-weight: 700; }

.rpt-table[b-io41b9ixlv] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-io41b9ixlv],
.rpt-table td[b-io41b9ixlv] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-io41b9ixlv] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-io41b9ixlv] { border-bottom: none; }
.rpt-table .right[b-io41b9ixlv],
.rpt-num[b-io41b9ixlv] { text-align: right; }

.rpt-table--compact td[b-io41b9ixlv] { padding-top: 6px; padding-bottom: 6px; }

.rpt-empty-card[b-io41b9ixlv] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-io41b9ixlv] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-io41b9ixlv] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-io41b9ixlv] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-io41b9ixlv],
  .rpt-card-grid--4[b-io41b9ixlv],
  .rpt-two-col[b-io41b9ixlv] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-io41b9ixlv] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reporting/WarehouseReporting/WarehouseReporting.razor.rz.scp.css */
.rpt-doc[b-75exur2v8v],
.rpt-loading-gate[b-75exur2v8v] {
  --black: #000;
  --dark: #1a1a1a;
  --mid: #555;
  --light: #999;
  --faint: #ccc;
  --stroke: #e2e2e2;
  --surface: #fff;
  --white: #fff;
  --accent: #0071e3;
  --critical: #7a0012;
  --critical-bg: #fff;
  --fs-title: 1.95rem;
  --fs-kpi: 1.56rem;
  --fs-card: 1.45rem;
  --fs-table: 0.69rem;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.rpt-doc[b-75exur2v8v] { background: #fff; padding: 0; font-size: 0.92rem; }
.rpt-loading-gate[b-75exur2v8v] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rpt-loading-spinner[b-75exur2v8v] { width: 42px; height: 42px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: rpt-spin-b-75exur2v8v 0.85s linear infinite; }
@keyframes rpt-spin-b-75exur2v8v { to { transform: rotate(360deg); } }
.rpt-loading-title[b-75exur2v8v] { font-size: 24px; font-weight: 700; color: var(--black); letter-spacing: -0.4px; }
.rpt-loading-text[b-75exur2v8v] { font-size: 15px; color: var(--light); }

.rpt-page[b-75exur2v8v] { width: 100%; min-height: 100vh; margin: 0; padding: 34px 46px 28px; background: var(--white); display: flex; flex-direction: column; box-sizing: border-box; }
.rpt-page:not(.rpt-page--cover)[b-75exur2v8v] { justify-content: space-between; }
.rpt-page--cover[b-75exur2v8v] { justify-content: center; align-items: center; padding: 56px 62px; }
.rpt-page--end[b-75exur2v8v] { justify-content: center; align-items: center; }
.rpt-page--end .rpt-cover__content[b-75exur2v8v] { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.rpt-cover__content[b-75exur2v8v] { width: min(980px, 100%); text-align: left; }
.rpt-cover__eyebrow[b-75exur2v8v] { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--dark); margin-bottom: 22px; }
.rpt-cover__title[b-75exur2v8v] { font-size: 3.45rem; line-height: 0.96; font-weight: 900; letter-spacing: -2.4px; color: var(--black); margin-bottom: 24px; max-width: 960px; }
.rpt-cover__divider[b-75exur2v8v] { width: 56px; height: 3px; background: var(--black); margin-bottom: 28px; }
.rpt-cover__sub[b-75exur2v8v] { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--dark); max-width: 1000px; margin-bottom: 24px; }

.rpt-page__header[b-75exur2v8v] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rpt-chapter[b-75exur2v8v] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3.5px; color: var(--light); }
.rpt-page-num[b-75exur2v8v] { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; }
.rpt-page__title[b-75exur2v8v] { font-size: var(--fs-title); font-weight: 800; color: var(--black); letter-spacing: -0.9px; margin-bottom: 10px; line-height: 1.05; }
.rpt-rule[b-75exur2v8v] { width: 100%; height: 2px; background: var(--black); margin-bottom: 16px; }

.rpt-big-numbers[b-75exur2v8v] { display: grid; border-top: 2px solid var(--black); border-bottom: 1px solid var(--stroke); margin-bottom: 16px; }
.rpt-big-numbers--4[b-75exur2v8v] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-big-num[b-75exur2v8v] { padding: 14px 10px 12px; border-right: 1px solid var(--stroke); text-align: center; }
.rpt-big-num:last-child[b-75exur2v8v] { border-right: none; }
.rpt-big-num__val[b-75exur2v8v] { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.6px; color: var(--black); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 4px; }
.rpt-big-num__lbl[b-75exur2v8v] { font-size: 10px; font-weight: 700; color: var(--mid); text-transform: uppercase; letter-spacing: 0.65px; margin-top: 4px; }
.rpt-big-num--accent .rpt-big-num__val[b-75exur2v8v] { color: var(--accent); }

.rpt-card-grid[b-75exur2v8v] { display: grid; gap: 10px; }
.rpt-card-grid--4[b-75exur2v8v] { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rpt-card[b-75exur2v8v] { border: 1px solid var(--stroke); background: var(--surface); padding: 14px 12px; }
.rpt-card--warn[b-75exur2v8v] { border-color: var(--stroke); }
.rpt-card__num[b-75exur2v8v] { font-size: var(--fs-card); font-weight: 800; margin-bottom: 4px; }
.rpt-card__title[b-75exur2v8v] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.rpt-card__desc[b-75exur2v8v] { font-size: 11px; opacity: 0.85; }

.rpt-two-col[b-75exur2v8v] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rpt-three-col[b-75exur2v8v] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rpt-col[b-75exur2v8v] { border: 1px solid var(--stroke); padding: 8px; background: #fff; }
.rpt-col__head[b-75exur2v8v] { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); margin: 6px 0; }
.rpt-section-gap[b-75exur2v8v] { height: 18px; }
.rpt-callout[b-75exur2v8v] { border: 1px solid var(--stroke); padding: 14px 16px; margin: 10px 0; }
.rpt-callout__text[b-75exur2v8v] { font-size: 12px; color: var(--mid); }
.rpt-card--dark[b-75exur2v8v] { background: var(--dark); color: var(--white); }
.rpt-card--dark .rpt-card__num[b-75exur2v8v],
.rpt-card--dark .rpt-card__title[b-75exur2v8v],
.rpt-card--dark .rpt-card__desc[b-75exur2v8v] { color: var(--white); }
.rpt-big-num--warn .rpt-big-num__val[b-75exur2v8v] { color: var(--critical); }
.bold[b-75exur2v8v] { font-weight: 700; }

.rpt-table[b-75exur2v8v] { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.rpt-table th[b-75exur2v8v],
.rpt-table td[b-75exur2v8v] { padding: 7px 10px; border-bottom: 1px solid var(--stroke); color: var(--dark); }
.rpt-table th[b-75exur2v8v] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mid); background: #fafafa; }
.rpt-table tr:last-child td[b-75exur2v8v] { border-bottom: none; }
.rpt-table .right[b-75exur2v8v],
.rpt-num[b-75exur2v8v] { text-align: right; }

.rpt-table--compact td[b-75exur2v8v] { padding-top: 6px; padding-bottom: 6px; }

.rpt-empty-card[b-75exur2v8v] { border: 1px solid var(--stroke); background: #fff; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.rpt-empty-card__icon[b-75exur2v8v] { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--stroke); display: inline-flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; font-weight: 700; }
.rpt-empty-card__title[b-75exur2v8v] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dark); }
.rpt-empty-card__sub[b-75exur2v8v] { font-size: 11px; color: var(--mid); max-width: 320px; line-height: 1.4; }

@media (max-width: 1100px) {
  .rpt-big-numbers--4[b-75exur2v8v],
  .rpt-card-grid--4[b-75exur2v8v],
  .rpt-two-col[b-75exur2v8v] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rpt-cover__title[b-75exur2v8v] { font-size: 2.5rem; }
}
/* /Components/Pages/MainLayout/Reports/Inventory/InventoryDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Inventory Dashboard — BEC Monochromatic Apple-Style Design
   Matches: BEC-CEO-Inventory-Brief.html / BEC-Inventory-Dashboard.html
   ═══════════════════════════════════════════════════════════════ */

.dashboard-container[b-fg3vqo5bdf] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a1a1a;
}

/* ─── KPI Strip ─── */
.kpi-strip[b-fg3vqo5bdf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* ─── Chart Sections ─── */
.chart-section[b-fg3vqo5bdf],
.table-section[b-fg3vqo5bdf] {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.section-title[b-fg3vqo5bdf] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
}

/* ─── Loading State ─── */
.dashboard-loading[b-fg3vqo5bdf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-spinner[b-fg3vqo5bdf] {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: spin-b-fg3vqo5bdf 0.8s linear infinite;
}

@keyframes spin-b-fg3vqo5bdf {
    to { transform: rotate(360deg); }
}

.dashboard-loading p[b-fg3vqo5bdf] {
    color: #999;
    font-size: 0.9rem;
}

/* ─── Error State ─── */
.dashboard-error[b-fg3vqo5bdf] {
    text-align: center;
    padding: 3rem;
    background: #fff5f5;
    border-radius: 16px;
    border: 1px solid #ffe0e0;
}

.dashboard-error h3[b-fg3vqo5bdf] {
    color: #ff3b30;
    margin: 0 0 0.5rem 0;
}

.dashboard-error p[b-fg3vqo5bdf] {
    color: #555;
}
/* /Components/Pages/MainLayout/Reports/Shared/KpiCard.razor.rz.scp.css */
/* ═══ KPI Card — BEC Monochromatic Design ═══ */

.kpi-card[b-h92xqcgtmx] {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover[b-h92xqcgtmx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-card.kpi-alert[b-h92xqcgtmx] {
    border-color: #ff3b30;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
}

.kpi-title[b-h92xqcgtmx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.kpi-value[b-h92xqcgtmx] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.kpi-alert .kpi-value[b-h92xqcgtmx] {
    color: #ff3b30;
}

.kpi-subtitle[b-h92xqcgtmx] {
    font-size: 0.8rem;
    color: #999;
}
/* /Components/Pages/MainLayout/Safety/SafetyActionCenter/SafetyActionCenter.razor.rz.scp.css */
/* =====================================================
   SAFETY ACTION CENTER STYLES
   BEC Theme Compliant - No :root, No hardcoded colors
   Reference: BEC_Theme.css variables
   ===================================================== */

/* ========================================
   LAYOUT GRID
   ======================================== */
.erp-page-container[b-kwk3en51my] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
}

.layout-container[b-kwk3en51my] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========================================
   GLASS HEADER
   ======================================== */
.glass-header[b-kwk3en51my] {
    height: 48px;
    background: var(--BEC-glassmorphism-bg);
    backdrop-filter: var(--BEC-glassmorphism-blur);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--BEC-spacingHorizontalXXL);
    flex-shrink: 0;
    z-index: 50;
}

.brand-section[b-kwk3en51my] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.page-icon[b-kwk3en51my] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--BEC-colorPaletteRedForeground1), var(--BEC-colorPaletteRedForeground1));
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-radius: var(--BEC-borderRadiusXLarge);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase300);
    box-shadow: var(--BEC-shadow4);
}

.page-info[b-kwk3en51my] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.page-title[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeHero700);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.page-subtitle[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Buttons */
.btn-icon[b-kwk3en51my] {
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusCircular);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.btn-icon:hover[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   SIDEBAR NAVIGATION
   ======================================== */
.sidebar[b-kwk3en51my] {
    width: 260px;
    background: var(--BEC-colorNeutralBackground1);
    border-right: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    padding: var(--BEC-spacingHorizontalXXL) var(--BEC-spacingHorizontalL);
    flex-shrink: 0;
}

.nav-section-title[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--BEC-colorNeutralForeground4);
    font-weight: var(--BEC-fontWeightSemibold);
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding-left: var(--BEC-spacingHorizontalM);
}

.nav-item[b-kwk3en51my] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusXLarge);
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    margin-bottom: var(--BEC-spacingHorizontalXS);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.nav-item:hover[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.nav-item.active[b-kwk3en51my] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorBrandForeground1);
}

.nav-item i[b-kwk3en51my] {
    width: 24px;
    text-align: center;
    margin-right: var(--BEC-spacingHorizontalS);
}

.badge[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusCircular);
    font-weight: var(--BEC-fontWeightSemibold);
}

.nav-item.active .badge[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorBrandForeground1);
    box-shadow: var(--BEC-shadow2);
}

/* ========================================
   MAIN LIST CONTENT
   ======================================== */
.main-list[b-kwk3en51my] {
    flex: 1;
    background: var(--BEC-colorNeutralBackground2);
    padding: var(--BEC-spacingHorizontalXXL);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.empty-state[b-kwk3en51my] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.5;
}

.empty-state i[b-kwk3en51my] {
    font-size: 48px;
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.empty-state p[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   TASK CARDS
   ======================================== */
.task-card[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXXLarge);
    padding: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-shadow2);
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.task-card:hover[b-kwk3en51my] {
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
    border-color: var(--BEC-colorNeutralStroke1);
}

.task-status-stripe[b-kwk3en51my] {
    width: 4px;
    background: var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    flex-shrink: 0;
}

.task-card.high .task-status-stripe[b-kwk3en51my] {
    background: var(--BEC-colorPaletteRedForeground1);
}

.task-card.medium .task-status-stripe[b-kwk3en51my] {
    background: var(--BEC-colorPaletteYellowForeground1);
}

.task-card.low .task-status-stripe[b-kwk3en51my] {
    background: var(--BEC-colorBrandForeground1);
}

.task-content[b-kwk3en51my] {
    flex: 1;
    min-width: 0;
}

.task-header[b-kwk3en51my] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
}

.task-id[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    font-family: monospace;
    color: var(--BEC-colorNeutralForeground4);
}

.task-date[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground4);
}

.task-title[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.task-desc[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta[b-kwk3en51my] {
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    margin-top: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.meta-item[b-kwk3en51my] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
}

.meta-item i[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
}

/* Loading States */
.loading-overlay[b-kwk3en51my] {
    position: absolute;
    inset: 0;
    background: var(--BEC-glassmorphism-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.loading-spinner[b-kwk3en51my] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusCircular);
    animation: spin-b-kwk3en51my 1s linear infinite;
}

@keyframes spin-b-kwk3en51my {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton Loading */
.skeleton[b-kwk3en51my] {
    background: linear-gradient(90deg, var(--BEC-colorNeutralBackground3) 25%, var(--BEC-colorNeutralBackground2) 50%, var(--BEC-colorNeutralBackground3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-kwk3en51my 2s infinite;
    border-radius: var(--BEC-borderRadiusMedium);
}

.skeleton-card[b-kwk3en51my] {
    height: 120px;
    margin-bottom: var(--BEC-spacingHorizontalM);
}

@keyframes shimmer-b-kwk3en51my {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Additional Classes for Razor compliance */
.nav-item-content[b-kwk3en51my] {
    display: flex;
    align-items: center;
}

.error-boundary-container[b-kwk3en51my] {
    padding: var(--BEC-spacingHorizontalXXL);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Focus Visible for Keyboard Navigation */
.nav-item:focus-visible[b-kwk3en51my] {
    outline: 2px solid var(--BEC-colorBrandForeground1);
    outline-offset: 2px;
}
/* /Components/Pages/MainLayout/Safety/SafetyDashboard/SafetyDashboard.razor.rz.scp.css */
/* =====================================================
   SAFETY DASHBOARD PAGE STYLES
   BEC Theme Compliant - No hardcoded colors
   Reference: BEC_Theme.css variables
   ===================================================== */

/* ========================================
   OVERRIDE PARENT SCROLL BEHAVIOR
   This ensures ONLY the grid content scrolls
   ======================================== */
[b-46e2eyuhs0] .page-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

[b-46e2eyuhs0] .page-content-inner {
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   PAGE CONTAINER - Full Width Layout
   Uses relative positioning for proper layout flow
   ======================================== */
.erp-page-container[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
    width: 100%;
    box-sizing: border-box;
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   PAGE HEADER - Sticky at top
   ======================================== */
.dashboard-header[b-46e2eyuhs0] {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalM);
    height: 48px;
    min-height: 48px;
}

.header-title-section[b-46e2eyuhs0] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.header-icon[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorBrandForeground1);
}

.header-text[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.page-title[b-46e2eyuhs0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeHero700);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-subtitle[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: var(--BEC-spacingHorizontalXXS) 0 0 0;
}

.header-right-section[b-46e2eyuhs0] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

/* ========================================
   HEADER STATS - Compact
   ======================================== */
.header-stats[b-46e2eyuhs0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    height: 32px;
}

.header-stat-item[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 var(--BEC-spacingHorizontalS);
    border-right: 1px solid var(--BEC-colorNeutralStroke2);
}

.header-stat-item:last-child[b-46e2eyuhs0] {
    border-right: none;
}

.header-stat-value[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightBold);
}

.header-stat-value.success[b-46e2eyuhs0] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.header-stat-value.warning[b-46e2eyuhs0] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.header-stat-value.info[b-46e2eyuhs0] {
    color: var(--BEC-colorBrandForeground1);
}

.header-stat-value.highlight[b-46e2eyuhs0] {
    color: var(--BEC-colorBrandForeground1);
}

.header-stat-label[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase100);
    text-transform: uppercase;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalXXS);
}

.header-actions[b-46e2eyuhs0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-icon[b-46e2eyuhs0] {
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusCircular);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.btn-icon:hover[b-46e2eyuhs0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   DASHBOARD CONTENT AREA
   Scrollable area below header
   ======================================== */
.dashboard-scroll-area[b-46e2eyuhs0] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* ========================================
   KPI CARDS ROW
   ======================================== */
.kpi-cards-row[b-46e2eyuhs0] {
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    flex-wrap: wrap;
}

.kpi-card[b-46e2eyuhs0] {
    flex: 1;
    min-width: 200px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXLarge);
    padding: var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.kpi-card:hover[b-46e2eyuhs0] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow4);
}

.kpi-card.safe-days[b-46e2eyuhs0] {
    background: var(--BEC-status-approved-bg);
    border-color: var(--BEC-status-approved-border);
}

.kpi-card.safe-days .kpi-label[b-46e2eyuhs0] {
    color: var(--BEC-status-approved-color);
    opacity: 0.9;
}

.kpi-card.safe-days .kpi-value[b-46e2eyuhs0] {
    color: var(--BEC-status-approved-color);
}

.kpi-icon[b-46e2eyuhs0] {
    width: 48px;
    height: 48px;
    border-radius: var(--BEC-borderRadiusXXLarge);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase600);
}

.kpi-icon.incident[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.kpi-icon.near-miss[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.kpi-icon.observation[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorBrandForeground1);
}

.kpi-icon.permit[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-themeTertiary);
}

.kpi-icon.safe[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.kpi-content[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
}

.kpi-value[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeHero700);
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
    color: var(--BEC-colorNeutralForeground1);
}

.kpi-label[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalXS);
}

/* ========================================
   GRID SECTION CARD (Chart Placeholder)
   ======================================== */
.grid-section-card[b-46e2eyuhs0] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow2);
    flex: 1;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder[b-46e2eyuhs0] {
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

.chart-placeholder i[b-46e2eyuhs0] {
    font-size: 48px;
    margin-bottom: var(--BEC-spacingHorizontalL);
    opacity: 0.5;
}

.chart-placeholder h3[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.chart-placeholder p[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    margin: 0;
}

/* Dashboard Content */
.dashboard-content[b-46e2eyuhs0] {
    flex: 1;
    padding: 0 var(--BEC-spacingHorizontalXXL) var(--BEC-spacingHorizontalXXL);
}

/* ========================================
   LOADING STATES
   ======================================== */
.loading-overlay[b-46e2eyuhs0] {
    position: absolute;
    inset: 0;
    background: var(--BEC-glassmorphism-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    gap: var(--BEC-spacingHorizontalL);
}

.loading-spinner[b-46e2eyuhs0] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusCircular);
    animation: spin-b-46e2eyuhs0 1s linear infinite;
}

.loading-overlay p[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

@keyframes spin-b-46e2eyuhs0 {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton Loading */
.skeleton[b-46e2eyuhs0] {
    background: linear-gradient(90deg, var(--BEC-colorNeutralBackground3) 25%, var(--BEC-colorNeutralBackground2) 50%, var(--BEC-colorNeutralBackground3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-46e2eyuhs0 2s infinite;
    border-radius: var(--BEC-borderRadiusMedium);
}

.skeleton-kpi[b-46e2eyuhs0] {
    height: 80px;
    flex: 1;
    min-width: 200px;
}

.skeleton-chart[b-46e2eyuhs0] {
    height: 400px;
    width: 100%;
}

@keyframes shimmer-b-46e2eyuhs0 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Error Boundary Container */
.error-boundary-container[b-46e2eyuhs0] {
    padding: var(--BEC-spacingHorizontalXXL);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}
/* /Components/Pages/MainLayout/Safety/SafetyRequest/SafetyRequest.razor.rz.scp.css */
/* ========================================
   SAFETY REQUESTS
   High-Performance Grid Styling
   ======================================== */

/* ========================================
   OVERRIDE PARENT SCROLL BEHAVIOR
   This ensures ONLY the grid content scrolls
   ======================================== */
[b-getjrrk7cz] .page-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

[b-getjrrk7cz] .page-content-inner {
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   PAGE CONTAINER - Full Width Layout
   Uses relative positioning for proper layout flow
   ======================================== */
.erp-page-container[b-getjrrk7cz] {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   PAGE HEADER - Sticky at top
   ======================================== */
.erp-page-header[b-getjrrk7cz] {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    min-height: 40px;
}

.header-left[b-getjrrk7cz] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-getjrrk7cz] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    /* Base500 equivalent */
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-getjrrk7cz] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
}

.help-icon-btn[b-getjrrk7cz] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-getjrrk7cz] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.header-right[b-getjrrk7cz] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ========================================
   ACTION TOOLBAR - Fixed at top of grid, doesn't scroll
   ======================================== */
[b-getjrrk7cz] .e-toolbar.e-control {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 44px !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

[b-getjrrk7cz] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Compact Toolbar - Matches header height */
[b-getjrrk7cz] .compact-toolbar.e-toolbar {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 var(--BEC-spacingHorizontalXXL) !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-items {
    height: 44px !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item {
    margin: 0 1px !important;
    height: 44px !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline/border on toolbar buttons */
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus-visible,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:active,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn.e-focused {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.15s ease !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    transition: color 0.15s ease !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Highlighted Save Button (when pending changes) */
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-icons,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-tbar-btn-text {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Disabled State */
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-getjrrk7cz] .compact-toolbar .e-separator {
    background: var(--BEC-colorNeutralStroke2) !important;
    width: 1px !important;
    height: 18px !important;
    margin: 0 4px !important;
}

/* ========================================
   PAGE CONTENT - FLUSH GRID
   ======================================== */
.erp-page-content[b-getjrrk7cz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* DEPRECATED WRAPPERS REMOVED */

/* ========================================
   GRID OVERRIDES
   ======================================== */
[b-getjrrk7cz] .e-grid {
    border: none !important;
}

[b-getjrrk7cz] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground3) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-getjrrk7cz] .e-headercell {
    background: var(--BEC-colorNeutralBackground3) !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
}

[b-getjrrk7cz] .e-rowcell {
    font-size: var(--BEC-fontSizeBase200) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    border-color: var(--BEC-colorNeutralStroke2) !important;
    padding: var(--BEC-spacingHorizontalM) !important;
}

[b-getjrrk7cz] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--BEC-colorNeutralBackground3) !important;
}

/* Status Badges */
.status-badge[b-getjrrk7cz] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusCircular);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

.status-badge.submitted[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.status-badge.draft[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.status-badge.pending[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.status-badge.rejected[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* Grid ID Cell */
.id-cell[b-getjrrk7cz] {
    font-family: monospace;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Description Cell */
.description-cell[b-getjrrk7cz] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 230px;
}

/* ========================================
   CUSTOM TOOLBAR ITEMS (Pills + Search)
   Adapted for Template implementation within SfToolbar
   ======================================== */
.filter-pills[b-getjrrk7cz] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
    align-items: center;
}

.filter-pill[b-getjrrk7cz] {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: normal;
}

.filter-pill:hover[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke1);
}

.filter-pill.active[b-getjrrk7cz] {
    background: #ecfdf5;
    /* Green Light */
    color: #059669;
    /* Green Dark */
    border-color: #059669;
    font-weight: 600;
}

.search-bar-integrated[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 14px;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 200px;
    border: 1px solid transparent;
    height: 28px;
}

.search-bar-integrated:focus-within[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandForeground1);
}

.search-bar-integrated i[b-getjrrk7cz] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
}

.search-bar-integrated input[b-getjrrk7cz] {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    width: 100%;
    color: var(--BEC-colorNeutralForeground1);
    font-family: var(--BEC-fontFamilyBase);
    padding: 0;
    height: 100%;
}

/* ========================================
   WIZARD SIDEBAR STYLES (Preserved)
   ======================================== */
.wizard-sidebar[b-getjrrk7cz] {
    --wizard-bg: var(--BEC-colorNeutralBackground1);
    --wizard-header-bg: var(--BEC-colorNeutralBackground3);
}

[b-getjrrk7cz] .e-sidebar.wizard-sidebar {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-left: 1px solid var(--BEC-colorNeutralStroke2);
    box-shadow: var(--BEC-shadow16);
    z-index: 2000 !important;
}

.sidebar-content[b-getjrrk7cz] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Wizard Header */
.v1-header[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground3);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.v1-title[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.v1-stepper[b-getjrrk7cz] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.v1-step[b-getjrrk7cz] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    opacity: 0.5;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.v1-step.active[b-getjrrk7cz] {
    opacity: 1;
}

.v1-circle[b-getjrrk7cz] {
    width: 24px;
    height: 24px;
    border-radius: var(--BEC-borderRadiusCircular);
    background: var(--BEC-colorNeutralBackground5);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

.v1-step.active .v1-circle[b-getjrrk7cz] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.v1-step span[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Body */
.v1-body[b-getjrrk7cz] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalXXL);
}

.v1-form-group[b-getjrrk7cz] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.v1-form-group label[b-getjrrk7cz] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
}

.v1-form-group input[b-getjrrk7cz],
.v1-form-group select[b-getjrrk7cz],
.v1-form-group textarea[b-getjrrk7cz] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1);
    font-family: var(--BEC-fontFamilyBase);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.v1-form-group input:focus[b-getjrrk7cz],
.v1-form-group select:focus[b-getjrrk7cz],
.v1-form-group textarea:focus[b-getjrrk7cz] {
    border-color: var(--BEC-colorBrandForeground1);
    box-shadow: var(--BEC-focus-shadow);
    outline: none;
}

.validation-message[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXS);
}

.severity-options[b-getjrrk7cz] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
}

.badge-option[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusCircular);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    font-size: var(--BEC-fontSizeBase200);
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.badge-option.selected[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.file-upload-area[b-getjrrk7cz] {
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
    padding: var(--BEC-spacingHorizontalXXL);
    text-align: center;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.file-upload-area:hover[b-getjrrk7cz] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground3);
}

.file-hint[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalS);
}

/* Wizard Footer */
.v1-footer[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground3);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
}

.btn[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusLarge);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    border: none;
    font-family: var(--BEC-fontFamilyBase);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.btn-secondary[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
}

.btn-primary[b-getjrrk7cz] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-primary:hover[b-getjrrk7cz] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-primary:disabled[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralForeground4);
    cursor: not-allowed;
}

/* Message Bars */
.message-success[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    padding: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    font-size: var(--BEC-fontSizeBase300);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-error[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    padding: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    font-size: var(--BEC-fontSizeBase300);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-close[b-getjrrk7cz] {
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Overlay */
.loading-overlay[b-getjrrk7cz] {
    position: absolute;
    inset: 0;
    background: var(--BEC-glassmorphism-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    gap: var(--BEC-spacingHorizontalL);
}

.loading-spinner[b-getjrrk7cz] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusCircular);
    animation: spin-b-getjrrk7cz 1s linear infinite;
}

@keyframes spin-b-getjrrk7cz {
    to {
        transform: rotate(360deg);
    }
}

/* Screen Reader Only - Accessibility */
.sr-only[b-getjrrk7cz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.error-boundary-container[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalXXL);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* ================= MIGRATED INLINE STYLES ================= */

.sfr-subtitle[b-getjrrk7cz] {
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 8px;
    font-size: 12px;
}
/* /Components/Pages/MainLayout/VendorProcurement/VendorProcurementDashboard.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-pkh64zcgjv] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
}

.header-left[b-pkh64zcgjv] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-pkh64zcgjv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.header-right[b-pkh64zcgjv] {
    flex-shrink: 0;
}

/* ========================================
   KPI CARDS ROW
   ======================================== */
.kpi-cards-row[b-pkh64zcgjv] {
    display: flex;
    gap: 10px;
    padding: 8px 24px;
    overflow-x: auto;
}

.kpi-card[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    min-width: 100px;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.kpi-card:hover[b-pkh64zcgjv] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.kpi-card.kpi-active[b-pkh64zcgjv] {
    border-color: var(--BEC-colorBrandStroke1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.kpi-value[b-pkh64zcgjv] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1.2;
}

.kpi-label[b-pkh64zcgjv] {
    font-size: 9px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    margin-top: 2px;
}

.kpi-orange[b-pkh64zcgjv] { border-left-color: #f57c00; }
.kpi-orange .kpi-value[b-pkh64zcgjv] { color: #f57c00; }

.kpi-yellow[b-pkh64zcgjv] { border-left-color: #fbc02d; }
.kpi-yellow .kpi-value[b-pkh64zcgjv] { color: #f9a825; }

.kpi-blue[b-pkh64zcgjv] { border-left-color: #1976d2; }
.kpi-blue .kpi-value[b-pkh64zcgjv] { color: #1976d2; }

.kpi-green[b-pkh64zcgjv] { border-left-color: #388e3c; }
.kpi-green .kpi-value[b-pkh64zcgjv] { color: #388e3c; }

.kpi-red[b-pkh64zcgjv] { border-left-color: #d32f2f; }
.kpi-red .kpi-value[b-pkh64zcgjv] { color: #d32f2f; }

.kpi-amber[b-pkh64zcgjv] { border-left-color: #ff8f00; }
.kpi-amber .kpi-value[b-pkh64zcgjv] { color: #ff8f00; }

.kpi-purple[b-pkh64zcgjv] { border-left-color: #7b1fa2; }
.kpi-purple .kpi-value[b-pkh64zcgjv] { color: #7b1fa2; }

/* ========================================
   CATEGORY / STATUS TABS
   ======================================== */
.category-tabs[b-pkh64zcgjv] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    overflow-x: auto;
}

.category-tab[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tab:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
}

.category-tab.active[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.category-tab .tab-badge[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-pkh64zcgjv] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   ACTION TOOLBAR
   ======================================== */
.action-toolbar[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    margin: 4px 24px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    gap: 12px;
    min-height: 40px;
}

.toolbar-left[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-right[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
}

.toolbar-btn[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.toolbar-btn i[b-pkh64zcgjv] {
    font-size: 11px;
}

.toolbar-btn:hover:not(:disabled)[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.toolbar-btn:disabled[b-pkh64zcgjv] {
    opacity: 0.45;
    cursor: not-allowed;
}

.toolbar-search[b-pkh64zcgjv] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-pkh64zcgjv] {
    position: absolute;
    left: 10px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    pointer-events: none;
    z-index: 1;
}

[b-pkh64zcgjv] .e-search-inline .e-input {
    padding-left: 30px !important;
    font-size: 12px !important;
    height: 30px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: visible;
}

/* ========================================
   STATES
   ======================================== */
.loading-overlay[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.empty-state[b-pkh64zcgjv],
.error-state[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 12px;
}

.empty-state i[b-pkh64zcgjv],
.error-state i[b-pkh64zcgjv] {
    font-size: 32px;
    opacity: 0.5;
}

.btn-retry[b-pkh64zcgjv] {
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    cursor: pointer;
}

.btn-retry:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.empty-state-sm[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 8px;
    font-size: 12px;
}

.empty-state-sm i[b-pkh64zcgjv] {
    font-size: 24px;
    opacity: 0.4;
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-pending-approval[b-pkh64zcgjv] { background: #fff3e0; color: #e65100; }
.status-information-requested[b-pkh64zcgjv] { background: #fffde7; color: #f57f17; }
.status-approved[b-pkh64zcgjv] { background: #e3f2fd; color: #1565c0; }
.status-active[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.status-on-hold[b-pkh64zcgjv] { background: #f5f5f5; color: #616161; }
.status-suspended[b-pkh64zcgjv] { background: #fce4ec; color: #c62828; }
.status-blacklisted[b-pkh64zcgjv] { background: #212121; color: #ffffff; }
.status-expired[b-pkh64zcgjv] { background: #efebe9; color: #4e342e; }

/* ========================================
   ORIGIN & CODE BADGES
   ======================================== */
.origin-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.origin-local[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.origin-foreign[b-pkh64zcgjv] { background: #e3f2fd; color: #1565c0; }

.vendor-code[b-pkh64zcgjv] {
    font-family: monospace;
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.text-muted[b-pkh64zcgjv] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

.score-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

.expiry-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff3e0;
    color: #e65100;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

.info-req-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

/* ========================================
   GRID OVERRIDES
   ======================================== */
[b-pkh64zcgjv] .e-grid {
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

[b-pkh64zcgjv] .e-grid .e-row {
    height: 34px !important;
    cursor: pointer;
}

[b-pkh64zcgjv] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-pkh64zcgjv] .e-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-pkh64zcgjv] .e-grid .e-gridheader .e-headercell {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   RIGHT SIDE PANEL
   ======================================== */
.panel-backdrop[b-pkh64zcgjv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    animation: fadeIn-b-pkh64zcgjv 0.2s ease;
}

@keyframes fadeIn-b-pkh64zcgjv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.side-panel[b-pkh64zcgjv] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    max-width: 700px;
    min-width: 400px;
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-pkh64zcgjv 0.25s ease;
}

@keyframes slideInRight-b-pkh64zcgjv {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.panel-header[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    gap: 8px;
}

.panel-title-area[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.panel-title[b-pkh64zcgjv] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-close-btn[b-pkh64zcgjv] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.panel-close-btn:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.panel-body[b-pkh64zcgjv] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.panel-footer[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ========================================
   TAB CONTENT
   ======================================== */
.tab-content[b-pkh64zcgjv] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[b-pkh64zcgjv] .e-tab .e-tab-header {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

[b-pkh64zcgjv] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
}

/* ========================================
   DETAIL SECTIONS
   ======================================== */
.detail-section[b-pkh64zcgjv] {
    margin-bottom: 12px;
}

.section-title[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.section-title i[b-pkh64zcgjv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.detail-grid[b-pkh64zcgjv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.detail-field[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-field.full-width[b-pkh64zcgjv] {
    grid-column: 1 / -1;
}

.field-label[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.field-value[b-pkh64zcgjv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   PROGRESS BAR
   ======================================== */
.progress-bar-container[b-pkh64zcgjv] {
    width: 100%;
    height: 6px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-bar[b-pkh64zcgjv] {
    height: 100%;
    background: var(--BEC-colorBrandBackground);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-pkh64zcgjv] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   STATUS TIMELINE
   ======================================== */
.status-timeline[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
}

.timeline-item[b-pkh64zcgjv] {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    position: relative;
}

.timeline-item:not(:last-child)[b-pkh64zcgjv]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 22px;
    bottom: -8px;
    width: 1px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-dot[b-pkh64zcgjv] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    flex-shrink: 0;
    margin-top: 2px;
}

.timeline-content[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-status[b-pkh64zcgjv] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.timeline-date[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-reason[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

/* ========================================
   DOCUMENTS
   ======================================== */
.doc-card[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    border-left: 3px solid transparent;
}

.doc-card.doc-ok[b-pkh64zcgjv] { border-left-color: #388e3c; }
.doc-card.doc-warning[b-pkh64zcgjv] { border-left-color: #ff8f00; }
.doc-card.doc-critical[b-pkh64zcgjv] { border-left-color: #d32f2f; }
.doc-card.doc-expired[b-pkh64zcgjv] { border-left-color: #616161; background: #fafafa; }

.doc-info[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-type[b-pkh64zcgjv] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.doc-dates[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.doc-expiry-badge[b-pkh64zcgjv] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold);
    text-transform: uppercase;
}

.doc-expiry-ok[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.doc-expiry-warning[b-pkh64zcgjv] { background: #fff3e0; color: #e65100; }
.doc-expiry-critical[b-pkh64zcgjv] { background: #fce4ec; color: #c62828; }
.doc-expiry-expired[b-pkh64zcgjv] { background: #efebe9; color: #4e342e; }

/* ========================================
   PERFORMANCE RATINGS
   ======================================== */
.performance-avg[b-pkh64zcgjv] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 12px;
}

.avg-label[b-pkh64zcgjv] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.avg-value[b-pkh64zcgjv] {
    font-size: 24px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.avg-max[b-pkh64zcgjv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.rating-card[b-pkh64zcgjv] {
    padding: 10px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 8px;
}

.rating-header[b-pkh64zcgjv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.rating-ref[b-pkh64zcgjv] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.rating-score[b-pkh64zcgjv] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.rating-breakdown[b-pkh64zcgjv] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 4px;
}

.rating-footer[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   INFO REQUESTS
   ======================================== */
.info-request-card[b-pkh64zcgjv] {
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 8px;
}

.info-req-header[b-pkh64zcgjv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.info-req-priority[b-pkh64zcgjv] {
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold);
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
}

.priority-low[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.priority-normal[b-pkh64zcgjv] { background: #e3f2fd; color: #1565c0; }
.priority-high[b-pkh64zcgjv] { background: #fff3e0; color: #e65100; }
.priority-critical[b-pkh64zcgjv] { background: #fce4ec; color: #c62828; }

.info-req-status[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.info-req-desc[b-pkh64zcgjv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 4px;
}

.info-req-meta[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-btn[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.action-btn i[b-pkh64zcgjv] { font-size: 10px; }

.action-btn-primary[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.action-btn-primary:hover[b-pkh64zcgjv] { opacity: 0.9; }

.action-btn-success[b-pkh64zcgjv] {
    background: #388e3c;
    color: #ffffff;
}

.action-btn-success:hover[b-pkh64zcgjv] { background: #2e7d32; }

.action-btn-warning[b-pkh64zcgjv] {
    background: #f57c00;
    color: #ffffff;
}

.action-btn-warning:hover[b-pkh64zcgjv] { background: #e65100; }

.action-btn-danger[b-pkh64zcgjv] {
    background: #d32f2f;
    color: #ffffff;
}

.action-btn-danger:hover[b-pkh64zcgjv] { background: #c62828; }

.action-btn-secondary[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border-color: var(--BEC-colorNeutralStroke2);
}

.action-btn-secondary:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .side-panel[b-pkh64zcgjv] {
        width: 100vw;
        max-width: 100vw;
        min-width: unset;
    }

    .kpi-cards-row[b-pkh64zcgjv] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .kpi-card[b-pkh64zcgjv] {
        min-width: 80px;
    }

    .detail-grid[b-pkh64zcgjv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MainLayout/VendorRegistration/VendorRegistrationHub.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   VendorRegistrationHub — Scoped CSS
   Design Tokens: --BEC-* (BEC Arabia: #1B365D primary, #2E5090 accent)
   ═══════════════════════════════════════════════════════════════════════════ */

.vr-hub[b-oi0ix3cnqp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--BEC-bg-surface, #f8f9fc);
    font-family: var(--BEC-font-family, 'Segoe UI', system-ui, sans-serif);
}

/* ─── Loading ─────────────────────────────────────────────────────────────── */
.vr-loading[b-oi0ix3cnqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: var(--BEC-text-secondary, #6b7280);
}

.vr-spinner[b-oi0ix3cnqp] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-border-light, #e5e7eb);
    border-top-color: var(--BEC-primary, #1B365D);
    border-radius: 50%;
    animation: vr-spin-b-oi0ix3cnqp 0.8s linear infinite;
}

@keyframes vr-spin-b-oi0ix3cnqp {
    to { transform: rotate(360deg); }
}

/* ─── Submitted View ──────────────────────────────────────────────────────── */
.vr-submitted[b-oi0ix3cnqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 48px 24px;
}

.vr-submitted-icon[b-oi0ix3cnqp] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-success-bg, #dcfce7);
    color: var(--BEC-success, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 24px;
}

.vr-submitted h2[b-oi0ix3cnqp] {
    font-size: 24px;
    color: var(--BEC-text-primary, #1f2937);
    margin-bottom: 8px;
}

.vr-submitted p[b-oi0ix3cnqp] {
    color: var(--BEC-text-secondary, #6b7280);
    max-width: 480px;
    line-height: 1.5;
}

.vr-submitted-badge[b-oi0ix3cnqp] {
    margin-top: 24px;
    padding: 8px 20px;
    background: var(--BEC-warning-bg, #fef3c7);
    color: var(--BEC-warning, #d97706);
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

/* ─── Auto-save Hint ──────────────────────────────────────────────────────── */
.vr-autosave-hint[b-oi0ix3cnqp] {
    background: var(--BEC-info-bg, #eff6ff);
    border-bottom: 1px solid var(--BEC-info-border, #bfdbfe);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-info, #2563eb);
}

.vr-hint-icon[b-oi0ix3cnqp] {
    font-size: 16px;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
.vr-header[b-oi0ix3cnqp] {
    padding: 24px 32px 16px;
    background: white;
    border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
}

.vr-header-top[b-oi0ix3cnqp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vr-header-info[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.vr-header-info h1[b-oi0ix3cnqp] {
    font-size: 22px;
    font-weight: 700;
    color: var(--BEC-primary, #1B365D);
    margin: 0;
}

.vr-header-brand[b-oi0ix3cnqp] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vr-header-logo[b-oi0ix3cnqp] {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.vr-status-badge[b-oi0ix3cnqp] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.vr-status-in_progress[b-oi0ix3cnqp] {
    background: var(--BEC-info-bg, #eff6ff);
    color: var(--BEC-info, #2563eb);
}

.vr-status-pending_approval[b-oi0ix3cnqp] {
    background: var(--BEC-warning-bg, #fef3c7);
    color: var(--BEC-warning, #d97706);
}

.vr-progress-section[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vr-progress-bar[b-oi0ix3cnqp] {
    flex: 1;
    height: 8px;
    background: var(--BEC-border-light, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.vr-progress-fill[b-oi0ix3cnqp] {
    height: 100%;
    background: linear-gradient(90deg, var(--BEC-primary, #1B365D), var(--BEC-accent, #2E5090));
    border-radius: 4px;
    transition: width 0.4s ease;
}

.vr-progress-text[b-oi0ix3cnqp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-text-secondary, #6b7280);
    white-space: nowrap;
}

/* ─── Body: Sidebar + Content ─────────────────────────────────────────────── */
.vr-body[b-oi0ix3cnqp] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.vr-sidebar[b-oi0ix3cnqp] {
    width: 280px;
    min-width: 280px;
    background: white;
    border-right: 1px solid var(--BEC-border-light, #e5e7eb);
    padding: 24px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vr-nav-step[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.vr-nav-step:hover[b-oi0ix3cnqp] {
    background: var(--BEC-bg-hover, #f3f4f6);
}

.vr-nav-step.active[b-oi0ix3cnqp] {
    background: var(--BEC-primary-bg, #eef2f7);
}

.vr-nav-step.active .vr-step-circle[b-oi0ix3cnqp] {
    background: var(--BEC-primary, #1B365D);
    color: white;
    border-color: var(--BEC-primary, #1B365D);
}

.vr-nav-step.active .vr-step-label[b-oi0ix3cnqp] {
    font-weight: 600;
    color: var(--BEC-primary, #1B365D);
}

.vr-nav-step.completed .vr-step-circle[b-oi0ix3cnqp] {
    background: var(--BEC-success, #16a34a);
    color: white;
    border-color: var(--BEC-success, #16a34a);
}

.vr-step-circle[b-oi0ix3cnqp] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 2px solid var(--BEC-border-medium, #d1d5db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-text-secondary, #6b7280);
    transition: all 0.2s;
}

.vr-step-label[b-oi0ix3cnqp] {
    font-size: 13px;
    color: var(--BEC-text-secondary, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vr-step-connector[b-oi0ix3cnqp] {
    width: 2px;
    height: 12px;
    background: var(--BEC-border-light, #e5e7eb);
    margin-left: 25px;
}

.vr-step-connector.completed[b-oi0ix3cnqp] {
    background: var(--BEC-success, #16a34a);
}

/* ─── Content ─────────────────────────────────────────────────────────────── */
.vr-content[b-oi0ix3cnqp] {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
}

.vr-content-card[b-oi0ix3cnqp] {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    padding: 32px;
    min-height: 400px;
}

/* ─── Action Bar ──────────────────────────────────────────────────────────── */
.vr-action-bar[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: white;
    border-top: 1px solid var(--BEC-border-light, #e5e7eb);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.vr-action-left[b-oi0ix3cnqp],
.vr-action-right[b-oi0ix3cnqp] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.vr-action-center[b-oi0ix3cnqp] {
    flex: 1;
    text-align: center;
}

.vr-last-saved[b-oi0ix3cnqp] {
    font-size: 12px;
    color: var(--BEC-text-muted, #9ca3af);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.vr-btn[b-oi0ix3cnqp] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.vr-btn:disabled[b-oi0ix3cnqp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.vr-btn-primary[b-oi0ix3cnqp] {
    background: var(--BEC-primary, #1B365D);
    color: white;
}

.vr-btn-primary:hover:not(:disabled)[b-oi0ix3cnqp] {
    background: var(--BEC-accent, #2E5090);
}

.vr-btn-secondary[b-oi0ix3cnqp] {
    background: var(--BEC-bg-surface, #f3f4f6);
    color: var(--BEC-text-primary, #374151);
    border: 1px solid var(--BEC-border-medium, #d1d5db);
}

.vr-btn-secondary:hover:not(:disabled)[b-oi0ix3cnqp] {
    background: var(--BEC-border-light, #e5e7eb);
}

.vr-btn-save[b-oi0ix3cnqp] {
    background: var(--BEC-success, #16a34a);
    color: white;
    font-size: 15px;
    padding: 12px 24px;
}

.vr-btn-save:hover:not(:disabled)[b-oi0ix3cnqp] {
    background: #15803d;
}

.vr-btn-submit[b-oi0ix3cnqp] {
    background: linear-gradient(135deg, var(--BEC-primary, #1B365D), var(--BEC-accent, #2E5090));
    color: white;
    padding: 12px 28px;
}

.vr-btn-submit:hover:not(:disabled)[b-oi0ix3cnqp] {
    box-shadow: 0 4px 12px rgba(27, 54, 93, 0.3);
}

.vr-btn-spinner[b-oi0ix3cnqp] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: vr-spin-b-oi0ix3cnqp 0.6s linear infinite;
}

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.vr-toast[b-oi0ix3cnqp] {
    position: fixed;
    bottom: 80px;
    right: 32px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    animation: vr-slide-up-b-oi0ix3cnqp 0.3s ease;
}

.vr-toast.success[b-oi0ix3cnqp] {
    background: var(--BEC-success-bg, #dcfce7);
    color: var(--BEC-success, #16a34a);
    border: 1px solid #bbf7d0;
}

.vr-toast.error[b-oi0ix3cnqp] {
    background: var(--BEC-error-bg, #fef2f2);
    color: var(--BEC-error, #dc2626);
    border: 1px solid #fecaca;
}

@keyframes vr-slide-up-b-oi0ix3cnqp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ─── Step Content Shared Styles (::deep for child components) ────────────── */
[b-oi0ix3cnqp] .step-section {
    /* No extra wrapper needed */
}

[b-oi0ix3cnqp] .step-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-primary, #1B365D);
    margin: 0 0 4px;
}

[b-oi0ix3cnqp] .step-description {
    font-size: 14px;
    color: var(--BEC-text-secondary, #6b7280);
    margin: 0 0 24px;
}

[b-oi0ix3cnqp] .section-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
}

[b-oi0ix3cnqp] .form-section {
    margin-bottom: 24px;
}

[b-oi0ix3cnqp] .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

[b-oi0ix3cnqp] .form-group {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

[b-oi0ix3cnqp] .form-group-wide {
    flex: 2;
    min-width: 300px;
}

[b-oi0ix3cnqp] .form-group-checkbox {
    justify-content: center;
    min-width: 140px;
}

[b-oi0ix3cnqp] .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin-bottom: 4px;
}

[b-oi0ix3cnqp] .form-label .required {
    color: var(--BEC-error, #dc2626);
}

[b-oi0ix3cnqp] .form-label-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

[b-oi0ix3cnqp] .form-input,
[b-oi0ix3cnqp] .form-select,
[b-oi0ix3cnqp] .form-textarea {
    padding: 8px 12px;
    border: 1px solid var(--BEC-border-medium, #d1d5db);
    border-radius: 6px;
    font-size: 14px;
    color: var(--BEC-text-primary, #374151);
    background: white;
    transition: border-color 0.2s;
}

[b-oi0ix3cnqp] .form-input:focus,
[b-oi0ix3cnqp] .form-select:focus,
[b-oi0ix3cnqp] .form-textarea:focus {
    outline: none;
    border-color: var(--BEC-primary, #1B365D);
    box-shadow: 0 0 0 2px rgba(27, 54, 93, 0.1);
}

[b-oi0ix3cnqp] .form-textarea {
    min-height: 100px;
    resize: vertical;
}

[b-oi0ix3cnqp] .form-textarea-sm {
    min-height: 60px;
}

[b-oi0ix3cnqp] .form-input-file {
    font-size: 13px;
    padding: 6px;
}

[b-oi0ix3cnqp] .form-hint {
    font-size: 12px;
    color: var(--BEC-text-muted, #9ca3af);
    margin-top: 2px;
}

[b-oi0ix3cnqp] .repeating-section {
    margin: 24px 0;
}

[b-oi0ix3cnqp] .repeating-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

[b-oi0ix3cnqp] .repeating-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin: 0;
}

[b-oi0ix3cnqp] .repeating-card {
    position: relative;
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    border-radius: 8px;
    padding: 16px 16px 8px;
    margin-bottom: 12px;
    background: var(--BEC-bg-surface, #f9fafb);
}

[b-oi0ix3cnqp] .btn-add {
    padding: 6px 14px;
    background: var(--BEC-primary-bg, #eef2f7);
    color: var(--BEC-primary, #1B365D);
    border: 1px solid var(--BEC-primary, #1B365D);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-oi0ix3cnqp] .btn-add:hover {
    background: var(--BEC-primary, #1B365D);
    color: white;
}

[b-oi0ix3cnqp] .btn-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--BEC-error-bg, #fef2f2);
    color: var(--BEC-error, #dc2626);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[b-oi0ix3cnqp] .btn-remove:hover {
    background: var(--BEC-error, #dc2626);
    color: white;
}

[b-oi0ix3cnqp] .empty-state {
    text-align: center;
    padding: 24px;
    color: var(--BEC-text-muted, #9ca3af);
    font-style: italic;
}

[b-oi0ix3cnqp] .validation-hint {
    padding: 10px 16px;
    background: var(--BEC-warning-bg, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: var(--BEC-warning, #d97706);
    font-size: 13px;
    margin-top: 12px;
}

[b-oi0ix3cnqp] .success-hint {
    padding: 10px 16px;
    background: var(--BEC-success-bg, #dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: var(--BEC-success, #16a34a);
    font-size: 13px;
    margin-top: 12px;
}

[b-oi0ix3cnqp] .conditional-fields {
    margin-left: 28px;
    padding-left: 12px;
    border-left: 2px solid var(--BEC-border-light, #e5e7eb);
}

[b-oi0ix3cnqp] .document-checklist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[b-oi0ix3cnqp] .document-item {
    padding: 16px;
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    border-radius: 8px;
    background: var(--BEC-bg-surface, #f9fafb);
}

[b-oi0ix3cnqp] .declarations-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[b-oi0ix3cnqp] .declaration-card {
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

[b-oi0ix3cnqp] .declaration-card.accepted {
    border-color: var(--BEC-success, #16a34a);
}

[b-oi0ix3cnqp] .declaration-header {
    padding: 12px 16px;
    background: var(--BEC-bg-surface, #f9fafb);
    border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
}

[b-oi0ix3cnqp] .declaration-card.accepted .declaration-header {
    background: var(--BEC-success-bg, #dcfce7);
}

[b-oi0ix3cnqp] .declaration-body {
    padding: 16px;
}

[b-oi0ix3cnqp] .declaration-body p {
    font-size: 13px;
    color: var(--BEC-text-secondary, #6b7280);
    line-height: 1.6;
    margin: 0 0 12px;
}

[b-oi0ix3cnqp] .declaration-link {
    display: inline-block;
    color: var(--BEC-primary, #1B365D);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 12px;
}

[b-oi0ix3cnqp] .declaration-link:hover {
    text-decoration: underline;
}

[b-oi0ix3cnqp] .year-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin: 0 0 8px;
}

/* ─── Mobile Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vr-body[b-oi0ix3cnqp] {
        flex-direction: column;
    }

    .vr-sidebar[b-oi0ix3cnqp] {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
        gap: 4px;
    }

    .vr-step-connector[b-oi0ix3cnqp] {
        width: 16px;
        height: 2px;
        margin-left: 0;
    }

    .vr-nav-step[b-oi0ix3cnqp] {
        flex-direction: column;
        padding: 6px 8px;
        min-width: 56px;
    }

    .vr-step-label[b-oi0ix3cnqp] {
        font-size: 10px;
        text-align: center;
    }

    .vr-content[b-oi0ix3cnqp] {
        padding: 16px;
    }

    .vr-content-card[b-oi0ix3cnqp] {
        padding: 20px 16px;
    }

    .vr-action-bar[b-oi0ix3cnqp] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .vr-action-center[b-oi0ix3cnqp] {
        order: 3;
        width: 100%;
    }

    .vr-header[b-oi0ix3cnqp] {
        padding: 16px;
    }

    .vr-header-info[b-oi0ix3cnqp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .vr-header-info h1[b-oi0ix3cnqp] {
        font-size: 18px;
    }
}
/* /Components/Pages/MainLayout/VendorsManagement/VendorsManagement.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-gys1iev3gb] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-gys1iev3gb] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-gys1iev3gb] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.header-right[b-gys1iev3gb] {
    flex-shrink: 0;
}

/* ========================================
   STATS
   ======================================== */
.stats-container[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
}

.stat-card[b-gys1iev3gb] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-gys1iev3gb] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-gys1iev3gb] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

/* ========================================
   CATEGORY / STATUS TABS
   ======================================== */
.category-tabs[b-gys1iev3gb] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    overflow-x: auto;
}

.category-tab[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tab:hover[b-gys1iev3gb] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
}

.category-tab.active[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.category-tab .tab-badge[b-gys1iev3gb] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-gys1iev3gb] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   ACTION TOOLBAR
   ======================================== */
.action-toolbar[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    margin: 4px 24px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    gap: 12px;
    min-height: 40px;
}

.toolbar-left[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-right[b-gys1iev3gb] {
    display: flex;
    align-items: center;
}

.toolbar-btn[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.toolbar-btn i[b-gys1iev3gb] {
    font-size: 11px;
}

.toolbar-btn:hover:not(:disabled)[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.toolbar-btn:disabled[b-gys1iev3gb] {
    opacity: 0.45;
    cursor: not-allowed;
}

.toolbar-search[b-gys1iev3gb] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-gys1iev3gb] {
    position: absolute;
    left: 10px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    pointer-events: none;
    z-index: 1;
}

[b-gys1iev3gb] .e-search-inline .e-input {
    padding-left: 30px !important;
    font-size: 12px !important;
    height: 30px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* ========================================
   LOADING / EMPTY / ERROR STATES
   ======================================== */
.loading-overlay[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.empty-state[b-gys1iev3gb],
.error-state[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 12px;
}

.empty-state i[b-gys1iev3gb],
.error-state i[b-gys1iev3gb] {
    font-size: 32px;
    opacity: 0.5;
}

.btn-retry[b-gys1iev3gb] {
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    cursor: pointer;
}

.btn-retry:hover[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-submitted[b-gys1iev3gb] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-under_review[b-gys1iev3gb] {
    background: #fff3e0;
    color: #e65100;
}

.status-invited[b-gys1iev3gb] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-rejected[b-gys1iev3gb] {
    background: #fce4ec;
    color: #c62828;
}

.status-on_hold[b-gys1iev3gb] {
    background: #f5f5f5;
    color: #616161;
}

/* ========================================
   ORIGIN BADGES
   ======================================== */
.origin-badge[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.origin-local[b-gys1iev3gb] {
    background: #e8f5e9;
    color: #2e7d32;
}

.origin-foreign[b-gys1iev3gb] {
    background: #e3f2fd;
    color: #1565c0;
}

/* ========================================
   EMAIL LINK
   ======================================== */
.email-link[b-gys1iev3gb] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: 11px;
}

.email-link:hover[b-gys1iev3gb] {
    text-decoration: underline;
}

/* ========================================
   GRID OVERRIDES
   ======================================== */
[b-gys1iev3gb] .e-grid {
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

[b-gys1iev3gb] .e-grid .e-row {
    height: 32px !important;
    cursor: pointer;
}

[b-gys1iev3gb] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-gys1iev3gb] .e-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-gys1iev3gb] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   RIGHT SIDE PANEL
   ======================================== */
.panel-backdrop[b-gys1iev3gb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    animation: fadeIn-b-gys1iev3gb 0.2s ease;
}

@keyframes fadeIn-b-gys1iev3gb {
    from { opacity: 0; }
    to { opacity: 1; }
}

.side-panel[b-gys1iev3gb] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 500px;
    max-width: 90vw;
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-gys1iev3gb 0.25s ease;
}

@keyframes slideInRight-b-gys1iev3gb {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.panel-header[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    gap: 8px;
}

.panel-title-area[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.panel-title[b-gys1iev3gb] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-close-btn[b-gys1iev3gb] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.panel-close-btn:hover[b-gys1iev3gb] {
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.panel-body[b-gys1iev3gb] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px;
}

.panel-footer[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ========================================
   DETAIL SECTIONS (compact for side panel)
   ======================================== */
.detail-section[b-gys1iev3gb] {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.detail-section:last-child[b-gys1iev3gb] {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title[b-gys1iev3gb] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.section-title i[b-gys1iev3gb] {
    font-size: 10px;
}

.detail-grid[b-gys1iev3gb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.detail-field[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.detail-field.full-width[b-gys1iev3gb] {
    grid-column: 1 / -1;
}

.field-label[b-gys1iev3gb] {
    font-size: 9px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.field-value[b-gys1iev3gb] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
    line-height: 1.3;
}

.field-value a[b-gys1iev3gb] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
}

.field-value a:hover[b-gys1iev3gb] {
    text-decoration: underline;
}

/* ========================================
   DOCUMENT LINK
   ======================================== */
.doc-link[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: 12px;
}

.doc-link:hover[b-gys1iev3gb] {
    text-decoration: underline;
}

.doc-size[b-gys1iev3gb] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 10px;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.btn-action-primary[b-gys1iev3gb],
.btn-action-success[b-gys1iev3gb],
.btn-action-warning[b-gys1iev3gb],
.btn-action-danger[b-gys1iev3gb],
.btn-action-secondary[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.btn-action-primary[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-action-primary:hover:not(:disabled)[b-gys1iev3gb] {
    opacity: 0.9;
}

.btn-action-success[b-gys1iev3gb] {
    background: #2e7d32;
    color: #fff;
}

.btn-action-success:hover:not(:disabled)[b-gys1iev3gb] {
    background: #1b5e20;
}

.btn-action-warning[b-gys1iev3gb] {
    background: #f57c00;
    color: #fff;
}

.btn-action-warning:hover:not(:disabled)[b-gys1iev3gb] {
    background: #e65100;
}

.btn-action-danger[b-gys1iev3gb] {
    background: #c62828;
    color: #fff;
}

.btn-action-danger:hover:not(:disabled)[b-gys1iev3gb] {
    background: #b71c1c;
}

.btn-action-secondary[b-gys1iev3gb] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground2);
    border-color: var(--BEC-colorNeutralStroke1);
}

.btn-action-secondary:hover[b-gys1iev3gb] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.btn-action-primary:disabled[b-gys1iev3gb],
.btn-action-success:disabled[b-gys1iev3gb],
.btn-action-warning:disabled[b-gys1iev3gb],
.btn-action-danger:disabled[b-gys1iev3gb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-readonly-msg[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}
/* /Components/Pages/MainLayout/VisitorDataCollection/AdminDashboard/VisitorDashboard.razor.rz.scp.css */
/* ========================================
   BEC Aspire - Visitor Dashboard (Admin)
   Page: /visitor-data-collection/dashboard
   -----------------------------------------------------------------
   Enterprise Portal layout with Fixed Header + Scrollable Content.
   References: BEC_Theme.css Microsoft Fluent Design System
   ======================================== */

/* ========================================
   GLOBAL LAYOUT
   Fixed height container that fills the parent, preventing double scrolls.
   ======================================== */
.visitor-dashboard-container[b-98a8xusbr5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Changed from 100vh to avoid fighting parent layout */
    max-height: 100%;
    background-color: var(--BEC-colorNeutralBackground3);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    /* Lock page scroll */
}

/* ========================================
   HEADER SECTION
   Standard Fluent App Header
   ======================================== */
/* ========================================
   HEADER SECTION
   Standard Fluent App Header
   ======================================== */
.dashboard-header[b-98a8xusbr5] {
    background-color: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-title-section[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-right-section[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-icon[b-98a8xusbr5] {
    color: var(--BEC-colorBrandBackground);
}

.page-title[b-98a8xusbr5] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.page-subtitle[b-98a8xusbr5] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   SCROLLABLE CONTENT AREA
   The main work area that scrolls independently.
   ======================================== */
/* ========================================
   SCROLLABLE CONTENT AREA
   The main work area that scrolls independently.
   ======================================== */
.dashboard-scroll-area[b-98a8xusbr5] {
    flex: 1;
    overflow: hidden;
    /* Let GRID handle the scroll internally if Height=100% */
    /* If grid doesn't scroll, we might need auto here, but usually Grid with Height=100% needs this to be hidden/relative */
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* CRITICAL for nested flex scrolling */
}

/* ========================================
   HEADER STATISTICS
   Simple numbers in the header
   ======================================== */
.header-stats[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding-right: var(--BEC-spacingHorizontalL);
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
}

.header-stat-item[b-98a8xusbr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.header-stat-value[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
    color: var(--BEC-colorNeutralForeground1);
}

.header-stat-label[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Status colors for header stats */
.stat-pending[b-98a8xusbr5] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.stat-reviewed[b-98a8xusbr5] {
    color: var(--BEC-colorBrandForeground1);
}

.stat-contacted[b-98a8xusbr5] {
    color: var(--BEC-colorNeutralForeground1);
}

.stat-completed[b-98a8xusbr5] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.stat-total[b-98a8xusbr5] {
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   HEADER ACTIONS
   ======================================== */
.header-actions[b-98a8xusbr5] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
}

/* ========================================
   GRID CONTAINER
   Card in the scroll flow that grows to fill remaining space.
   ======================================== */
.grid-section-card[b-98a8xusbr5] {
    /* Full-screen fit adjustments */
    background: var(--BEC-colorNeutralBackground1);
    /* Remove card styling for full-screen feel */
    box-shadow: none;
    border-radius: 0;

    display: flex;
    flex-direction: column;
    flex: 1;
    /* Grow to fill space */
    min-height: 0;
    /* CRITICAL: Allow flex child to shrink properly */
    overflow: hidden;
    /* Clip content */
}

/* ========================================
   BUTTONS
   Standard Fluent Buttons
   ======================================== */
.toolbar-btn[b-98a8xusbr5] {
    height: 32px;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-98a8xusbr5] {
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusXXLarge);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.Pending[b-98a8xusbr5] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.status-badge.Reviewed[b-98a8xusbr5] {
    background: var(--BEC-themeLighter);
    color: var(--BEC-themePrimary);
}

.status-badge.Contacted[b-98a8xusbr5] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.status-badge.Completed[b-98a8xusbr5] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

/* ========================================
   DIALOG STYLES
   ======================================== */
/* ========================================
   DIALOG STYLES (New Form Layout)
   ======================================== */

.form-container[b-98a8xusbr5] {
    padding: var(--BEC-spacingHorizontalL) 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Sections */
.form-section-title[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalXS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding-bottom: 4px;
    margin-top: 8px;
}

/* Layout Grid */
.form-row[b-98a8xusbr5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.form-group[b-98a8xusbr5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group.full-width[b-98a8xusbr5] {
    grid-column: span 2;
}

/* Labels */
.e-label[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 0;
}

/* Controls - Clean Readonly Look */
.form-control.e-input-group[b-98a8xusbr5],
.form-control.e-control-wrapper[b-98a8xusbr5] {
    margin-bottom: 0 !important;
}

/* Notes Area */
.visit-details-box[b-98a8xusbr5] {
    /* Legacy override or removal if unused */
    display: none;
}

.attachment-section[b-98a8xusbr5] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding-top: var(--BEC-spacingHorizontalM);
    border-top: 1px dashed var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
}

.dialog-form-content[b-98a8xusbr5] {
    padding: var(--BEC-spacingHorizontalXL) 0;
}

.dialog-form-label[b-98a8xusbr5] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   ERROR BANNER
   ======================================== */
.error-banner[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background-color: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border-bottom: 1px solid var(--BEC-colorPaletteRedBorderActive);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.dismiss-btn[b-98a8xusbr5] {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

.dismiss-btn:hover[b-98a8xusbr5] {
    background-color: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   RESPONSIVE (< 768px)
   ======================================== */
@media (max-width: 768px) {
    .dashboard-header[b-98a8xusbr5] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalMNudge);
    }

    .stats-grid[b-98a8xusbr5] {
        grid-template-columns: 1fr;
    }

    .dashboard-actions-bar[b-98a8xusbr5] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group--flex[b-98a8xusbr5] {
        flex: unset;
    }

    .detail-grid[b-98a8xusbr5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MainLayout/VisitorDataCollection/PublicForm/PublicVisitorForm.razor.rz.scp.css */
/* ========================================
   BEC Aspire - Visitor Public Form (Redesigned)
   Architecture: Mobile-First Flexbox Layout
   Goal: Guaranteed button visibility & Premium UX
   ======================================== */

/* Local scoped variables — moved from :root to avoid global leak.
   Values now aliased from global tokens in _z-index.css & _motion-extended.css */

/* ── RESET & STRUCTURE ────────────────── */
.public-form-container[b-h5g4v4emmb] {
    --bec-transition: var(--BEC-transitionPremium);
    --bec-shadow-premium: var(--BEC-shadowPremium);
    --z-header: var(--BEC-zIndex-Header);
    --z-footer: var(--BEC-zIndex-Footer);
    --z-content: var(--BEC-zIndex-Content);
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile */
    width: 100vw;
    background: var(--BEC-colorNeutralBackground3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* App-like feel */
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI', system-ui, -apple-system, sans-serif);
}

.app-container[b-h5g4v4emmb] {
    /* Desktop: Card Layout, Mobile: Full Screen */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── SIDEBAR (Mobile Default: HIDDEN) ──────────────── */
.app-sidebar[b-h5g4v4emmb] {
    display: none;
    /* CRITICAL: Hidden by default on mobile */
}

/* ── HEADER (Mobile Only Scope) ──────────────── */
.mobile-header[b-h5g4v4emmb] {
    height: 60px;
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    /* Always flex, hidden on desktop via media query */
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    z-index: var(--z-header);
}

.mobile-header-logo[b-h5g4v4emmb] {
    font-weight: 700;
    font-size: 18px;
    color: var(--BEC-themePrimary, #0078d4);
    letter-spacing: -0.5px;
}

/* Logo image in mobile header (blue logo on light background) */
.mobile-header-logo-img[b-h5g4v4emmb] {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.mobile-progress-bar[b-h5g4v4emmb] {
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
    width: 100%;
    flex-shrink: 0;
}

.mobile-progress-fill[b-h5g4v4emmb] {
    height: 100%;
    background: var(--BEC-themePrimary, #0078d4);
    transition: width 0.4s ease;
    width: var(--progress, 0%);
}

/* ── MAIN SCROLLABLE CONTENT ────────────────── */
.app-content[b-h5g4v4emmb] {
    flex: 1;
    /* Fills all available space between header and footer */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    scroll-padding-bottom: 100px;
}

/* Wrapper for EditForm to ensure it fills height */
.app-content>form[b-h5g4v4emmb] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── WIZARD STEPS ────────────────── */
.wizard-step[b-h5g4v4emmb] {
    flex: 1;
    padding: 24px 24px 120px 24px;
    /* Bottom padding > Footer height */
    display: none;
    /* Hidden by default */
    flex-direction: column;
    animation: fadeIn-b-h5g4v4emmb 0.4s ease;
    max-width: 600px;
    margin: 0 auto;
    /* Center on large screens */
    width: 100%;
}

.wizard-step.active[b-h5g4v4emmb] {
    display: flex;
}

@keyframes fadeIn-b-h5g4v4emmb {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Typography */
h1[b-h5g4v4emmb] {
    font-size: 28px;
    font-weight: 800;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    letter-spacing: -1px;
}

h2[b-h5g4v4emmb] {
    font-size: 24px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

p.subtitle[b-h5g4v4emmb] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.5;
    margin-bottom: 32px;
}

/* ── SELECTION CARDS ────────────────── */
.selection-grid[b-h5g4v4emmb] {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile Default */
    gap: 16px;
    width: 100%;
}

.selection-card[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.selection-card:active[b-h5g4v4emmb] {
    transform: scale(0.98);
    background: var(--BEC-colorNeutralBackground2);
}

.selection-card.selected[b-h5g4v4emmb] {
    border-color: var(--BEC-themePrimary, #0078d4);
    background: var(--BEC-colorBrandBackground1);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.card-title[b-h5g4v4emmb] {
    font-weight: 600;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground1);
}

.card-subtitle[b-h5g4v4emmb] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.4;
}

/* ── INPUT GROUPS ────────────────── */
.input-group[b-h5g4v4emmb] {
    margin-bottom: 20px;
    position: relative;
}

/* Syncfusion Override for Premium Feel */
.e-float-input.e-control-wrapper[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-radius: 12px !important;
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    padding: 8px 16px 4px !important;
    /* Adjust for floating label */
    height: 56px !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}

.e-float-input.e-control-wrapper.e-input-focus[b-h5g4v4emmb] {
    border-color: var(--BEC-themePrimary, #0078d4) !important;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1) !important;
}

/* Hide Syncfusion default border lines to use our rounded wrapper */
.e-float-input.e-control-wrapper .e-float-line[b-h5g4v4emmb],
.e-float-input.e-control-wrapper .e-float-text-overflow[b-h5g4v4emmb] {
    display: none !important;
}

/* Validation */
.e-input-group.e-error[b-h5g4v4emmb] {
    border-color: var(--BEC-colorPaletteRedForeground1) !important;
    animation: shake-b-h5g4v4emmb 0.4s;
}

.validation-message[b-h5g4v4emmb] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    margin-left: 4px;
}

@keyframes shake-b-h5g4v4emmb {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* ── FIXED ACTION BAR ────────────────── */
.fixed-action-bar[b-h5g4v4emmb] {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px 24px;
    /* Fixed Positioning Logic */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-footer);
    display: flex;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    /* Safe Area for latest iPhones */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.action-btn[b-h5g4v4emmb] {
    flex: 1;
    height: 50px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.action-btn:active[b-h5g4v4emmb] {
    transform: scale(0.96);
}

/* Base Button Style (Missing previously) */
.btn[b-h5g4v4emmb] {
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    border-radius: 25px;
    /* Unified Roundness */
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 48px;
}

.btn-primary[b-h5g4v4emmb] {
    background: var(--BEC-themePrimary, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-secondary[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground6);
    color: var(--BEC-colorNeutralForeground2);
}

.btn-success[b-h5g4v4emmb] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ── DESKTOP ONLY OVERRIDES ──────────────── */
@media (min-width: 900px) {
    .public-form-container[b-h5g4v4emmb] {
        padding: 40px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--BEC-colorNeutralBackground3) 0%, var(--BEC-colorNeutralBackground6) 100%);
    }

    .app-container[b-h5g4v4emmb] {
        max-width: 1000px;
        height: 80vh;
        max-height: 800px;
        background: var(--BEC-colorNeutralBackground1);
        border-radius: 24px;
        box-shadow: var(--bec-shadow-premium);
        flex-direction: row;
        overflow: hidden;
    }

    /* Sidebar */
    .app-sidebar[b-h5g4v4emmb] {
        width: 320px;
        background: var(--BEC-layoutBlueDark);
        padding: 40px;
        color: var(--BEC-colorNeutralForegroundOnBrand);
        padding: 40px;
        color: var(--BEC-colorNeutralForegroundOnBrand);
        display: flex;
        /* CRITICAL: Reveal sidebar on desktop */


        flex-direction: column;
        justify-content: space-between;
    }

    .sidebar-bg-deco[b-h5g4v4emmb],
    .sidebar-logo[b-h5g4v4emmb],
    .sidebar-stepper[b-h5g4v4emmb],
    .sidebar-footer[b-h5g4v4emmb] {
        display: block;
    }

    .mobile-header[b-h5g4v4emmb],
    .mobile-progress-bar[b-h5g4v4emmb] {
        display: none !important;
    }

    .app-content[b-h5g4v4emmb] {
        padding: 0;
    }

    .wizard-step[b-h5g4v4emmb] {
        padding: 60px 80px;
        max-width: none;
    }

    .selection-grid[b-h5g4v4emmb] {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer on Desktop */
    .fixed-action-bar[b-h5g4v4emmb] {
        position: absolute;
        /* Contain inside the card */
        width: 100%;
        border-radius: 0 0 24px 0;
    }
}

/* ── HELPERS ──────────────── */
/* ── HELPERS & UTILS ──────────────── */
.spacer-md[b-h5g4v4emmb] {
    height: 24px;
}



/* Upload Area - Label for Click Trigger */
.upload-area[b-h5g4v4emmb] {
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    border-radius: 16px;
    padding: 40px;
    min-height: 100px;
    text-align: center;
    background: var(--BEC-colorNeutralBackground2);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    /* Context for absolute input */
    overflow: hidden;
}

.upload-text-title[b-h5g4v4emmb] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 4px;
}

.upload-text-subtitle[b-h5g4v4emmb] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.4;
    margin: 0;
}

.upload-icon[b-h5g4v4emmb] {
    margin-bottom: 12px;
    color: var(--BEC-themePrimary, #0078d4);
}

.file-input-hidden[b-h5g4v4emmb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    /* FORCE HIDDEN */
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
}

/* Specific target for the input element itself in case of Blazor wrappers */
[b-h5g4v4emmb] input[type="file"].file-input-hidden {
    opacity: 0 !important;
}

.upload-area:hover[b-h5g4v4emmb] {
    border-color: var(--BEC-themePrimary, #0078d4);
    background: var(--BEC-colorBrandBackground1);
}

/* File Preview */
.file-preview[b-h5g4v4emmb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorBrandBackground1);
    border-radius: 12px;
    border: 1px solid var(--BEC-colorBrandBackground2);
}

.btn-icon-remove[b-h5g4v4emmb] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: 0.2s;
    border-radius: 50%;
}

.btn-icon-remove:hover[b-h5g4v4emmb] {
    opacity: 1;
    transform: scale(1.1);
}

/* Start Button Large */
.btn-lg[b-h5g4v4emmb] {
    height: 56px;
    font-size: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
    /* Make sure it matches other buttons */
    border-radius: 28px !important;
}

/* Success Page Premium */
.success-container[b-h5g4v4emmb] {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-icon[b-h5g4v4emmb] {
    width: 96px;
    height: 96px;
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 32px;
    font-size: 48px;
    box-shadow: 0 10px 30px -10px rgba(22, 101, 52, 0.3);
    animation: popIn-b-h5g4v4emmb 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-h5g4v4emmb {
    from {
        transform: scale(0);
        opacity: 0;
    }

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

.success-subtitle[b-h5g4v4emmb] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 8px;
}

.success-thankyou[b-h5g4v4emmb] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 48px;
}

.btn--auto-width[b-h5g4v4emmb] {
    min-width: 200px;
    width: auto;
    padding: 0 32px;
}

/* Side Bar Premium Polish */
.app-sidebar[b-h5g4v4emmb] {
    background: linear-gradient(135deg, var(--BEC-themeDarker) 0%, var(--BEC-themeDark) 100%);
    position: relative;
    overflow: hidden;
}

.sidebar-bg-deco[b-h5g4v4emmb] {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* White logo image for dark sidebar background */
.sidebar-logo-img[b-h5g4v4emmb] {
    height: 80px;
    width: auto;
    object-fit: contain;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.logo-brand[b-h5g4v4emmb] {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.logo-tagline[b-h5g4v4emmb] {
    font-size: 14px;
    opacity: 0.6;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.sidebar-stepper[b-h5g4v4emmb] {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.stepper-item[b-h5g4v4emmb] {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0.4;
    transition: 0.3s;
}

.stepper-item.active[b-h5g4v4emmb] {
    opacity: 1;
}

.stepper-item.completed[b-h5g4v4emmb] {
    opacity: 1;
}

.stepper-item.completed .step-indicator[b-h5g4v4emmb] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorPaletteGreenForeground1);
    content: "✓";
}

.step-indicator[b-h5g4v4emmb] {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}

.stepper-item.active .step-indicator[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-themeDarker);
    border-color: var(--BEC-colorNeutralBackground1);
    transform: scale(1.1);
}

.step-text-title[b-h5g4v4emmb] {
    font-weight: 600;
    font-size: 16px;
}

.step-text-subtitle[b-h5g4v4emmb] {
    font-size: 13px;
    opacity: 0.7;
}

.sidebar-footer[b-h5g4v4emmb] {
    font-size: 12px;
    opacity: 0.3;
    margin-top: auto;
}

/* ── ERROR BANNER ──────────────── */
.form-error-banner[b-h5g4v4emmb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--BEC-colorPaletteRedBackground1);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
    border-radius: 12px;
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 14px;
    font-weight: 500;
    animation: fadeIn-b-h5g4v4emmb 0.3s ease;
}

.form-error-banner .error-icon[b-h5g4v4emmb] {
    font-size: 18px;
    flex-shrink: 0;
}

/* ── UPLOAD WARNING ──────────────── */
.upload-warning[b-h5g4v4emmb] {
    color: var(--BEC-colorPaletteYellowForeground1);
    background: var(--BEC-colorPaletteYellowBackground1);
    border: 1px solid var(--BEC-colorPaletteYellowBackground2);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
    text-align: center;
}

/* =========================================================
   MOBILE UX OPTIMISATION
   Prevents iOS Safari auto-zoom on input focus (< 16px),
   enforces WCAG touch-target sizing, and polishes
   small-screen interactions.
   ========================================================= */

/* ── 1. iOS Auto-Zoom Prevention ──────────────────────────── */
/* iOS Safari zooms the page when an input with font-size < 16px
   receives focus.  Force 16px on every interactive element.     */
[b-h5g4v4emmb] input,
[b-h5g4v4emmb] select,
[b-h5g4v4emmb] textarea,
[b-h5g4v4emmb] .e-input,
[b-h5g4v4emmb] .e-float-input input,
[b-h5g4v4emmb] .e-float-input textarea,
[b-h5g4v4emmb] .e-dropdownlist .e-input,
[b-h5g4v4emmb] .e-numerictextbox input,
[b-h5g4v4emmb] .e-multiselect .e-input,
[b-h5g4v4emmb] .e-input-group input {
    font-size: 16px !important;
}

/* Syncfusion float-label text — keep readable but not zoom-triggering */
[b-h5g4v4emmb] .e-float-input label.e-float-text,
[b-h5g4v4emmb] .e-float-input.e-control-wrapper label.e-float-text {
    font-size: 14px !important;
}

/* ── 2. Touch-Target Enforcement (WCAG 2.5.8 — 44 × 44 px) ─ */
[b-h5g4v4emmb] .e-dropdownlist .e-list-item,
[b-h5g4v4emmb] .e-dropdownbase .e-list-item,
[b-h5g4v4emmb] .e-popup .e-list-item {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* ── 3. Mobile-specific refinements (≤ 600 px) ───────────── */
@media (max-width: 600px) {
    /* Tighter wizard padding for small screens */
    .wizard-step[b-h5g4v4emmb] {
        padding: 20px 16px 130px 16px;
    }

    /* Slightly narrower action-bar horizontal padding */
    .fixed-action-bar[b-h5g4v4emmb] {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Ensure cards don't cause horizontal scroll */
    .selection-card[b-h5g4v4emmb] {
        padding: 20px 16px;
    }

    /* Larger file-preview row for fat-finger removal */
    .file-preview[b-h5g4v4emmb] {
        padding: 14px;
        gap: 10px;
    }

    /* Upload area — shorter padding on small screens */
    .upload-area[b-h5g4v4emmb] {
        padding: 28px 16px;
        min-height: 80px;
    }

    /* Readable body text baseline */
    p[b-h5g4v4emmb], span[b-h5g4v4emmb], label[b-h5g4v4emmb] {
        line-height: 1.45;
    }

    /* Validation message bump */
    .validation-message[b-h5g4v4emmb] {
        font-size: 13px;
    }

    /* Success container tighter */
    .success-container[b-h5g4v4emmb] {
        padding: 40px 16px;
    }
}

/* ── 4. Keyboard-open compensation (small-height viewports) ─ */
@media (max-height: 500px) {
    .fixed-action-bar[b-h5g4v4emmb] {
        position: sticky;
        box-shadow: none;
    }

    .wizard-step[b-h5g4v4emmb] {
        padding-bottom: 24px;
    }
}

/* ================= MIGRATED INLINE STYLES ================= */

.pvf-validation-centered[b-h5g4v4emmb] {
    text-align: center;
}
/* /Components/Pages/MainLayout/WebsiteLeads/Leads.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-7aemtlxv9z] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-7aemtlxv9z] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-7aemtlxv9z] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-7aemtlxv9z] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-7aemtlxv9z] {
    transform: scale(0.98);
}

.header-right[b-7aemtlxv9z] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-7aemtlxv9z] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-7aemtlxv9z] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-7aemtlxv9z] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-7aemtlxv9z] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-7aemtlxv9z] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - MICROSOFT STYLE
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-7aemtlxv9z] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-7aemtlxv9z] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* Make grid fill remaining page content */
.erp-page-content[b-7aemtlxv9z] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* Grid container to fill available space */
[b-7aemtlxv9z] .e-grid {
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-7aemtlxv9z] .e-grid .e-row {
    height: 32px !important;
}

[b-7aemtlxv9z] .e-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-7aemtlxv9z] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-7aemtlxv9z] .e-grid .e-gridcontent {
    overflow-y: auto;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-7aemtlxv9z] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7aemtlxv9z] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7aemtlxv9z] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-7aemtlxv9z] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   CUSTOM GRID CELL STYLING
   ======================================== */

/* Lead Name Cell */
.lead-name[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.name-icon[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Lead Email Cell */
.lead-email[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-icon[b-7aemtlxv9z] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

.email-link[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    transition: all 0.2s ease;
}

.email-link:hover[b-7aemtlxv9z] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Lead Date Cell */
.lead-date[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.date-icon[b-7aemtlxv9z] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-buttons[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn[b-7aemtlxv9z] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.1);
}

.action-btn:active[b-7aemtlxv9z] {
    transform: scale(0.95);
}

.view-btn:hover[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
}

.email-btn:hover[b-7aemtlxv9z] {
    color: #10a37f;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-7aemtlxv9z] {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 16px;
    }

    .header-right[b-7aemtlxv9z] {
        width: 100%;
    }

    .stats-container[b-7aemtlxv9z] {
        width: 100%;
        justify-content: space-between;
    }

    [b-7aemtlxv9z] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
    }

    .erp-page-content[b-7aemtlxv9z] {
        padding: 10px 16px 20px 16px;
    }
}

/* ========================================
   GRID ALTERNATING ROW COLORS
   ======================================== */
[b-7aemtlxv9z] .e-grid .e-row:nth-child(even) {
    background: var(--BEC-colorNeutralBackground2);
}

[b-7aemtlxv9z] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* ========================================
   GRID SELECTION HIGHLIGHT
   ======================================== */
[b-7aemtlxv9z] .e-grid .e-row.e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

[b-7aemtlxv9z] .e-grid .e-row.e-selectionbackground:hover {
    background: var(--BEC-colorBrandBackground2Hover) !important;
}

/* ========================================
   CATEGORY FILTER TABS
   ======================================== */
.category-tabs[b-7aemtlxv9z] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.category-tab[b-7aemtlxv9z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.category-tab:hover[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-colorNeutralForeground1);
}

.category-tab.active[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    border-bottom-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

.tab-badge[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-7aemtlxv9z] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.tab-unread[b-7aemtlxv9z] {
    background: #d13438;
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

/* ========================================
   UNREAD DOT INDICATOR
   ======================================== */
.unread-dot[b-7aemtlxv9z] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
}

/* ========================================
   CATEGORY BADGE IN GRID
   ======================================== */
.category-badge[b-7aemtlxv9z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.cat-contact[b-7aemtlxv9z] {
    background: #e8f4fd;
    color: #0078d4;
}

.cat-vendorregistration[b-7aemtlxv9z] {
    background: #fff4e5;
    color: #c87000;
}

.cat-brochuredownload[b-7aemtlxv9z] {
    background: #e8f5e9;
    color: #2e7d32;
}

/* ========================================
   ACTION BUTTONS (MARK READ / DELETE)
   ======================================== */
.btn-action[b-7aemtlxv9z] {
    background: transparent;
    border: none;
    padding: 4px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-read[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
}

.btn-read:hover[b-7aemtlxv9z] {
    background: var(--BEC-colorBrandBackground2);
}

.btn-delete[b-7aemtlxv9z] {
    color: #d13438;
}

.btn-delete:hover[b-7aemtlxv9z] {
    background: #fde7e9;
}

/* Unread stat highlight */
.stat-value.unread[b-7aemtlxv9z] {
    color: #d13438;
}
/* /Components/Pages/MainLayoutLanding/MainLayoutLandingPage.razor.rz.scp.css */
/* Global Styles */
.html[b-jnowud3r9u],
.body[b-jnowud3r9u] {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
}

.logo img[b-jnowud3r9u] {
    height: 110px;
    width: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

.form-group select[b-jnowud3r9u] {
    position: relative;
    z-index: 10;
}

.form-group[b-jnowud3r9u] {
    position: relative;
    z-index: 5;
}

/* Animations */
@keyframes fadeInUp-b-jnowud3r9u {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General Reset */
*[b-jnowud3r9u] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body[b-jnowud3r9u] {
    font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bec-bg);
    height: 100vh;
    color: var(--bec-info);
}

/* Container Styles */
.container[b-jnowud3r9u] {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 50px;
}

/* Header Styles */
.header[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header .container[b-jnowud3r9u] {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo[b-jnowud3r9u] {
    display: flex;
    align-items: center;
}

.logo img[b-jnowud3r9u] {
    height: 110px;
    width: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

/* Navigation Styles */
.nav ul[b-jnowud3r9u] {
    display: flex;
    list-style: none;
    gap: 48px;
}

.nav a[b-jnowud3r9u] {
    color: var(--bec-text-white);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: color 0.3s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.nav a:hover[b-jnowud3r9u] {
    color: var(--bec-primary);
}

/* Button Styles */
.auth-buttons[b-jnowud3r9u] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.login-btn[b-jnowud3r9u],
.login-btn.active[b-jnowud3r9u],
.signup-btn[b-jnowud3r9u],
.nav-link.login-btn[b-jnowud3r9u],
.nav-link.login-btn.active[b-jnowud3r9u] {
    padding: 8px 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 36px;
    text-transform: uppercase;
    font-size: 13px;
    background-color: #2B3484;
    color: #FFFFFF !important;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
}


.login-btn:hover[b-jnowud3r9u],
.signup-btn:hover[b-jnowud3r9u] {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    background-color: #384099;
}

/* Hero Section */
.hero[b-jnowud3r9u] {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    color: var(--bec-text-white);
    padding: 20px;
    overflow: hidden;
}

/* Carousel Styles */
.hero-carousel[b-jnowud3r9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.carousel-item[b-jnowud3r9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

.carousel-item.active[b-jnowud3r9u] {
    opacity: 1;
    z-index: 2;
}

.hero-image[b-jnowud3r9u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}


.grid-effect[b-jnowud3r9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    z-index: 3;
}

.hero-gradient[b-jnowud3r9u] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 4;
}

.hero .container[b-jnowud3r9u] {
    position: relative;
    z-index: 5;
    width: 100%;
    padding-left: 50px;
    margin-left: 0;
}

.hero-content[b-jnowud3r9u] {
    padding-bottom: 80px;
    max-width: 800px;
    position: relative;
    z-index: 5;
    text-align: left;
    margin-left: 0;
}

.hero-headline[b-jnowud3r9u],
.hero-subheadline[b-jnowud3r9u] {
    outline: none;
    border: none;
}

.hero-headline[b-jnowud3r9u],
.hero-subheadline[b-jnowud3r9u] {
    will-change: opacity, transform;
    transform: translateZ(0);
}


.hero-text[b-jnowud3r9u] {
    text-align: left;
    margin-left: 0;
    width: 100%;
    max-width: 700px;
}

.hero-headline[b-jnowud3r9u] {
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: left !important;
}

.hero-subheadline[b-jnowud3r9u] {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    text-align: left !important;
}

/* Modal Styles */
.modal[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(103, 103, 107, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.modal.active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-jnowud3r9u] {
    background-color: white;
    width: 90%;
    max-width: 800px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    transform: scale(0.96) translateZ(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 450px;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.login-modal-content[b-jnowud3r9u] {
    position: relative;
}

.login-modal-content[b-jnowud3r9u] {
    grid-template-columns: 1.5fr 1fr;
    height: 450px;
    position: relative;
    min-height: 450px;
}

.login-modal-content > .login-section[b-jnowud3r9u] {
    grid-column: 1;
    grid-row: 1;
}

.modal.active .modal-content[b-jnowud3r9u] {
    transform: scale(1) translateZ(0);
}

.modal-close[b-jnowud3r9u] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #999;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close:hover[b-jnowud3r9u] {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

.modal-close:focus[b-jnowud3r9u] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 52, 132, 0.2);
}

.login-section[b-jnowud3r9u] {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px) translateZ(0);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
    will-change: opacity, transform;
    pointer-events: none;
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    min-height: 100%;
}

.login-section-active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateZ(0);
    pointer-events: auto;
}

.login-section-hidden[b-jnowud3r9u] {
    display: none;
}

.welcome-section[b-jnowud3r9u] {
    background: linear-gradient(135deg, var(--bec-primary), #1a2266) !important;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    grid-column: 2;
    grid-row: 1;
}

.welcome-section h2[b-jnowud3r9u] {
    font-size: 1.6rem;
    margin-bottom: 12px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}

.welcome-section p[b-jnowud3r9u] {
    font-size: 0.95rem;
    line-height: 1.4;
}

.modal-header[b-jnowud3r9u] {
    margin-bottom: 12px;
    text-align: center;
}

.modal-header h2[b-jnowud3r9u] {
    color: var(--bec-primary);
    font-size: 1.7rem;
    margin-bottom: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.modal-header p[b-jnowud3r9u] {
    color: #666;
    font-size: 0.85rem;
}

.login-form[b-jnowud3r9u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group[b-jnowud3r9u] {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.form-group input[b-jnowud3r9u],
.form-group select[b-jnowud3r9u] {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: 'Lato', sans-serif;
    background-color: #f8f8f8;
    transition: all 0.3s ease;
    color: #333;
    height: 36px;
}

.form-group input:focus[b-jnowud3r9u],
.form-group select:focus[b-jnowud3r9u] {
    outline: none;
    border-color: var(--bec-primary);
    box-shadow: 0 0 0 2px rgba(43, 52, 132, 0.15);
    background-color: #fff;
}

.form-group i[b-jnowud3r9u] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
}

/* Microsoft Button - Microsoft standard styling */
.microsoft-button[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: #ffffff;
    color: #5e5e5e;
    border: 1px solid #8c8c8c;
    border-radius: 2px;
    padding: 0.7rem 1.5rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
    height: 41px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.microsoft-button:hover[b-jnowud3r9u] {
    background-color: #f3f3f3;
    border-color: #8c8c8c;
}

.microsoft-button:active[b-jnowud3r9u] {
    background-color: #e5e5e5;
    transform: scale(0.98);
}

.microsoft-button.disabled[b-jnowud3r9u] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.ms-logo[b-jnowud3r9u] {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    display: inline-block;
}

/* Divider */
.divider[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    margin: 12px 0;
    color: #999;
}

.divider[b-jnowud3r9u]::before,
.divider[b-jnowud3r9u]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #e0e0e0;
}

.divider span[b-jnowud3r9u] {
    padding: 0 10px;
    font-size: 0.8rem;
    font-family: 'Lato', sans-serif;
}

/* Form Options */
.form-options[b-jnowud3r9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Checkbox */
.checkbox-group[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.checkbox-group input[type="checkbox"][b-jnowud3r9u] {
    width: 14px;
    height: 14px;
    accent-color: var(--bec-primary);
}

.checkbox-group label[b-jnowud3r9u] {
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
}

/* Modal Buttons */
.modal-buttons[b-jnowud3r9u] {
    margin-top: 8px;
}

.modal-btn-primary[b-jnowud3r9u] {
    width: 100%;
    padding: 8px 16px;
    background-color: var(--bec-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.modal-btn-primary:hover[b-jnowud3r9u] {
    background-color: #3a44a3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 52, 132, 0.25);
}

.modal-btn-primary:active[b-jnowud3r9u] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(43, 52, 132, 0.2);
}

/* Signup Link */
.signup-link[b-jnowud3r9u] {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signup-link a[b-jnowud3r9u] {
    color: var(--bec-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.text-link[b-jnowud3r9u] {
    color: var(--bec-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: 0.8rem;
}

.text-link:hover[b-jnowud3r9u] {
    color: #3a44a3;
    text-decoration: underline;
}

/* Thank You Message */
.thank-you-message[b-jnowud3r9u] {
    display: none;
    text-align: center;
    padding: 24px;
    animation: fadeInUp-b-jnowud3r9u 0.5s ease forwards;
}

.thank-you-message.active[b-jnowud3r9u] {
    display: block;
}

.success-icon[b-jnowud3r9u] {
    width: 72px;
    height: 72px;
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 24px;
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.25);
}

.next-steps[b-jnowud3r9u] {
    margin-top: 24px;
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 20px;
    text-align: left;
    border: 1px solid #f0f0f0;
}

.next-steps p[b-jnowud3r9u] {
    color: #333;
    font-weight: 600;
    margin-bottom: 12px;
}

.next-steps ul[b-jnowud3r9u] {
    list-style: none;
    padding-left: 5px;
}

.next-steps li[b-jnowud3r9u] {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    color: #666;
    font-size: 0.95rem;
}

.next-steps li[b-jnowud3r9u]:before {
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
    font-size: 16px;
}

/* Animation for steps */
@keyframes fadeInStep-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

#login-step-1[b-jnowud3r9u],
#login-step-2[b-jnowud3r9u] {
    animation: fadeInStep-b-jnowud3r9u 0.5s ease forwards;
}

.form-group select option:checked[b-jnowud3r9u] {
    background-color: var(--bec-primary);
    color: white;
}

.form-group select:focus-visible[b-jnowud3r9u] {
    outline: none;
    border-color: var(--bec-primary);
}

/* Select dropdown styling */
.form-group select[b-jnowud3r9u] {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px;
}

.form-group select:focus[b-jnowud3r9u] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.form-group select.disabled[b-jnowud3r9u] {
    background-color: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.7;
    color: #888;
}

/* Enhanced profile selection step */
.profile-selection select[b-jnowud3r9u],
.org-selection select[b-jnowud3r9u],
.company-selection select[b-jnowud3r9u],
.branch-selection select[b-jnowud3r9u] {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-size: 0.9rem;
    color: #444;
}

.profile-selection[b-jnowud3r9u],
.org-selection[b-jnowud3r9u],
.company-selection[b-jnowud3r9u],
.branch-selection[b-jnowud3r9u] {
    margin-bottom: 10px;
}

.profile-selection i[b-jnowud3r9u],
.org-selection i[b-jnowud3r9u],
.company-selection i[b-jnowud3r9u],
.branch-selection i[b-jnowud3r9u] {
    color: #2B3484;
    font-size: 15px;
}

.profile-selection select:focus[b-jnowud3r9u],
.org-selection select:focus[b-jnowud3r9u],
.company-selection select:focus[b-jnowud3r9u],
.branch-selection select:focus[b-jnowud3r9u] {
    box-shadow: 0 4px 8px rgba(43, 52, 132, 0.15);
    transform: translateY(-1px);
}

.profile-selection select:hover[b-jnowud3r9u],
.org-selection select:hover[b-jnowud3r9u],
.company-selection select:hover[b-jnowud3r9u],
.branch-selection select:hover[b-jnowud3r9u] {
    border-color: #2B3484;
}

/* Back link styling */
.back-link[b-jnowud3r9u] {
    margin-top: 10px;
}

.back-link a[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    color: #666;
    transition: all 0.2s ease;
}

.back-link a:hover[b-jnowud3r9u] {
    color: #2B3484;
}

.back-link a i[b-jnowud3r9u] {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.back-link a:hover i[b-jnowud3r9u] {
    transform: translateX(-3px);
}

/* Animation for step 2 */
#login-step-2[b-jnowud3r9u] {
    animation: fadeInRight-b-jnowud3r9u 0.4s ease forwards;
}

@keyframes fadeInRight-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Enhanced welcome section for step 2 */
.welcome-section[b-jnowud3r9u] {
    position: relative;
    overflow: hidden;
}

.welcome-section[b-jnowud3r9u]:after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-section[b-jnowud3r9u]:before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-section h2[b-jnowud3r9u] {
    position: relative;
    z-index: 2;
}

.welcome-section p[b-jnowud3r9u] {
    position: relative;
    z-index: 2;
    line-height: 1.5;
    font-size: 1rem;
    opacity: 0.9;
    max-width: 90%;
    margin: 0 auto;
}

/* Enhanced button styling */
.modal-btn-primary[b-jnowud3r9u] {
    background: linear-gradient(135deg, #2B3484, #1a2266);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 5px;
    box-shadow: 0 4px 8px rgba(43, 52, 132, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    height: 40px;
}

.modal-btn-primary:hover[b-jnowud3r9u] {
    background: linear-gradient(135deg, #364099, #2B3484);
    box-shadow: 0 6px 12px rgba(43, 52, 132, 0.25);
    transform: translateY(-1px);
}

.modal-btn-primary:active[b-jnowud3r9u] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(43, 52, 132, 0.2);
}

/* Microsoft SSO Overlay */
.ms-sso-overlay[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ms-sso-overlay.active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
}

.ms-sso-loading-container[b-jnowud3r9u] {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 360px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ms-sso-loading-container p[b-jnowud3r9u] {
    color: white;
    font-size: 1.1rem;
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
}

.ms-logo-animation[b-jnowud3r9u] {
    animation: pulse-b-jnowud3r9u 2s infinite;
}

.loading-spinner[b-jnowud3r9u] {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-jnowud3r9u 1s linear infinite;
}

@keyframes pulse-b-jnowud3r9u {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

@keyframes spin-b-jnowud3r9u {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading spinner for login buttons */
.login-spinner[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transform: translateZ(0);
    will-change: transform;
}

.spinner-border[b-jnowud3r9u] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-jnowud3r9u 0.6s linear infinite;
    transform: translateZ(0);
    will-change: transform;
}

.visually-hidden[b-jnowud3r9u] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.d-none[b-jnowud3r9u] {
    display: none !important;
}

.text-white[b-jnowud3r9u] {
    color: white !important;
}

.spinner-border-sm[b-jnowud3r9u] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
    transform: translateZ(0);
    will-change: transform;
}

@keyframes spinner-border-b-jnowud3r9u {
    from {
        transform: rotate(0deg) translateZ(0);
    }
    to {
        transform: rotate(360deg) translateZ(0);
    }
}

.ms-2[b-jnowud3r9u] {
    margin-left: 0.5rem !important;
}

/* Responsive design */
@media (max-width: 1200px) {
    .hero-headline[b-jnowud3r9u] {
        font-size: 3.5rem;
    }

    .hero-subheadline[b-jnowud3r9u] {
        font-size: 1.3rem;
    }

    .modal-content[b-jnowud3r9u] {
        max-width: 800px;
    }

    .welcome-section h2[b-jnowud3r9u] {
        font-size: 1.7rem;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 40px;
    }
}

@media (max-width: 992px) {

    .modal-content[b-jnowud3r9u],
    .login-modal-content[b-jnowud3r9u] {
        grid-template-columns: 1fr;
        max-width: 450px;
        height: auto;
        min-height: 400px;
    }

    .welcome-section[b-jnowud3r9u] {
        display: none;
    }

    .login-section[b-jnowud3r9u] {
        padding: 32px 24px;
    }

    .modal-header h2[b-jnowud3r9u] {
        font-size: 1.8rem;
    }

    .hero-headline[b-jnowud3r9u] {
        font-size: 3rem;
    }

    .hero-subheadline[b-jnowud3r9u] {
        font-size: 1.2rem;
    }

    .modal-close[b-jnowud3r9u] {
        top: 12px;
        right: 12px;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 30px;
    }
}

@media (max-width: 768px) {
    .container[b-jnowud3r9u] {
        padding: 0 20px;
    }

    .logo img[b-jnowud3r9u] {
        height: 50px;
    }

    .auth-buttons[b-jnowud3r9u] {
        gap: 12px;
    }

    .login-btn[b-jnowud3r9u],
    .signup-btn[b-jnowud3r9u] {
        padding: 8px 16px;
        min-width: 100px;
        height: 38px;
        font-size: 12px;
    }

    .hero-headline[b-jnowud3r9u] {
        font-size: 2.5rem;
    }

    .hero-subheadline[b-jnowud3r9u] {
        font-size: 1rem;
    }

    .modal-content[b-jnowud3r9u] {
        width: 95%;
        max-width: 450px;
        height: auto;
        min-height: 400px;
    }

    .login-section[b-jnowud3r9u] {
        padding: 28px 20px;
    }

    .modal-header[b-jnowud3r9u] {
        margin-bottom: 24px;
    }

    .modal-header h2[b-jnowud3r9u] {
        font-size: 1.7rem;
        margin-bottom: 8px;
    }

    .form-group input[b-jnowud3r9u],
    .form-group select[b-jnowud3r9u],
    .microsoft-button[b-jnowud3r9u],
    .modal-btn-primary[b-jnowud3r9u] {
        height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .form-options[b-jnowud3r9u] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .checkbox-group[b-jnowud3r9u] {
        margin-left: 2px;
    }

    .modal-close[b-jnowud3r9u] {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .form-group i[b-jnowud3r9u] {
        left: 15px;
        font-size: 16px;
    }

    .ms-sso-loading-container[b-jnowud3r9u] {
        width: 300px;
        padding: 30px;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 20px;
    }
}

@media (max-width: 480px) {
    .logo img[b-jnowud3r9u] {
        height: 40px;
    }

    .auth-buttons[b-jnowud3r9u] {
        gap: 8px;
    }

    .login-btn[b-jnowud3r9u],
    .signup-btn[b-jnowud3r9u] {
        padding: 6px 12px;
        min-width: 80px;
        height: 34px;
        font-size: 11px;
    }

    .hero-headline[b-jnowud3r9u] {
        font-size: 2rem;
    }

    .hero-content[b-jnowud3r9u] {
        padding-bottom: 60px;
    }

    .modal-content[b-jnowud3r9u] {
        width: 95%;
        max-width: 360px;
        margin: 0 10px;
        height: auto;
        min-height: 400px;
    }

    .login-section[b-jnowud3r9u] {
        padding: 24px 16px;
    }

    .modal-header h2[b-jnowud3r9u] {
        font-size: 1.6rem;
        margin-bottom: 6px;
    }

    .modal-header p[b-jnowud3r9u] {
        font-size: 0.9rem;
    }

    .form-group input[b-jnowud3r9u],
    .form-group select[b-jnowud3r9u],
    .microsoft-button[b-jnowud3r9u],
    .modal-btn-primary[b-jnowud3r9u] {
        height: 46px;
        padding: 10px 16px 10px 42px;
        font-size: 0.9rem;
    }

    .form-group i[b-jnowud3r9u] {
        left: 15px;
        font-size: 16px;
    }

    .login-form[b-jnowud3r9u] {
        gap: 16px;
    }

    .divider[b-jnowud3r9u] {
        margin: 16px 0;
    }

    .signup-link[b-jnowud3r9u] {
        margin-top: 16px;
        font-size: 0.85rem;
    }

    .success-icon[b-jnowud3r9u] {
        width: 60px;
        height: 60px;
        font-size: 28px;
        margin-bottom: 16px;
    }

    .thank-you-message h3[b-jnowud3r9u] {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    .next-steps[b-jnowud3r9u] {
        padding: 16px;
        margin-top: 16px;
    }

    .next-steps p[b-jnowud3r9u] {
        font-size: 0.9rem;
    }

    .next-steps li[b-jnowud3r9u] {
        font-size: 0.85rem;
        padding-left: 22px;
    }

    .modal-close[b-jnowud3r9u] {
        top: 8px;
        right: 8px;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 15px;
    }
}

@media (max-width: 360px) {
    .modal-content[b-jnowud3r9u] {
        width: 98%;
        max-width: 340px;
    }

    .login-section[b-jnowud3r9u] {
        padding: 20px 12px;
    }

    .form-group input[b-jnowud3r9u],
    .form-group select[b-jnowud3r9u] {
        padding-left: 38px;
    }

    .form-group i[b-jnowud3r9u] {
        left: 12px;
    }

    .microsoft-button[b-jnowud3r9u] {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}


/* BEC Toast Notifications */
.bec-toast-container[b-jnowud3r9u] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
}

.bec-toast[b-jnowud3r9u] {
    display: flex;
    align-items: flex-start;
    background: white;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-left: 4px solid #ccc;
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}

.bec-toast.active[b-jnowud3r9u] {
    transform: translateX(0);
    opacity: 1;
}

.bec-toast.dismissed[b-jnowud3r9u] {
    transform: translateX(120%);
    opacity: 0;
}

.bec-toast.info[b-jnowud3r9u] {
    border-left-color: #2B3484;
}

.bec-toast.success[b-jnowud3r9u] {
    border-left-color: #4CAF50;
}

.bec-toast.error[b-jnowud3r9u] {
    border-left-color: #F44336;
}

.bec-toast.warning[b-jnowud3r9u] {
    border-left-color: #FF9800;
}

.toast-icon[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 20px;
}

.toast-icon i[b-jnowud3r9u] {
    min-width: 24px;
}

.bec-toast.info .toast-icon[b-jnowud3r9u] {
    color: #2B3484;
}

.bec-toast.success .toast-icon[b-jnowud3r9u] {
    color: #4CAF50;
}

.bec-toast.error .toast-icon[b-jnowud3r9u] {
    color: #F44336;
}

.bec-toast.warning .toast-icon[b-jnowud3r9u] {
    color: #FF9800;
}

.toast-content[b-jnowud3r9u] {
    flex: 1;
    color: #24272A;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.toast-close[b-jnowud3r9u] {
    color: #A2AAAD;
    cursor: pointer;
    margin-left: 8px;
    padding: 4px;
    transition: color 0.2s ease;
}

.toast-close:hover[b-jnowud3r9u] {
    color: #24272A;
}

.bec-toast[b-jnowud3r9u]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    animation-name: toast-timer;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Error Boundary Fallback */
.error-boundary-fallback[b-jnowud3r9u] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* FluentMessageBar spacing in modals */
.login-section fluent-message-bar[b-jnowud3r9u],
.login-section .fluent-message-bar[b-jnowud3r9u] {
    margin-bottom: 12px;
    border-radius: 6px;
}

/* ============================================
   FORGOT PASSWORD SIDE PANEL
   ============================================ */

.forgot-password-overlay[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.forgot-password-overlay.active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
}

.forgot-password-panel[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    max-width: 90vw;
    height: 100vh;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.forgot-password-panel.active[b-jnowud3r9u] {
    right: 0;
}

.panel-close[b-jnowud3r9u] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s ease;
    z-index: 10;
}

.panel-close:hover[b-jnowud3r9u] {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Wizard Progress Steps */
.wizard-progress[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 20px;
    gap: 0;
    margin-top: 40px;
}

.progress-step[b-jnowud3r9u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.progress-step.active[b-jnowud3r9u] {
    opacity: 1;
}

.progress-step.completed[b-jnowud3r9u] {
    opacity: 1;
}

.step-number[b-jnowud3r9u] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.progress-step.active .step-number[b-jnowud3r9u] {
    background: linear-gradient(135deg, #2B3484 0%, #1a2057 100%);
    color: white;
}

.progress-step.completed .step-number[b-jnowud3r9u] {
    background: #4CAF50;
    color: white;
}

.progress-step span[b-jnowud3r9u] {
    font-size: 11px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-step.active span[b-jnowud3r9u] {
    color: #2B3484;
}

.progress-line[b-jnowud3r9u] {
    width: 40px;
    height: 3px;
    background: #e0e0e0;
    margin: 0 5px 20px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.progress-line.active[b-jnowud3r9u] {
    background: linear-gradient(90deg, #4CAF50 0%, #2B3484 100%);
}

/* Panel Step Content */
.panel-step[b-jnowud3r9u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 40px 40px;
    animation: fadeIn-b-jnowud3r9u 0.3s ease;
}

@keyframes fadeIn-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.panel-header[b-jnowud3r9u] {
    text-align: center;
    margin-bottom: 30px;
}

.panel-icon[b-jnowud3r9u] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(43, 52, 132, 0.1) 0%, rgba(43, 52, 132, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-icon i[b-jnowud3r9u] {
    font-size: 32px;
    color: #2B3484;
}

.panel-icon.success[b-jnowud3r9u] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
}

.panel-icon.success i[b-jnowud3r9u] {
    color: #4CAF50;
}

.panel-header h2[b-jnowud3r9u] {
    font-size: 24px;
    font-weight: 700;
    color: #24272A;
    margin: 0 0 10px;
}

.panel-header p[b-jnowud3r9u] {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.email-highlight[b-jnowud3r9u] {
    font-weight: 600;
    color: #2B3484;
    background: rgba(43, 52, 132, 0.08);
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    margin-top: 10px;
}

/* Panel Form */
.panel-form[b-jnowud3r9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel-form .form-group[b-jnowud3r9u] {
    position: relative;
    margin-bottom: 0;
}

.panel-form .form-group i[b-jnowud3r9u] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #A2AAAD;
    font-size: 16px;
    z-index: 1;
}

.panel-form .form-group input[b-jnowud3r9u] {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: white;
}

.panel-form .form-group input:focus[b-jnowud3r9u] {
    outline: none;
    border-color: #2B3484;
    box-shadow: 0 0 0 4px rgba(43, 52, 132, 0.1);
}

.panel-form .form-group input[b-jnowud3r9u]::placeholder {
    color: #A2AAAD;
}

/* Panel Buttons */
.panel-btn-primary[b-jnowud3r9u] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #2B3484 0%, #1a2057 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.panel-btn-primary:hover:not(:disabled)[b-jnowud3r9u] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 52, 132, 0.3);
}

.panel-btn-primary:disabled[b-jnowud3r9u] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.panel-btn-secondary[b-jnowud3r9u] {
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    color: #2B3484;
    border: 2px solid #2B3484;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.panel-btn-secondary:hover:not(:disabled)[b-jnowud3r9u] {
    background: rgba(43, 52, 132, 0.05);
}

.panel-btn-secondary:disabled[b-jnowud3r9u] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Back Link */
.panel-back-link[b-jnowud3r9u] {
    text-align: center;
    margin-top: 20px;
}

.panel-back-link a[b-jnowud3r9u] {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.panel-back-link a:hover[b-jnowud3r9u] {
    color: #2B3484;
}

/* Email Instructions */
.email-instructions[b-jnowud3r9u] {
    background: rgba(43, 52, 132, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin: 10px 0;
}

.email-instructions p[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    color: #666;
}

.email-instructions p i[b-jnowud3r9u] {
    color: #2B3484;
    width: 20px;
    text-align: center;
}

/* Password Requirements */
.password-requirements[b-jnowud3r9u] {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 8px;
}

.password-requirements p[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    font-size: 13px;
    transition: color 0.2s ease;
}

.password-requirements p.valid[b-jnowud3r9u] {
    color: #4CAF50;
}

.password-requirements p.invalid[b-jnowud3r9u] {
    color: #999;
}

.password-requirements p i[b-jnowud3r9u] {
    width: 16px;
    text-align: center;
}

/* Success Message */
.success-message[b-jnowud3r9u] {
    text-align: center;
    padding: 20px;
    background: rgba(76, 175, 80, 0.08);
    border-radius: 12px;
    margin-bottom: 20px;
}

.success-message p[b-jnowud3r9u] {
    margin: 0;
    color: #2E7D32;
    font-size: 14px;
}

/* FluentMessageBar in panel */
.panel-step fluent-message-bar[b-jnowud3r9u],
.panel-step .fluent-message-bar[b-jnowud3r9u] {
    margin-bottom: 16px;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 500px) {
    .forgot-password-panel[b-jnowud3r9u] {
        width: 100vw;
        max-width: 100vw;
    }

    .panel-step[b-jnowud3r9u] {
        padding: 20px 24px 40px;
    }

    .wizard-progress[b-jnowud3r9u] {
        padding: 20px 10px;
    }

    .progress-line[b-jnowud3r9u] {
        width: 25px;
    }

    .step-number[b-jnowud3r9u] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .progress-step span[b-jnowud3r9u] {
        font-size: 9px;
    }
}

/* ================= MIGRATED INLINE STYLES ================= */

.lay-landing-logo[b-jnowud3r9u] {
    height: 110px;
    width: auto;
}

/* ========================================
   STEP VISIBILITY CLASSES
   ======================================== */

.bec-step--active[b-jnowud3r9u] {
    display: flex;
}

.bec-step--hidden[b-jnowud3r9u] {
    display: none;
}
/* /Components/Shared/ErrorDialog.razor.rz.scp.css */
/* ========================================
   ERROR DIALOG - ANIMATED
   Syncfusion Dialog with Zoom animation
   Used for: Error messages (replaces toast)
   ======================================== */

/* Dialog container */
[b-96m7s5j071] .error-dialog.e-dialog {
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Error header with icon */
[b-96m7s5j071] .error-dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--BEC-error-color, #d13438);
    font-size: 18px;
    font-weight: 600;
}

[b-96m7s5j071] .error-dialog-header .e-icons.e-error {
    font-size: 24px;
    color: var(--BEC-error-color, #d13438);
}

/* Content area */
[b-96m7s5j071] .error-dialog-content {
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--BEC-text-primary, #323130);
}

[b-96m7s5j071] .error-dialog-content p {
    margin: 0 0 16px 0;
}

[b-96m7s5j071] .error-dialog-content p:last-child {
    margin-bottom: 0;
}

/* Error details section */
[b-96m7s5j071] .error-details {
    margin-top: 16px;
    padding: 12px;
    background-color: var(--BEC-background-secondary, #faf9f8);
    border-left: 4px solid var(--BEC-error-color, #d13438);
    border-radius: 4px;
}

[b-96m7s5j071] .error-details strong {
    display: block;
    margin-bottom: 8px;
    color: var(--BEC-error-color, #d13438);
    font-size: 13px;
    font-weight: 600;
}

[b-96m7s5j071] .error-details p {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-text-secondary, #605e5c);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Footer with OK button */
[b-96m7s5j071] .error-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 0 0;
}

[b-96m7s5j071] .error-dialog-footer .e-btn {
    min-width: 100px;
}

/* ========================================
   RESPONSIVE DESIGN (Syncfusion Standard)
   ======================================== */

/* Mobile (< 768px) */
@media (max-width: 767px) {
    [b-96m7s5j071] .error-dialog.e-dialog {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    [b-96m7s5j071] .error-dialog-header {
        font-size: 16px;
    }

    [b-96m7s5j071] .error-dialog-header .e-icons.e-error {
        font-size: 20px;
    }

    [b-96m7s5j071] .error-dialog-content {
        padding: 16px;
        font-size: 13px;
    }

    [b-96m7s5j071] .error-details {
        padding: 10px;
    }

    [b-96m7s5j071] .error-details strong,
    [b-96m7s5j071] .error-details p {
        font-size: 12px;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    [b-96m7s5j071] .error-dialog.e-dialog {
        width: 70vw !important;
        max-width: 600px !important;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    [b-96m7s5j071] .error-dialog.e-dialog {
        width: 500px !important;
    }
}

/* ========================================
   ANIMATION ENHANCEMENTS
   ======================================== */

/* Smooth fade-in for content */
[b-96m7s5j071] .error-dialog.e-dialog.e-popup-open .error-dialog-content {
    animation: fadeInContent-b-96m7s5j071 0.4s ease-in-out;
}

@keyframes fadeInContent-b-96m7s5j071 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon pulse animation */
[b-96m7s5j071] .error-dialog-header .e-icons.e-error {
    animation: pulse-b-96m7s5j071 0.6s ease-in-out;
}

@keyframes pulse-b-96m7s5j071 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* /Components/Shared/OnboardingWizard/OnboardingWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   OnboardingWizard — Email Verification Full-Screen Wizard
   Scoped CSS — No :root, no hardcoded hex without fallback
   ═══════════════════════════════════════════════════════════ */

.ev-wizard[b-b86lw1x3df] {
    --ev-bg: var(--BEC-background-primary, #ffffff);
    --ev-surface: var(--BEC-background-secondary, #f8f9fa);
    --ev-text: var(--BEC-text-primary, #1a1f36);
    --ev-text-secondary: var(--BEC-text-secondary, #5a6376);
    --ev-text-muted: var(--BEC-text-muted, #8b95a5);
    --ev-border: var(--BEC-border-color, #e2e8f0);
    --ev-primary: var(--BEC-primary, #003366);
    --ev-primary-hover: var(--BEC-primary-hover, #002244);
    --ev-primary-light: var(--BEC-primary-light, #e6eef5);
    --ev-success: var(--BEC-success, #10b981);
    --ev-error: var(--BEC-error-color, #ef4444);
    --ev-error-bg: var(--BEC-error-bg, #fef2f2);
    --ev-success-bg: var(--BEC-success-bg, #f0fdf4);
    --ev-radius: 12px;
    --ev-radius-sm: 8px;
    --ev-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --ev-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--ev-bg);
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ev-text);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Loading ── */
.ev-loading[b-b86lw1x3df] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--ev-text-secondary);
    font-size: 16px;
}

.ev-spinner[b-b86lw1x3df] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ev-border);
    border-top-color: var(--ev-primary);
    border-radius: 50%;
    animation: ev-spin-b-b86lw1x3df 0.8s linear infinite;
}

@keyframes ev-spin-b-b86lw1x3df {
    to { transform: rotate(360deg); }
}

/* ── Lockout ── */
.ev-lockout[b-b86lw1x3df] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 32px;
}

.ev-lockout-icon[b-b86lw1x3df] {
    color: var(--ev-error);
    margin-bottom: 24px;
}

.ev-lockout-title[b-b86lw1x3df] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--ev-text);
}

.ev-lockout-message[b-b86lw1x3df] {
    font-size: 16px;
    color: var(--ev-text-secondary);
    max-width: 480px;
    line-height: 1.6;
    margin: 0;
}

/* ── Step Indicator ── */
.ev-step-indicator[b-b86lw1x3df] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 0;
    gap: 0;
    flex-shrink: 0;
}

.ev-step-dot[b-b86lw1x3df] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--ev-border);
    color: var(--ev-text-muted);
    background: var(--ev-bg);
    transition: all var(--ev-transition);
    flex-shrink: 0;
}

.ev-step-dot.active[b-b86lw1x3df] {
    border-color: var(--ev-primary);
    background: var(--ev-primary);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.25);
}

.ev-step-dot.completed[b-b86lw1x3df] {
    border-color: var(--ev-success);
    background: var(--ev-success);
    color: #ffffff;
}

.ev-step-line[b-b86lw1x3df] {
    width: 40px;
    height: 2px;
    background: var(--ev-border);
    transition: background var(--ev-transition);
}

.ev-step-line.completed[b-b86lw1x3df] {
    background: var(--ev-success);
}

/* ── Content Area ── */
.ev-content[b-b86lw1x3df] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 100px;
}

/* ── Slides ── */
.ev-slide[b-b86lw1x3df] {
    max-width: 640px;
    width: 100%;
    animation: ev-fadeIn-b-b86lw1x3df 0.4s var(--ev-transition) both;
}

.ev-slide-center[b-b86lw1x3df] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes ev-fadeIn-b-b86lw1x3df {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Icons ── */
.ev-icon-welcome[b-b86lw1x3df],
.ev-icon-email[b-b86lw1x3df],
.ev-icon-success[b-b86lw1x3df] {
    margin-bottom: 24px;
    color: var(--ev-primary);
}

.ev-icon-success[b-b86lw1x3df] {
    color: var(--ev-success);
}

/* ── Typography ── */
.ev-title[b-b86lw1x3df] {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ev-text);
}

.ev-subtitle[b-b86lw1x3df] {
    font-size: 16px;
    color: var(--ev-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.ev-description[b-b86lw1x3df] {
    font-size: 16px;
    color: var(--ev-text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
    max-width: 520px;
}

.ev-description-final[b-b86lw1x3df] {
    font-size: 17px;
    max-width: 560px;
}

/* ── Rules List ── */
.ev-rules-list[b-b86lw1x3df] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ev-rules-list li[b-b86lw1x3df] {
    position: relative;
    padding: 16px 0 16px 32px;
    border-bottom: 1px solid var(--ev-border);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ev-text);
}

.ev-rules-list li:last-child[b-b86lw1x3df] {
    border-bottom: none;
}

.ev-rules-list li[b-b86lw1x3df]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ev-primary);
}

/* ── Policy Content ── */
.ev-policy-content[b-b86lw1x3df] {
    text-align: left;
    background: var(--ev-surface);
    border-radius: var(--ev-radius);
    padding: 24px;
    border: 1px solid var(--ev-border);
}

.ev-policy-content p[b-b86lw1x3df] {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ev-text-secondary);
    margin: 0 0 16px;
}

.ev-policy-content p:last-child[b-b86lw1x3df] {
    margin-bottom: 0;
}

/* ── Checkbox ── */
.ev-checkbox-label[b-b86lw1x3df] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0;
    font-size: 15px;
    color: var(--ev-text);
    cursor: pointer;
    text-align: left;
    max-width: 480px;
}

.ev-checkbox-label input[type="checkbox"][b-b86lw1x3df] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--ev-border);
    border-radius: 6px;
    margin-top: 1px;
    cursor: pointer;
    transition: all var(--ev-transition);
    position: relative;
}

.ev-checkbox-label input[type="checkbox"]:checked[b-b86lw1x3df] {
    background: var(--ev-primary);
    border-color: var(--ev-primary);
}

.ev-checkbox-label input[type="checkbox"]:checked[b-b86lw1x3df]::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

/* ── Code Input ── */
.ev-code-input-wrapper[b-b86lw1x3df] {
    margin: 32px 0;
}

.ev-code-input[b-b86lw1x3df] {
    width: 240px;
    height: 64px;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 12px;
    border: 2px solid var(--ev-border);
    border-radius: var(--ev-radius);
    outline: none;
    transition: border-color var(--ev-transition), box-shadow var(--ev-transition);
    color: var(--ev-text);
    background: var(--ev-bg);
    font-variant-numeric: tabular-nums;
}

.ev-code-input:focus[b-b86lw1x3df] {
    border-color: var(--ev-primary);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.ev-code-input[b-b86lw1x3df]::placeholder {
    color: var(--ev-text-muted);
    letter-spacing: 12px;
    opacity: 0.4;
}

/* ── Buttons ── */
.ev-btn[b-b86lw1x3df] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--ev-radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--ev-transition);
    text-decoration: none;
    white-space: nowrap;
}

.ev-btn:disabled[b-b86lw1x3df] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ev-btn-primary[b-b86lw1x3df] {
    background: var(--ev-primary);
    color: #ffffff;
}

.ev-btn-primary:hover:not(:disabled)[b-b86lw1x3df] {
    background: var(--ev-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.ev-btn-secondary[b-b86lw1x3df] {
    background: transparent;
    color: var(--ev-text-secondary);
    border: 1px solid var(--ev-border);
}

.ev-btn-secondary:hover:not(:disabled)[b-b86lw1x3df] {
    background: var(--ev-surface);
    border-color: var(--ev-text-muted);
}

.ev-btn-large[b-b86lw1x3df] {
    padding: 16px 40px;
    font-size: 17px;
    border-radius: var(--ev-radius);
    margin-top: 24px;
}

.ev-btn-spinner[b-b86lw1x3df] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ev-spin-b-b86lw1x3df 0.6s linear infinite;
}

.ev-hidden[b-b86lw1x3df] {
    visibility: hidden;
    pointer-events: none;
}

/* ── Messages ── */
.ev-message[b-b86lw1x3df] {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--ev-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    max-width: 480px;
}

.ev-message-error[b-b86lw1x3df] {
    background: var(--ev-error-bg);
    color: var(--ev-error);
    border: 1px solid var(--ev-error);
}

.ev-message-success[b-b86lw1x3df] {
    background: var(--ev-success-bg);
    color: var(--ev-success);
    border: 1px solid var(--ev-success);
}

/* ── Bottom Bar ── */
.ev-bottom-bar[b-b86lw1x3df] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--ev-bg);
    border-top: 1px solid var(--ev-border);
}

.ev-step-label[b-b86lw1x3df] {
    font-size: 13px;
    color: var(--ev-text-muted);
    font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .ev-title[b-b86lw1x3df] {
        font-size: 24px;
    }

    .ev-content[b-b86lw1x3df] {
        padding: 24px 16px 100px;
    }

    .ev-step-indicator[b-b86lw1x3df] {
        padding: 24px 16px 0;
    }

    .ev-step-dot[b-b86lw1x3df] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .ev-step-line[b-b86lw1x3df] {
        width: 24px;
    }

    .ev-code-input[b-b86lw1x3df] {
        width: 200px;
        height: 56px;
        font-size: 26px;
        letter-spacing: 8px;
    }

    .ev-bottom-bar[b-b86lw1x3df] {
        padding: 12px 16px;
    }

    .ev-rules-list li[b-b86lw1x3df] {
        padding: 12px 0 12px 24px;
        font-size: 14px;
    }

    .ev-policy-content[b-b86lw1x3df] {
        padding: 16px;
    }

    .ev-slide[b-b86lw1x3df] {
        max-width: 100%;
    }
}
/* /Components/Shared/QuestionManagementGrid.razor.rz.scp.css */
/* Question Management Grid Component Styles */

.question-management-container[b-2xqas46zg9] {
    width: 100%;
    padding: 16px;
}

/* Loading Indicator */
.loading-indicator[b-2xqas46zg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.spinner[b-2xqas46zg9] {
    border: 3px solid var(--BEC-colorNeutralBackground3);
    border-top: 3px solid var(--BEC-colorBrandBackground);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-2xqas46zg9 1s linear infinite;
}

@keyframes spin-b-2xqas46zg9 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error Message */
.error-message[b-2xqas46zg9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
}

.error-message i[b-2xqas46zg9] {
    font-size: 18px;
}

/* Total Weighting Display */
.total-weighting[b-2xqas46zg9] {
    margin-top: 16px;
    padding: 12px 16px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.total-weighting strong[b-2xqas46zg9] {
    color: var(--BEC-colorNeutralForeground1);
}

.total-weighting .weighting-value[b-2xqas46zg9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

.total-weighting .weighting-status[b-2xqas46zg9] {
    margin-left: auto;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
}

.total-weighting.error[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteRedBackground2);
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
}

.total-weighting.error .weighting-value[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.total-weighting.error .weighting-status[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.total-weighting.success[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.total-weighting.success .weighting-value[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.total-weighting.success .weighting-status[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

/* Question Edit Form */
.question-edit-form[b-2xqas46zg9] {
    padding: 16px;
}

.question-edit-form .form-row[b-2xqas46zg9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.question-edit-form .form-group[b-2xqas46zg9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.question-edit-form .form-label[b-2xqas46zg9] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

.question-edit-form .form-label.required[b-2xqas46zg9]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
}

.question-edit-form .validation-error[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 11px;
    margin-top: 4px;
}

/* Badge Styles */
.badge[b-2xqas46zg9] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.badge-inactive[b-2xqas46zg9] {
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

/* Delete Confirmation Dialog */
.delete-confirmation[b-2xqas46zg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    text-align: center;
}

.delete-confirmation .warning-icon[b-2xqas46zg9] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.delete-confirmation p[b-2xqas46zg9] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.delete-confirmation .question-details[b-2xqas46zg9] {
    padding: 12px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    width: 100%;
    text-align: left;
    font-size: 13px;
}

.delete-confirmation .warning-text[b-2xqas46zg9] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.btn-danger[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteRedBackground1) !important;
    color: white !important;
}

.btn-danger:hover[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteRedForeground1) !important;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .question-edit-form .form-row[b-2xqas46zg9] {
        grid-template-columns: 1fr;
    }

    .question-management-container[b-2xqas46zg9] {
        padding: 8px;
    }
}