@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;
}

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

.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;
    height: 100vh;
    /* FIX: Full viewport height */
    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);
}

/* FINAL SELECTION: ELEVATED SHADOW */
.nav-item.active[b-16wmqvnqmc] {
    background: transparent;
    color: var(--BEC-Text-Primary, #333);
    font-weight: 700;
    border-left: none;

    /* 3D TEXT EFFECT */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 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);
}

/* Icon with Blue Drop Shadow - NO Background Circle */
.nav-item.active .nav-icon[b-16wmqvnqmc] {
    color: var(--BEC-layoutBluePrimary);
    filter: drop-shadow(0 2px 4px rgba(0, 120, 212, 0.3));
    transform: scale(1.05);
}

/* 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-layoutBlueDark);
    font-weight: 600;
    background: var(--BEC-layoutGray200);
}

/* ================= 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;
}

/* 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;
}

/* 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-greeting-container[b-16wmqvnqmc] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 6px 16px;
    background: linear-gradient(135deg, 
        rgba(30, 60, 114, 0.08) 0%, 
        rgba(0, 120, 212, 0.1) 30%,
        rgba(30, 60, 114, 0.12) 50%, 
        rgba(0, 120, 212, 0.1) 70%,
        rgba(30, 60, 114, 0.08) 100%);
    border: 1px solid rgba(30, 60, 114, 0.15);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(30, 60, 114, 0.1);
    animation: birthdayContainerFloat-b-16wmqvnqmc 3s ease-in-out infinite;
    overflow: hidden;
}

@keyframes birthdayContainerFloat-b-16wmqvnqmc {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.birthday-greeting[b-16wmqvnqmc] {
    color: var(--BEC-themePrimary);
    font-weight: 600;
    font-size: 16px;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, 
        var(--BEC-themePrimary) 0%, 
        var(--BEC-colorBrandBackground) 30%,
        var(--BEC-themeSecondary, #2b4d81) 50%,
        var(--BEC-colorBrandBackground) 70%,
        var(--BEC-themePrimary) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: birthdayTextShimmer-b-16wmqvnqmc 3s ease-in-out infinite;
}

@keyframes birthdayTextShimmer-b-16wmqvnqmc {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Foreground Rockets with Different Colors */
.birthday-rocket[b-16wmqvnqmc] {
    opacity: 0.85;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: rocketFly-b-16wmqvnqmc 2.5s ease-in-out infinite;
}

.rocket-primary[b-16wmqvnqmc] {
    color: var(--BEC-themePrimary);
}

.rocket-brand[b-16wmqvnqmc] {
    color: var(--BEC-colorBrandBackground);
}

.birthday-rocket-left[b-16wmqvnqmc] {
    animation-delay: 0s;
}

.birthday-rocket-right[b-16wmqvnqmc] {
    animation-delay: 1.25s;
}

@keyframes rocketFly-b-16wmqvnqmc {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.85;
    }
    20% {
        transform: translateY(-6px) translateX(3px) rotate(-8deg);
        opacity: 1;
    }
    40% {
        transform: translateY(-3px) translateX(0) rotate(0deg);
        opacity: 0.95;
    }
    60% {
        transform: translateY(-6px) translateX(-3px) rotate(8deg);
        opacity: 1;
    }
    80% {
        transform: translateY(-2px) translateX(0) rotate(0deg);
        opacity: 0.9;
    }
}

.birthday-rocket svg[b-16wmqvnqmc] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    transition: transform var(--BEC-durationSlow, 0.3s) ease;
}

.birthday-rocket:hover svg[b-16wmqvnqmc] {
    transform: scale(1.1);
}

/* Rocket trail particles with matching colors */
.rocket-primary[b-16wmqvnqmc]::before,
.rocket-primary[b-16wmqvnqmc]::after {
    background: radial-gradient(circle, rgba(30, 60, 114, 0.5) 0%, transparent 70%);
}

.rocket-brand[b-16wmqvnqmc]::before,
.rocket-brand[b-16wmqvnqmc]::after {
    background: radial-gradient(circle, rgba(0, 120, 212, 0.5) 0%, transparent 70%);
}

.birthday-rocket[b-16wmqvnqmc]::before,
.birthday-rocket[b-16wmqvnqmc]::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: rocketTrail-b-16wmqvnqmc 2.5s ease-in-out infinite;
}

.birthday-rocket-left[b-16wmqvnqmc]::before {
    left: -10px;
    top: 30%;
    animation-delay: 0s;
}

.birthday-rocket-left[b-16wmqvnqmc]::after {
    left: -14px;
    top: 70%;
    animation-delay: 0.3s;
}

.birthday-rocket-right[b-16wmqvnqmc]::before {
    right: -10px;
    top: 30%;
    animation-delay: 1.25s;
}

.birthday-rocket-right[b-16wmqvnqmc]::after {
    right: -14px;
    top: 70%;
    animation-delay: 1.55s;
}

@keyframes rocketTrail-b-16wmqvnqmc {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Background Rockets */
.birthday-bg-rocket[b-16wmqvnqmc] {
    position: absolute;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
}

.bg-rocket-1[b-16wmqvnqmc] {
    color: var(--BEC-themePrimary);
    top: -8px;
    left: 10%;
    animation: bgRocketFloat1-b-16wmqvnqmc 8s ease-in-out infinite;
}

.bg-rocket-2[b-16wmqvnqmc] {
    color: var(--BEC-colorBrandBackground);
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    animation: bgRocketFloat2-b-16wmqvnqmc 10s ease-in-out infinite;
}

.bg-rocket-3[b-16wmqvnqmc] {
    color: var(--BEC-themeSecondary, #2b4d81);
    bottom: -6px;
    right: 15%;
    animation: bgRocketFloat3-b-16wmqvnqmc 12s ease-in-out infinite;
}

.bg-rocket-4[b-16wmqvnqmc] {
    color: var(--BEC-colorBrandBackgroundHover);
    top: 20%;
    right: 8%;
    animation: bgRocketFloat4-b-16wmqvnqmc 9s ease-in-out infinite;
}

@keyframes bgRocketFloat1-b-16wmqvnqmc {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translate(15px, -10px) rotate(15deg);
        opacity: 0.5;
    }
    50% {
        transform: translate(10px, -5px) rotate(-10deg);
        opacity: 0.4;
    }
    75% {
        transform: translate(-5px, -8px) rotate(10deg);
        opacity: 0.45;
    }
}

@keyframes bgRocketFloat2-b-16wmqvnqmc {
    0%, 100% {
        transform: translateY(-50%) translateX(0) rotate(0deg);
        opacity: 0.3;
    }
    33% {
        transform: translateY(-60%) translateX(20px) rotate(-20deg);
        opacity: 0.5;
    }
    66% {
        transform: translateY(-40%) translateX(-15px) rotate(20deg);
        opacity: 0.4;
    }
}

@keyframes bgRocketFloat3-b-16wmqvnqmc {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.3;
    }
    30% {
        transform: translate(-20px, -15px) rotate(-15deg);
        opacity: 0.5;
    }
    60% {
        transform: translate(-10px, -8px) rotate(15deg);
        opacity: 0.4;
    }
    90% {
        transform: translate(5px, -12px) rotate(-10deg);
        opacity: 0.45;
    }
}

@keyframes bgRocketFloat4-b-16wmqvnqmc {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translate(-12px, 10px) rotate(20deg);
        opacity: 0.5;
    }
    50% {
        transform: translate(-8px, 5px) rotate(-15deg);
        opacity: 0.4;
    }
    75% {
        transform: translate(10px, 8px) rotate(10deg);
        opacity: 0.45;
    }
}

.birthday-bg-rocket svg[b-16wmqvnqmc] {
    filter: blur(0.5px);
}

/* ================= 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 ================= */

/* Tablet breakpoint */
@media (max-width: 768px) {
    .ms-sidebar[b-16wmqvnqmc] {
        width: 0;
        min-width: 0;
        max-width: 0;
        overflow: hidden;
        transform: translateX(-100%);
    }

    .ms-sidebar.expanded[b-16wmqvnqmc] {
        width: var(--BEC-layoutSidebarWidth);
        min-width: var(--BEC-layoutSidebarWidth);
        max-width: var(--BEC-layoutSidebarWidth);
        transform: translateX(0);
    }

    .main-content[b-16wmqvnqmc] {
        margin-left: 0;
    }

    .header-right[b-16wmqvnqmc] {
        gap: 0.5rem;
    }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
    .ms-header[b-16wmqvnqmc] {
        padding: 0 0.5rem;
    }

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

    .context-selector[b-16wmqvnqmc] {
        max-width: 120px;
    }
}
/* /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 */
    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;
}
/* /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;
}

/* ========================================
   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/Data Hub/Departments/Departments.razor.rz.scp.css */
/* ========================================
   Departments Data Hub - Compact Design
   ======================================== */

/* Base Styles */
.departments-container[b-vywdrjxily] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Header */
.page-header[b-vywdrjxily] {
    margin-bottom: 2rem;
}

.back-button-wrapper[b-vywdrjxily] {
    margin-bottom: 1.25rem;
}

.back-button[b-vywdrjxily] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-button:hover[b-vywdrjxily] {
    background: #f9fafb;
    border-color: #3b82f6;
    color: #3b82f6;
}

.back-button svg[b-vywdrjxily] {
    width: 1rem;
    height: 1rem;
}

.page-title[b-vywdrjxily] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}

.page-subtitle[b-vywdrjxily] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

/* Search */
.search-wrapper[b-vywdrjxily] {
    max-width: 500px;
}

.search-input[b-vywdrjxily] {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

.search-input:focus[b-vywdrjxily] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input[b-vywdrjxily]::placeholder {
    color: #9ca3af;
}

/* Departments Grid */
.departments-grid[b-vywdrjxily] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .departments-grid[b-vywdrjxily] {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.25rem;
    }
}

/* Department Cards - Compact Version */
.department-card[b-vywdrjxily] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.department-card:hover[b-vywdrjxily] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6;
}

/* Card Icon */
.card-icon[b-vywdrjxily] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon svg[b-vywdrjxily] {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

/* Card Content */
.card-title[b-vywdrjxily] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-description[b-vywdrjxily] {
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Card Action */
.card-action[b-vywdrjxily] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}

.card-action span[b-vywdrjxily] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3b82f6;
}

.card-action svg[b-vywdrjxily] {
    width: 1rem;
    height: 1rem;
    color: #3b82f6;
    transition: transform 0.3s ease;
}

.department-card:hover .card-action svg[b-vywdrjxily] {
    transform: translateX(4px);
}

/* Skeleton Loading State */
.skeleton-card[b-vywdrjxily] {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-vywdrjxily 1.5s ease-in-out infinite;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    height: 140px;
}

@keyframes skeleton-loading-b-vywdrjxily {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Toast Styles */
[b-vywdrjxily] .e-toast {
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

[b-vywdrjxily] .e-toast-warning {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

/* Scrollbar */
[b-vywdrjxily]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-vywdrjxily]::-webkit-scrollbar-track {
    background: transparent;
}

[b-vywdrjxily]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

[b-vywdrjxily]::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}
/* /Components/Pages/MainLayout/Data Hub/Projects Data hub/ProjectsDataHub.razor.rz.scp.css */
/* ========================================
   Projects Data Hub - Compact Design
   ======================================== */

/* Base Styles */
.projects-container[b-g4ve7601uo] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Header */
.page-header[b-g4ve7601uo] {
    margin-bottom: 2rem;
}

.back-button-wrapper[b-g4ve7601uo] {
    margin-bottom: 1.25rem;
}

.back-button[b-g4ve7601uo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-button:hover[b-g4ve7601uo] {
    background: #f9fafb;
    border-color: #3b82f6;
    color: #3b82f6;
}

.back-button svg[b-g4ve7601uo] {
    width: 1rem;
    height: 1rem;
}

.page-title[b-g4ve7601uo] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}

.page-subtitle[b-g4ve7601uo] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

/* Search */
.search-wrapper[b-g4ve7601uo] {
    max-width: 500px;
}

.search-input[b-g4ve7601uo] {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

.search-input:focus[b-g4ve7601uo] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input[b-g4ve7601uo]::placeholder {
    color: #9ca3af;
}

/* Projects Grid */
.projects-grid[b-g4ve7601uo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .projects-grid[b-g4ve7601uo] {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.25rem;
    }
}

/* Project Cards - Compact Version */
.project-card[b-g4ve7601uo] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.project-card:hover[b-g4ve7601uo] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6;
}

/* Card Icon */
.card-icon[b-g4ve7601uo] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon svg[b-g4ve7601uo] {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

/* Card Content */
.card-title[b-g4ve7601uo] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-description[b-g4ve7601uo] {
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Card Action */
.card-action[b-g4ve7601uo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}

.card-action span[b-g4ve7601uo] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3b82f6;
}

.card-action svg[b-g4ve7601uo] {
    width: 1rem;
    height: 1rem;
    color: #3b82f6;
    transition: transform 0.3s ease;
}

.project-card:hover .card-action svg[b-g4ve7601uo] {
    transform: translateX(4px);
}

/* Skeleton Loading State */
.skeleton-card[b-g4ve7601uo] {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-g4ve7601uo 1.5s ease-in-out infinite;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    height: 140px;
}

@keyframes skeleton-loading-b-g4ve7601uo {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Toast Styles */
[b-g4ve7601uo] .e-toast {
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

[b-g4ve7601uo] .e-toast-warning {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

/* Scrollbar */
[b-g4ve7601uo]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-g4ve7601uo]::-webkit-scrollbar-track {
    background: transparent;
}

[b-g4ve7601uo]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

[b-g4ve7601uo]::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}
/* /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 - V1 FLUENT BLUE THEME
   ======================================== */

:root[b-22pogpxcos] {
    /* Fluent Blue Palette */
    --fluent-blue: #0078D4;
    --fluent-blue-hover: #106EBE;
    --fluent-blue-light: #EFF6FC;
    /* Light Blue Background */
    --fluent-blue-lighter: #DEECF9;

    /* Neutrals */
    --neutral-gray-10: #FAF9F8;
    --neutral-gray-20: #F3F2F1;
    --neutral-gray-30: #EDEBE9;
    --neutral-gray-60: #C8C6C4;
    --neutral-gray-90: #A19F9D;
    --neutral-gray-130: #605E5C;
    --neutral-gray-160: #323130;
    --white: #FFFFFF;

    /* Grid Colors - Blue Tinted */
    --grid-header-bg: var(--fluent-blue-light);
    --grid-border: #E1DFDD;
    /* Softer border */
    --grid-text: #201F1E;
    --grid-hover: #F3F9FD;
    /* Very subtle blue hover */
    --grid-selection: #DEECF9;
    /* Blue selection */
}

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--neutral-gray-10);
    overflow: hidden;
}


/* ========================================
   PHASE 2: PAGE HEADER (Sticky) - MATCHING REQUEST DETAIL
   ======================================== */
.erp-page-header[b-22pogpxcos] {
    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;
}

/* Header Middle for Filters */
.header-middle[b-22pogpxcos] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.filter-controls[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--neutral-gray-20);
    padding: 4px 16px;
    border-radius: 20px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.filter-item[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label[b-22pogpxcos] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-gray-130);
    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: 60px !important;
    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: 0 24px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 12px 24px 8px 24px !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: 48px !important;
    height: 48px !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: 48px !important;
}

/* Toolbar Items - same height as toolbar */
[b-22pogpxcos] .e-toolbar .e-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 6px 12px !important;
    height: 32px !important;
    min-height: 32px !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: 16px 24px 24px;
    /* More breathing room */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-22pogpxcos] .e-grid {
    border: 1px solid var(--grid-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

/* Grid Header - TINTED BLUE */
[b-22pogpxcos] .e-grid .e-gridheader {
    background-color: var(--grid-header-bg) !important;
    border-bottom: 2px solid var(--fluent-blue-lighter) !important;
}

[b-22pogpxcos] .e-headercell {
    background-color: var(--grid-header-bg) !important;
    color: var(--fluent-blue) !important;
    /* Blue Header Text */
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 12px !important;
}

/* Grid Rows */
[b-22pogpxcos] .e-rowcell {
    font-size: 13px !important;
    color: var(--grid-text) !important;
    padding: 10px 12px !important;
    border-color: var(--neutral-gray-20) !important;
}

/* Hover & Selection */
[b-22pogpxcos] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--grid-hover) !important;
}

[b-22pogpxcos] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: var(--grid-selection) !important;
    color: var(--fluent-blue-hover) !important;
}

/* ========================================
   CUSTOM TEMPLATE CLASSES
   ======================================== */

/* Text Utilities */
.text-bold[b-22pogpxcos] {
    font-weight: 700;
    color: var(--fluent-blue);
    /* Blue ID */
}

.text-small[b-22pogpxcos] {
    font-size: 11px;
    color: var(--neutral-gray-130);
}

/* Traveller Column */
.emp-code-badge[b-22pogpxcos] {
    font-family: monospace;
    font-size: 11px;
    background: var(--fluent-blue-light);
    color: var(--fluent-blue);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--fluent-blue-lighter);
}

.department-text[b-22pogpxcos],
.job-title-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(--neutral-gray-160);
}

.route-simple .arrow[b-22pogpxcos] {
    color: var(--fluent-blue);
    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(--neutral-gray-160);
    font-weight: 500;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-leg .arrow[b-22pogpxcos] {
    color: var(--fluent-blue);
    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(--fluent-blue);
}

/* Return leg gets different color */
.route-stacked .route-leg:nth-child(2) .arrow[b-22pogpxcos] {
    color: var(--neutral-gray-90);
}

.route-arrow[b-22pogpxcos] {
    color: var(--fluent-blue);
    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(--neutral-gray-20);
    color: var(--neutral-gray-130);
    border: 1px solid var(--neutral-gray-30);
}

/* 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(--neutral-gray-20);
    color: var(--neutral-gray-130);
    border: 1px solid var(--neutral-gray-30);
    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(--neutral-gray-20);
    color: var(--neutral-gray-130);
}

/* Text-based column styles */
.location-text[b-22pogpxcos] {
    color: var(--neutral-gray-130);
    font-size: 13px;
}

.trip-text[b-22pogpxcos] {
    color: var(--neutral-gray-130);
    font-size: 13px;
}

.travel-dates-text[b-22pogpxcos] {
    color: var(--neutral-gray-130);
    font-size: 13px;
}

.flight-class-text[b-22pogpxcos] {
    color: var(--neutral-gray-130);
    font-size: 13px;
}

.services-text[b-22pogpxcos] {
    color: var(--neutral-gray-130);
    font-size: 13px;
}

.no-services[b-22pogpxcos] {
    color: var(--neutral-gray-90);
    font-size: 12px;
    font-style: italic;
}

/* Project Column Styles */
.project-name-text[b-22pogpxcos] {
    color: var(--fluent-blue);
    font-size: 13px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-custom-text[b-22pogpxcos] {
    color: var(--neutral-gray-130);
    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(--neutral-gray-90);
    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(--neutral-gray-60);
    margin-right: 4px;
    font-size: 13px;
}

.service-icon.active[b-22pogpxcos] {
    color: var(--fluent-blue);
    scale: 1.1;
}

/* Attachments */
.attachment-link[b-22pogpxcos] {
    color: var(--fluent-blue);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    background: var(--fluent-blue-light);
    padding: 2px 8px;
    border-radius: 12px;
}

/* Dialogs */
.dialog-content-inner[b-22pogpxcos] {
    padding: 10px 0;
}

.export-dialog-hint[b-22pogpxcos] {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--neutral-gray-130, #605E5C);
}

.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: 13px;
    font-weight: 500;
}

.delete-error-message[b-22pogpxcos] {
    color: var(--BEC-colorPaletteRedForeground1, #c42b1c);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--BEC-colorPaletteRedBackground1, #fdf6f6);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dialog-header-title[b-22pogpxcos] {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fluent-blue);
}

.request-summary[b-22pogpxcos] {
    background: var(--fluent-blue-light);
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 13px;
    border-left: 3px solid var(--fluent-blue);
}

.vendor-list[b-22pogpxcos] {
    border: 1px solid var(--neutral-gray-30);
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.vendor-item[b-22pogpxcos] {
    padding: 10px;
    border-bottom: 1px solid var(--neutral-gray-30);
    display: flex;
    align-items: center;
}

.vendor-item:hover[b-22pogpxcos] {
    background-color: var(--fluent-blue-light);
}

.no-vendors[b-22pogpxcos] {
    padding: 20px;
    text-align: center;
    color: var(--neutral-gray-90);
}

/* 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(--fluent-blue);
    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(--neutral-gray-160);
}

.flight-class-badge[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--neutral-gray-20);
    font-size: 10px;
    color: var(--neutral-gray-130);
}

/* ========================================
   HELP WIZARD - SIDE DRAWER
   ======================================== */
.drawer-overlay[b-22pogpxcos] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    /* Right align */
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
    animation: fadeIn-b-22pogpxcos 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-panel[b-22pogpxcos] {
    background: white;
    width: 500px;
    /* Wide drawer */
    max-width: 90vw;
    height: 100vh;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-22pogpxcos 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
    position: relative;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

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

    to {
        opacity: 1;
    }
}

@keyframes slideInRight-b-22pogpxcos {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

/* Drawer Structure */
.drawer-header[b-22pogpxcos] {
    padding: 24px 32px;
    background: linear-gradient(135deg, #0078D4 0%, #005a9e 100%);
    /* Fluent Blue Header */
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.drawer-title-group[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.drawer-icon-circle[b-22pogpxcos] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.drawer-header h3[b-22pogpxcos] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.drawer-header p[b-22pogpxcos] {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.9;
    font-weight: 400;
}

.btn-close-drawer[b-22pogpxcos] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-close-drawer:hover[b-22pogpxcos] {
    background: rgba(255, 255, 255, 0.25);
}

.drawer-body[b-22pogpxcos] {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: #faf9f8;
    /* Softer background for reading */
}

.drawer-footer[b-22pogpxcos] {
    padding: 20px 32px;
    background: white;
    border-top: 1px solid var(--neutral-gray-30);
    display: flex;
    justify-content: flex-end;
    /* Align buttons right */
    gap: 12px;
    flex-shrink: 0;
}

/* Help Content Styling */
.help-section[b-22pogpxcos] {
    margin-bottom: 32px;
}

.help-section:last-child[b-22pogpxcos] {
    margin-bottom: 0;
}

/* Vertical Steps */
.help-steps-vertical[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Connected line */
    position: relative;
    margin-top: 10px;
}

.v-step[b-22pogpxcos] {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 32px;
}

.v-step:last-child[b-22pogpxcos] {
    padding-bottom: 0;
}

/* Connecting Line */
.v-step:not(:last-child)[b-22pogpxcos]::before {
    content: '';
    position: absolute;
    left: 15px;
    /* Half of circle width (30/2) */
    top: 30px;
    bottom: 0;
    width: 2px;
    background: #e1dfdd;
    z-index: 0;
}

.v-step-marker[b-22pogpxcos] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: 2px solid #0078D4;
    /* Fluent Blue */
    color: #0078D4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #faf9f8;
    /* Spacer */
}

.v-step.active .v-step-marker[b-22pogpxcos] {
    background: #0078D4;
    color: white;
    box-shadow: 0 0 0 4px #d0e7ff;
}

.v-step-content[b-22pogpxcos] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #edebe9;
    flex: 1;
}

.v-step-content h4[b-22pogpxcos] {
    margin: 0 0 8px;
    font-size: 16px;
    color: #323130;
    font-weight: 600;
}

.v-step-content p[b-22pogpxcos] {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #605e5c;
}

.v-tip[b-22pogpxcos] {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff4ce;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    gap: 8px;
    color: #5c4300;
}

.v-tip i[b-22pogpxcos] {
    color: #d2a106;
    margin-top: 2px;
}

/* Footer Buttons */
.btn-drawer-secondary[b-22pogpxcos] {
    padding: 8px 20px;
    border: 1px solid #d1d1d1;
    background: white;
    border-radius: 4px;
    font-weight: 600;
    color: #323130;
    cursor: pointer;
}

.btn-drawer-secondary:hover[b-22pogpxcos] {
    background: #f3f2f1;
}

.btn-drawer-primary[b-22pogpxcos] {
    padding: 8px 20px;
    border: none;
    background: #0078D4;
    border-radius: 4px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.btn-drawer-primary:hover[b-22pogpxcos] {
    background: #106ebe;
}

.btn-help-primary:hover[b-22pogpxcos] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-help-primary.done[b-22pogpxcos] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.btn-help-primary.done:hover[b-22pogpxcos] {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}


.stat-divider[b-22pogpxcos] {
    width: 1px;
    height: 24px;
    background: var(--neutral-gray-60);
    margin: 0 4px;
}

/* ========================================
   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);
    }
}
/* /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;
}

/* 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;
}

/* ========================================
   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;
}

/* ========================================
   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/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: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalXXL);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-shadow2);
    min-height: var(--BEC-touchTargetMobile);
}

.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: 60px !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: var(--BEC-shadow4) !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    max-height: 40px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
    align-items: center !important;
    display: flex !important;
}

/* Toolbar items: constrain height so buttons don't overflow the toolbar */
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item {
    align-self: center !important;
    min-height: unset !important;
    height: auto !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    min-height: 32px !important;
    max-height: 32px !important;
    height: 32px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all var(--BEC-durationNormal) ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !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;
}

/* Primary Action Button (New Batch): text and icon visible by default, not only on hover */
[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
}

[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn .e-icons,
[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn .e-tbar-btn-text,
[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn span,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn .e-icons,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn .e-tbar-btn-text,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn span {
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
    fill: var(--BEC-colorNeutralForegroundOnBrand) !important;
}

[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled),
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
}

[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text,
[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) span,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item.primary-action-btn .e-tbar-btn:hover:not(.e-disabled) span {
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
    fill: var(--BEC-colorNeutralForegroundOnBrand) !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 {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 var(--BEC-spacingHorizontalS) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
}

/* ========================================
   PHASE 4: GRID CONTENT (Full Width)
   ======================================== */
.erp-page-content[b-quzbmv4vnr] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalL);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex child to shrink */
}

/* Grid fills available space */
[b-quzbmv4vnr] .e-grid {
    flex: 1;
    min-height: 0;
    border: 1px solid var(--BEC-layoutGray300) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow4) !important;
    font-family: var(--BEC-fontFamilyBase) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

[b-quzbmv4vnr] .e-grid .e-gridheader {
    background-color: var(--BEC-colorNeutralBackground3) !important;
    border-bottom: 2px solid var(--BEC-colorNeutralBackground5) !important;
}

[b-quzbmv4vnr] .e-headercell {
    background-color: var(--BEC-colorNeutralBackground3) !important;
    color: var(--BEC-colorBrandForeground1) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightBold) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--BEC-spacingHorizontalM) !important;
}

[b-quzbmv4vnr] .e-rowcell {
    font-size: var(--BEC-fontSizeBase200) !important;
    color: var(--BEC-layoutGray900) !important;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalM) !important;
    border-color: var(--BEC-layoutGray100) !important;
}

[b-quzbmv4vnr] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--BEC-colorNeutralBackground3) !important;
}

[b-quzbmv4vnr] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: var(--BEC-colorNeutralBackground4) !important;
    color: var(--BEC-colorBrandForeground2) !important;
}

/* ========================================
   GRID CELL TEMPLATES
   ======================================== */
.id-text[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    font-family: 'Consolas', monospace;
    font-size: var(--BEC-fontSizeBase200);
}

.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);
}

.no-data[b-quzbmv4vnr] {
    color: var(--BEC-colorNeutralForeground4);
}

/* Status Badges */
.status-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: 80px;
}

.status-draft[b-quzbmv4vnr] {
    background-color: var(--BEC-layoutGray100);
    color: var(--BEC-layoutGray600);
    border: 1px solid var(--BEC-layoutGray200);
}

.status-sent[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
    border: 1px solid var(--BEC-colorPaletteYellowBackground2);
}

.status-quoted[b-quzbmv4vnr] {
    background-color: var(--BEC-themeLighterAlt);
    color: var(--BEC-themeSecondary);
    border: 1px solid var(--BEC-themeLighter);
}

.status-approved[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenBackground2);
}

.status-released[b-quzbmv4vnr] {
    background-color: var(--BEC-infoBackground);
    color: var(--BEC-infoText);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.status-booked[b-quzbmv4vnr] {
    background-color: var(--BEC-successBackground);
    color: var(--BEC-successText);
    border: 1px solid var(--BEC-colorPaletteGreenBackground2);
    font-weight: var(--BEC-fontWeightBold);
}

.status-completed[b-quzbmv4vnr] {
    background-color: var(--BEC-layoutGray100);
    color: var(--BEC-layoutGray600);
    border: 1px solid var(--BEC-layoutGray200);
}

.status-cancelled[b-quzbmv4vnr] {
    background-color: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
}

.status-default[b-quzbmv4vnr] {
    background-color: var(--BEC-layoutGray100);
    color: var(--BEC-layoutGray600);
}

/* ========================================
   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 (Side Panel)
   ======================================== */
.drawer-overlay[b-quzbmv4vnr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: fadeIn-b-quzbmv4vnr var(--BEC-durationSlow) var(--BEC-curveDecelerateMid);
}

.drawer-panel[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground1);
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    box-shadow: var(--BEC-shadow28);
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-quzbmv4vnr var(--BEC-durationSlower) var(--BEC-curveDecelerateMid);
    border-left: 1px solid var(--BEC-colorNeutralStroke2);
}

@keyframes fadeIn-b-quzbmv4vnr {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight-b-quzbmv4vnr {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.drawer-header[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalXXL) var(--BEC-spacingHorizontalXXXL);
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground), var(--BEC-colorBrandBackgroundPressed));
    color: var(--BEC-colorNeutralForegroundOnBrand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: var(--BEC-shadow4);
}

.drawer-title-group[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.drawer-icon-circle[b-quzbmv4vnr] {
    width: var(--BEC-fontSizeHero900);
    height: var(--BEC-fontSizeHero900);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--BEC-borderRadiusCircular);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase500);
    flex-shrink: 0;
}

.drawer-header h3[b-quzbmv4vnr] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 1.2;
}

.drawer-header p[b-quzbmv4vnr] {
    margin: var(--BEC-spacingHorizontalXS) 0 0;
    font-size: var(--BEC-fontSizeBase200);
    opacity: 0.9;
    font-weight: var(--BEC-fontWeightRegular);
}

.drawer-header-right[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.drawer-header-right .status-badge[b-quzbmv4vnr] {
    background: rgba(255,255,255,0.2);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-close-drawer[b-quzbmv4vnr] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: var(--BEC-spacingHorizontalXXXL);
    height: var(--BEC-spacingHorizontalXXXL);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--BEC-durationNormal);
}

.btn-close-drawer:hover[b-quzbmv4vnr] {
    background: rgba(255, 255, 255, 0.25);
}

.drawer-body[b-quzbmv4vnr] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalXXL) var(--BEC-spacingHorizontalXXXL);
    background: var(--BEC-colorNeutralBackground2);
}

/* Batch details drawer loading state (batch + candidates + quotes) */
.batch-details-loading[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    gap: var(--BEC-spacingHorizontalL);
    color: var(--BEC-colorNeutralForeground3);
}

.batch-details-loading-spinner[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
}

.batch-details-loading-text[b-quzbmv4vnr] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.drawer-footer[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXXL);
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-layoutGray200);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    flex-shrink: 0;
}

/* Detail Sections */
.detail-section[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    padding: var(--BEC-spacingHorizontalXL);
    margin-bottom: var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-layoutGray200);
}

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

.detail-section h4 i[b-quzbmv4vnr] {
    color: var(--BEC-colorBrandForeground1);
}

.section-header-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.section-header-row h4[b-quzbmv4vnr] {
    margin: 0;
}

/* 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-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-bottom: var(--BEC-spacingHorizontalL);
    flex-wrap: wrap;
}
.attachment-list[b-quzbmv4vnr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}
.attachment-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 1px solid var(--BEC-layoutGray200);
}
.attachment-info[b-quzbmv4vnr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
}
.attachment-name[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-layoutGray900);
}
.attachment-name i[b-quzbmv4vnr] {
    margin-right: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-layoutGray500);
}
.attachment-meta[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-layoutGray600);
}
.attachment-link[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    margin-top: var(--BEC-spacingHorizontalXS);
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
}
.attachment-link:hover[b-quzbmv4vnr] {
    text-decoration: underline;
}
.attachment-hint[b-quzbmv4vnr] {
    margin: var(--BEC-spacingHorizontalM) 0 0;
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-layoutGray600);
}
.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);
}

.detail-grid[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalM);
}

.detail-item[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusLarge);
}

.detail-item label[b-quzbmv4vnr] {
    display: block;
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-layoutGray600);
    margin-bottom: var(--BEC-spacingHorizontalXS);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item span[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-layoutGray900);
}

.detail-item span.highlight[b-quzbmv4vnr] {
    color: var(--BEC-colorBrandForeground1);
}

/* Candidate List */
.candidate-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.candidate-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusLarge);
    gap: var(--BEC-spacingHorizontalM);
}

.candidate-name[b-quzbmv4vnr] {
    flex: 1;
    font-weight: var(--BEC-fontWeightMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-layoutGray900);
}

.candidate-passport[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-layoutGray600);
}

.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); 
}

/* Quote List */
.quote-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.quote-row[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusLarge);
    gap: var(--BEC-spacingHorizontalM);
    border: 1px solid transparent;
}

.quote-row.lowest[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenForeground1);
}

.quote-info[b-quzbmv4vnr] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.vendor-name[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-layoutGray900);
}

.lowest-tag[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-radius: var(--BEC-borderRadiusMedium);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.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: var(--BEC-spacingHorizontalXXS);
}

.quote-price[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: var(--BEC-fontWeightBold);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-layoutGray900);
}

.per-pax[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-layoutGray600);
}

/* 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-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;
}

.btn-drawer-secondary[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalXL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-layoutGray900);
    cursor: pointer;
}

.btn-drawer-secondary:hover[b-quzbmv4vnr] {
    background: var(--BEC-layoutGray100);
}

.btn-drawer-primary[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalXL);
    border: none;
    background: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    cursor: pointer;
}

.btn-drawer-primary:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* Empty Section */
.empty-section[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalXXXL) var(--BEC-spacingHorizontalXL);
    text-align: center;
    color: var(--BEC-layoutGray600);
    font-size: var(--BEC-fontSizeBase200);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px dashed var(--BEC-layoutGray200);
    border-radius: var(--BEC-borderRadiusXLarge);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.empty-section i[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorNeutralForeground4);
}

/* Help Content Styling */
.help-section[b-quzbmv4vnr] {
    margin-bottom: var(--BEC-spacingHorizontalXXXL);
}

.help-section:last-child[b-quzbmv4vnr] {
    margin-bottom: 0;
}

/* Help Wizard Steps */
.help-steps-vertical[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    margin-top: var(--BEC-spacingHorizontalMNudge);
}

.v-step[b-quzbmv4vnr] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    position: relative;
    padding-bottom: var(--BEC-spacingHorizontalXXL);
}

.v-step:last-child[b-quzbmv4vnr] {
    padding-bottom: 0;
}

.v-step:not(:last-child)[b-quzbmv4vnr]::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--BEC-layoutGray300);
    z-index: 0;
}

.v-step-marker[b-quzbmv4vnr] {
    width: var(--BEC-spacingHorizontalXXXL);
    height: var(--BEC-spacingHorizontalXXXL);
    border-radius: var(--BEC-borderRadiusCircular);
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandForeground1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightBold);
    font-size: var(--BEC-fontSizeBase300);
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 0 0 var(--BEC-spacingHorizontalXS) var(--BEC-colorNeutralBackground2);
}

.v-step.active .v-step-marker[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    box-shadow: 0 0 0 var(--BEC-spacingHorizontalXS) var(--BEC-colorNeutralBackground4);
}

.v-step-content[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    box-shadow: var(--BEC-shadow4);
    border: 1px solid var(--BEC-layoutGray200);
    flex: 1;
}

.v-step-content h4[b-quzbmv4vnr] {
    margin: 0 0 var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-layoutGray900);
    font-weight: var(--BEC-fontWeightSemibold);
}

.v-step-content p[b-quzbmv4vnr] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    line-height: 1.6;
    color: var(--BEC-layoutGray600);
}

/* Tip Box inside Steps */
.v-tip[b-quzbmv4vnr] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteYellowBackground2);
    border-radius: var(--BEC-borderRadiusLarge);
    font-size: var(--BEC-fontSizeBase200);
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.v-tip i[b-quzbmv4vnr] {
    color: var(--BEC-colorPaletteYellowForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
}

/* Processing Overlay */
.processing-overlay[b-quzbmv4vnr] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.processing-content[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalXXXL) var(--BEC-touchTargetMobile);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow16);
}

.processing-content span[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-layoutGray600);
    font-size: var(--BEC-fontSizeBase300);
}

/* Export dialog (optional date range) */
.export-dialog-hint[b-quzbmv4vnr] {
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
}

.export-dialog-dates[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

.export-dialog-dates .filter-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
}

.export-dialog-dates .filter-item label[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
}
/* /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 - FLUENT BLUE THEME
   Based on Booking Team Dashboard V1
   ======================================== */

:root[b-nv45pxmb3v] {
    /* Fluent Blue Palette */
    --fluent-blue: #0078D4;
    --fluent-blue-hover: #106EBE;
    --fluent-blue-light: #EFF6FC;
    /* Light Blue Background */
    --fluent-blue-lighter: #DEECF9;

    /* Neutrals */
    --neutral-gray-10: #FAF9F8;
    --neutral-gray-20: #F3F2F1;
    --neutral-gray-30: #EDEBE9;
    --neutral-gray-60: #C8C6C4;
    --neutral-gray-90: #A19F9D;
    --neutral-gray-130: #605E5C;
    --neutral-gray-160: #323130;
    --white: #FFFFFF;

    /* Grid Colors - Blue Tinted */
    --grid-header-bg: var(--fluent-blue-light);
    --grid-border: #E1DFDD;
    /* Softer border */
    --grid-text: #201F1E;
    --grid-hover: #F3F9FD;
    /* Very subtle blue hover */
    --grid-selection: #DEECF9;
    /* Blue selection */
}

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--neutral-gray-10);
    overflow: hidden;
}


/* ========================================
   PAGE HEADER (Sticky)
   ======================================== */
.erp-page-header[b-nv45pxmb3v] {
    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-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: 60px !important;
    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;
}

[b-nv45pxmb3v] .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-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-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: 20px !important;
    margin: 0 8px !important;
}

/* Search Input */
[b-nv45pxmb3v] .e-toolbar .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 8px !important;
    font-size: 13px !important;
}

/* ========================================
   GRID CONTENT
   ======================================== */
.erp-page-content[b-nv45pxmb3v] {
    flex: 1;
    padding: 16px 24px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-nv45pxmb3v] .e-grid {
    border: 1px solid var(--grid-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

/* Grid Header */
[b-nv45pxmb3v] .e-grid .e-gridheader {
    background-color: var(--grid-header-bg) !important;
    border-bottom: 2px solid var(--fluent-blue-lighter) !important;
}

[b-nv45pxmb3v] .e-headercell {
    background-color: var(--grid-header-bg) !important;
    color: var(--fluent-blue) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 12px !important;
}

/* Grid Rows */
[b-nv45pxmb3v] .e-rowcell {
    font-size: 13px !important;
    color: var(--grid-text) !important;
    padding: 10px 12px !important;
    border-color: var(--neutral-gray-20) !important;
}

[b-nv45pxmb3v] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--grid-hover) !important;
}

[b-nv45pxmb3v] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: var(--grid-selection) !important;
    color: var(--fluent-blue-hover) !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 WIZARD STYLES (Retained from original)
   ========================================= */
.side-wizard-overlay[b-nv45pxmb3v] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--BEC-overlay-bg);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    backdrop-filter: blur(2px);
    visibility: hidden;
    opacity: 0;
    transition: all var(--BEC-durationSlow);
}

.side-wizard-overlay.visible[b-nv45pxmb3v] {
    visibility: visible;
    opacity: 1;
}

.side-wizard[b-nv45pxmb3v] {
    width: 500px;
    background: var(--BEC-neutral-background-1);
    height: 100%;
    box-shadow: var(--BEC-shadow64);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--BEC-durationSlow) var(--BEC-curveDecelerateMid);
}

.side-wizard-overlay.visible .side-wizard[b-nv45pxmb3v] {
    transform: translateX(0);
}

.wizard-header[b-nv45pxmb3v] {
    padding: var(--BEC-spacingHorizontalXXL);
    border-bottom: 1px solid var(--BEC-neutral-stroke-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--BEC-neutral-background-2);
}

.wizard-title[b-nv45pxmb3v] {
    margin: 0;
    font-family: var(--BEC-fontFamilyBase);
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-neutralPrimary);
    font-weight: var(--BEC-fontWeightSemibold);
}

.close-btn[b-nv45pxmb3v] {
    border: none;
    background: transparent;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-neutralSecondary);
    cursor: pointer;
    transition: color var(--BEC-durationFaster);
}

.close-btn:hover[b-nv45pxmb3v] {
    color: var(--BEC-errorText);
}

.wizard-content[b-nv45pxmb3v] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalXXL);
}

.wizard-section[b-nv45pxmb3v] {
    margin-bottom: var(--BEC-spacingHorizontalXXXL);
    background: var(--BEC-neutral-background-1);
    border-radius: var(--BEC-borderRadiusMedium);
}

.section-header[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--BEC-spacingHorizontalL);
    color: var(--BEC-themePrimary);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Request Summary Box */
.req-summary[b-nv45pxmb3v] {
    background: var(--BEC-neutral-background-2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalXXL);
    display: flex;
    gap: var(--BEC-spacingHorizontalXXL);
    border: 1px solid var(--BEC-neutral-stroke-1);
}

.req-info-item[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
}

.req-label[b-nv45pxmb3v] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-neutralSecondary);
    text-transform: uppercase;
}

.req-value[b-nv45pxmb3v] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-themeDark);
}

/* Forms */
.form-group[b-nv45pxmb3v] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.form-label[b-nv45pxmb3v] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-neutralPrimary);
}

/* File Upload */
.file-upload-box[b-nv45pxmb3v] {
    border: 2px dashed var(--BEC-neutral-stroke-1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: var(--BEC-spacingHorizontalXXL);
    text-align: center;
    color: var(--BEC-neutralSecondary);
    font-size: var(--BEC-fontSizeBase200);
    cursor: pointer;
    transition: all var(--BEC-durationNormal);
    background: var(--BEC-neutral-background-2);
}

.file-upload-box:hover[b-nv45pxmb3v] {
    border-color: var(--BEC-themePrimary);
    background: var(--BEC-themeLighterAlt);
    color: var(--BEC-themePrimary);
}

/* Footer & Buttons */
.wizard-footer[b-nv45pxmb3v] {
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXL);
    border-top: 1px solid var(--BEC-neutral-stroke-1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    background: var(--BEC-neutral-background-2);
}

.btn[b-nv45pxmb3v] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300);
    border: none;
    transition: all var(--BEC-durationNormal);
}

.btn-cancel[b-nv45pxmb3v] {
    background: var(--BEC-neutral-background-1);
    border: 1px solid var(--BEC-neutral-stroke-1);
    color: var(--BEC-neutralPrimary);
}

.btn-cancel:hover[b-nv45pxmb3v] {
    background: var(--BEC-neutral-background-2);
}

.btn-primary[b-nv45pxmb3v] {
    background: var(--BEC-themePrimary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-primary:hover[b-nv45pxmb3v] {
    background: var(--BEC-themeDark);
}

.btn-sm[b-nv45pxmb3v] {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase200);
}

/* Hotel Info Box */
.hotel-info-box[b-nv45pxmb3v] {
    background: var(--BEC-neutral-background-2);
    padding: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-neutral-stroke-1);
    margin-bottom: var(--BEC-spacingHorizontalL);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-neutralSecondary);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.loading-container[b-nv45pxmb3v] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
/* /Components/Pages/MainLayout/FlightTicket/TravelRequest/MyTravelRequests.razor.rz.scp.css */
/* ========================================
   MY TRAVEL REQUESTS - V3 TIMELINE
   ======================================== */

:root[b-t7sgks9wo5] {
    --BEC-colorBrandBackground: #0078d4;
    --BEC-colorBrandBackgroundHover: #106ebe;
    --BEC-colorNeutralBackground1: #ffffff;
    --BEC-colorNeutralBackground2: #faf9f8;
    --BEC-colorNeutralBackground3: #f3f2f1;
    --BEC-colorNeutralForeground1: #201f1e;
    --BEC-colorNeutralForeground2: #605e5c;
    --BEC-colorNeutralForeground3: #a19f9d;
    --BEC-colorNeutralStroke1: #edebe9;
    --BEC-colorNeutralStroke2: #e1dfdd;
}

.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;
}

/* LEFT SIDE: TIMELINE PANE */
.timeline-pane[b-t7sgks9wo5] {
    flex: 1;
    background: var(--BEC-colorNeutralBackground2);
    padding: 30px 40px;
    overflow-y: auto;
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
}

.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;
}


/* ========================================
   RIGHT SIDE: DETAILS PANE
   ======================================== */
.details-pane[b-t7sgks9wo5] {
    width: 450px;
    background: white;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.02);
    border-left: 1px solid var(--BEC-colorNeutralStroke1);
}

.dp-header[b-t7sgks9wo5] {
    padding: 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: white;
}

.dp-super-title[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.dp-title[b-t7sgks9wo5] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
}

.dp-id-badge[b-t7sgks9wo5] {
    display: inline-block;
    background: #f3f2f1;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: #666;
    margin-right: 12px;
}

.dp-section[b-t7sgks9wo5] {
    padding: 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.dp-section-title[b-t7sgks9wo5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-section-title.clickable[b-t7sgks9wo5] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.2s;
}

.dp-section-title.clickable:hover[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandForeground1);
}

.dp-section-title i[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground);
}

.dp-section-title .toggle-icon[b-t7sgks9wo5] {
    margin-left: auto;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ITINERARY LIST */
.leg-item[b-t7sgks9wo5] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
}

.leg-timeline[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
}

.leg-dot[b-t7sgks9wo5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    margin-top: 6px;
}

.leg-line[b-t7sgks9wo5] {
    flex: 1;
    width: 1px;
    background: #e1dfdd;
    margin-top: 4px;
    margin-bottom: -14px;
}

.leg-item:last-child .leg-line[b-t7sgks9wo5] {
    display: none;
}

.leg-content[b-t7sgks9wo5] {
    flex: 1;
}

.leg-row-top[b-t7sgks9wo5] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.leg-city[b-t7sgks9wo5] {
    font-weight: 600;
    font-size: 14px;
}

.leg-time[b-t7sgks9wo5] {
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.leg-meta[b-t7sgks9wo5] {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* ATTACHMENTS */
.file-item[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #faf9f8;
    border-radius: 4px;
    border: 1px solid #edebe9;
    margin-bottom: 8px;
}

.file-item i.fa-file-pdf[b-t7sgks9wo5] {
    color: #e81123;
}

.file-item i.fa-file-word[b-t7sgks9wo5] {
    color: #2b579a;
}

.file-item i.fa-file-excel[b-t7sgks9wo5] {
    color: #217346;
}

.file-item i.fa-download[b-t7sgks9wo5] {
    color: #666;
    cursor: pointer;
}

.file-item i.fa-download:hover[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground);
}

/* ACTIONS FOOTER (Inside Details Pane) */
.dp-actions[b-t7sgks9wo5] {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #f8f9fa;
}

.empty-pane[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
    text-align: center;
    padding: 20px;
}

/* ========================================
   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;
}

/* ========================================
   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
   ======================================== */
.request-overview-section[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 16px;
}

.overview-grid[b-t7sgks9wo5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 4px 0;
}

.overview-item[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.overview-label[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.overview-label i[b-t7sgks9wo5] {
    font-size: 11px;
    color: #94a3b8;
}

.overview-value[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

.overview-value.status-highlight[b-t7sgks9wo5] {
    color: #0078d4;
    font-weight: 600;
}

/* ========================================
   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
   ======================================== */
.itinerary-section-enhanced .dp-section-title[b-t7sgks9wo5] {
    margin-bottom: 12px;
}

.leg-card-enhanced[b-t7sgks9wo5] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.leg-card-enhanced:hover[b-t7sgks9wo5] {
    border-color: #94a3b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.leg-header-enhanced[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
}

.leg-number[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    background: #0078d4;
    padding: 4px 8px;
    border-radius: 4px;
}

.leg-route[b-t7sgks9wo5] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leg-route i.fa-plane-departure[b-t7sgks9wo5] {
    color: #0078d4;
    font-size: 14px;
}

.route-arrow-mini[b-t7sgks9wo5] {
    font-size: 10px;
    color: #94a3b8;
}

.leg-details-grid[b-t7sgks9wo5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.leg-detail-item[b-t7sgks9wo5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    background: #f8fafc;
    border-radius: 6px;
}

.detail-icon[b-t7sgks9wo5] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.detail-icon i[b-t7sgks9wo5] {
    font-size: 12px;
    color: #64748b;
}

.detail-content[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 500;
    color: #334155;
}

.leg-requirements[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.requirements-label[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.requirement-tag[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.requirement-tag i[b-t7sgks9wo5] {
    font-size: 10px;
}

.requirement-tag.visa[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.requirement-tag.hotel[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #be185d;
    border: 1px solid #f9a8d4;
}

.requirement-tag.transport[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: #0f766e;
    border: 1px solid #5eead4;
}

/* 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;
}
/* /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;
}

/* 1. TOP BAR - One thin row only; guest fields moved into flight form */
.wizard-header-card[b-aui3v7vria] {
    flex: 0 0 auto;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 6px 14px 8px;
    margin: 6px 16px 6px;
    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-card-hint[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.3;
}

.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;
}

/* Create for another: choice (existing user vs guest) - compact, one row with pills */
.traveller-choice-row[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.traveller-choice-row.traveller-choice-inline[b-aui3v7vria] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.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-dropdown-pill[b-aui3v7vria] {
    min-width: 380px;
}

/* Guest traveller INSIDE editor (right panel) - one small row, part of flight form */
.guest-traveller-in-editor[b-aui3v7vria] {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.guest-in-editor-label[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 8px;
}

.guest-in-editor-label .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

.guest-in-editor-fields[b-aui3v7vria] {
    display: grid;
    grid-template-columns: repeat(6, minmax(100px, 1fr));
    gap: 8px 12px;
}

.guest-in-editor-field[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guest-in-editor-field label[b-aui3v7vria] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

.guest-in-editor-field label .required[b-aui3v7vria] {
    color: var(--BEC-colorPaletteRedForeground1);
}

@media (max-width: 1200px) {
    .guest-in-editor-fields[b-aui3v7vria] {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }
}

@media (max-width: 768px) {
    .guest-in-editor-fields[b-aui3v7vria] {
        grid-template-columns: 1fr 1fr;
    }
}

/* 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;
    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;
}

.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;
}

.editor-header[b-aui3v7vria] {
    padding: 8px 18px 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.editor-title[b-aui3v7vria] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.editor-subtitle[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.editor-subtitle[b-aui3v7vria]::before {
    content: "· ";
    margin-right: 2px;
    color: var(--BEC-colorNeutralForeground3);
}

.editor-content[b-aui3v7vria] {
    flex: 1;
    min-height: 0;
    padding: 18px 20px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    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: 18px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .form-grid-row[b-aui3v7vria] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
}

.form-group[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gf-label[b-aui3v7vria] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground3);
}

/* 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);
}

/* Requirements Pills */
.req-pills[b-aui3v7vria] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.req-pill[b-aui3v7vria] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 20px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
}

.req-pill.active[b-aui3v7vria] {
    background: var(--BEC-colorBrandBackgroundAlpha);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandForeground1);
}

/* 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: 16px 32px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    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.6;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--BEC-colorNeutralBackground3);
}

/* 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;
}

/* 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: 400px;
    overflow-y: auto;
}

.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, #f5f5f5);
    --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, #242424);
    --text-secondary: var(--BEC-colorNeutralForeground3, #616161);
    --text-inverse: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);

    /* Brand - GDS uses sky blue for flight system aesthetic */
    --brand-primary: #0ea5e9;
    /* Sky blue - GDS flight theme */
    --brand-secondary: #3b82f6;
    /* Blue accent */

    /* Borders - mapped to BEC theme */
    --border-color: var(--BEC-colorNeutralStroke1, #d1d1d1);
    --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: 60px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
}

.topbar-title[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.topbar-title .vendor-greeting[b-nva36r8d3x] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.topbar-title .vendor-portal-title[b-nva36r8d3x] {
    font-size: 13px;
    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: var(--brand-primary, #0ea5e9);
    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: 600px;
    margin: 0 40px;
    position: relative;
}

/* 4. WORKSPACE / GRID AREA - Maximize vertical space */
.workspace-area[b-nva36r8d3x] {
    flex: 1;
    padding: 16px 20px;
    overflow: 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: hidden;
}

.flight-board-container[b-nva36r8d3x] {
    background: var(--bg-surface);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Board Header */
.board-header[b-nva36r8d3x] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    flex-shrink: 0;
}

.filter-tabs[b-nva36r8d3x] {
    display: flex;
    gap: 4px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 6px;
}

/* Custom Tab Styling using ::deep for SfTab override if needed, or custom buttons */
.filter-tab-btn[b-nva36r8d3x] {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background: none;
    transition: all 0.2s;
}

.filter-tab-btn.active[b-nva36r8d3x] {
    background: white;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* ============================================================================
   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: #f8fafc !important;
    color: var(--text-secondary) !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 16px !important;
}

[b-nva36r8d3x] .e-grid .e-rowcell {
    font-size: 13px;
    color: var(--text-primary);
    padding: 10px 16px !important;
}

[b-nva36r8d3x] .e-grid .e-row:hover .e-rowcell {
    background-color: #f1f5f9 !important;
    cursor: pointer;
}

/* Specific Cell Content Styling */
.cell-pnr[b-nva36r8d3x] {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 13px;
}

.cell-route[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cell-route .code[b-nva36r8d3x] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
}

.cell-route .arrow[b-nva36r8d3x] {
    color: var(--text-secondary);
    font-size: 12px;
}

.cell-trip-type[b-nva36r8d3x] {
    font-size: 11px;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
}

/* Status Badges */
/* ============================================================================
   SOFT SAAS PILL BUTTONS (Option 2) - New Unified Design
   ============================================================================ */
.btn-pill[b-nva36r8d3x] {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 20px;
    /* Full pill shape */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: capitalize;
    /* Friendly text */
    text-decoration: none;
    min-width: 90px;
}

/* 1. PRIMARY (Gradient Blue - e.g. Quote) */
.btn-pill.primary[b-nva36r8d3x] {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: white;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.btn-pill.primary:hover[b-nva36r8d3x] {
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.4);
    transform: translateY(-1px);
}

/* 2. INFO / SECONDARY (Gradient Cyan - e.g. Propose/View) */
.btn-pill.info[b-nva36r8d3x] {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    /* Cyan/Blue Gradient */
    color: white;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.btn-pill.info:hover[b-nva36r8d3x] {
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.4);
    transform: translateY(-1px);
}

/* 3. SUCCESS (Gradient Green - e.g. Upload) */
.btn-pill.success[b-nva36r8d3x] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.btn-pill.success:hover[b-nva36r8d3x] {
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

/* 4. CLOSED / DISABLED (Soft Gray Pill) */
.btn-pill.closed[b-nva36r8d3x] {
    background-color: #f1f5f9;
    color: #64748b;
    box-shadow: none;
    cursor: default;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    /* Subtle border for definition */
}

/* 5. OUTLINE (View / secondary action) */
.btn-pill.outline[b-nva36r8d3x] {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    box-shadow: none;
}

.btn-pill.outline:hover[b-nva36r8d3x] {
    background: rgba(14, 165, 233, 0.08);
    border-color: var(--brand-primary);
}

/* --- BADGES (Soft Pill Style) --- */
.status-badge[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge {
    font-family: var(--font-main);
    /* Friendlier font */
    font-weight: 600;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 12px;
    /* Soft Pill */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.req[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.req {
    background-color: #fee2e2;
    /* Soft Red */
    color: #ef4444;
}

.status-badge.qtd[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.qtd {
    background-color: #e0f2fe;
    /* Soft Blue */
    color: #0284c7;
}

.status-badge.won[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.won {
    background-color: #dcfce7;
    /* Soft Green */
    color: #166534;
}

.status-badge.rejected[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.rejected {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-badge.closed[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.closed {
    background-color: #f1f5f9;
    /* Soft Gray */
    color: #64748b;
}

/* My Quotes: tickets booked by another vendor - muted so vendor knows quote is closed */
.status-text-large.booked[b-nva36r8d3x],
[b-nva36r8d3x] .status-text-large.booked {
    background-color: #f1f5f9;
    color: #64748b;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.status-badge.waiting[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.waiting {
    background-color: #fef9c3;
    /* Soft Yellow */
    color: #a16207;
    border: none;
    /* Removed border */
}

/* ============================================================================
   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.5);
    z-index: 100;
    transition: opacity 0.3s;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.wizard-panel[b-nva36r8d3x] {
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 100%;
    background: var(--bg-surface);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-nva36r8d3x 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

@keyframes slideIn-b-nva36r8d3x {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.wizard-header[b-nva36r8d3x] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.wizard-title h2[b-nva36r8d3x] {
    margin: 0;
    font-size: 16px;
    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: 24px;
    overflow-y: auto;
    background: #f9fafb;
}

.wiz-card[b-nva36r8d3x] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.wiz-label[b-nva36r8d3x] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.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: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    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: 12px;
    margin-bottom: 16px;
}

.stat-card[b-nva36r8d3x] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 60px;
    max-height: 60px;
    overflow: hidden;
}

.stat-card:hover[b-nva36r8d3x] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary);
}

.stat-icon[b-nva36r8d3x] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* Specific Card Colors */
.stat-opportunities .stat-icon[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0284c7;
}

.stat-quotes .stat-icon[b-nva36r8d3x] {
    background: #fef3c7;
    color: #d97706;
}

.stat-wins .stat-icon[b-nva36r8d3x] {
    background: #d1fae5;
    color: #059669;
}

.stat-etickets .stat-icon[b-nva36r8d3x] {
    background: #f3e8ff;
    color: #9333ea;
}

.stat-revenue .stat-icon[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

.stat-content[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.stat-value[b-nva36r8d3x] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-label[b-nva36r8d3x] {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-sub[b-nva36r8d3x] {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-badge.new[b-nva36r8d3x] {
    color: #059669;
    font-weight: 600;
    font-size: 10px;
}

/* Responsive: Stack stats on smaller screens */
@media (max-width: 1400px) {
    .stats-grid[b-nva36r8d3x] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@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: none !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-radius: 6px;
    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: center;
    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;
}

/* ============================================================================
   SEARCH BOX OVERRIDES
   ============================================================================ */
[b-nva36r8d3x] .gds-search-box.e-input-group {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    height: 36px;
    font-family: var(--font-mono);
}

[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] {
    background: #dbeafe;
    color: #2563eb;
}

.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: var(--font-mono);
    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: var(--font-mono);
    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: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

/* Deadline */
.deadline[b-nva36r8d3x] {
    font-family: var(--font-mono);
    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: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.batch-info-grid .info-item .value[b-nva36r8d3x] {
    font-size: 14px;
    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);
}

/* 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(15, 23, 42, 0.6);
    z-index: 1000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    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: 20px 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.slide-panel-header .panel-title[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slide-panel-header .panel-title i[b-nva36r8d3x] {
    font-size: 20px;
    opacity: 0.9;
}

.slide-panel-header .panel-title h2[b-nva36r8d3x] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.slide-panel-header .request-badge[b-nva36r8d3x] {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.slide-panel-header .close-btn[b-nva36r8d3x] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.2s;
}

.slide-panel-header .close-btn:hover[b-nva36r8d3x] {
    background: rgba(255, 255, 255, 0.25);
}

.slide-panel-body[b-nva36r8d3x] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f8fafc;
}

.slide-panel-footer[b-nva36r8d3x] {
    padding: 16px 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    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: 10px;
    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;
}

.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: 8px;
    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: 8px;
}

.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: 18px;
    opacity: 0.9;
}

.slide-panel-title span[b-nva36r8d3x] {
    font-size: 18px;
    font-weight: 600;
}

.slide-panel-title .request-badge[b-nva36r8d3x] {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* 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: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.2s;
}

.slide-panel-close:hover[b-nva36r8d3x] {
    background: rgba(255, 255, 255, 0.25);
}

/* 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
   ============================================================================ */

.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: 12px 16px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
}

.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: rgba(255, 255, 255, 0.2);
    padding: 3px 8px;
    border-radius: 4px;
}

.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;
}

.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: 12px 16px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
}

.quote-leg-view-card .leg-badge[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quote-leg-view-card .leg-class-badge[b-nva36r8d3x] {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 4px;
}

.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: #0ea5e9;
}

.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: 16px 20px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    border-radius: 10px;
    margin-top: 16px;
    color: white;
}

.quote-grand-total .total-label[b-nva36r8d3x] {
    font-size: 16px;
    font-weight: 600;
}

.quote-grand-total .total-amount[b-nva36r8d3x] {
    font-size: 24px;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* 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);
    }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/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-rfrlq6kjvz] {
    position: relative;
    padding: 12px 24px 8px 24px;
    background: var(--BEC-colorNeutralBackground2, #faf9f8);
    border-top: none;
    flex-shrink: 0;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}

/* ===== Input Box — Vertical layout: textarea on top, toolbar row below ===== */
.input-box[b-rfrlq6kjvz] {
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 12px;
    padding: 12px 16px 8px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

/* Focus: no blue border — instead a lifted shadow gives a subtle "pop up" feel */
.input-box:focus-within[b-rfrlq6kjvz] {
    border-color: var(--BEC-colorNeutralBorder1, #e1dfdd);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ===== Textarea (full width, expands up to 10 rows, invisible scrollbar) ===== */
.input-textarea[b-rfrlq6kjvz] {
    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-rfrlq6kjvz]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.input-textarea[b-rfrlq6kjvz] {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.input-textarea:focus[b-rfrlq6kjvz] {
    outline: none;
    border: none;
}

.input-textarea[b-rfrlq6kjvz]::placeholder {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.input-textarea:disabled[b-rfrlq6kjvz] {
    background: transparent;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== Attachment Strip — Horizontal scrollable chips inside input-box ===== */
.attachment-strip[b-rfrlq6kjvz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.attachment-strip[b-rfrlq6kjvz]::-webkit-scrollbar {
    display: none;
}

/* ===== Attachment Chip ===== */
.attachment-chip[b-rfrlq6kjvz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 180px;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    transition: border-color 0.15s ease;
}

.chip-uploading[b-rfrlq6kjvz] {
    opacity: 0.7;
}

.chip-uploaded[b-rfrlq6kjvz] {
    border-color: var(--BEC-colorSuccessBorder1, #107c10);
}

.chip-error[b-rfrlq6kjvz] {
    border-color: var(--BEC-colorErrorBorder1, #a4262c);
    background: var(--BEC-colorErrorBackground1, #fde7e9);
}

.chip-thumb[b-rfrlq6kjvz] {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    object-fit: cover;
}

.chip-icon[b-rfrlq6kjvz] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.chip-name[b-rfrlq6kjvz] {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    max-width: 100px;
}

/* ===== Upload progress bar (thin bar inside chip) ===== */
.chip-progress-bar[b-rfrlq6kjvz] {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--BEC-colorNeutralBackground5, #e1dfdd);
    overflow: hidden;
    flex-shrink: 0;
}

.chip-progress-fill[b-rfrlq6kjvz] {
    height: 100%;
    border-radius: 2px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    transition: width 0.2s ease;
}

/* File size label inside chip */
.chip-size[b-rfrlq6kjvz] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    flex-shrink: 0;
}

.chip-error-text[b-rfrlq6kjvz] {
    color: var(--BEC-colorErrorForeground1, #a4262c);
    font-weight: 700;
    font-size: 12px;
}

.chip-remove[b-rfrlq6kjvz] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    font-size: 10px;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.1s;
}

.chip-remove:hover[b-rfrlq6kjvz] {
    color: var(--BEC-colorErrorForeground1, #a4262c);
}

/* ===== Toolbar Row — Single horizontal line: spacer left, buttons right ===== */
.input-toolbar[b-rfrlq6kjvz] {
    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 — spacer, pushes action buttons to the right */
.toolbar-left[b-rfrlq6kjvz] {
    flex: 1;
}

/* Right side: attach + send on the SAME horizontal row, side by side */
.toolbar-actions[b-rfrlq6kjvz] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== Action Button — Shared circle style for attach & send ===== */
.action-btn[b-rfrlq6kjvz] {
    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-rfrlq6kjvz] {
    opacity: 0.35;
    cursor: not-allowed;
}

.action-btn i[b-rfrlq6kjvz] {
    font-size: 12px;
}

/* ===== Attach Button — No background, gray icon, blue on hover ===== */
.attach-btn[b-rfrlq6kjvz] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #8a8886);
}

.attach-btn:hover:not(:disabled)[b-rfrlq6kjvz] {
    background: transparent;
    color: var(--BEC-colorBrandBackground, #0078d4);
    transform: none;
}

/* ===== Send Button — Brand-colored circle ===== */
.send-btn[b-rfrlq6kjvz] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

.send-btn:hover:not(:disabled)[b-rfrlq6kjvz] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
    transform: scale(1.08);
}

/* ===== Stop Button — Same size as send, dark background with stop icon ===== */
.stop-btn[b-rfrlq6kjvz] {
    background: var(--BEC-colorNeutralForeground2, #424242);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

.stop-btn:hover[b-rfrlq6kjvz] {
    background: var(--BEC-colorErrorForeground1, #d13438);
    transform: scale(1.08);
}

/* ===== Footer (counter + disclaimer) ===== */
.input-footer[b-rfrlq6kjvz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 0 4px;
}

.input-counter[b-rfrlq6kjvz] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.input-disclaimer[b-rfrlq6kjvz] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-align: right;
}

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

.chat-file-hidden[b-rfrlq6kjvz] {
    display: none;
}

/* ===== Drop-Zone Overlay ===== */
.drop-overlay[b-rfrlq6kjvz] {
    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-rfrlq6kjvz] {
    display: flex;
}

.drop-overlay-content[b-rfrlq6kjvz] {
    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-rfrlq6kjvz] {
    font-size: 28px;
}

/* ===== File Counter Badge ===== */
.chip-counter[b-rfrlq6kjvz] {
    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-rfrlq6kjvz] {
    font-size: 11px;
    color: var(--BEC-colorWarningForeground1, #d83b01);
    font-weight: 500;
    white-space: nowrap;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/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-hkd9htrwo9] {
    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. */
.message-list[b-hkd9htrwo9] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}

/* Light visible scrollbar for chat messages */
.message-list[b-hkd9htrwo9]::-webkit-scrollbar {
    width: 5px;
}

.message-list[b-hkd9htrwo9]::-webkit-scrollbar-track {
    background: transparent;
}

.message-list[b-hkd9htrwo9]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}

.message-list[b-hkd9htrwo9] {
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: #c0c0c0 transparent;     /* Firefox */
}

/* ===== Empty State (no session selected) ===== */
.chat-empty[b-hkd9htrwo9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    font-size: 15px;
    padding: 40px;
    text-align: center;
}

.empty-avatar[b-hkd9htrwo9] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-avatar i[b-hkd9htrwo9] {
    font-size: 28px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

/* ===== Welcome Screen (Gemini-style) ===== */
.welcome-container[b-hkd9htrwo9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    animation: welcomeFadeIn-b-hkd9htrwo9 0.4s ease-out;
}

.welcome-greeting[b-hkd9htrwo9] {
    font-size: 28px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.3;
    margin: 0;
    text-align: center;
}

.welcome-subtitle[b-hkd9htrwo9] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    margin: 0 0 24px 0;
    text-align: center;
}

/* ===== Suggested Prompt Chips ===== */
.suggestion-chips[b-hkd9htrwo9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 640px;
}

.suggestion-chip[b-hkd9htrwo9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 20px;
    border: 1px solid var(--BEC-colorNeutralBorder1, #d1d1d1);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 13px;
    font-weight: 450;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    animation: chipFadeIn-b-hkd9htrwo9 0.3s ease-out backwards;
}

.suggestion-chip:nth-child(1)[b-hkd9htrwo9] { animation-delay: 0.05s; }
.suggestion-chip:nth-child(2)[b-hkd9htrwo9] { animation-delay: 0.10s; }
.suggestion-chip:nth-child(3)[b-hkd9htrwo9] { animation-delay: 0.15s; }
.suggestion-chip:nth-child(4)[b-hkd9htrwo9] { animation-delay: 0.20s; }
.suggestion-chip:nth-child(5)[b-hkd9htrwo9] { animation-delay: 0.25s; }
.suggestion-chip:nth-child(6)[b-hkd9htrwo9] { animation-delay: 0.30s; }
.suggestion-chip:nth-child(7)[b-hkd9htrwo9] { animation-delay: 0.35s; }
.suggestion-chip:nth-child(8)[b-hkd9htrwo9] { animation-delay: 0.40s; }

.suggestion-chip:hover:not(:disabled)[b-hkd9htrwo9] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.suggestion-chip:disabled[b-hkd9htrwo9] {
    opacity: 0.4;
    cursor: not-allowed;
}

.suggestion-chip i[b-hkd9htrwo9] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

@keyframes welcomeFadeIn-b-hkd9htrwo9 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chipFadeIn-b-hkd9htrwo9 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Tool Steps Container (Copilot-style — integrated with input box) ===== */
/* Width matches input-box: 760px (input-area max-width) - 48px (24px padding × 2) = 712px */
.tool-steps-container[b-hkd9htrwo9] {
    max-width: 712px;
    width: calc(100% - 48px);
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    flex-shrink: 0;
    animation: toolProgressSlideIn-b-hkd9htrwo9 0.2s ease-out;
    box-sizing: border-box;
    background: var(--BEC-colorNeutralBackground1, #fff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* When tool steps are visible, merge with input-box below (one unified card) */
.chat-panel.has-tool-steps[b-hkd9htrwo9]  .input-area {
    padding-top: 0;
}

.chat-panel.has-tool-steps[b-hkd9htrwo9]  .input-box {
    border-top: none;
    border-radius: 0 0 12px 12px;
}

.tool-steps-header[b-hkd9htrwo9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-radius: 0;
    font-family: inherit;
    transition: background 0.12s ease;
}

.tool-steps-header:hover[b-hkd9htrwo9] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.tool-steps-spinner[b-hkd9htrwo9] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.tool-steps-check[b-hkd9htrwo9] {
    font-size: 14px;
    color: var(--BEC-colorStatusSuccessForeground1, #107c10);
}

.tool-steps-title[b-hkd9htrwo9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    flex-shrink: 0;
}

.tool-steps-current-label[b-hkd9htrwo9] {
    font-size: 13px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    opacity: 0.6;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-steps-chevron[b-hkd9htrwo9] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    transition: transform 0.15s ease;
}

/* ===== Individual Steps ===== */
.tool-steps-list[b-hkd9htrwo9] {
    padding: 0 16px 8px 16px;
    max-height: 200px;
    overflow-y: auto;
}

.tool-step[b-hkd9htrwo9] {
    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-hkd9htrwo9]::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 20px;
    bottom: -4px;
    width: 1px;
    background: var(--BEC-colorNeutralBorder1, #e0e0e0);
}

.tool-step-icon[b-hkd9htrwo9] {
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    z-index: 1;
    margin-top: 2px;
}

.tool-step.completed .tool-step-icon[b-hkd9htrwo9] {
    color: var(--BEC-colorStatusSuccessForeground1, #107c10);
}

.tool-step.active .tool-step-icon[b-hkd9htrwo9] {
    color: #f5a623;
}

.tool-step.pending .tool-step-icon[b-hkd9htrwo9] {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.tool-step.failed .tool-step-icon[b-hkd9htrwo9] {
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.tool-step.pending .tool-step-label[b-hkd9htrwo9] {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.tool-step.failed .tool-step-label[b-hkd9htrwo9] {
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.tool-step-label[b-hkd9htrwo9] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    white-space: normal;
    word-break: break-word;
}

.tool-step.active .tool-step-label[b-hkd9htrwo9] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-weight: 500;
}

@keyframes toolProgressSlideIn-b-hkd9htrwo9 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ERROR BANNER (inline above input — never overlaps) ===== */
.error-banner-strip[b-hkd9htrwo9] {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.agent-error-banner[b-hkd9htrwo9] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--BEC-colorErrorBackground1, #fff0f1);
    color: var(--BEC-colorErrorForeground1, #b91c1c);
    border: 1px solid var(--BEC-colorErrorBorder1, #fecdd3);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.4;
    animation: errorSlideIn-b-hkd9htrwo9 0.25s ease-out;
}

.agent-error-banner i.fa-triangle-exclamation[b-hkd9htrwo9] {
    font-size: 15px;
    color: var(--BEC-colorErrorForeground1, #dc2626);
    flex-shrink: 0;
}

.error-dismiss[b-hkd9htrwo9] {
    background: none;
    border: none;
    color: var(--BEC-colorErrorForeground1, #b91c1c);
    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;
}

.error-dismiss:hover[b-hkd9htrwo9] {
    opacity: 1;
    background: color-mix(in srgb, var(--BEC-colorErrorForeground1, #b91c1c) 8%, transparent);
}

@keyframes errorSlideIn-b-hkd9htrwo9 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== AUTO-APPROVED INFO BANNER (reconnect notification) ===== */
.auto-approved-banner[b-hkd9htrwo9] {
    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-hkd9htrwo9 0.25s ease-out;
}

.auto-approved-banner i.fa-circle-info[b-hkd9htrwo9] {
    font-size: 15px;
    color: var(--BEC-colorWarningForeground1, #f59e0b);
    flex-shrink: 0;
}

.auto-approved-dismiss[b-hkd9htrwo9] {
    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-hkd9htrwo9] {
    opacity: 1;
    background: color-mix(in srgb, var(--BEC-colorWarningForeground1, #8a6d3b) 8%, transparent);
}

/* ===== Orchestration Progress (MODE 3 — above input) ===== */
.orchestration-progress[b-hkd9htrwo9] {
    padding: 12px 16px;
}

.orchestration-progress-header[b-hkd9htrwo9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orchestration-spinner[b-hkd9htrwo9] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    animation: orchestrationSpin-b-hkd9htrwo9 1.5s linear infinite;
}

.orchestration-title[b-hkd9htrwo9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.orchestration-details[b-hkd9htrwo9] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-left: 22px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.orchestration-agents[b-hkd9htrwo9] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orchestration-timer[b-hkd9htrwo9] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@keyframes orchestrationSpin-b-hkd9htrwo9 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Orchestration Completed State ===== */
.orchestration-completed .tool-steps-header[b-hkd9htrwo9] {
    background: var(--BEC-colorStatusSuccessBackground1, #f1faf1);
}

.orchestration-done-icon[b-hkd9htrwo9] {
    font-size: 14px;
    color: var(--BEC-colorStatusSuccessForeground1, #107c10);
}

.orchestration-completed .tool-steps-title[b-hkd9htrwo9] {
    color: var(--BEC-colorStatusSuccessForeground1, #107c10);
}

.orchestration-completed .orchestration-details[b-hkd9htrwo9] {
    padding-left: 38px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/ContentSidePanel.razor.rz.scp.css */
/* =============================================================================
   ContentSidePanel.razor.css — Side Panel + Resizable Divider Styles
   ==============================================================================
   Layout: Panel slides in from the right. A vertical resize handle sits between
   the chat body and the panel, allowing drag-resize.
   All icons are neutral gray. Fluent Design 2 tokens used throughout.
   ============================================================================== */

/* ===== Overlay (subtle dim behind panel in full-screen mode) ===== */
.side-panel-overlay[b-9t1hql30ic] {
    display: none;
}

.side-panel-overlay.full-screen[b-9t1hql30ic] {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 199;
    animation: overlayFadeIn-b-9t1hql30ic 0.2s ease-out;
}

@keyframes overlayFadeIn-b-9t1hql30ic {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Resize Handle (draggable vertical bar) ===== */
.resize-handle[b-9t1hql30ic] {
    width: 6px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.resize-handle:hover[b-9t1hql30ic],
.resize-handle.dragging[b-9t1hql30ic] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

/* Visible grip dots in the center of the handle */
.resize-grip[b-9t1hql30ic] {
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background: var(--BEC-colorNeutralStroke1, #d1d1d1);
    transition: background 0.15s ease, height 0.15s ease;
}

.resize-handle:hover .resize-grip[b-9t1hql30ic],
.resize-handle.dragging .resize-grip[b-9t1hql30ic] {
    background: var(--BEC-colorNeutralForeground3, #616161);
    height: 48px;
}

/* Active dragging state — applied via JS */
.resize-handle.dragging[b-9t1hql30ic] {
    background: var(--BEC-colorBrandBackground2, #eff6fc);
}

.resize-handle.dragging .resize-grip[b-9t1hql30ic] {
    background: var(--BEC-colorBrandForeground1, #0078d4);
}

/* ===== Side Panel Container ===== */
.side-panel[b-9t1hql30ic] {
    display: flex;
    flex-direction: column;
    min-width: 280px;
    max-width: 70%;
    width: 420px; /* default width — overridden by JS resize */
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-left: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    overflow: hidden;
    animation: panelSlideIn-b-9t1hql30ic 0.25s ease-out;
    flex-shrink: 0;
}

.side-panel.full-screen[b-9t1hql30ic] {
    position: fixed;
    inset: 0;
    width: 100% !important;
    max-width: 100%;
    min-width: 100%;
    border-left: none;
    z-index: 200;
    border-radius: 0;
    animation: panelFullScreenIn-b-9t1hql30ic 0.25s ease-out;
}

@keyframes panelSlideIn-b-9t1hql30ic {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes panelFullScreenIn-b-9t1hql30ic {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Toolbar ===== */
.side-panel-toolbar[b-9t1hql30ic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    flex-shrink: 0;
    gap: 8px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
}

.side-panel-title[b-9t1hql30ic] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.side-panel-title-icon[b-9t1hql30ic] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    flex-shrink: 0;
}

.side-panel-title span[b-9t1hql30ic] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Action Buttons (all gray) ===== */
.side-panel-actions[b-9t1hql30ic] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sp-action-btn[b-9t1hql30ic] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.sp-action-btn:hover[b-9t1hql30ic] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.sp-action-btn:active[b-9t1hql30ic] {
    background: var(--BEC-colorNeutralBackground1Pressed, #ebebeb);
}

/* Close button — slightly larger X */
.sp-close-btn[b-9t1hql30ic] {
    font-size: 14px;
}

/* ===== Close Confirmation Bar ===== */
.sp-close-confirm-bar[b-9t1hql30ic] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--BEC-colorStatusWarningBackground1, #fff4ce);
    border-bottom: 1px solid var(--BEC-colorStatusWarningBorder1, #f5d565);
    flex-shrink: 0;
    animation: confirmBarSlide-b-9t1hql30ic 0.15s ease-out;
}

@keyframes confirmBarSlide-b-9t1hql30ic {
    from { opacity: 0; max-height: 0; padding: 0 16px; }
    to { opacity: 1; max-height: 48px; padding: 8px 16px; }
}

.sp-close-confirm-text[b-9t1hql30ic] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-close-confirm-btn[b-9t1hql30ic] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
    font-family: inherit;
}

.sp-close-discard[b-9t1hql30ic] {
    background: var(--BEC-colorStatusDangerBackground1, #fde7e9);
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.sp-close-discard:hover[b-9t1hql30ic] {
    background: var(--BEC-colorStatusDangerBackground2, #f9d0d3);
}

.sp-close-cancel[b-9t1hql30ic] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.sp-close-cancel:hover[b-9t1hql30ic] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

/* ===== Processing Progress Indicator ===== */
.sp-processing-progress[b-9t1hql30ic] {
    padding: 8px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: progressFadeIn-b-9t1hql30ic 0.2s ease-out;
}

@keyframes progressFadeIn-b-9t1hql30ic {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sp-progress-header[b-9t1hql30ic] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-progress-icon[b-9t1hql30ic] {
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.sp-progress-message[b-9t1hql30ic] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-progress-bar-track[b-9t1hql30ic] {
    height: 3px;
    background: var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 2px;
    overflow: hidden;
}

.sp-progress-bar-fill[b-9t1hql30ic] {
    height: 100%;
    background: var(--BEC-colorBrandForeground1, #0078d4);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.sp-progress-detail[b-9t1hql30ic] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    text-align: right;
}

/* ===== Data Tabs (multiple structured payloads) ===== */
.sp-data-tabs[b-9t1hql30ic] {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #E0E0E0);
    background: var(--BEC-colorNeutralBackground2, #FAFAFA);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.sp-data-tabs[b-9t1hql30ic]::-webkit-scrollbar {
    display: none;
}

.sp-data-tab[b-9t1hql30ic] {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground3, #616161);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.sp-data-tab:hover[b-9t1hql30ic] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground1Hover, #F5F5F5);
}

.sp-data-tab.active[b-9t1hql30ic] {
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    border-bottom-color: var(--BEC-colorBrandStroke1, #0F6CBD);
}

/* ===== Content Area ===== */
.side-panel-content[b-9t1hql30ic] {
    flex: 1;
    overflow: auto;
    padding: 20px;
    position: relative;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, sans-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== Table styles inside side panel (wider, more room) ===== */
[b-9t1hql30ic] .side-panel-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-radius: 6px;
    overflow: hidden;
}

[b-9t1hql30ic] .side-panel-content thead {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
}

[b-9t1hql30ic] .side-panel-content thead th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1, #D1D1D1);
    white-space: nowrap;
}

[b-9t1hql30ic] .side-panel-content tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #EEEEEE;
    color: var(--BEC-colorNeutralForeground1, #242424);
    vertical-align: top;
}

[b-9t1hql30ic] .side-panel-content tbody tr:last-child td {
    border-bottom: none;
}

[b-9t1hql30ic] .side-panel-content tbody tr:nth-child(even) {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
}

[b-9t1hql30ic] .side-panel-content tbody tr:hover {
    background: var(--BEC-colorBrandBackground3, #EBF3FC);
    transition: background 0.12s ease;
}

/* ===== Code blocks inside side panel ===== */
[b-9t1hql30ic] .side-panel-content pre {
    background: var(--BEC-colorNeutralBackgroundInverted, #1B1B1F);
    color: var(--BEC-colorNeutralForegroundInverted, #D4D4D8);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;
}

[b-9t1hql30ic] .side-panel-content code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.92em;
}

/* ===== Markdown content in side panel (paragraphs, lists, etc.) ===== */
[b-9t1hql30ic] .side-panel-content p {
    margin: 8px 0;
}

[b-9t1hql30ic] .side-panel-content ul,
[b-9t1hql30ic] .side-panel-content ol {
    padding-left: 24px;
    margin: 8px 0;
}

[b-9t1hql30ic] .side-panel-content li {
    margin: 4px 0;
}

[b-9t1hql30ic] .side-panel-content h1,
[b-9t1hql30ic] .side-panel-content h2,
[b-9t1hql30ic] .side-panel-content h3,
[b-9t1hql30ic] .side-panel-content h4 {
    margin: 16px 0 8px 0;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-9t1hql30ic] .side-panel-content blockquote {
    border-left: 3px solid var(--BEC-colorBrandStroke1, #0078d4);
    padding: 8px 16px;
    margin: 12px 0;
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
    border-radius: 0 6px 6px 0;
}

/* ===== Room Mode — content component handles its own padding ===== */
.side-panel-content.has-room[b-9t1hql30ic] {
    padding: 0;
    overflow: hidden; /* Room component handles its own scrolling */
}

/* ===== Scrollbar (matching chat panel style) ===== */
.side-panel-content[b-9t1hql30ic]::-webkit-scrollbar {
    width: 5px;
}

.side-panel-content[b-9t1hql30ic]::-webkit-scrollbar-track {
    background: transparent;
}

.side-panel-content[b-9t1hql30ic]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}

.side-panel-content[b-9t1hql30ic] {
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 transparent;
}

/* =============================================================================
   Content Editing Controls (Phase B.4)
   ============================================================================== */

/* ===== Edit Controls Group (left of standard toolbar actions) ===== */
.sp-edit-controls[b-9t1hql30ic] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: 8px;
}

/* ===== TOC Dropdown ===== */
.sp-toc-wrapper[b-9t1hql30ic] {
    position: relative;
}

.sp-toc-btn[b-9t1hql30ic] {
    font-size: 12px;
}

.sp-toc-dropdown[b-9t1hql30ic] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    margin-top: 4px;
    animation: tocFadeIn-b-9t1hql30ic 0.15s ease-out;
}

@keyframes tocFadeIn-b-9t1hql30ic {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sp-toc-item[b-9t1hql30ic] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-align: left;
    transition: background 0.12s ease;
}

.sp-toc-item:hover[b-9t1hql30ic] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.sp-toc-item.has-change[b-9t1hql30ic] {
    font-weight: 600;
}

.sp-toc-number[b-9t1hql30ic] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3, #616161);
    flex-shrink: 0;
}

.sp-toc-title[b-9t1hql30ic] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.sp-toc-badge[b-9t1hql30ic] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--BEC-colorBrandForeground1, #0078d4);
    flex-shrink: 0;
}

/* ===== Separator ===== */
.sp-separator[b-9t1hql30ic] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralBorder1, #e1dfdd);
    margin: 0 4px;
}

/* ===== Accept / Reject buttons — colored icons ===== */
.sp-accept-btn[b-9t1hql30ic] {
    color: #107c10;
}

.sp-accept-btn:hover[b-9t1hql30ic] {
    background: rgba(16, 124, 16, 0.08);
    color: #0b5a0b;
}

.sp-reject-btn[b-9t1hql30ic] {
    color: #d13438;
}

.sp-reject-btn:hover[b-9t1hql30ic] {
    background: rgba(209, 52, 56, 0.08);
    color: #a4262c;
}

/* ===== Changes Badge ===== */
.sp-changes-badge[b-9t1hql30ic] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 10px;
    font-weight: 600;
    margin-left: 2px;
}

/* ===== TOC Dropdown Scrollbar ===== */
.sp-toc-dropdown[b-9t1hql30ic]::-webkit-scrollbar {
    width: 4px;
}

.sp-toc-dropdown[b-9t1hql30ic]::-webkit-scrollbar-track {
    background: transparent;
}

.sp-toc-dropdown[b-9t1hql30ic]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 2px;
}

/* ===== ✦ Ask Agent Button ===== */
.sp-ask-agent-btn[b-9t1hql30ic] {
    position: relative;
    font-size: 14px;
}

.sp-ask-agent-icon[b-9t1hql30ic] {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.sp-ask-agent-btn:hover:not(:disabled) .sp-ask-agent-icon[b-9t1hql30ic] {
    transform: scale(1.15);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.sp-ask-agent-btn:disabled[b-9t1hql30ic] {
    opacity: 0.4;
    cursor: default;
}

.sp-pending-badge[b-9t1hql30ic] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--BEC-colorBrandBackground, #0f6cbd);
    color: white;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
    pointer-events: none;
    animation: badgePop-b-9t1hql30ic 0.25s ease-out;
}

@keyframes badgePop-b-9t1hql30ic {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/HumanInputPrompt.razor.rz.scp.css */
/* =============================================================================
   HumanInputPrompt.razor.css — Quick-Pick Overlay (BEC Design System)
   ==============================================================================
   VS Code command-palette-style quick-pick that slides up above the chat input.
   Dark themed, numbered option rows, hover highlight, custom answer input.
   Uses --BEC-* design tokens with fallbacks. Scoped CSS only.
   ============================================================================== */

/* ===== Overlay Container ===== */
.qp-overlay[b-7hjzbey66s] {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    animation: qpSlideUp-b-7hjzbey66s 0.2s ease-out;
    flex-shrink: 0;
}

@keyframes qpSlideUp-b-7hjzbey66s {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Header: question + close ===== */
.qp-header[b-7hjzbey66s] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 10px;
    background: var(--BEC-colorNeutralBackground6, #2d2d2d);
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-bottom: none;
}

.qp-question[b-7hjzbey66s] {
    flex: 1;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightRegular, 400);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForegroundInverted, #e0e0e0);
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}

.qp-close[b-7hjzbey66s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: var(--BEC-colorNeutralForegroundInverted, #999);
    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-7hjzbey66s] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.qp-close:disabled[b-7hjzbey66s] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Options List ===== */
.qp-options[b-7hjzbey66s] {
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground6, #2d2d2d);
    border-left: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-right: 1px solid var(--BEC-colorNeutralBorder3, #444);
}

/* ===== Individual Option Row ===== */
.qp-option[b-7hjzbey66s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--BEC-colorNeutralForegroundInverted, #ccc);
    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: background 0.12s ease;
}

.qp-option:hover:not(:disabled)[b-7hjzbey66s] {
    background: rgba(255, 255, 255, 0.06);
}

.qp-option:disabled[b-7hjzbey66s] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Selected option — brand highlight ===== */
.qp-option.qp-selected[b-7hjzbey66s] {
    background: var(--BEC-colorBrandBackground1, #0078d4);
    color: #fff;
}

.qp-option.qp-selected:hover:not(:disabled)[b-7hjzbey66s] {
    background: var(--BEC-colorBrandBackground1Hover, #006cbe);
}

/* ===== Option Number Badge ===== */
.qp-option-number[b-7hjzbey66s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    flex-shrink: 0;
    color: inherit;
}

.qp-selected .qp-option-number[b-7hjzbey66s] {
    border-color: rgba(255, 255, 255, 0.5);
}

/* ===== Option Content (label + description) ===== */
.qp-option-content[b-7hjzbey66s] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.qp-option-label[b-7hjzbey66s] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    white-space: nowrap;
}

.qp-option-desc[b-7hjzbey66s] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightRegular, 400);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qp-selected .qp-option-desc[b-7hjzbey66s] {
    opacity: 0.9;
}

/* ===== Checkmark on selected ===== */
.qp-option-check[b-7hjzbey66s] {
    font-size: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ===== Custom answer label (italic to distinguish) ===== */
.qp-custom-label[b-7hjzbey66s] {
    font-weight: var(--BEC-fontWeightRegular, 400);
    font-style: italic;
    opacity: 0.7;
}

.qp-selected .qp-custom-label[b-7hjzbey66s] {
    opacity: 1;
}

/* ===== Custom Text Input Area ===== */
.qp-custom-area[b-7hjzbey66s] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 16px 12px;
    background: var(--BEC-colorNeutralBackground6, #2d2d2d);
    border-left: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-right: 1px solid var(--BEC-colorNeutralBorder3, #444);
    animation: qpSlideUp-b-7hjzbey66s 0.15s ease-out;
}

.qp-custom-input[b-7hjzbey66s] {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease;
}

.qp-custom-input:focus[b-7hjzbey66s] {
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.qp-custom-input:disabled[b-7hjzbey66s] {
    opacity: 0.5;
}

.qp-custom-input[b-7hjzbey66s]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* ===== Custom Send Button ===== */
.qp-custom-send[b-7hjzbey66s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 14px;
    color: #ffffff;
    background: var(--BEC-colorBrandBackground1, #0078d4);
    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-7hjzbey66s] {
    background: var(--BEC-colorBrandBackground1Hover, #006cbe);
}

.qp-custom-send:disabled[b-7hjzbey66s] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Bottom rounded border (closes the card) ===== */
.qp-overlay > :last-child[b-7hjzbey66s] {
    border-bottom: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-radius: 0 0 10px 10px;
    padding-bottom: 12px;
}

/* ===== Focus outline suppression (tabindex for keyboard events) ===== */
.qp-overlay:focus[b-7hjzbey66s] {
    outline: none;
}

/* ===== Structured Input: Question Header ===== */
.qp-question-header[b-7hjzbey66s] {
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorBrandForeground1, #4da3ff);
    margin-right: 6px;
    white-space: nowrap;
}

/* ===== Structured Input: Progress Bar ===== */
.qp-progress[b-7hjzbey66s] {
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-left: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-right: 1px solid var(--BEC-colorNeutralBorder3, #444);
    overflow: hidden;
}

.qp-progress-fill[b-7hjzbey66s] {
    height: 100%;
    background: var(--BEC-colorBrandBackground1, #0078d4);
    transition: width 0.3s ease;
}

/* ===== Structured Input: Back Button ===== */
.qp-back-area[b-7hjzbey66s] {
    display: flex;
    padding: 6px 16px;
    background: var(--BEC-colorNeutralBackground6, #2d2d2d);
    border-left: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-right: 1px solid var(--BEC-colorNeutralBorder3, #444);
}

.qp-back-button[b-7hjzbey66s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    color: rgba(255, 255, 255, 0.6);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.qp-back-button:hover:not(:disabled)[b-7hjzbey66s] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}

.qp-back-button:disabled[b-7hjzbey66s] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Confirmation: Summary Text ===== */
.qp-summary[b-7hjzbey66s] {
    padding: 10px 16px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForegroundInverted, #ccc);
    background: var(--BEC-colorNeutralBackground6, #2d2d2d);
    border-left: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-right: 1px solid var(--BEC-colorNeutralBorder3, #444);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}

/* ===== Confirmation: Edit Input (extends .qp-custom-input) ===== */
.qp-edit-input[b-7hjzbey66s] {
    /* Inherits all .qp-custom-input styles; this class exists for specificity */
}

/* ===== Submitting Indicator ===== */
.qp-submitting[b-7hjzbey66s] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    background: var(--BEC-colorNeutralBackground6, #2d2d2d);
    border-left: 1px solid var(--BEC-colorNeutralBorder3, #444);
    border-right: 1px solid var(--BEC-colorNeutralBorder3, #444);
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/InlineCommentInput.razor.rz.scp.css */
/* =============================================================================
   InlineCommentInput.razor.css — Compact inline edit instruction input
   ============================================================================== */

.inline-comment-input[b-sfawhr48qw] {
    position: absolute;
    top: 8px;
    left: 12px;
    right: 12px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    animation: ici-slide-in-b-sfawhr48qw 0.2s ease-out;
}

@keyframes ici-slide-in-b-sfawhr48qw {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Selected Text Context ===== */
.ici-context[b-sfawhr48qw] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-radius: 6px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.4;
}

.ici-quote-icon[b-sfawhr48qw] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-top: 2px;
    flex-shrink: 0;
}

.ici-selected-text[b-sfawhr48qw] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* ===== Instruction Textarea ===== */
.ici-textarea[b-sfawhr48qw] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    outline: none;
    transition: border-color 0.12s ease;
}

.ici-textarea:focus[b-sfawhr48qw] {
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.ici-textarea[b-sfawhr48qw]::placeholder {
    color: var(--BEC-colorNeutralForeground4, #9e9e9e);
}

/* ===== Action Buttons ===== */
.ici-actions[b-sfawhr48qw] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ici-cancel-btn[b-sfawhr48qw] {
    padding: 5px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ici-cancel-btn:hover[b-sfawhr48qw] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.ici-cancel-btn:active[b-sfawhr48qw] {
    background: var(--BEC-colorNeutralBackground1Pressed, #ebebeb);
}

/* ===== Send Button (Brand) ===== */
.ici-send-btn[b-sfawhr48qw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ici-send-btn:hover:not(:disabled)[b-sfawhr48qw] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.ici-send-btn:active:not(:disabled)[b-sfawhr48qw] {
    background: var(--BEC-colorBrandBackgroundPressed, #005a9e);
}

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

.ici-send-btn i[b-sfawhr48qw] {
    font-size: 11px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/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-2526gbn6cr] {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    animation: messageIn-b-2526gbn6cr 0.2s ease-out;
}

@keyframes messageIn-b-2526gbn6cr {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Header Row: avatar + name + time ===== */
.msg-header[b-2526gbn6cr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.msg-avatar[b-2526gbn6cr] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar[b-2526gbn6cr] {
    background: transparent;
}

.user-avatar i[b-2526gbn6cr] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.ai-avatar[b-2526gbn6cr] {
    background: transparent;
}

.ai-avatar i[b-2526gbn6cr] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.msg-sender-name[b-2526gbn6cr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.msg-sender-user[b-2526gbn6cr] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.msg-time[b-2526gbn6cr] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== Body: content with left padding aligned under name ===== */
.msg-body[b-2526gbn6cr] {
    padding-left: 0;
}


/* =============================================================================
   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-2526gbn6cr] {
    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-2526gbn6cr] {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Prevent first/last child extra margin */
[b-2526gbn6cr] .msg-content > *:first-child { margin-top: 0 !important; }
[b-2526gbn6cr] .msg-content > *:last-child  { margin-bottom: 0 !important; }

/* ===== #1 Paragraphs ===== */
[b-2526gbn6cr] .msg-content p {
    margin: 0 0 14px 0;
    line-height: 1.7;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-2526gbn6cr] .msg-content p:last-child {
    margin-bottom: 0;
}

/* ===== #2 Headings (h1–h6) — Gemini-style visual hierarchy ===== */
[b-2526gbn6cr] .msg-content h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 28px 0 14px 0;
    padding: 0 0 10px 0;
    border-bottom: 2px solid var(--BEC-colorBrandForeground1, #0F6CBD);
    letter-spacing: -0.3px;
}

[b-2526gbn6cr] .msg-content h2 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--BEC-colorNeutralForeground1, #1a1a1a);
    margin: 24px 0 10px 0;
    padding: 6px 0 6px 12px;
    border-left: 3px solid var(--BEC-colorBrandForeground1, #0F6CBD);
    border-bottom: none;
    background: linear-gradient(90deg, rgba(15, 108, 189, 0.04) 0%, transparent 100%);
    border-radius: 0 4px 4px 0;
}

[b-2526gbn6cr] .msg-content h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 20px 0 8px 0;
}

[b-2526gbn6cr] .msg-content h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--BEC-colorNeutralForeground3, #616161);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 16px 0 8px 0;
}

[b-2526gbn6cr] .msg-content h5 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin: 16px 0 8px 0;
}

[b-2526gbn6cr] .msg-content h6 {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 12px 0 8px 0;
}

/* ===== #3 Bold — Prominent like Gemini ===== */
[b-2526gbn6cr] .msg-content strong {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1a1a1a);
}

/* ===== #4 Italic ===== */
[b-2526gbn6cr] .msg-content em {
    font-style: italic;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-2526gbn6cr] .msg-content strong em,
[b-2526gbn6cr] .msg-content em strong {
    font-weight: 600;
    font-style: italic;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== #5 Ordered Lists — Enhanced spacing like Gemini ===== */
[b-2526gbn6cr] .msg-content ol {
    margin: 10px 0 14px 0;
    padding-left: 24px;
    padding-inline-start: 24px;
    padding-inline-end: 0;
    list-style-type: decimal;
}

[b-2526gbn6cr] .msg-content ol li {
    margin-bottom: 6px;
    padding-left: 6px;
    line-height: 1.7;
}

[b-2526gbn6cr] .msg-content ol li::marker {
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    font-weight: 600;
    font-size: 13px;
}

/* ===== #6 Unordered Lists — Enhanced spacing like Gemini ===== */
[b-2526gbn6cr] .msg-content ul {
    margin: 10px 0 14px 0;
    padding-left: 22px;
    padding-inline-start: 22px;
    padding-inline-end: 0;
    list-style-type: disc;
}

[b-2526gbn6cr] .msg-content ul li {
    margin-bottom: 6px;
    padding-left: 6px;
    line-height: 1.7;
}

[b-2526gbn6cr] .msg-content ul li::marker {
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    font-size: 10px;
}

/* ===== #7 Nested Lists ===== */
[b-2526gbn6cr] .msg-content ul ul,
[b-2526gbn6cr] .msg-content ol ol,
[b-2526gbn6cr] .msg-content ul ol,
[b-2526gbn6cr] .msg-content ol ul {
    margin: 4px 0 4px 0;
}

/* Bullet progression: disc → circle → square */
[b-2526gbn6cr] .msg-content ul ul          { list-style-type: circle; }
[b-2526gbn6cr] .msg-content ul ul ul       { list-style-type: square; }
[b-2526gbn6cr] .msg-content ul ul ul ul    { list-style-type: disc; }

/* Number progression: decimal → lower-alpha → lower-roman */
[b-2526gbn6cr] .msg-content ol ol          { list-style-type: lower-alpha; }
[b-2526gbn6cr] .msg-content ol ol ol       { list-style-type: lower-roman; }
[b-2526gbn6cr] .msg-content ol ol ol ol    { list-style-type: decimal; }

/* Mixed nesting */
[b-2526gbn6cr] .msg-content ol ul  { list-style-type: disc; }
[b-2526gbn6cr] .msg-content ul ol  { list-style-type: decimal; }
[b-2526gbn6cr] .msg-content ol ul ul { list-style-type: circle; }
[b-2526gbn6cr] .msg-content ul ol ol { list-style-type: lower-alpha; }

/* ===== #8 Tables ===== */
[b-2526gbn6cr] .msg-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-radius: 6px;
    overflow: hidden;
}

[b-2526gbn6cr] .msg-content thead {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
}

[b-2526gbn6cr] .msg-content thead th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    padding: 12px 12px;
    text-align: left;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1, #D1D1D1);
    white-space: normal;
    word-break: break-word;
}

/* Markdig alignment via style="text-align: ..." */
[b-2526gbn6cr] .msg-content th[style*="text-align: center"],
[b-2526gbn6cr] .msg-content td[style*="text-align: center"] {
    text-align: center;
}

[b-2526gbn6cr] .msg-content th[style*="text-align: right"],
[b-2526gbn6cr] .msg-content td[style*="text-align: right"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-2526gbn6cr] .msg-content tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #EEEEEE;
    color: var(--BEC-colorNeutralForeground1, #242424);
    vertical-align: top;
    min-width: 40px;
}

[b-2526gbn6cr] .msg-content tbody tr:last-child td {
    border-bottom: none;
}

[b-2526gbn6cr] .msg-content tbody tr:nth-child(even) {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
}

[b-2526gbn6cr] .msg-content tbody tr:hover {
    background: var(--BEC-colorBrandBackground3, #EBF3FC);
    transition: background 0.12s ease;
}

/* Table scroll wrapper — contains horizontal overflow for wide tables */
[b-2526gbn6cr] .msg-content .table-scroll-wrapper {
    overflow-x: auto;
    margin: 12px 0;
    border-radius: 6px;
    max-width: 100%;
}

[b-2526gbn6cr] .msg-content .table-scroll-wrapper table {
    margin: 0;
}

/* ===== #9 Code Blocks (multi-line) ===== */
[b-2526gbn6cr] .msg-content pre {
    background: var(--BEC-colorNeutralBackgroundInverted, #1B1B1F);
    color: var(--BEC-colorNeutralForegroundInverted, #D4D4D8);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.55;
    padding: 16px;
    margin: 12px 0;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid var(--BEC-colorNeutralBorderInverted, #2D2D30);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
    -moz-tab-size: 4;
    tab-size: 4;
}

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

/* Code block scrollbar */
[b-2526gbn6cr] .msg-content pre::-webkit-scrollbar {
    height: 6px;
}

[b-2526gbn6cr] .msg-content pre::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBorderInverted, #2D2D30);
}

[b-2526gbn6cr] .msg-content pre::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

/* Language label */
[b-2526gbn6cr] .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: 11px;
    font-weight: 500;
    color: #6D6D6D;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
}

/* ===== #10 Inline Code ===== */
[b-2526gbn6cr] .msg-content code {
    background: var(--BEC-colorNeutralBackground4, #F0F0F0);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12.5px;
    padding: 2px 8px;
    border-radius: 4px;
    color: #9D3A5C;
    border: 1px solid #E8E8E8;
    white-space: nowrap;
    word-break: break-all;
}

/* Reset for code inside pre */
[b-2526gbn6cr] .msg-content pre code {
    white-space: pre;
    word-break: normal;
}

/* ===== #11 Blockquotes (with callout variants) ===== */
[b-2526gbn6cr] .msg-content blockquote {
    margin: 12px 0;
    padding: 12px 16px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    background: var(--BEC-colorBrandBackground3, #EBF3FC);
    border-left: 3px solid var(--BEC-colorBrandForeground1, #0F6CBD);
    border-inline-start: 3px solid var(--BEC-colorBrandForeground1, #0F6CBD);
    border-inline-end: none;
    border-radius: 0 4px 4px 0;
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 13.5px;
}

[b-2526gbn6cr] .msg-content blockquote p {
    margin-bottom: 4px;
}

[b-2526gbn6cr] .msg-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Nested blockquotes */
[b-2526gbn6cr] .msg-content blockquote blockquote {
    margin: 8px 0;
    background: rgba(15, 108, 189, 0.06);
    border-left-color: rgba(15, 108, 189, 0.4);
    border-inline-start-color: rgba(15, 108, 189, 0.4);
}

[b-2526gbn6cr] .msg-content blockquote blockquote blockquote {
    background: rgba(15, 108, 189, 0.03);
    border-left-color: rgba(15, 108, 189, 0.25);
    border-inline-start-color: rgba(15, 108, 189, 0.25);
}

/* ===== #12 Links ===== */
[b-2526gbn6cr] .msg-content a {
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
    word-break: break-all;
}

[b-2526gbn6cr] .msg-content a:hover {
    color: var(--BEC-colorBrandForeground2, #115EA3);
    border-bottom-color: var(--BEC-colorBrandForeground2, #115EA3);
}

[b-2526gbn6cr] .msg-content a:active {
    color: var(--BEC-colorBrandBackgroundPressed, #0C5A9E);
}

/* ===== #12b Report Download Links (📄 file.docx) ===== */
[b-2526gbn6cr] .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-2526gbn6cr] .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-2526gbn6cr] .msg-content a.report-download-link:active {
    background: var(--BEC-colorNeutralBackground5, #E0E0E0);
}

/* ===== #13 Horizontal Rules ===== */
[b-2526gbn6cr] .msg-content hr {
    border: none;
    height: 1px;
    background: var(--BEC-colorNeutralBorder1, #E0E0E0);
    margin: 24px 0;
}

/* ===== #14 Task Lists (checkboxes) ===== */
[b-2526gbn6cr] .msg-content ul:has(> li > input[type="checkbox"]) {
    list-style: none;
    padding-left: 4px;
}

[b-2526gbn6cr] .msg-content li:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    margin-bottom: 0;
}

[b-2526gbn6cr] .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-2526gbn6cr] .msg-content li > input[type="checkbox"]:checked {
    background: var(--BEC-colorBrandForeground1, #0F6CBD);
    border-color: var(--BEC-colorBrandForeground1, #0F6CBD);
}

[b-2526gbn6cr] .msg-content li > input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid var(--BEC-colorNeutralForegroundOnBrand, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ===== #15 Strikethrough ===== */
[b-2526gbn6cr] .msg-content del,
[b-2526gbn6cr] .msg-content s {
    text-decoration: line-through;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-decoration-color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== #16 Highlighted Text (==highlight==) ===== */
[b-2526gbn6cr] .msg-content mark {
    background: var(--BEC-colorWarningBackground1, #FFF3CD);
    color: var(--BEC-colorNeutralForeground1, #242424);
    padding: 1px 4px;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ===== #17 Definition Lists ===== */
[b-2526gbn6cr] .msg-content dl {
    margin: 12px 0;
}

[b-2526gbn6cr] .msg-content dt {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin-top: 12px;
    font-size: 14px;
}

[b-2526gbn6cr] .msg-content dt:first-child {
    margin-top: 0;
}

[b-2526gbn6cr] .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-2526gbn6cr] .msg-content .footnote-ref a,
[b-2526gbn6cr] .msg-content sup a[href^="#fn"],
[b-2526gbn6cr] .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-2526gbn6cr] .msg-content .footnotes,
[b-2526gbn6cr] .msg-content section.footnotes,
[b-2526gbn6cr] .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-2526gbn6cr] .msg-content .footnotes ol {
    padding-left: 20px;
    padding-inline-start: 20px;
}

[b-2526gbn6cr] .msg-content .footnotes li {
    margin-bottom: 4px;
}

[b-2526gbn6cr] .msg-content .footnotes li p {
    display: inline;
    margin: 0;
}

[b-2526gbn6cr] .msg-content .footnote-backref,
[b-2526gbn6cr] .msg-content a[href^="#fnref"],
[b-2526gbn6cr] .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-2526gbn6cr] .msg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    display: block;
}

[b-2526gbn6cr] .msg-content img + em,
[b-2526gbn6cr] .msg-content figure figcaption {
    display: block;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-align: center;
    margin-top: 4px;
    font-style: normal;
}

[b-2526gbn6cr] .msg-content figure {
    margin: 12px 0;
}

/* ===== #20 Subscript & Superscript ===== */
[b-2526gbn6cr] .msg-content sub {
    font-size: 0.75em;
    vertical-align: sub;
    line-height: 0;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-2526gbn6cr] .msg-content sup {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

/* ===== #23 Abbreviations (<abbr>) ===== */
[b-2526gbn6cr] .msg-content abbr,
[b-2526gbn6cr] .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-2526gbn6cr] .msg-content abbr[title]:hover {
    text-decoration-color: var(--BEC-colorBrandForeground1, #0F6CBD);
}

/* ===== #24 Emoji ===== */
[b-2526gbn6cr] .msg-content .emoji,
[b-2526gbn6cr] .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-2526gbn6cr] .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-2526gbn6cr] .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-2526gbn6cr] .msg-content td,
[b-2526gbn6cr] .msg-content th {
    overflow-wrap: break-word;
    word-break: break-word;
}

[b-2526gbn6cr] .msg-content a[href*="://"] {
    word-break: break-all;
}

/* ===== #34 Details / Summary (collapsible) ===== */
[b-2526gbn6cr] .msg-content details {
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground2, #FAFAFA);
    overflow: hidden;
}

[b-2526gbn6cr] .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-2526gbn6cr] .msg-content details summary::-webkit-details-marker {
    display: none;
}

[b-2526gbn6cr] .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-2526gbn6cr] .msg-content details[open] summary::before {
    transform: rotate(90deg);
}

[b-2526gbn6cr] .msg-content details summary:hover {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
}

[b-2526gbn6cr] .msg-content details > *:not(summary) {
    padding: 0 16px;
}

[b-2526gbn6cr] .msg-content details > *:not(summary):last-child {
    padding-bottom: 16px;
}

[b-2526gbn6cr] .msg-content details > p:first-of-type {
    padding-top: 4px;
}

/* ===== Defensive: Prevent layout-breaking overflow ===== */
[b-2526gbn6cr] .msg-content * {
    max-width: 100%;
}

[b-2526gbn6cr] .msg-content pre,
[b-2526gbn6cr] .msg-content pre code {
    max-width: none; /* Pre needs to scroll, not wrap */
}

/* Selection color */
[b-2526gbn6cr] .msg-content ::selection {
    background: #D0E5F7;
    color: var(--BEC-colorNeutralForeground1, #242424);
}


/* =============================================================================
   ATTACHMENT & UI COMPONENTS (non-markdown)
   ============================================================================= */

/* ===== Attachment Container (user messages) ===== */
.msg-attachments[b-2526gbn6cr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Wrapper required for Razor compiler (single root per @foreach iteration).
   display:contents makes it invisible to flex layout — children participate directly. */
.msg-att-item[b-2526gbn6cr] {
    display: contents;
}

/* ===== Document Attachment Card (MS ACS pattern: icon + name/size + download) ===== */
.msg-attachment-chip[b-2526gbn6cr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    min-width: 160px;
    max-width: 260px;
}

.msg-attachment-chip:hover[b-2526gbn6cr] {
    background: var(--BEC-colorNeutralBackground1Hover, #eaeaea);
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
}

.msg-att-icon[b-2526gbn6cr] {
    font-size: 18px;
    flex-shrink: 0;
}

.chip-doc .msg-att-icon[b-2526gbn6cr] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

/* File info: name + size stacked vertically */
.msg-att-info[b-2526gbn6cr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.msg-att-name[b-2526gbn6cr] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.msg-att-size[b-2526gbn6cr] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    margin-top: 1px;
}

.msg-att-download[b-2526gbn6cr] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    flex-shrink: 0;
    margin-left: auto;
}

/* ===== Image Attachment Card (inline thumbnail per MS ACS pattern) ===== */
.msg-att-image-card[b-2526gbn6cr] {
    display: flex;
    flex-direction: column;
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.msg-att-image-card:hover[b-2526gbn6cr] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.msg-att-preview[b-2526gbn6cr] {
    max-width: 200px;
    max-height: 150px;
    object-fit: cover;
    display: block;
}

.msg-att-image-name[b-2526gbn6cr] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
}

/* ===== Message Actions (Copy, etc.) — always visible ===== */
.message-actions[b-2526gbn6cr] {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.msg-action-btn[b-2526gbn6cr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: none;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.msg-action-btn:hover[b-2526gbn6cr] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    border-color: var(--BEC-colorNeutralBorder2, #d2d0ce);
}

.msg-action-btn i[b-2526gbn6cr] {
    font-size: 11px;
}

/* ===== Streaming Cursor ===== */
.streaming-cursor[b-2526gbn6cr] {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink-cursor-b-2526gbn6cr 0.8s ease-in-out infinite;
}

@keyframes blink-cursor-b-2526gbn6cr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ===== Processing Status (replaces bouncing dots) ===== */
.msg-processing[b-2526gbn6cr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.msg-processing-icon[b-2526gbn6cr] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.msg-processing-label[b-2526gbn6cr] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* =============================================================================
   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-2526gbn6cr] .msg-assistant .msg-content > p,
[b-2526gbn6cr] .msg-assistant .msg-content > h1,
[b-2526gbn6cr] .msg-assistant .msg-content > h2,
[b-2526gbn6cr] .msg-assistant .msg-content > h3,
[b-2526gbn6cr] .msg-assistant .msg-content > h4,
[b-2526gbn6cr] .msg-assistant .msg-content > h5,
[b-2526gbn6cr] .msg-assistant .msg-content > h6,
[b-2526gbn6cr] .msg-assistant .msg-content > ul,
[b-2526gbn6cr] .msg-assistant .msg-content > ol,
[b-2526gbn6cr] .msg-assistant .msg-content > blockquote,
[b-2526gbn6cr] .msg-assistant .msg-content > table,
[b-2526gbn6cr] .msg-assistant .msg-content > pre,
[b-2526gbn6cr] .msg-assistant .msg-content > hr,
[b-2526gbn6cr] .msg-assistant .msg-content > details {
    animation: contentReveal-b-2526gbn6cr 0.3s ease-out both;
}

@keyframes contentReveal-b-2526gbn6cr {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation delay for sequential blocks (first 8 visible) */
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(1) { animation-delay: 0s; }
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(2) { animation-delay: 0.04s; }
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(3) { animation-delay: 0.08s; }
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(4) { animation-delay: 0.12s; }
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(5) { animation-delay: 0.16s; }
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(6) { animation-delay: 0.2s; }
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(7) { animation-delay: 0.24s; }
[b-2526gbn6cr] .msg-assistant .msg-content > *:nth-child(8) { animation-delay: 0.28s; }

/* Subtle left accent for the entire assistant content area */
.msg-assistant .msg-body[b-2526gbn6cr] {
    padding-left: 2px;
}

/* Enhanced blockquote callout — Gemini-style info/warning boxes */
[b-2526gbn6cr] .msg-content blockquote p:first-child strong {
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* ===== Side Panel Chip ===== */
.side-panel-chip[b-2526gbn6cr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-top: 8px;
    background: var(--side-panel-chip-bg, #F0F4FF);
    border: 1px solid var(--side-panel-chip-border, #C5D4F0);
    border-radius: 8px;
    color: var(--side-panel-chip-text, #1B4F9B);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

.side-panel-chip:focus-visible[b-2526gbn6cr] {
    outline: 2px solid var(--side-panel-chip-text, #1B4F9B);
    outline-offset: 2px;
}

.side-panel-chip:hover[b-2526gbn6cr] {
    background: var(--side-panel-chip-hover-bg, #E0EAFF);
    border-color: var(--side-panel-chip-hover-border, #9BB5E0);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.side-panel-chip i:first-child[b-2526gbn6cr] {
    font-size: 0.9rem;
}

.chip-arrow[b-2526gbn6cr] {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 2px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Rooms/ChartRoom.razor.rz.scp.css */
/* =============================================================================
   ChartRoom.razor.css — Chart Display Room Styles
   ==============================================================================
   PRIMARY: Structured data chart with header (title + source badge).
   LEGACY:  Auto-detected chart with info bar and override buttons.
   ============================================================================== */

/* ===== Room Container — fills parent completely ===== */
.chart-room[b-bx9ci4exi9] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 4px;
}

/* ===== Header: Title + Source Badge (primary structured data path) ===== */
.chart-header[b-bx9ci4exi9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
}

.chart-title[b-bx9ci4exi9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.chart-source[b-bx9ci4exi9] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Legacy Info Bar: AI badge + title + override buttons ===== */
.chart-info-bar[b-bx9ci4exi9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
}

.chart-auto-badge[b-bx9ci4exi9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    flex-shrink: 0;
}

.chart-auto-badge i[b-bx9ci4exi9] {
    font-size: 9px;
}

.chart-title-text[b-bx9ci4exi9] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.chart-override-group[b-bx9ci4exi9] {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.chart-info-bar:hover .chart-override-group[b-bx9ci4exi9] {
    opacity: 1;
}

.chart-override-btn[b-bx9ci4exi9] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.chart-override-btn:hover[b-bx9ci4exi9] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.chart-override-btn.active[b-bx9ci4exi9] {
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

/* ===== SfChart fills remaining space ===== */
[b-bx9ci4exi9] .chart-room .e-chart,
[b-bx9ci4exi9] .chart-room .e-accumulationchart {
    flex: 1;
    min-height: 0;
}

/* ===== Compact padding for side panel context ===== */
[b-bx9ci4exi9] .chart-room .e-chart-svg-container {
    padding: 4px;
}

/* ===== Empty State ===== */
.chart-empty[b-bx9ci4exi9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 13px;
}

.chart-empty i[b-bx9ci4exi9] {
    font-size: 24px;
    opacity: 0.5;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Rooms/DataGridRoom.razor.rz.scp.css */
/* =============================================================================
   DataGridRoom.razor.css — Structured Data Grid Styles
   ==============================================================================
   Design: Enterprise data grid — full height, compact rows, typed columns.
   Uses BEC design tokens throughout. SfGrid overrides tuned for side panel
   context with narrower columns and smaller fonts.
   ============================================================================== */

/* ===== Room Container — fills parent completely ===== */
.datagrid-room[b-84f6q6jdd7] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Compact Toolbar: Title + Source Badge ===== */
.dg-toolbar[b-84f6q6jdd7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #D1D1D1);
    min-height: 32px;
    flex-shrink: 0;
}

.dg-title[b-84f6q6jdd7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-source[b-84f6q6jdd7] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    background: var(--BEC-colorBrandBackground2, #D0E7F8);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Grid — compact, enterprise look ===== */
[b-84f6q6jdd7] .datagrid-room-grid {
    border: none !important;
    font-size: 12px !important;
    flex: 1 1 0%;
    min-height: 0;
}

[b-84f6q6jdd7] .datagrid-room-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5) !important;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1, #D1D1D1) !important;
}

[b-84f6q6jdd7] .datagrid-room-grid .e-headercell {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--BEC-colorNeutralForeground3, #616161) !important;
    padding: 4px 8px !important;
    height: 32px !important;
}

[b-84f6q6jdd7] .datagrid-room-grid .e-rowcell {
    font-size: 12px !important;
    padding: 3px 8px !important;
    color: var(--BEC-colorNeutralForeground1, #242424) !important;
    height: 28px !important;
    line-height: 1.4 !important;
}

/* Alternating rows */
[b-84f6q6jdd7] .datagrid-room-grid .e-altrow {
    background: var(--BEC-colorNeutralBackground3, #FAFAFA) !important;
}

/* Hover */
[b-84f6q6jdd7] .datagrid-room-grid .e-row:hover .e-rowcell {
    background: var(--BEC-colorBrandBackground3, #EBF3FC) !important;
}

/* Selected row */
[b-84f6q6jdd7] .datagrid-room-grid .e-row.e-selectionbackground .e-rowcell,
[b-84f6q6jdd7] .datagrid-room-grid .e-active {
    background: var(--BEC-colorBrandBackground2, #D0E7F8) !important;
}

/* Pager — compact */
[b-84f6q6jdd7] .datagrid-room-grid .e-pager {
    font-size: 11px !important;
    padding: 2px 4px !important;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd) !important;
}

/* Filter popup — compact */
[b-84f6q6jdd7] .datagrid-room-grid .e-filtermenudiv {
    font-size: 12px !important;
}

/* Gridlines */
[b-84f6q6jdd7] .datagrid-room-grid .e-rowcell,
[b-84f6q6jdd7] .datagrid-room-grid .e-headercell {
    border-color: var(--BEC-colorNeutralBorder1, #EEEEEE) !important;
}

/* Remove outer border for seamless blend */
[b-84f6q6jdd7] .datagrid-room-grid.e-grid {
    border: none !important;
}

/* Scrollbar */
[b-84f6q6jdd7] .datagrid-room-grid .e-content::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

[b-84f6q6jdd7] .datagrid-room-grid .e-content::-webkit-scrollbar-track {
    background: transparent;
}

[b-84f6q6jdd7] .datagrid-room-grid .e-content::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}

/* ===== Empty State ===== */
.dg-empty[b-84f6q6jdd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 13px;
}

.dg-empty i[b-84f6q6jdd7] {
    font-size: 24px;
    opacity: 0.5;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Rooms/DocumentRoom.razor.rz.scp.css */
/* =============================================================================
   DocumentRoom.razor.css — SfDocumentEditorContainer Viewer Styles
   ==============================================================================
   Design: Content-first, seamless viewer. The Syncfusion DocumentEditorContainer
   runs in readonly continuous layout — no toolbar, no page breaks, no chrome.
   Content fills the side panel completely with minimal decoration.
   ============================================================================== */

/* ===== Room Container — fills parent completely ===== */
.document-room[b-k228of57fd] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== DocumentEditorContainer — full height, no borders ===== */
[b-k228of57fd] .e-de-ctn {
    height: 100% !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* ===== DocumentEditor — seamless integration ===== */
[b-k228of57fd] .e-documenteditor {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
}

/* ===== Content Area — compact, readable ===== */
[b-k228of57fd] .e-de-doc-content-area {
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
}

/* ===== Page view — no page margins/shadows in continuous mode ===== */
[b-k228of57fd] .e-de-background {
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
}

[b-k228of57fd] .e-de-viewer {
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
}

/* Remove page shadow/border chrome for seamless side panel look */
[b-k228of57fd] .e-de-ctn .e-de-viewer-wrapper {
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
}

/* ===== Typography — match project font system ===== */
[b-k228of57fd] .e-de-ctn .e-documenteditor {
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, sans-serif);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 13px;
    line-height: 1.6;
}

/* ===== Hide status bar — not needed in viewer mode ===== */
[b-k228of57fd] .e-de-status-bar {
    display: none !important;
}

/* ===== Hide properties pane — not needed in viewer mode ===== */
[b-k228of57fd] .e-de-property-section {
    display: none !important;
}

/* ===== Scrollbar — matching project style ===== */
[b-k228of57fd] .e-de-scroll-container::-webkit-scrollbar {
    width: 5px;
}

[b-k228of57fd] .e-de-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

[b-k228of57fd] .e-de-scroll-container::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}

[b-k228of57fd] .e-de-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 transparent;
}

/* ===== Track Changes — use built-in colours with brand alignment ===== */
[b-k228of57fd] .e-de-tc-insert {
    background: rgba(16, 124, 16, 0.06) !important;
}

[b-k228of57fd] .e-de-tc-delete {
    background: rgba(209, 52, 56, 0.04) !important;
}

/* ===== Comment highlight — subtle brand accent ===== */
[b-k228of57fd] .e-de-cmt-highlight {
    background: var(--BEC-colorBrandBackground2, #eff6fc) !important;
}

/* ===== Selection highlight ===== */
[b-k228of57fd] .e-de-selection-highlight {
    background: var(--BEC-colorBrandBackground2, #eff6fc) !important;
    opacity: 0.5;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Rooms/PresentationRoom.razor.rz.scp.css */
/* =============================================================================
   PresentationRoom.razor.css — SfCarousel Slide Viewer Styles
   ==============================================================================
   Design: Presentation-style slide cards rendered via Syncfusion SfCarousel.
   Each slide fills the viewport as a centered card. Navigation via SF carousel
   buttons + indicators. Content uses larger typography — slide-appropriate sizing.
   ============================================================================== */

/* ===== Room Container — fills parent ===== */
.presentation-room[b-590lyt9zwo] {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* ===== SfCarousel Overrides ===== */
[b-590lyt9zwo] .presentation-carousel {
    height: 100% !important;
}

[b-590lyt9zwo] .presentation-carousel .e-carousel-items .e-carousel-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Slide Card — the actual slide surface ===== */
[b-590lyt9zwo] .slide-card {
    width: 100%;
    max-height: 100%;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
    padding: 28px 32px;
    overflow-y: auto;
    overflow-x: hidden;

    /* Slide-appropriate typography */
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1, #242424);

    /* Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke2, #d1d1d1) transparent;
}

[b-590lyt9zwo] .slide-card::-webkit-scrollbar {
    width: 4px;
}

[b-590lyt9zwo] .slide-card::-webkit-scrollbar-track {
    background: transparent;
}

[b-590lyt9zwo] .slide-card::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2, #d1d1d1);
    border-radius: 2px;
}

/* ===== Carousel Navigation Buttons ===== */
[b-590lyt9zwo] .presentation-carousel .e-previous,
[b-590lyt9zwo] .presentation-carousel .e-next {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[b-590lyt9zwo] .presentation-carousel .e-previous:hover,
[b-590lyt9zwo] .presentation-carousel .e-next:hover {
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

/* ===== Carousel Indicators ===== */
[b-590lyt9zwo] .presentation-carousel .e-indicator-bar .e-indicator .e-indicator-btn {
    background: var(--BEC-colorNeutralStroke2, #d1d1d1);
}

[b-590lyt9zwo] .presentation-carousel .e-indicator-bar .e-indicator.e-active .e-indicator-btn {
    background: var(--BEC-colorBrandForeground1, #0078d4);
}

/* ===== Slide Content Typography — larger than doc room ===== */
[b-590lyt9zwo] .slide-h1 {
    font-size: 1.7em;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    line-height: 1.3;
}

[b-590lyt9zwo] .slide-h2 {
    font-size: 1.35em;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 20px 0 10px 0;
    line-height: 1.3;
}

[b-590lyt9zwo] .slide-h3 {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin: 16px 0 8px 0;
    line-height: 1.3;
}

[b-590lyt9zwo] .slide-h4 {
    font-size: 1.0em;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin: 12px 0 6px 0;
    line-height: 1.3;
}

[b-590lyt9zwo] .slide-p {
    margin: 0 0 12px 0;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.7;
}

[b-590lyt9zwo] .slide-list {
    margin: 0 0 12px 0;
    padding-left: 24px;
}

[b-590lyt9zwo] .slide-list li {
    margin: 4px 0;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.6;
}

[b-590lyt9zwo] .slide-quote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 3px solid var(--BEC-colorBrandStroke1, #0078d4);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground2, #424242);
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

[b-590lyt9zwo] .slide-code {
    display: block;
    margin: 12px 0;
    padding: 12px 16px;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 6px;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}

[b-590lyt9zwo] .slide-inline-code {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.9em;
}

/* ===== Empty State ===== */
.presentation-room-empty[b-590lyt9zwo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 13px;
}

.presentation-room-empty i[b-590lyt9zwo] {
    font-size: 24px;
    opacity: 0.5;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Rooms/SpreadsheetRoom.razor.rz.scp.css */
/* =============================================================================
   SpreadsheetRoom.razor.css — Spreadsheet Viewer Styles
   ==============================================================================
   Design: Excel-like, compact layout. The Syncfusion SfGrid is configured with
   full interactivity — sorting, filtering, grouping, resizing, reordering,
   search, and virtual scrolling. Content gets maximum space with minimal padding,
   thin gridlines, and no outer border for seamless panel integration.
   ============================================================================== */

/* ===== Room Container — fills parent completely ===== */
.spreadsheet-room[b-6itgw4ve1o] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Grid — seamless, compact, Excel-like ===== */
[b-6itgw4ve1o] .spreadsheet-room-grid {
    border: none !important;
    font-size: 12px !important;
}

[b-6itgw4ve1o] .spreadsheet-room-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5) !important;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1, #D1D1D1) !important;
}

[b-6itgw4ve1o] .spreadsheet-room-grid .e-headercell {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--BEC-colorNeutralForeground3, #616161) !important;
    padding: 4px 8px !important;
    height: 32px !important;
}

[b-6itgw4ve1o] .spreadsheet-room-grid .e-rowcell {
    font-size: 12px !important;
    padding: 3px 8px !important;
    color: var(--BEC-colorNeutralForeground1, #242424) !important;
    height: 28px !important;
    line-height: 1.4 !important;
}

/* Alternating row colors */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-altrow {
    background: var(--BEC-colorNeutralBackground3, #FAFAFA) !important;
}

/* Hover effect */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-row:hover .e-rowcell {
    background: var(--BEC-colorBrandBackground3, #EBF3FC) !important;
}

/* Selected row */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-row.e-selectionbackground .e-rowcell,
[b-6itgw4ve1o] .spreadsheet-room-grid .e-active {
    background: var(--BEC-colorBrandBackground2, #D0E7F8) !important;
}

/* Grid toolbar (search bar) — compact */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-toolbar {
    min-height: 32px !important;
    padding: 2px 4px !important;
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd) !important;
}

[b-6itgw4ve1o] .spreadsheet-room-grid .e-toolbar .e-input {
    font-size: 12px !important;
    height: 26px !important;
}

/* Group header bar — compact */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-groupdroparea {
    min-height: 28px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3, #616161) !important;
    background: var(--BEC-colorNeutralBackground2, #FAFAFA) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd) !important;
}

/* Filter popup — compact */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-checkboxfilter {
    font-size: 12px !important;
}

/* Gridlines */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-gridlines .e-rowcell,
[b-6itgw4ve1o] .spreadsheet-room-grid .e-gridlines .e-headercell {
    border-color: var(--BEC-colorNeutralBorder1, #EEEEEE) !important;
}

/* Remove outer border for seamless blend */
[b-6itgw4ve1o] .spreadsheet-room-grid.e-grid {
    border: none !important;
}

/* Scrollbar */
[b-6itgw4ve1o] .spreadsheet-room-grid .e-content::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

[b-6itgw4ve1o] .spreadsheet-room-grid .e-content::-webkit-scrollbar-track {
    background: transparent;
}

[b-6itgw4ve1o] .spreadsheet-room-grid .e-content::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}

/* ===== Empty state ===== */
.spreadsheet-room-empty[b-6itgw4ve1o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 13px;
}

.spreadsheet-room-empty i[b-6itgw4ve1o] {
    font-size: 24px;
    opacity: 0.5;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/SelectionTooltip.razor.rz.scp.css */
/* =============================================================================
   SelectionTooltip.razor.css — Floating selection action tooltip
   ============================================================================== */

.selection-tooltip[b-1cnqxqw762] {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);

    /* Animate in */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
}

.selection-tooltip.visible[b-1cnqxqw762] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ===== Text Preview ===== */
.st-preview[b-1cnqxqw762] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    user-select: none;
}

/* ===== Ask Agent Button ===== */
.st-ask-btn[b-1cnqxqw762] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
    line-height: 1.4;
}

.st-ask-btn:hover[b-1cnqxqw762] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.st-ask-btn:active[b-1cnqxqw762] {
    background: var(--BEC-colorBrandBackgroundPressed, #005a9e);
}

.st-ask-btn i[b-1cnqxqw762] {
    font-size: 11px;
}

/* ===== Queue Button ===== */
.st-queue-btn[b-1cnqxqw762] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease;
    line-height: 1.4;
}

.st-queue-btn:hover[b-1cnqxqw762] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke1Hover, #c7c7c7);
}

.st-queue-btn:active[b-1cnqxqw762] {
    background: var(--BEC-colorNeutralBackground1Pressed, #ebebeb);
}

.st-queue-btn i[b-1cnqxqw762] {
    font-size: 11px;
}

/* ===== Dismiss Button ===== */
.st-dismiss-btn[b-1cnqxqw762] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

.st-dismiss-btn:hover[b-1cnqxqw762] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.st-dismiss-btn:active[b-1cnqxqw762] {
    background: var(--BEC-colorNeutralBackground1Pressed, #ebebeb);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/SessionSidebar.razor.rz.scp.css */
/* =============================================================================
   SessionSidebar.razor.css — Redesigned Sidebar Styles (BEC Design System)
   ============================================================================== */

/* ===== Sidebar Container ===== */
.session-sidebar[b-vnbhgyk9cz] {
    width: 260px;
    min-width: 260px;
    background: var(--BEC-colorNeutralBackground1); /* #fff */
    border-right: 1px solid var(--BEC-colorNeutralBorder1); /* #e1dfdd */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Sidebar Header ===== */
.sidebar-header[b-vnbhgyk9cz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
}

.sidebar-title[b-vnbhgyk9cz] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.sidebar-icon-btn[b-vnbhgyk9cz] {
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-icon-btn:hover[b-vnbhgyk9cz] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

/* ===== Search Input ===== */
.sidebar-search[b-vnbhgyk9cz] {
    padding: 8px 12px 8px 12px;
    flex-shrink: 0;
    position: relative;
}

.search-icon[b-vnbhgyk9cz] {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    pointer-events: none;
}

.search-input[b-vnbhgyk9cz] {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    background: var(--BEC-colorNeutralBackground2, #faf9f8);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus[b-vnbhgyk9cz] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #0078d4);
    background: var(--BEC-colorNeutralBackground1, #fff);
}

.search-input[b-vnbhgyk9cz]::placeholder {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

/* ===== Session List ===== */
.session-list[b-vnbhgyk9cz] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}

/* Thin scrollbar for session list */
.session-list[b-vnbhgyk9cz]::-webkit-scrollbar {
    width: 4px;
}

.session-list[b-vnbhgyk9cz]::-webkit-scrollbar-track {
    background: transparent;
}

.session-list[b-vnbhgyk9cz]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 2px;
}

.session-empty[b-vnbhgyk9cz] {
    padding: 40px 20px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    font-size: 13px;
}

/* ===== Date Group ===== */
.session-group[b-vnbhgyk9cz] {
    margin-bottom: 4px;
}

.group-header[b-vnbhgyk9cz] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 8px 4px 8px;
}

/* ===== Session Item ===== */
.session-item[b-vnbhgyk9cz] {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 8px;
    margin: 1px 0;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s ease;
}

.session-item:hover[b-vnbhgyk9cz] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
}

.session-item.active[b-vnbhgyk9cz] {
    background: var(--BEC-colorNeutralBackground3, #edebe9);
}

.session-name[b-vnbhgyk9cz] {
    flex: 1;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1); /* #201f1e */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.session-item.active .session-name[b-vnbhgyk9cz] {
    font-weight: var(--BEC-fontWeightSemibold); /* 600 */
}

/* ===== Three-dot Menu Button ===== */
.session-menu-btn[b-vnbhgyk9cz] {
    background: none;
    border: none;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.1s ease;
}

.session-item:hover .session-menu-btn[b-vnbhgyk9cz],
.session-item.active .session-menu-btn[b-vnbhgyk9cz] {
    opacity: 1;
}

.session-menu-btn:hover[b-vnbhgyk9cz] {
    background: var(--BEC-colorNeutralBackground3); /* #edebe9 */
    color: var(--BEC-colorNeutralForeground1);
}

/* ===== Dropdown Menu ===== */
.session-dropdown[b-vnbhgyk9cz] {
    position: absolute;
    right: 8px;
    top: 36px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 200;
    min-width: 150px;
    padding: 4px;
    animation: dropdownFadeIn-b-vnbhgyk9cz 0.12s ease-out;
}

@keyframes dropdownFadeIn-b-vnbhgyk9cz {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item[b-vnbhgyk9cz] {
    width: 100%;
    background: none;
    border: none;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border-radius: 6px;
    transition: background 0.1s ease;
}

.dropdown-item:hover[b-vnbhgyk9cz] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
}

.dropdown-item i[b-vnbhgyk9cz] {
    width: 14px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground2); /* #605e5c */
    font-size: 11px;
}

.dropdown-danger[b-vnbhgyk9cz] {
    color: var(--BEC-colorErrorForeground1); /* #a80000 */
}

.dropdown-danger i[b-vnbhgyk9cz] {
    color: var(--BEC-colorErrorForeground1);
}

.dropdown-divider[b-vnbhgyk9cz] {
    height: 1px;
    background: var(--BEC-colorNeutralBorder1); /* #e1dfdd */
    margin: 4px 0;
}

/* ===== Delete Confirmation (inline in dropdown) ===== */
.delete-confirm[b-vnbhgyk9cz] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.delete-confirm-title[b-vnbhgyk9cz] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.delete-confirm-actions[b-vnbhgyk9cz] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.delete-confirm-cancel[b-vnbhgyk9cz] {
    height: 30px;
    padding: 0 12px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralBorder2, #d2d0ce);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    transition: background 0.1s ease;
}

.delete-confirm-cancel:hover[b-vnbhgyk9cz] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
}

.delete-confirm-delete[b-vnbhgyk9cz] {
    height: 30px;
    padding: 0 12px;
    background: var(--BEC-colorErrorForeground1, #a80000);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s ease, opacity 0.1s ease;
}

.delete-confirm-delete:hover[b-vnbhgyk9cz] {
    opacity: 0.9;
}

.delete-confirm-delete i[b-vnbhgyk9cz] {
    font-size: 11px;
}

/* ===== Click-away Overlay ===== */
.click-away-overlay[b-vnbhgyk9cz] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

/* ===== Rename Dialog ===== */
.rename-form[b-vnbhgyk9cz] {
    padding: 8px 0;
}

.rename-label[b-vnbhgyk9cz] {
    display: block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold); /* 600 */
    margin-bottom: 8px;
    color: var(--BEC-colorNeutralForeground1);
}

.rename-input[b-vnbhgyk9cz] {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rename-input:focus[b-vnbhgyk9cz] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #0078d4);
}

.rename-footer[b-vnbhgyk9cz] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-cancel[b-vnbhgyk9cz] {
    height: 34px;
    padding: 0 16px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralBorder2, #d2d0ce);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    transition: background 0.1s ease;
}

.btn-cancel:hover[b-vnbhgyk9cz] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
}

.btn-save[b-vnbhgyk9cz] {
    height: 34px;
    padding: 0 16px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.btn-save:hover[b-vnbhgyk9cz] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
}

.btn-save:disabled[b-vnbhgyk9cz] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/ThinkingIndicator.razor.rz.scp.css */
/* =============================================================================
   ThinkingIndicator.razor.css — Compact Thinking Chip + Typewriter Text
   ==============================================================================
   The chip is tiny (~18-22px tall, ~120px wide). Subtle, not competing.
   Thinking text: 12px monospace, muted, 60% width, left border, blinking cursor.
   Typewriter feel: monospace font + blinking ▌ cursor + console-style left border.
   Auto-collapses when streaming ends (before reply appears).
   ============================================================================== */

.thinking-wrapper[b-v2fwtt0yjk] {
    margin: 0 0 6px 0;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    width: 100%;
    box-sizing: border-box;
}

/* ===== Tiny Chip ===== */
.thinking-chip[b-v2fwtt0yjk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.thinking-chip:hover[b-v2fwtt0yjk] {
    background: var(--BEC-colorNeutralBackground3, #edebe9);
}

.thinking-chip.thinking-active[b-v2fwtt0yjk] {
    background: var(--BEC-colorBrandBackground2, #eff6fc);
}

.thinking-icon[b-v2fwtt0yjk] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.thinking-active .thinking-icon[b-v2fwtt0yjk] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.thinking-label[b-v2fwtt0yjk] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.thinking-active .thinking-label[b-v2fwtt0yjk] {
    color: var(--BEC-colorNeutralForeground2); /* #605e5c */
}

.thinking-dots[b-v2fwtt0yjk] {
    animation: dots-anim-b-v2fwtt0yjk 1.5s steps(4, end) infinite;
    display: inline-block;
    width: 12px;
    text-align: left;
    overflow: hidden;
    vertical-align: bottom;
}

@keyframes dots-anim-b-v2fwtt0yjk {
    0% { content: ''; width: 0; }
    25% { width: 4px; }
    50% { width: 8px; }
    75% { width: 12px; }
}

.thinking-chevron[b-v2fwtt0yjk] {
    font-size: 8px;
    color: var(--BEC-colorNeutralForeground3); /* #a19f9d */
    transition: transform 0.15s ease;
}

.thinking-elapsed[b-v2fwtt0yjk] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    margin-left: auto;
}

/* ===== Expanded Thinking Text — Typewriter Style ===== */
.thinking-text[b-v2fwtt0yjk] {
    margin-top: 4px;
    max-width: 100%;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    font-style: italic;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    line-height: 1.4;
    max-height: 168px; /* ~10 lines at 12px * 1.4 line-height */
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: justify;
    border-left: 2px solid var(--BEC-colorNeutralBorder1, #d1d1d1);
    padding-left: 12px;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 transparent;
}

/* ===== Blinking Cursor ===== */
.thinking-cursor[b-v2fwtt0yjk] {
    animation: cursor-blink-b-v2fwtt0yjk 0.8s step-end infinite;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    font-style: normal;
}

@keyframes cursor-blink-b-v2fwtt0yjk {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Thin scrollbar for thinking text */
.thinking-text[b-v2fwtt0yjk]::-webkit-scrollbar {
    width: 5px;
}

.thinking-text[b-v2fwtt0yjk]::-webkit-scrollbar-track {
    background: transparent;
}

.thinking-text[b-v2fwtt0yjk]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}
/* /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: var(--BEC-colorNeutralBackground2); /* #faf9f8 */
    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;
}

/* ===== SIDEBAR COLLAPSE/EXPAND (controlled at parent level) ===== */
[b-kh7xrag7y5] .session-sidebar {
    transition: width 0.2s ease, min-width 0.2s ease, opacity 0.15s ease, 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: 260px;
    min-width: 260px;
    opacity: 1;
}

/* ===== SIDEBAR TOGGLE BUTTON ===== */
.sidebar-toggle-btn[b-kh7xrag7y5] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-toggle-btn:hover[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== 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 */
}

/* When side panel is open (not full-screen), switch to row layout */
.agent-content.has-side-panel[b-kh7xrag7y5] {
    flex-direction: row;
}

/* Chat panel takes remaining space when side panel is open */
.agent-content.has-side-panel[b-kh7xrag7y5]  .chat-panel {
    flex: 1;
    min-width: 300px;
}

/* ===== CONNECTION STATUS INDICATOR ===== */
.connection-status[b-kh7xrag7y5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 450;
    flex-shrink: 0;
    animation: connectionSlideIn-b-kh7xrag7y5 0.2s ease-out;
}

.connection-dot[b-kh7xrag7y5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.connection-label[b-kh7xrag7y5] {
    line-height: 1.3;
}

/* --- Connecting: subtle pulsing blue dot --- */
.connection-status--connecting[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.connection-status--connecting .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandForeground1, #0078d4);
    animation: connectionPulse-b-kh7xrag7y5 1.5s ease-in-out infinite;
}

/* --- Reconnecting: amber/yellow warning --- */
.connection-status--reconnecting[b-kh7xrag7y5] {
    background: var(--BEC-colorWarningBackground1, #fff4ce);
    color: var(--BEC-colorWarningForeground1, #835c00);
}

.connection-status--reconnecting .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorWarningForeground1, #835c00);
    animation: connectionPulse-b-kh7xrag7y5 1.5s ease-in-out infinite;
}

/* --- Disconnected: red warning --- */
.connection-status--disconnected[b-kh7xrag7y5] {
    background: var(--BEC-colorErrorBackground1, #fff0f1);
    color: var(--BEC-colorErrorForeground1, #b91c1c);
}

.connection-status--disconnected .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorErrorForeground1, #b91c1c);
}

@keyframes connectionPulse-b-kh7xrag7y5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes connectionSlideIn-b-kh7xrag7y5 {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 40px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* ===== PLAN RESUME BANNER (floating above error banner) ===== */
.agent-plan-resume-banner[b-kh7xrag7y5] {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    border: 1px solid var(--BEC-colorBrandStroke1, #b4d6fa);
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 120, 212, 0.10);
    z-index: 101;
    max-width: 560px;
    width: max-content;
    animation: planResumeSlideIn-b-kh7xrag7y5 0.3s ease-out;
}

.plan-resume-content[b-kh7xrag7y5] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.plan-resume-icon[b-kh7xrag7y5] {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    flex-shrink: 0;
    margin-top: 2px;
}

.plan-resume-text[b-kh7xrag7y5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.plan-resume-title[b-kh7xrag7y5] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #323130);
    font-size: 13px;
}

.plan-resume-goal[b-kh7xrag7y5] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.plan-resume-steps[b-kh7xrag7y5] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.plan-resume-actions[b-kh7xrag7y5] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.plan-resume-btn[b-kh7xrag7y5] {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease, opacity 0.15s ease;
    font-family: inherit;
}

.plan-resume-primary[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

.plan-resume-primary:hover[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.plan-resume-primary i[b-kh7xrag7y5] {
    font-size: 10px;
}

.plan-resume-secondary[b-kh7xrag7y5] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.plan-resume-secondary:hover[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
}

@keyframes planResumeSlideIn-b-kh7xrag7y5 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* /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/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;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.page-header[b-jm2q7aof1q] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.page-header-icon[b-jm2q7aof1q] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-colorBrandBackgroundPressed) 100%);
    border-radius: var(--BEC-borderRadiusLarge);
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.page-header-content[b-jm2q7aof1q] {
    flex: 1;
}

.page-header-title[b-jm2q7aof1q] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 4px 0;
}

.page-header-subtitle[b-jm2q7aof1q] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Note: Tabs are in parent component (IntranetAdministration.razor) */

/* ========================================
   ACTION TOOLBAR - DEPARTMENT STYLE
   STICKY: Stays below tabs while scrolling
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-jm2q7aof1q] .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-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: 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 */
[b-jm2q7aof1q] .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 */
[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: 10px 20px 0px 20px;
    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
   ======================================== */

/* Sticky Grid Headers */
:global(.e-grid .e-gridheader)[b-jm2q7aof1q] {
    position: sticky !important;
    top: 44px !important;
    z-index: 80 !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    box-shadow: var(--BEC-shadow4) !important;
}

:global(.e-grid .e-headercell)[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground2) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-size: 12px !important;
}

/* Grid Container */
:global(.e-grid)[b-jm2q7aof1q] {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

:global(.e-grid .e-gridcontent)[b-jm2q7aof1q] {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Grid Rows - Compact */
:global(.e-grid .e-row)[b-jm2q7aof1q] {
    font-size: 13px !important;
}

:global(.e-grid .e-row:hover)[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Code Badge in Grid */
:global(.code-badge)[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--BEC-colorSubtleBackground);
    color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

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

:global(.type-internal)[b-jm2q7aof1q] {
    background: var(--BEC-colorSubtleBackground);
    color: var(--BEC-colorBrandForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

:global(.type-external)[b-jm2q7aof1q] {
    background: var(--BEC-colorSubtleBackground);
    color: var(--BEC-colorBrandForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

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

.status-active[b-jm2q7aof1q] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.status-active i[b-jm2q7aof1q] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

.status-inactive[b-jm2q7aof1q] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.status-inactive i[b-jm2q7aof1q] {
    color: var(--BEC-colorPaletteRedForeground2);
}

/* Event Status Badges in Grid */
.event-status-badge[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.event-status-published[b-jm2q7aof1q] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.event-status-draft[b-jm2q7aof1q] {
    background: #fff3cd;
    color: #856404;
}

.event-status-cancelled[b-jm2q7aof1q] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.event-status-completed[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.event-status-ongoing[b-jm2q7aof1q] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.event-status-upcoming[b-jm2q7aof1q] {
    background: var(--BEC-colorSubtleBackground);
    color: var(--BEC-colorBrandForeground1);
}

.event-status-unknown[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* Event Thumbnail in Grid */
.event-thumbnail[b-jm2q7aof1q] {
    width: 50px;
    height: 50px;
    border-radius: var(--BEC-borderRadiusMedium);
    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: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 20px;
}

/* 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;
}

/* ========================================
   PAGE HEADER - STICKY
   ======================================== */
.erp-page-header[b-xh8b5apoh3] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: var(--BEC-shadow4);
}

.header-left[b-xh8b5apoh3] {
    flex: 1;
}

.page-title[b-xh8b5apoh3] {
    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-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-themePrimary);
}

.page-subtitle[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

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

.stats-container[b-xh8b5apoh3] {
    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-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
}

.stat-value[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-themePrimary);
    line-height: 1;
}

.stat-label[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightSemibold);
    letter-spacing: 0.3px;
}

.stat-divider[b-xh8b5apoh3] {
    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
   MATCHES: Events/News/Hero Administration tabs
   ======================================== */

/* Toolbar Container - Rounded Corners with Visible Edges */
[b-xh8b5apoh3] .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-spacingHorizontalL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !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: 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;
    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: 13px !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-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalL);
    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(280px, 1fr));
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalM) 0;
}

.gallery-folder-card[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 2px solid var(--BEC-colorNeutralStroke1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--BEC-shadow2);
}

.gallery-folder-card:hover[b-xh8b5apoh3] {
    transform: translateY(-4px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-themePrimary);
}

.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: var(--BEC-spacingHorizontalS);
    left: var(--BEC-spacingHorizontalS);
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 4px;
    box-shadow: var(--BEC-shadow4);
}

.card-checkbox input[type="checkbox"][b-xh8b5apoh3] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-themePrimary);
}

/* Card Cover Image */
.card-cover[b-xh8b5apoh3] {
    width: 100%;
    height: 200px;
    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: 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: 18px;
    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: 48px;
    opacity: 0.3;
}

/* Status Badge */
.status-badge[b-xh8b5apoh3] {
    position: absolute;
    top: var(--BEC-spacingHorizontalS);
    right: var(--BEC-spacingHorizontalS);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    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: var(--BEC-spacingHorizontalL);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.card-title[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 44px;
    line-height: 1.4;
}

.card-description[b-xh8b5apoh3] {
    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;
    text-overflow: ellipsis;
    min-height: 36px;
}

/* Card Stats */
.card-stats[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    margin-top: auto;
    padding-top: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.stat-item[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.stat-item i[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-themePrimary);
}

/* Card Actions */
.card-actions[b-xh8b5apoh3] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.action-btn[b-xh8b5apoh3] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalS);
    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: var(--BEC-fontSizeBase300);
}

.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
   NO height constraints - allow natural flow
   ======================================== */
.erp-page-container[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER (50% Height Reduction)
   STICKY: Stays at top while scrolling
   ======================================== */
.erp-page-header[b-1ycp8e6kg0] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: var(--BEC-shadow4);
}

.header-left[b-1ycp8e6kg0] {
    flex: 1;
}

.page-title[b-1ycp8e6kg0] {
    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-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-themePrimary);
}

.page-subtitle[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

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

.stats-container[b-1ycp8e6kg0] {
    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-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
}

.stat-value[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-themePrimary);
    line-height: 1;
}

.stat-label[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightSemibold);
    letter-spacing: 0.3px;
}

.stat-divider[b-1ycp8e6kg0] {
    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-1ycp8e6kg0] .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-spacingHorizontalL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !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: 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-1ycp8e6kg0] .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-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;
}

/* Loading Overlay - Unified Pattern */
.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;
}

/* Error Dialog Message */
.modal-content .error-message[b-1ycp8e6kg0] {
    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
   ======================================== */

/* Sticky Grid Headers - Adjusted for smaller toolbar */
:global(.e-grid .e-gridheader)[b-1ycp8e6kg0] {
    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-1ycp8e6kg0] {
    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-1ycp8e6kg0] {
    overflow-x: auto !important; /* Horizontal scroll for wide tables */
}

:global(.e-grid .e-gridcontent)[b-1ycp8e6kg0] {
    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-1ycp8e6kg0] {
    width: 100% !important;
}

/* Code Badge in Grid */
:global(.code-badge)[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-themeLighterAlt);
    color: var(--BEC-themePrimary);
    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-themeLighter);
}

/* Type Badges in Grid (Branch-Specific) */
:global(.type-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-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.type-branch)[b-1ycp8e6kg0] {
    background: var(--BEC-themeLighterAlt);
    color: var(--BEC-themePrimary);
    border: 1px solid var(--BEC-themeLighter);
}

:global(.type-project)[b-1ycp8e6kg0] {
    background: var(--BEC-themeLighterAlt);
    color: var(--BEC-themeSecondary);
    border: 1px solid var(--BEC-themeLighter);
}

/* Status Badges in Grid */
:global(.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-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.status-active)[b-1ycp8e6kg0] {
    background: var(--BEC-successBackground);
    color: var(--BEC-successText);
}

:global(.status-inactive)[b-1ycp8e6kg0] {
    background: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
}

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

:global(.rtl-input)[b-1ycp8e6kg0] {
    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);
}

/* 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;
}

.upload-placeholder[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXXL);
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    gap: var(--BEC-spacingHorizontalM);
}

.upload-placeholder:hover[b-1ycp8e6kg0] {
    border-color: var(--BEC-themePrimary);
    background: var(--BEC-colorNeutralBackground3);
}

.upload-placeholder i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
}

.upload-placeholder p[b-1ycp8e6kg0] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.upload-placeholder 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-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.image-preview[b-1ycp8e6kg0] {
    width: 100%;
    max-width: 100%;
    max-height: 300px;
    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;
    }
}
/* /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;
}
/* /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;
    min-height: 100vh;
    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);
}

/* 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 Icon Centering Fix */
.quick-access-icon[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 48px;
    height: 48px;
    padding: 14px;
}

.quick-access-icon i[b-9qrq7oltca],
.quick-access-icon svg[b-9qrq7oltca] {
    display: block;
    margin: 0 auto;
    line-height: 1;
    width: 16px;
    height: 16px;
}

/* Quick Access Container Improvements */
[b-9qrq7oltca] .quick-access-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-evenly;
    padding: 0.5rem;
}

/* Quick Access Item Spacing */
[b-9qrq7oltca] .quick-access-item {
    padding: 0.5rem;
    min-width: 70px;
    max-width: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    [b-9qrq7oltca] .quick-access-container {
        gap: 1.5rem;
    }

    [b-9qrq7oltca] .quick-access-item {
        min-width: 75px;
        max-width: 90px;
    }

    .quick-access-icon[b-9qrq7oltca] {
        width: 52px;
        height: 52px;
        padding: 16px;
    }

    .quick-access-icon i[b-9qrq7oltca],
    .quick-access-icon svg[b-9qrq7oltca] {
        width: 18px;
        height: 18px;
    }
}

@media (min-width: 1024px) {
    [b-9qrq7oltca] .quick-access-container {
        gap: 2rem;
    }

    [b-9qrq7oltca] .quick-access-item {
        min-width: 80px;
        max-width: 95px;
    }
}


.lucide[b-9qrq7oltca] { stroke-width: 1.5px; }
.shadow-banner[b-9qrq7oltca] { box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }
.progress-75[b-9qrq7oltca] { width: 75%; }

/* Registration progress bar */
.registration-progress-bar[b-9qrq7oltca] { height: 100%; border-radius: 9999px; transition: all var(--BEC-durationSlow, 0.3s) ease; }
.registration-progress-low[b-9qrq7oltca] { background-color: #10b981; }
.registration-progress-medium[b-9qrq7oltca] { background-color: #f59e0b; }
.registration-progress-high[b-9qrq7oltca] { background-color: #ef4444; }

.wizard-panel[b-9qrq7oltca] { box-shadow: 0 10px 40px -5px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05); }
.fullscreen-image-backdrop[b-9qrq7oltca] { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fullscreen-image-content[b-9qrq7oltca] { animation: fadeScale-b-9qrq7oltca .25s ease; }
@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; }
/* News Carousel Styles */
.news-carousel-container[b-9qrq7oltca] {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.news-carousel-wrapper[b-9qrq7oltca] {
    overflow: hidden;
    border-radius: 12px;
    max-width: 100%;
}

.news-carousel-track[b-9qrq7oltca] {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.news-carousel-slide[b-9qrq7oltca] {
    flex: 0 0 auto;
    width: 280px;
    max-width: 280px;
    padding: 0 8px;
    cursor: pointer;
}

/* News Card Styles - Compact Version */
.news-card[b-9qrq7oltca] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card:hover[b-9qrq7oltca] {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.news-card-image-wrapper[b-9qrq7oltca] {
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.news-card-image[b-9qrq7oltca] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-card:hover .news-card-image[b-9qrq7oltca] {
    transform: scale(1.05);
}

.news-card-overlay[b-9qrq7oltca] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-card:hover .news-card-overlay[b-9qrq7oltca] {
    opacity: 1;
}

.news-card-category[b-9qrq7oltca] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}

.news-card-category span[b-9qrq7oltca] {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(59, 130, 246, 0.95);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

.news-card-content[b-9qrq7oltca] {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-card-title[b-9qrq7oltca] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.news-card:hover .news-card-title[b-9qrq7oltca] {
    color: #3b82f6;
}

.news-card-summary[b-9qrq7oltca] {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 8px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-footer[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

.news-card-date[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #9ca3af;
}

.news-card-date svg[b-9qrq7oltca] {
    color: #d1d5db;
    flex-shrink: 0;
}

.news-card-cta[b-9qrq7oltca] {
    font-size: 10px;
    font-weight: 600;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.news-card:hover .news-card-cta[b-9qrq7oltca] {
    color: #2563eb;
    transform: translateX(2px);
}

/* Navigation Buttons */
.news-nav-button[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.news-nav-button:hover[b-9qrq7oltca] {
    background: #f9fafb;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}

.news-nav-button:active[b-9qrq7oltca] {
    transform: scale(0.95);
}

/* Responsive Design */
@media (min-width: 768px) {
    .news-carousel-slide[b-9qrq7oltca] {
        width: 300px;
        max-width: 300px;
    }

    .news-card-title[b-9qrq7oltca] {
        font-size: 14px;
    }

    .news-card-summary[b-9qrq7oltca] {
        font-size: 12px;
    }

    .news-card-content[b-9qrq7oltca] {
        padding: 14px;
    }
}

@media (min-width: 1024px) {
    .news-carousel-slide[b-9qrq7oltca] {
        width: 320px;
        max-width: 320px;
    }
}

/* Gallery Carousel Styles */
.gallery-carousel-container[b-9qrq7oltca] {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 150px;
}

.gallery-carousel-wrapper[b-9qrq7oltca] {
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
}

.gallery-carousel-track[b-9qrq7oltca] {
    display: flex;
    gap: 16px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.gallery-carousel-slide[b-9qrq7oltca] {
    flex: 0 0 auto;
    width: 200px;
    max-width: 200px;
}

.gallery-image-card[b-9qrq7oltca] {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
}

.gallery-image-card:hover[b-9qrq7oltca] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: #3b82f6;
}

.gallery-image[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.gallery-image-card:hover .gallery-image[b-9qrq7oltca] {
    transform: scale(1.08);
}

/* Newsletter Carousel Styles */
.newsletter-carousel-container[b-9qrq7oltca] {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.newsletter-carousel-wrapper[b-9qrq7oltca] {
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
}

.newsletter-carousel-track[b-9qrq7oltca] {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    min-width: 0;
}

.newsletter-carousel-slide[b-9qrq7oltca] {
    flex: 0 0 auto;
    width: calc(25% - 12px);
    max-width: min(calc(25% - 12px), 280px);
    min-width: 0;
    padding: 0 6px;
    cursor: pointer;
    text-decoration: none;
}

/* Newsletter Card Styles - Compact Design */
.newsletter-card[b-9qrq7oltca] {
    display: block;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.newsletter-card:hover[b-9qrq7oltca] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: #3b82f6;
}

.newsletter-image-wrapper[b-9qrq7oltca] {
    position: relative;
    width: 100%;
    padding-top: 52.5%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.newsletter-image[b-9qrq7oltca] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.newsletter-card:hover .newsletter-image[b-9qrq7oltca] {
    transform: scale(1.08);
}

.newsletter-overlay[b-9qrq7oltca] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.newsletter-card:hover .newsletter-overlay[b-9qrq7oltca] {
    opacity: 1;
}

.newsletter-icon[b-9qrq7oltca] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
    background: white;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.newsletter-card:hover .newsletter-icon[b-9qrq7oltca] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.newsletter-content[b-9qrq7oltca] {
    padding: 10px;
}

.newsletter-title[b-9qrq7oltca] {
    font-size: 9px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.newsletter-card:hover .newsletter-title[b-9qrq7oltca] {
    color: #3b82f6;
}

.newsletter-date[b-9qrq7oltca] {
    font-size: 8px;
    color: #6b7280;
    margin-bottom: 7px;
}

.newsletter-cta[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
    font-weight: 600;
    color: #3b82f6;
    padding-top: 7px;
    border-top: 1px solid #f3f4f6;
    transition: all 0.3s ease;
}

.newsletter-card:hover .newsletter-cta[b-9qrq7oltca] {
    color: #2563eb;
}

.newsletter-cta svg[b-9qrq7oltca] {
    transition: transform 0.3s ease;
}

.newsletter-card:hover .newsletter-cta svg[b-9qrq7oltca] {
    transform: translateY(2px);
}

/* Responsive adjustments for newsletters */
@media (max-width: 639px) {
    .newsletter-carousel-slide[b-9qrq7oltca] {
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .newsletter-carousel-slide[b-9qrq7oltca] {
        width: calc(50% - 8px);
        max-width: min(calc(50% - 8px), 320px);
        padding: 0 4px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .newsletter-carousel-slide[b-9qrq7oltca] {
        width: calc(33.333% - 10px);
        max-width: min(calc(33.333% - 10px), 300px);
        padding: 0 5px;
    }

    .newsletter-title[b-9qrq7oltca] {
        font-size: 10px;
    }

    .newsletter-date[b-9qrq7oltca] {
        font-size: 8px;
    }

    .newsletter-cta[b-9qrq7oltca] {
        font-size: 8px;
    }
}

@media (min-width: 1024px) {
    /* Desktop: 4 items per view */
    .newsletter-carousel-slide[b-9qrq7oltca] {
        width: calc(25% - 12px);
        max-width: calc(25% - 12px);
    }

    .newsletter-title[b-9qrq7oltca] {
        font-size: 10px;
    }

    .newsletter-date[b-9qrq7oltca] {
        font-size: 8px;
    }

    .newsletter-cta[b-9qrq7oltca] {
        font-size: 8px;
    }
}

/* 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;
}

/* 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 FOR HEADER OFFSET & HEIGHT --- */
.sidebar-overlay[b-9qrq7oltca],
.overlay-backdrop[b-9qrq7oltca] {
    top: var(--header-height, 60px) !important;
    height: calc(100vh - var(--header-height, 60px)) !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],
.fullscreen-image-content[b-9qrq7oltca] {
    max-height: calc(100vh - var(--header-height, 60px));
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sidebar-backdrop[b-9qrq7oltca] {
    top: var(--header-height, 60px) !important;
    height: calc(100vh - var(--header-height, 60px)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* NEWS & EVENT DETAILS COVER IMAGE HEIGHT REDUCTION */
.sidebar-overlay--z88 .wizard-cover-media[b-9qrq7oltca],
.sidebar-overlay--z87 .wizard-cover-media[b-9qrq7oltca] {
    aspect-ratio: 16 / 5.8 !important;
    max-height: 220px;
}

.sidebar-overlay--z88 .wizard-cover-media + *[b-9qrq7oltca],
.sidebar-overlay--z87 .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 Header */
.wizard-header[b-9qrq7oltca] {
    border-color: var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
}

.wizard-header-icon[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.wizard-header-icon--green[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

.wizard-header-title[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase500);
    line-height: var(--BEC-lineHeightBase500);
}

.wizard-header-subtitle[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

.wizard-close-button[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3);
    background: transparent;
}

.wizard-close-button:hover[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground1);
}

/* Wizard Content */
.wizard-content[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground2);
}

/* Loading Spinner */
.wizard-loading-spinner[b-9qrq7oltca] {
    border-color: var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
}

.wizard-loading-spinner--green[b-9qrq7oltca] {
    border-color: var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-loading-icon[b-9qrq7oltca] {
    color: var(--BEC-colorBrandBackground);
}

.wizard-loading-icon--green[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.wizard-loading-text[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
}

.wizard-loading-subtext[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Error State */
.wizard-error-icon[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteRedBackground2);
}

.wizard-error-icon svg[b-9qrq7oltca] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.wizard-error-title[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.wizard-error-message[b-9qrq7oltca] {
    color: var(--BEC-colorNeutralForeground3);
    max-width: 320px;
}

.wizard-error-button[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.wizard-error-button--green[b-9qrq7oltca] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

/* 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);
}

/* Events List Wizard */
.wizard-events-list-header[b-9qrq7oltca] {
    border-color: var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
}

/* 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 */

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

.intr-w-0[b-9qrq7oltca] {
    width: 0%;
}

/* ========================================
   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: repeat(3, 1fr); }
}

/* --- Profile Card --- */
.profile-card[b-9qrq7oltca] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.profile-card:hover[b-9qrq7oltca] {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.card-glow-wrap[b-9qrq7oltca] {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.3;
    transition: opacity 0.5s ease;
}
.profile-card:hover .card-glow-wrap[b-9qrq7oltca] { opacity: 0.5; }
.card-glow[b-9qrq7oltca] {
    height: 5rem;
    width: 5rem;
    background: linear-gradient(to bottom right, #eff6ff, #faf5ff);
    border-radius: 9999px;
    filter: blur(24px);
    margin-right: -1.5rem;
    margin-top: -1.5rem;
}
.card-body[b-9qrq7oltca] { position: relative; z-index: 10; }
.profile-header[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.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: 600; font-size: 0.75rem; 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] { flex: 1; min-width: 0; }
.user-name[b-9qrq7oltca] {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.025em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-code[b-9qrq7oltca] {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-details[b-9qrq7oltca] { font-size: 10px; }
.profile-details > * + *[b-9qrq7oltca] { margin-top: 0.125rem; }
.detail-row[b-9qrq7oltca] { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0.5rem; }
.detail-label[b-9qrq7oltca] { color: #9ca3af; font-weight: 600; }
.detail-value[b-9qrq7oltca] { color: #374151; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Stat Cards --- */
.stat-cards[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}
@media (min-width: 640px) { .stat-cards[b-9qrq7oltca] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .stat-cards[b-9qrq7oltca] { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .stat-cards[b-9qrq7oltca] { grid-column: span 2; } }

.stat-card[b-9qrq7oltca] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.625rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}
.stat-card:hover[b-9qrq7oltca] { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.stat-card__header[b-9qrq7oltca] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.stat-card__label[b-9qrq7oltca] { font-size: 10px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.025em; }
.stat-icon[b-9qrq7oltca] { height: 1.75rem; width: 1.75rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.stat-icon--blue[b-9qrq7oltca] { background-color: #eff6ff; color: #2563eb; }
.stat-icon--purple[b-9qrq7oltca] { background-color: #faf5ff; color: #9333ea; }
.stat-icon--emerald[b-9qrq7oltca] { background-color: #ecfdf5; color: #059669; }
.stat-card__value[b-9qrq7oltca] { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #111827; letter-spacing: -0.025em; margin-bottom: 0.125rem; }
.stat-card__value--empty[b-9qrq7oltca] { color: #9ca3af; }
.stat-card__sublabel[b-9qrq7oltca] { font-size: 9px; color: #9ca3af; margin-bottom: 0.375rem; }
.stat-progress[b-9qrq7oltca] { width: 100%; background-color: #f3f4f6; height: 0.125rem; border-radius: 9999px; overflow: hidden; }
.stat-progress--mt[b-9qrq7oltca] { margin-top: 0.375rem; }
.stat-progress__fill[b-9qrq7oltca] { height: 100%; border-radius: 9999px; }
.stat-progress__fill--blue[b-9qrq7oltca] { background-color: #3b82f6; }
.stat-progress__fill--purple[b-9qrq7oltca] { background-color: #a855f7; }
.stat-progress__fill--gray[b-9qrq7oltca] { background-color: #d1d5db; }

/* Performance specific */
.perf-score-row[b-9qrq7oltca] { display: flex; align-items: baseline; gap: 0.125rem; margin-bottom: 0.125rem; }
.perf-score__unit[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #9ca3af; font-weight: 600; }
.perf-status[b-9qrq7oltca] { font-size: 9px; font-weight: 600; }
.perf-status--excellent[b-9qrq7oltca] { color: #059669; }
.perf-status--good[b-9qrq7oltca] { color: #2563eb; }
.perf-status--average[b-9qrq7oltca] { color: #d97706; }
.perf-status--poor[b-9qrq7oltca] { color: #dc2626; }
.perf-year[b-9qrq7oltca] { font-size: 9px; color: #9ca3af; margin-top: 0.125rem; }
.perf-noeval[b-9qrq7oltca] { font-size: 9px; color: #9ca3af; font-weight: 500; }

/* Attendance specific */
.attendance-date[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: #111827; margin-bottom: 0.375rem; }
.attendance-date--empty[b-9qrq7oltca] { color: #9ca3af; }
.attendance-grid[b-9qrq7oltca] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem; }
.attendance-cell[b-9qrq7oltca] { background-color: #f9fafb; border-radius: 0.375rem; padding: 0.25rem; }
.attendance-cell__label[b-9qrq7oltca] { font-size: 8px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.125rem; }
.attendance-cell__value[b-9qrq7oltca] { font-size: 10px; font-weight: 600; color: #374151; }
.attendance-cell__value--empty[b-9qrq7oltca] { color: #9ca3af; }

/* --- BEC Connect Card --- */
.connect-card[b-9qrq7oltca] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.625rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
@media (min-width: 768px) { .connect-card[b-9qrq7oltca] { grid-column: span 2; } }
.connect-card:hover[b-9qrq7oltca] { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.connect-glow-wrap[b-9qrq7oltca] { position: absolute; top: 0; right: 0; opacity: 0.4; transition: opacity 0.5s ease; }
.connect-card:hover .connect-glow-wrap[b-9qrq7oltca] { opacity: 0.6; }
.connect-glow[b-9qrq7oltca] {
    height: 6rem; width: 6rem;
    background: linear-gradient(to bottom right, #eef2ff, #eff6ff);
    border-radius: 9999px; filter: blur(24px);
    margin-right: -1.5rem; margin-top: -1.5rem;
}
.connect-body[b-9qrq7oltca] { position: relative; z-index: 10; display: flex; flex-direction: column; height: 100%; }
.connect-header[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; }
.connect-icon[b-9qrq7oltca] { height: 1.75rem; width: 1.75rem; border-radius: 0.375rem; background-color: #eef2ff; display: flex; align-items: center; justify-content: center; color: #4f46e5; }
.connect-title[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #111827; letter-spacing: -0.025em; }
.connect-subtitle[b-9qrq7oltca] { font-size: 8px; color: #6b7280; font-weight: 500; }
.connect-stats[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.connect-stat-box[b-9qrq7oltca] { border-radius: 0.375rem; padding: 0.375rem 0.5rem; flex: 1; }
.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: 8px; 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.125rem; line-height: 1.75rem; font-weight: 700; }
.connect-stat-number--indigo[b-9qrq7oltca] { color: #4338ca; }
.connect-stat-number--purple[b-9qrq7oltca] { color: #7e22ce; }
.connect-stat-sub[b-9qrq7oltca] { font-size: 8px; 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-actions > * + *[b-9qrq7oltca] { margin-top: 0.375rem; }
.connect-btn[b-9qrq7oltca] {
    width: 100%; padding: 0.375rem 0.625rem;
    background-color: #4f46e5; color: white;
    font-size: 10px; font-weight: 600;
    border-radius: 0.375rem; transition: background-color 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;
}
.connect-btn:hover[b-9qrq7oltca] { background-color: #4338ca; }

/* --- Quick Access --- */
.quick-access-panel[b-9qrq7oltca] { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.quick-access-header[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.quick-access-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;
}
.quick-access-title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: -0.025em; color: #111827; }
.quick-access-subtitle[b-9qrq7oltca] { font-size: 10px; color: #6b7280; }
.qa-icon-btn[b-9qrq7oltca] {
    height: 2.75rem; width: 2.75rem; border-radius: 9999px;
    background: white; border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    color: #4b5563; transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.quick-access-item:hover .qa-icon-btn--blue[b-9qrq7oltca] { border-color: #60a5fa; background-color: #eff6ff; color: #2563eb; }
.quick-access-item:hover .qa-icon-btn--purple[b-9qrq7oltca] { border-color: #c084fc; background-color: #faf5ff; color: #9333ea; }
.quick-access-item:hover .qa-icon-btn--amber[b-9qrq7oltca] { border-color: #fbbf24; background-color: #fffbeb; color: #d97706; }
.quick-access-item:hover .qa-icon-btn--cyan[b-9qrq7oltca] { border-color: #22d3ee; background-color: #ecfeff; color: #0891b2; }
.quick-access-item:hover .qa-icon-btn--indigo[b-9qrq7oltca] { border-color: #818cf8; background-color: #eef2ff; color: #4f46e5; }
.quick-access-item:hover .qa-icon-btn--teal[b-9qrq7oltca] { border-color: #2dd4bf; background-color: #f0fdfa; color: #0d9488; }
.quick-access-item:hover .qa-icon-btn--pink[b-9qrq7oltca] { border-color: #f472b6; background-color: #fdf2f8; color: #db2777; }
.qa-label[b-9qrq7oltca] { font-size: 10px; font-weight: 500; color: #4b5563; text-align: center; line-height: 1.25; }
.quick-access-item:hover .qa-label[b-9qrq7oltca] { color: #111827; }
.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;
}
.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; }

/* --- Section Headers --- */
.section-header[b-9qrq7oltca] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.section-header--end[b-9qrq7oltca] { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.section-title[b-9qrq7oltca] { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: #111827; letter-spacing: -0.025em; }
.section-title--xl[b-9qrq7oltca] { font-size: 1.25rem; line-height: 1.75rem; }
.section-subtitle[b-9qrq7oltca] { font-size: 10px; color: #6b7280; margin-top: 0.125rem; }
.section-subtitle--sm[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; }
.section-nav[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; }
.section-nav--lg[b-9qrq7oltca] { gap: 0.75rem; }
.view-all-btn[b-9qrq7oltca] { font-size: 10px; font-weight: 600; color: #2563eb; }
.view-all-btn:hover[b-9qrq7oltca] { color: #1d4ed8; }
.browse-gallery-btn[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: #4b5563; transition: color 0.2s ease; }
.browse-gallery-btn:hover[b-9qrq7oltca] { color: #111827; }
.newsletter-count[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #9ca3af; }

/* --- Section Spacing --- */
.section-mb-10[b-9qrq7oltca] { margin-bottom: 2.5rem; }
.section-mb-16[b-9qrq7oltca] { margin-bottom: 4rem; }

/* --- 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); }
.empty-state--lg[b-9qrq7oltca] { border-radius: 0.75rem; padding: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; }

/* --- Video Section --- */
.video-grid[b-9qrq7oltca] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
@media (min-width: 768px) { .video-grid[b-9qrq7oltca] { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .video-grid[b-9qrq7oltca] { grid-template-columns: repeat(6, 1fr); } }
.video-card[b-9qrq7oltca] { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 0.2s ease; cursor: pointer; }
.video-card:hover[b-9qrq7oltca] { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.video-thumb[b-9qrq7oltca] { width: 100%; aspect-ratio: 16/9; background-color: #111827; position: relative; overflow: hidden; }
.video-thumb__img[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.video-card:hover .video-thumb__img[b-9qrq7oltca] { transform: scale(1.05); }
.video-thumb__video[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; }
.video-thumb__placeholder[b-9qrq7oltca] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #1f2937; }
.video-overlay[b-9qrq7oltca] { position: absolute; inset: 0; background: transparent; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; }
.video-card:hover .video-overlay[b-9qrq7oltca] { background: rgba(0, 0, 0, 0.2); }
.video-play-btn[b-9qrq7oltca] { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.video-card:hover .video-play-btn[b-9qrq7oltca] { opacity: 1; }
.video-play-icon[b-9qrq7oltca] { color: #111827; margin-left: 0.125rem; }
.video-info[b-9qrq7oltca] { padding: 0.5rem; }
.video-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; }
.video-card:hover .video-title[b-9qrq7oltca] { color: #2563eb; }

/* --- Events Section --- */
.events-layout[b-9qrq7oltca] { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1024px) { .events-layout[b-9qrq7oltca] { flex-direction: row; } }
.event-featured[b-9qrq7oltca] { width: 100%; background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
@media (min-width: 1024px) { .event-featured[b-9qrq7oltca] { width: 36%; } }
.event-featured__header[b-9qrq7oltca] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; }
.event-date-badge[b-9qrq7oltca] { width: 3rem; height: 3rem; 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; }
.event-date-badge--sm[b-9qrq7oltca] { width: 2.5rem; height: 2.5rem; }
.event-date-badge--lg[b-9qrq7oltca] { width: 4rem; height: 4rem; }
.event-date-badge__month[b-9qrq7oltca] { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: #dc2626; font-weight: 700; }
.event-date-badge__month--sm[b-9qrq7oltca] { font-size: 8px; color: #6b7280; }
.event-date-badge__day[b-9qrq7oltca] { font-size: 1.125rem; font-weight: 700; color: #111827; line-height: 1; }
.event-date-badge__day--sm[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; }
.event-status-tag[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; }
.event-featured__image[b-9qrq7oltca] { width: 100%; aspect-ratio: 16/9; background-color: #f3f4f6; border-radius: 0.5rem; margin-bottom: 0.75rem; overflow: hidden; }
.event-featured__image img[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; }
.event-featured__content > * + *[b-9qrq7oltca] { margin-top: 0.5rem; }
.event-featured__title[b-9qrq7oltca] { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: #111827; letter-spacing: -0.025em; }
.event-featured__summary[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; }
.event-meta[b-9qrq7oltca] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 11px; color: #6b7280; }
.event-meta__item[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.25rem; }
.event-details-btn[b-9qrq7oltca] { width: 100%; padding: 0.5rem; background-color: #111827; color: white; font-size: 0.75rem; line-height: 1rem; font-weight: 600; border-radius: 0.5rem; transition: background-color 0.2s ease; }
.event-details-btn:hover[b-9qrq7oltca] { background-color: #1f2937; }
.events-list-col[b-9qrq7oltca] { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 1024px) { .events-list-col[b-9qrq7oltca] { width: 64%; } }
.event-list-item[b-9qrq7oltca] { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.625rem; display: flex; gap: 0.625rem; text-align: left; width: 100%; transition: box-shadow 0.2s ease; }
.event-list-item:hover[b-9qrq7oltca] { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.event-list-item__body[b-9qrq7oltca] { flex: 1; display: flex; gap: 0.5rem; }
.event-list-item__thumb[b-9qrq7oltca] { width: 4rem; height: 3rem; border-radius: 0.375rem; overflow: hidden; background-color: #f3f4f6; flex-shrink: 0; }
.event-list-item__thumb img[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; }
.event-list-item__info[b-9qrq7oltca] { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.event-list-item__title[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #111827; }
.event-list-item:hover .event-list-item__title[b-9qrq7oltca] { color: #2563eb; }
.event-list-item__time[b-9qrq7oltca] { font-size: 10px; color: #6b7280; margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- 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-title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #111827; }
.birthday-subtitle[b-9qrq7oltca] { font-size: 10px; color: #6b7280; }
.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; }

/* --- Footer --- */
.footer[b-9qrq7oltca] { margin-top: auto; width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 1rem; }
@media (min-width: 640px) { .footer[b-9qrq7oltca] { padding-left: 1rem; padding-right: 1rem; } }
@media (min-width: 1024px) { .footer[b-9qrq7oltca] { padding-left: 1.5rem; padding-right: 1.5rem; } }
.footer-card[b-9qrq7oltca] { background: white; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.footer-grid[b-9qrq7oltca] { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .footer-grid[b-9qrq7oltca] { grid-template-columns: repeat(3, 1fr); } }
.footer-col > * + *[b-9qrq7oltca] { margin-top: 0.5rem; }
.footer-logo[b-9qrq7oltca] { margin-bottom: 0.5rem; }
.footer-logo img[b-9qrq7oltca] { height: 2rem; }
.footer-heading[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #111827; }
.footer-text[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; line-height: 1.625; }
.footer-links[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; list-style: none; padding: 0; margin: 0; }
.footer-links > * + *[b-9qrq7oltca] { margin-top: 0.25rem; }
.footer-links a:hover[b-9qrq7oltca] { color: #1f2937; }
.footer-contact[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; list-style: none; padding: 0; margin: 0; }
.footer-contact > * + *[b-9qrq7oltca] { margin-top: 0.5rem; }
.footer-contact__item[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; }
.footer-contact__item a:hover[b-9qrq7oltca] { color: #1f2937; }
.footer-contact__ext[b-9qrq7oltca] { color: #9ca3af; }
.footer-contact__icon[b-9qrq7oltca] { color: #2563eb; flex-shrink: 0; }
.footer-social[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.25rem; }
.footer-social__link[b-9qrq7oltca] { height: 1.75rem; width: 1.75rem; border-radius: 9999px; background-color: #1e3a8a; display: flex; align-items: center; justify-content: center; color: white; transition: background-color 0.2s ease; }
.footer-social__link:hover[b-9qrq7oltca] { background-color: #1e40af; }

/* --- Overlays --- */
.overlay-backdrop[b-9qrq7oltca] { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.overlay-container[b-9qrq7oltca] { max-width: 64rem; width: 100%; padding: 1rem; }
.overlay-container--lg[b-9qrq7oltca] { max-width: 72rem; }
.overlay-panel[b-9qrq7oltca] { position: relative; background: black; border-radius: 0.75rem; overflow: hidden; }
.overlay-close-btn[b-9qrq7oltca] { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.5rem; border-radius: 9999px; background: rgba(255,255,255,0.1); color: white; z-index: 10; transition: background-color 0.2s ease; }
.overlay-close-btn:hover[b-9qrq7oltca] { background: rgba(255,255,255,0.2); }
.overlay-image[b-9qrq7oltca] { width: 100%; height: auto; object-fit: contain; max-height: 80vh; }
.overlay-caption[b-9qrq7oltca] { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.6), transparent); padding: 1.5rem; }
.overlay-caption__text[b-9qrq7oltca] { color: white; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-align: center; }
.video-viewer-content[b-9qrq7oltca] { width: 100%; }
.video-viewer__player[b-9qrq7oltca] { width: 100%; height: auto; max-height: 85vh; object-fit: contain; }
.video-viewer__title-bar[b-9qrq7oltca] { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); padding: 1.5rem; }
.video-viewer__title[b-9qrq7oltca] { color: white; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }

/* --- Sidebar Panels --- */
.sidebar-overlay[b-9qrq7oltca] { position: fixed; inset: 0; display: flex; }
.sidebar-overlay--z90[b-9qrq7oltca] { z-index: 90; }
.sidebar-overlay--z85[b-9qrq7oltca] { z-index: 85; }
.sidebar-overlay--z88[b-9qrq7oltca] { z-index: 88; }
.sidebar-overlay--z87[b-9qrq7oltca] { z-index: 87; }
.sidebar-overlay--z89[b-9qrq7oltca] { z-index: 89; }
.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-title[b-9qrq7oltca] { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: #111827; }
.sidebar-subtitle[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; margin-top: 0.125rem; }
.sidebar-close-btn[b-9qrq7oltca] { padding: 0.5rem; border-radius: 9999px; color: #9ca3af; transition: all 0.2s ease; }
.sidebar-close-btn:hover[b-9qrq7oltca] { background-color: #f3f4f6; color: #4b5563; }
.sidebar-filter-bar[b-9qrq7oltca] { padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; overflow-x: auto; }
.sidebar-filter-list[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.5rem; }
.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-video-thumb__media[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.3s ease; }
.sidebar-video-card:hover .sidebar-video-thumb__media[b-9qrq7oltca] { opacity: 0.6; }
.sidebar-video-title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #111827; }
.sidebar-video-card:hover .sidebar-video-title[b-9qrq7oltca] { color: #2563eb; }
.sidebar-video-desc[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; color: #6b7280; margin-top: 0.25rem; }
.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[b-9qrq7oltca] { padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; overflow-x: auto; }
.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; }

/* === Overlay container wide variant === */
.overlay-container--wide[b-9qrq7oltca] { max-width: 72rem; }

/* === 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; }

/* === Event featured sub-elements === */
.event-featured__header[b-9qrq7oltca] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; }

/* === Additional panel variants === */
.sidebar-panel--md[b-9qrq7oltca] { max-width: 48rem; }
.wizard-header__group[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.75rem; }

/* === Video thumb placeholder (main grid) === */
.video-thumb__placeholder[b-9qrq7oltca] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #1f2937; color: #9ca3af; }

/* ============================================================
   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; }
/* /Components/Pages/MainLayout/Intranet/IntranetAdministration.razor.rz.scp.css */
/* ========================================
   LOADING OVERLAY - Full Page Loading State
   ======================================== */
.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: 20px;
    text-align: center;
}

.intranet-admin-spinner[b-d2tntwujpj] {
    position: relative;
    width: 64px;
    height: 64px;
}

.spinner-ring[b-d2tntwujpj] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px 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: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #323130);
    margin: 0;
}

.intranet-admin-loading-subtext[b-d2tntwujpj] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3, #605e5c);
    margin: 0;
}

.content-loading[b-d2tntwujpj] {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.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;
}

:global(.intranet-tabs)[b-d2tntwujpj] {
    background: var(--BEC-colorNeutralBackground1);
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

:global(.intranet-tabs::before)[b-d2tntwujpj],
:global(.intranet-tabs::after)[b-d2tntwujpj] {
    display: none !important;
    content: none !important;
}

/* ========================================
   UNDERLINE TABS - MICROSOFT FLUENT DESIGN
   Always visible above content
   ======================================== */
.tabs-container[b-d2tntwujpj] {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 24px;
    margin: 0;
    list-style: none;
}

.tabs-container[b-d2tntwujpj]::before,
.tabs-container[b-d2tntwujpj]::after {
    display: none !important;
    content: none !important;
}

.tabs-wrapper[b-d2tntwujpj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-button[b-d2tntwujpj] {
    position: relative;
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.tab-button:hover[b-d2tntwujpj] {
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.tab-button.active[b-d2tntwujpj] {
    color: var(--BEC-colorBrandForeground1);
    border-bottom-color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.tab-button:active[b-d2tntwujpj] {
    transform: scale(0.98);
}

.tab-button:disabled[b-d2tntwujpj] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hide Syncfusion-generated tab header */
:global(.intranet-tabs .e-tab-header)[b-d2tntwujpj] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

:global(.intranet-tabs .e-content)[b-d2tntwujpj] {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

:global(.intranet-tabs .e-content .e-item)[b-d2tntwujpj] {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    height: 100%;
    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
   NO height constraints - allow natural flow
   ======================================== */
.erp-page-container[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER (50% Height Reduction)
   STICKY: Stays at top while scrolling
   ======================================== */
.erp-page-header[b-cecy957xxy] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: var(--BEC-shadow4);
}

.header-left[b-cecy957xxy] {
    flex: 1;
}

.page-title[b-cecy957xxy] {
    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-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-themePrimary);
}

.page-subtitle[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

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

.stats-container[b-cecy957xxy] {
    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-cecy957xxy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
}

.stat-value[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-themePrimary);
    line-height: 1;
}

.stat-label[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightSemibold);
    letter-spacing: 0.3px;
}

.stat-divider[b-cecy957xxy] {
    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-cecy957xxy] .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-spacingHorizontalL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !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: 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-cecy957xxy] .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-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;
}

/* Loading Overlay - Unified Pattern */
.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
   ======================================== */

/* Sticky Grid Headers - Adjusted for smaller toolbar */
.e-grid .e-gridheader[b-cecy957xxy] {
    position: sticky !important;
    top: 110px !important;
    z-index: 80 !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    box-shadow: var(--BEC-shadow4) !important;
}

.e-grid .e-headercell[b-cecy957xxy] {
    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 */
.e-grid[b-cecy957xxy] {
    overflow-x: auto !important; /* Horizontal scroll for wide tables */
}

.e-grid .e-gridcontent[b-cecy957xxy] {
    overflow-x: auto !important; /* Horizontal scroll */
    overflow-y: auto !important; /* Vertical scroll for grid content */
}

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

/* Code Badge in Grid */
.code-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-themeLighterAlt);
    color: var(--BEC-themePrimary);
    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-themeLighter);
}

/* Type Badges in Grid (Branch-Specific) */
.type-badge[b-cecy957xxy] {
    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;
}

.type-branch[b-cecy957xxy] {
    background: var(--BEC-themeLighterAlt);
    color: var(--BEC-themePrimary);
    border: 1px solid var(--BEC-themeLighter);
}

.type-project[b-cecy957xxy] {
    background: var(--BEC-themeLighterAlt);
    color: var(--BEC-themeSecondary);
    border: 1px solid var(--BEC-themeLighter);
}

/* Status Badges in Grid */
.status-badge[b-cecy957xxy] {
    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;
}

.status-active[b-cecy957xxy] {
    background: var(--BEC-successBackground);
    color: var(--BEC-successText);
}

.status-inactive[b-cecy957xxy] {
    background: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
}

/* Publish Status Badges in Grid */
.publish-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    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;
}

.publish-published[b-cecy957xxy] {
    background: var(--BEC-successBackground);
    color: var(--BEC-successText);
}

.publish-draft[b-cecy957xxy] {
    background: #fff3cd;
    color: #856404;
}

.publish-expired[b-cecy957xxy] {
    background: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
}

/* ========================================
   GRID IMAGE THUMBNAIL
   ======================================== */
.grid-image-container[b-cecy957xxy] {
    width: 60px;
    height: 60px;
    border-radius: var(--BEC-borderRadiusMedium);
    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: contain;
    object-position: center;
}

.no-image-icon[b-cecy957xxy] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 24px;
}

/* 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
   Based on Design V1
   ======================================== */

/* 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/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%;
    }
}
/* /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/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;
}

/* ========================================
   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);
}

/* ========================================
   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;
}

/* ========================================
   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;
}

/* /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;
}

.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;
}

.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;
}

/* ========================================
   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;
}

/* ========================================
   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;
}
/* /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);
}

/* ========================================
   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;
}

/* ========================================
   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;
}
/* /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);
}

/* ========================================
   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;
    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-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;
}


/* /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);
}

/* ========================================
   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;
    }
}

/* 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;
}

/* /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;
}

/* ✅ 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;
}
/* /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/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;
}
/* /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/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;
    }
}
/* /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;
    }
}
/* /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/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/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;
}

.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;
}

.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;
}

.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;
}
/* /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],
.signup-btn[b-jnowud3r9u],
.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;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-btn[b-jnowud3r9u],
.signup-btn[b-jnowud3r9u],
.login-btn.active[b-jnowud3r9u],
.nav-link.login-btn[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;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* Apply to NavLink + override default link styles */
.nav-link.login-btn[b-jnowud3r9u],
.nav-link.login-btn.active[b-jnowud3r9u],
.login-btn[b-jnowud3r9u],
.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/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;
}