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

/* /Components/Layout/MainLayoutLanding.razor.rz.scp.css */
/* ========================================
   BEC MAIN LAYOUT LANDING STYLES
   ======================================== */

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

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

.bec-landing-header[b-w93n5p3wiu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(15, 23, 42, 0.8);
    /* Dark Slate Glass */
    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;
    /* Adjusted for header */
    width: auto;
}

.bec-landing-auth-buttons[b-w93n5p3wiu] {
    display: flex;
    gap: 32px;
    /* WIDER GAP as requested */
    align-items: center;
}

/* --- BUTTON STYLES (REFINED) --- */

/* 1. Sign In (Text Link) */
.bec-text-link-signin[b-w93n5p3wiu] {
    background: transparent;
    border: none;
    color: #cbd5e1;
    /* Slate 300 */
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    font-family: inherit;
}

.bec-text-link-signin:hover[b-w93n5p3wiu] {
    color: #ffffff;
}

/* 2. Get Started (Dark Pill Button) */
.bec-btn-signup[b-w93n5p3wiu] {
    background: #0f172a;
    /* Slate 900 / Dark Navy */
    color: white;
    padding: 12px 32px;
    border-radius: 9999px;
    /* PILL SHAPE */
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bec-btn-signup:hover[b-w93n5p3wiu] {
    background: #1e293b;
    /* Slightly lighter on hover */
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    color: white;
}

/* ========================================
   MODAL STYLES (Copied & Cleaned)
   ======================================== */

.bec-modal[b-w93n5p3wiu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.bec-modal.active[b-w93n5p3wiu] {
    opacity: 1;
    visibility: visible;
}

.bec-modal-content[b-w93n5p3wiu] {
    background: #ffffff;
    width: 90%;
    max-width: 850px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.bec-modal.active .bec-modal-content[b-w93n5p3wiu] {
    transform: scale(1);
}

/* Modal Inner Layouts */
.bec-login-section[b-w93n5p3wiu] {
    padding: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: white;
}

.bec-welcome-section[b-w93n5p3wiu] {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bec-welcome-section h2[b-w93n5p3wiu] {
    margin-top: 0;
    font-size: 24px;
}

.bec-welcome-section p[b-w93n5p3wiu] {
    opacity: 0.8;
    line-height: 1.6;
}

/* Modal Header */
.bec-modal-header[b-w93n5p3wiu] {
    text-align: center;
    margin-bottom: 24px;
}

.bec-modal-header h2[b-w93n5p3wiu] {
    color: #0f172a;
    margin: 0 0 8px 0;
    font-size: 24px;
}

.bec-modal-header p[b-w93n5p3wiu] {
    color: #64748b;
    margin: 0;
    font-size: 14px;
}

/* Inputs */
.bec-form-group[b-w93n5p3wiu] {
    position: relative;
    margin-bottom: 16px;
}

.bec-form-group i[b-w93n5p3wiu] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.bec-form-group input[b-w93n5p3wiu],
.bec-form-group select[b-w93n5p3wiu] {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.bec-form-group input:focus[b-w93n5p3wiu] {
    outline: none;
    border-color: #2563eb;
}

/* Buttons inside Modal */
.bec-btn-primary[b-w93n5p3wiu] {
    width: 100%;
    padding: 12px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.bec-btn-primary:hover[b-w93n5p3wiu] {
    background: #1d4ed8;
}

.bec-modal-close[b-w93n5p3wiu] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #94a3b8;
}

.bec-microsoft-btn[b-w93n5p3wiu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    color: #475569;
}

.bec-ms-logo[b-w93n5p3wiu] {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

/* Layout - Body wrapper for @Body content */
.bec-landing-body[b-w93n5p3wiu] {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* ========================================
   INLINE ERROR & SUCCESS MESSAGES
   ======================================== */

.bec-inline-error[b-w93n5p3wiu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 16px;
}

.bec-inline-error i[b-w93n5p3wiu] {
    font-size: 16px;
    flex-shrink: 0;
}

.bec-inline-success[b-w93n5p3wiu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #16a34a;
    font-size: 13px;
    margin-bottom: 16px;
}

.bec-inline-success i[b-w93n5p3wiu] {
    font-size: 16px;
    flex-shrink: 0;
}

/* ========================================
   ADDITIONAL FORM STYLES
   ======================================== */

/* Divider */
.bec-divider[b-w93n5p3wiu] {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: #94a3b8;
}

.bec-divider[b-w93n5p3wiu]::before,
.bec-divider[b-w93n5p3wiu]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #e2e8f0;
}

.bec-divider span[b-w93n5p3wiu] {
    padding: 0 12px;
    font-size: 13px;
}

/* Form Options (Remember Me / Forgot Password) */
.bec-form-options[b-w93n5p3wiu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.bec-checkbox-group[b-w93n5p3wiu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bec-checkbox-group input[type="checkbox"][b-w93n5p3wiu] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.bec-checkbox-group label[b-w93n5p3wiu] {
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
}

.bec-text-link[b-w93n5p3wiu] {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.bec-text-link:hover[b-w93n5p3wiu] {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Modal Buttons */
.bec-modal-buttons[b-w93n5p3wiu] {
    margin-top: 8px;
}

.bec-btn-primary:disabled[b-w93n5p3wiu] {
    background: #94a3b8;
    cursor: not-allowed;
}

/* Signup Link */
.bec-signup-link[b-w93n5p3wiu] {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

.bec-signup-link a[b-w93n5p3wiu] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.bec-signup-link a:hover[b-w93n5p3wiu] {
    text-decoration: underline;
}

/* Select Dropdown Styling */
.bec-form-group select[b-w93n5p3wiu] {
    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='%2394a3b8' 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 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.bec-form-group select:focus[b-w93n5p3wiu] {
    outline: none;
    border-color: #2563eb;
}

.bec-form-group select.disabled[b-w93n5p3wiu],
.bec-form-group select:disabled[b-w93n5p3wiu] {
    background-color: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.7;
    color: #94a3b8;
}

.bec-select-group[b-w93n5p3wiu] {
    margin-bottom: 12px;
}

/* Back Link */
.bec-back-link[b-w93n5p3wiu] {
    margin-top: 12px;
    text-align: center;
}

.bec-back-link a[b-w93n5p3wiu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.bec-back-link a:hover[b-w93n5p3wiu] {
    color: #2563eb;
}

.bec-back-link a i[b-w93n5p3wiu] {
    font-size: 12px;
    transition: transform 0.2s;
}

.bec-back-link a:hover i[b-w93n5p3wiu] {
    transform: translateX(-3px);
}

/* ========================================
   SPINNER & LOADING STATES
   ======================================== */

.bec-spinner[b-w93n5p3wiu] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: bec-spin-b-w93n5p3wiu 0.8s linear infinite;
    margin-right: 8px;
}

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

.bec-btn-primary:disabled .bec-spinner[b-w93n5p3wiu] {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* ========================================
   THANK YOU MESSAGE (Signup Success)
   ======================================== */

.bec-thank-you[b-w93n5p3wiu] {
    display: none;
    text-align: center;
    padding: 24px;
    animation: bec-fadeIn-b-w93n5p3wiu 0.5s ease forwards;
}

.bec-thank-you.active[b-w93n5p3wiu] {
    display: block;
}

.bec-success-icon[b-w93n5p3wiu] {
    width: 64px;
    height: 64px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.bec-thank-you h3[b-w93n5p3wiu] {
    color: #0f172a;
    margin: 0 0 8px 0;
    font-size: 20px;
}

.bec-thank-you p[b-w93n5p3wiu] {
    color: #64748b;
    margin: 0 0 16px 0;
}

.bec-next-steps[b-w93n5p3wiu] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    text-align: left;
    margin-top: 16px;
}

.bec-next-steps p[b-w93n5p3wiu] {
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 12px;
}

.bec-next-steps ul[b-w93n5p3wiu] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bec-next-steps li[b-w93n5p3wiu] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 8px;
}

.bec-next-steps li i[b-w93n5p3wiu] {
    color: #22c55e;
}

@keyframes bec-fadeIn-b-w93n5p3wiu {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 992px) {
    .bec-modal-content[b-w93n5p3wiu] {
        grid-template-columns: 1fr;
        max-width: 450px;
    }

    .bec-welcome-section[b-w93n5p3wiu] {
        display: none;
    }

    .bec-login-section[b-w93n5p3wiu] {
        padding: 32px 24px;
    }
}

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

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

    .bec-landing-auth-buttons[b-w93n5p3wiu] {
        gap: 16px;
    }

    .bec-text-link-signin[b-w93n5p3wiu] {
        font-size: 12px;
    }

    .bec-btn-signup[b-w93n5p3wiu] {
        padding: 10px 20px;
        font-size: 12px;
    }

    .bec-modal-content[b-w93n5p3wiu] {
        width: 95%;
        max-width: 400px;
    }

    .bec-login-section[b-w93n5p3wiu] {
        padding: 24px 20px;
    }

    .bec-modal-header h2[b-w93n5p3wiu] {
        font-size: 20px;
    }

    .bec-form-options[b-w93n5p3wiu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .bec-landing-logo img[b-w93n5p3wiu] {
        height: 40px;
    }

    .bec-btn-signup[b-w93n5p3wiu] {
        padding: 8px 16px;
        font-size: 11px;
    }

    .bec-modal-content[b-w93n5p3wiu] {
        width: 95%;
        margin: 0 10px;
    }

    .bec-login-section[b-w93n5p3wiu] {
        padding: 20px 16px;
    }
}
/* /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 0.2s;
    position: relative;
    /* Added for Flyout positioning */
}

.search-box:focus-within[b-16wmqvnqmc] {
    background: 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;
}

/* AI Agent button — subtle accent to distinguish from other icon buttons */
.ai-agent-btn[b-16wmqvnqmc] {
    color: var(--BEC-layoutBrandPrimary, #0078d4);
    transition: color 0.2s ease, transform 0.15s ease;
}

.ai-agent-btn:hover[b-16wmqvnqmc] {
    color: var(--BEC-layoutBrandPrimaryHover, #106ebe);
    transform: scale(1.08);
    background: rgba(0, 120, 212, 0.06);
}

.badge[b-16wmqvnqmc] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--BEC-layoutDangerRed);
    color: 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: #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] {
    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: #ffffff;
    border: 1px solid #f3f3f3;
    border-right: 1px solid #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 0.2s, min-width 0.2s, max-width 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 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 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item:hover[b-16wmqvnqmc] {
    color: #323130;
    background: #fbfbfb;
}

/* FINAL SELECTION: ELEVATED SHADOW */
.nav-item.active[b-16wmqvnqmc] {
    background: transparent;
    color: #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: #8d8b8a;
    text-align: center;
    font-size: 16px;
    transition: all 0.2s;
}

.nav-item:hover .nav-icon[b-16wmqvnqmc] {
    color: #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 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 0.2s ease, color 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;
    overflow-y: auto;
    background: #ffffff;
    /* Pure White */
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.nav-hidden[b-16wmqvnqmc] {
    display: none !important;
}

/* Helper for Blazor integration */
[b-16wmqvnqmc] .erp-page-container {
    padding: 0;
    /* Full Width per request */
    min-height: 100%;
}

/* 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;
    height: 100%;
    overflow: hidden;
}

/* Flyouts */
.context-flyout[b-16wmqvnqmc],
.me-control-flyout[b-16wmqvnqmc] {
    position: absolute;
    top: 50px;
    background: 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: #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: #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);
}

/* GLOBAL BODY OVERRIDE (For Bloom Effect) */
/* GLOBAL BODY OVERRIDE (Pure White per request) */
[b-16wmqvnqmc] body,
[b-16wmqvnqmc] html {
    background-color: #ffffff;
    background-image: none;
    /* Removed gradients for clean white look */
}

/* 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 ================= */
.bg-transparent[b-16wmqvnqmc] {
    background: transparent !important;
}

.badge-warning[b-16wmqvnqmc] {
    background: #ffb900 !important;
    color: black !important;
}

.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, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #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: #ff9800;
}

.birthdate-warning strong[b-16wmqvnqmc] {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: #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 0.2s, box-shadow 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%,
        #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 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: #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);
}
/* /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 */
:root[b-ojw1wynvpj] {
    --primary-blue: #1a5276;
    --success-green: #27ae60;
    --warning-orange: #e67e22;
    --danger-red: #c0392b;
    --info-blue: #3498db;
    --text-dark: #2c3e50;
    --text-muted: #5d6d7e;
    --text-light: #7f8c8d;
    --border-color: #e0e0e0;
    --background-light: #f8f9fa;
}

/* Page Layout */
.approval-page[b-ojw1wynvpj] {
    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 */
:root[b-xg6d2wzy55] {
    --primary-blue: #1a5276;
    --success-green: #27ae60;
    --warning-orange: #e67e22;
    --danger-red: #c0392b;
    --info-blue: #3498db;
    --text-dark: #2c3e50;
    --text-muted: #5d6d7e;
    --text-light: #7f8c8d;
    --border-color: #e0e0e0;
    --background-light: #f8f9fa;
}

/* Page Layout */
.approval-page[b-xg6d2wzy55] {
    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;
}
/* /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);
}
/* /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);
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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);
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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);
}
/* /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);
}
/* /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;
}
/* /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);
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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;
}
/* /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);
    }
}
/* /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;
}
/* /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);
    }
}
/* /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;
    }
}
/* /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;
    }
}
/* /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;
    }
}
/* /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;
    }
}
/* /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);
}
/* /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);
    }
}
/* /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);
    }
}
/* /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);
    }
}
/* /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;
}
/* /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;
}
/* /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/BEC_Assistant_V3/BEC_Assistant_V3.razor.rz.scp.css */
/* Scoped Variables */
.app-container[b-bswc6hpv2l] {
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --primary-gradient: linear-gradient(135deg, #2563eb, #7c3aed);
    --bg-gradient: radial-gradient(circle at 0% 0%, #eef2ff 0%, #f3f4f6 100%);
    --text-main: #1f2937;
    --text-secondary: #6b7280;
    --panel-width: 280px; /* ENTERPRISE FIX: Increased from 200px to 280px for proper readability */
    --rail-width: 320px;
    --msg-user-bg: #2563eb;
    /* Solid Blue instead of gradient */
}

/* Ambient Background Mesh */
.ambient-mesh[b-bswc6hpv2l] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb[b-bswc6hpv2l] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.orb-1[b-bswc6hpv2l] {
    width: 600px;
    height: 600px;
    background: #bfdbfe;
    top: -100px;
    left: -100px;
}

.orb-2[b-bswc6hpv2l] {
    width: 500px;
    height: 500px;
    background: #ddd6fe;
    bottom: -100px;
    right: -100px;
}

/* KEY LAYOUT - Embedded within MainLayout content area */
.app-container[b-bswc6hpv2l] {
    display: flex;
    width: 100%;
    /* Fits parent content area (not viewport) */
    height: calc(100vh - 64px);
    /* Viewport minus MainLayout header (--BEC-dashboard-header-height: 64px) */
    position: relative;
    /* Stay in document flow, allow absolute children */
    background: var(--bg-gradient);
    overflow: hidden;
    /* CRITICAL: Prevent page scroll */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================================
   SIDEBAR (History) - Modern Productivity Design
   FINAL PHASE (2026-01-11): Enhanced for enterprise UX
============================================= */
.sidebar[b-bswc6hpv2l] {
    width: var(--panel-width);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(248, 250, 252, 0.75) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-top: 20px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.03);
}

.sidebar.closed[b-bswc6hpv2l] {
    margin-left: calc(var(--panel-width) * -1);
}

.brand-area[b-bswc6hpv2l] {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    letter-spacing: -0.02em;
}

/* New Chat Button - Primary CTA */
.new-chat-btn[b-bswc6hpv2l] {
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    padding: 11px 16px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #0078d4 0%, #0066b8 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.new-chat-btn:hover[b-bswc6hpv2l] {
    background: linear-gradient(135deg, #106ebe 0%, #005a9e 100%);
    box-shadow: 0 4px 16px rgba(0, 120, 212, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.new-chat-btn:active[b-bswc6hpv2l] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 120, 212, 0.2);
}

.new-chat-btn svg[b-bswc6hpv2l] {
    stroke: currentColor;
}

.nav-section-title[b-bswc6hpv2l] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 8px;
    padding: 0 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-section-title[b-bswc6hpv2l]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, transparent 100%);
}

/* =============================================
   PHASE 2: History Search Filter (2026-01-11)
   Client-side search for conversations
============================================= */
.history-search-container[b-bswc6hpv2l] {
    padding: 0 12px 12px 12px;
}

.search-input-wrapper[b-bswc6hpv2l] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-bswc6hpv2l] {
    position: absolute;
    left: 10px;
    color: var(--text-secondary);
    pointer-events: none;
}

.history-search-input[b-bswc6hpv2l] {
    width: 100%;
    padding: 9px 32px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.75);
    color: var(--text-main);
    transition: all 0.15s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.history-search-input:focus[b-bswc6hpv2l] {
    outline: none;
    border-color: #0078d4;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

.history-search-input[b-bswc6hpv2l]::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.search-clear-btn[b-bswc6hpv2l] {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.search-clear-btn:hover[b-bswc6hpv2l] {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-main);
}

.no-search-results[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--text-secondary);
    text-align: center;
    gap: 8px;
}

.no-search-results svg[b-bswc6hpv2l] {
    opacity: 0.5;
}

.no-search-results span[b-bswc6hpv2l] {
    font-size: 0.85rem;
}

/* Pin indicator for pinned sessions */
.pin-indicator[b-bswc6hpv2l] {
    font-size: 0.75rem;
    margin-right: 4px;
}

.history-item.pinned[b-bswc6hpv2l] {
    background: rgba(0, 120, 212, 0.05);
}

.history-list[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    gap: 0; /* Managed by item margin */
    flex: 1;
    overflow-y: auto;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    padding-bottom: 20px;
}

/* =============================================
   HISTORY GROUP HEADERS - Date Categories
============================================= */
.history-group[b-bswc6hpv2l] {
    margin-bottom: 4px;
    margin-top: 8px;
}

.group-header[b-bswc6hpv2l] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8; /* Lighter utility text */
    margin: 12px 0 6px 16px;
    letter-spacing: 0.08em;
}

/* =============================================
   HISTORY ITEM - Modern Productivity Design
============================================= */
.history-item[b-bswc6hpv2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ENTERPRISE FIX: Enforce 56px height + 4px margin = 60px (Match ItemSize="60") */
    height: 56px;
    margin: 0 12px 4px;
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.15s ease;
    border: 1px solid transparent;
    position: relative;
    box-sizing: border-box;
    /* Prevent shrinking */
    flex-shrink: 0;
}

.history-item:hover[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.history-item.active[b-bswc6hpv2l] {
    background: #ffffff;
    border-color: rgba(0, 120, 212, 0.15);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.08); /* Stronger active shadow */
}

.history-item.active .item-title[b-bswc6hpv2l] {
    color: #0078d4;
    font-weight: 600;
}

/* Pinned item highlight */
.history-item.pinned[b-bswc6hpv2l] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.02) 100%);
    border-color: rgba(245, 158, 11, 0.1);
}

.history-item.pinned.active[b-bswc6hpv2l] {
    background: #ffffff;
    border-color: rgba(245, 158, 11, 0.2);
}

.history-item.pinned[b-bswc6hpv2l]::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #f59e0b;
    border-radius: 3px;
    opacity: 0.8;
}

/* Item Content - Title Only (Preview removed per user request) */
.item-content[b-bswc6hpv2l] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    padding-right: 8px; /* Safe padding from time */
}

.item-title[b-bswc6hpv2l] {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main, #334155);
    flex: 1;
    min-width: 0;
    line-height: 1.5;
}

/* Time Display on Right Side of History Card */
.item-time[b-bswc6hpv2l] {
    font-size: 0.7rem;
    color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.1s ease;
}

/* Hide time on hover to make room for actions */
.history-item:hover .item-time[b-bswc6hpv2l] {
    opacity: 0;
}

/* Hover Actions (Edit/Delete) */
.item-actions[b-bswc6hpv2l] {
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none; /* Prevent clicking when invisible */
    transition: opacity 0.15s ease, transform 0.15s ease;
    
    /* Absolute Positioning for cleanliness */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    
    /* Background Mask for text overlap */
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
    padding-left: 12px;
    border-radius: 4px; /* Ensure background looks contained */
    
    /* Ensure on top */
    z-index: 5;
    height: 100%;
    align-items: center;
}

/* Show actions on hover */
.history-item:hover .item-actions[b-bswc6hpv2l] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.action-mini-btn[b-bswc6hpv2l] {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--text-secondary, #6b7280);
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    backdrop-filter: blur(4px);
}

.action-mini-btn:hover[b-bswc6hpv2l] {
    background: #f1f5f9;
    color: var(--text-main, #1f2937);
    border-color: rgba(0,0,0,0.1);
    transform: scale(1.05);
}

.action-mini-btn.danger:hover[b-bswc6hpv2l] {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fecaca;
}

/* PHASE 5: Pin button states */
.action-mini-btn.pinned[b-bswc6hpv2l] {
    color: #f59e0b;
    background: #fffbeb;
    border-color: #fde68a;
    opacity: 1;
}

.action-mini-btn.pinned:hover[b-bswc6hpv2l] {
    background: #fef3c7;
    color: #d97706;
}

/* Show pinned button even when not hovering if item is pinned? 
   NO - User prefers cleaner look. Only show icon in title. 
   Only show actions on hover. */

/* =============================================
   LOAD MORE & LOADING STATES
============================================= */
.load-more-container[b-bswc6hpv2l] {
    padding: 8px 12px;
    display: flex;
    justify-content: center;
}

.btn-load-more[b-bswc6hpv2l] {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--glass-border, rgba(255,255,255,0.3));
    color: var(--text-secondary, #6b7280);
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-load-more:hover[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-main, #1f2937);
    border-color: var(--glass-border, rgba(255,255,255,0.5));
}

.loading-more-spinner[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.75rem;
}

.loading-more-spinner .spinner-ring[b-bswc6hpv2l] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--glass-border, rgba(255,255,255,0.3));
    border-top-color: var(--primary, #2563eb);
    border-radius: 50%;
    animation: spin-b-bswc6hpv2l 0.8s linear infinite;
}

/* Loading Skeleton */
.history-loading-skeleton[b-bswc6hpv2l] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-line[b-bswc6hpv2l] {
    height: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-bswc6hpv2l 1.5s infinite;
    border-radius: 4px;
}

.skeleton-line.short[b-bswc6hpv2l] {
    width: 60%;
}

@keyframes skeleton-shimmer-b-bswc6hpv2l {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* MAIN CHAT AREA - Flex column with contained scroll */
.chat-main[b-bswc6hpv2l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 350px; /* ENTERPRISE FIX: Prevent squeeze when right rail opens */
    max-height: 100dvh;
    overflow: hidden;
    /* Container doesn't scroll */
    z-index: 5;
}

/* Mobile: Reduce min-width for small screens */
@media (max-width: 768px) {
    .chat-main[b-bswc6hpv2l] {
        min-width: 280px;
    }
}

.chat-header[b-bswc6hpv2l] {
    height: 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
}

.header-left[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.model-pill[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Utility: Vertical separator line */
.separator-vertical[b-bswc6hpv2l] {
    width: 1px;
    height: 12px;
    background: #cbd5e1;
}

/* Status indicator (Online/Connecting) */
.status-indicator[b-bswc6hpv2l] {
    color: #2563eb;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 6: WORKSPACE INDICATOR
   Shows active project context in header when user has a workspace set
═══════════════════════════════════════════════════════════════════════════════ */
.workspace-indicator[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-left: 12px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    color: #166534;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: workspace-appear-b-bswc6hpv2l 0.3s ease-out;
}

@keyframes workspace-appear-b-bswc6hpv2l {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.workspace-indicator svg[b-bswc6hpv2l] {
    color: #16a34a;
    flex-shrink: 0;
}

.workspace-name[b-bswc6hpv2l] {
    font-weight: 600;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-model[b-bswc6hpv2l] {
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #15803d;
}

.workspace-clear-btn[b-bswc6hpv2l] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: #6b7280;
    display: grid;
    place-items: center;
    transition: all 0.2s;
    margin-left: 4px;
}

.workspace-clear-btn:hover[b-bswc6hpv2l] {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.workspace-clear-btn svg[b-bswc6hpv2l] {
    color: inherit;
}

.header-controls[b-bswc6hpv2l] {
    display: flex;
    gap: 8px;
}

.icon-btn[b-bswc6hpv2l] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.icon-btn:hover[b-bswc6hpv2l] {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

.icon-btn.active[b-bswc6hpv2l] {
    background: white;
    color: #2563eb;
    box-shadow: var(--glass-shadow);
}

/* MESSAGE STREAM - This is the ONLY scrollable area */
.chat-scroll-area[b-bswc6hpv2l] {
    flex: 1;
    min-height: 0;
    /* CRITICAL: Allow flex item to shrink for scroll */
    overflow-y: auto;
    overflow-x: hidden;
    /* Messages are self-centering via content-stack, minimal side padding */
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Gap handled by msg-row margin-bottom */
    scroll-behavior: smooth;
}

.scroll-sentinel[b-bswc6hpv2l] {
    height: 20px;
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════
   MESSAGE ROW LAYOUT - Centered Stacked Layout (Matches Input Bar Width)
   Names as headers above content, wide centered messages
   ════════════════════════════════════════════════════════════════════════ */
.msg-row[b-bswc6hpv2l] {
    display: block;
    width: 100%;
    margin-bottom: 16px;            /* Tighter spacing between messages */
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT STACK - Centered container matching input bar dimensions
   ════════════════════════════════════════════════════════════════════════ */
.content-stack[b-bswc6hpv2l] {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;                       /* Tighter gap between name and message */
    /* Space between Name Header and Message Body */
}

/* ════════════════════════════════════════════════════════════════════════
   MESSAGE HEADER - Role badge/name displayed above content
   ════════════════════════════════════════════════════════════════════════ */
.msg-header[b-bswc6hpv2l] {
    display: flex;
    justify-content: flex-start;
    /* Default: Left aligned */
}

/* User messages: Right-align the header badge */
.msg-row.user .msg-header[b-bswc6hpv2l] {
    justify-content: flex-end;
}

/* Role Badge - Compact label styling */
.role-badge[b-bswc6hpv2l] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   COLOR FAMILIES - Distinct visual identity for Agent vs User
   Agent = Purple/Indigo (AI/System), User = Minimal text + Blue bubble
   ════════════════════════════════════════════════════════════════════════ */

/* User Badge Styling - Minimal, non-competing label */
.role-badge.user-badge[b-bswc6hpv2l] {
    color: #6b7280;
    /* Neutral gray text */
    background: transparent;
    /* No background - bubble is enough */
    padding: 4px 0;
    /* Minimal padding */
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    box-shadow: none;
    /* No shadow - stays subtle */
}

/* Agent Badge Styling - Purple/Indigo AI Identity */
/* Agent Badge - Minimal gray text (same style as YOU) */
.role-badge.agent-badge[b-bswc6hpv2l] {
    color: #6b7280;                 /* Neutral gray text */
    background: transparent;        /* No background */
    box-shadow: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   MESSAGE BODY - Container for actual message content
   ════════════════════════════════════════════════════════════════════════ */
.msg-body[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Spacing between elements within body */
    width: 100%;
    /* Fill the content-stack width */
}

.bubble-user[b-bswc6hpv2l] {
    /* White/Glass background like Analysis card */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 100%);
    color: #1f2937;                 /* Dark text on white */
    border: 1px solid rgba(255, 255, 255, 0.8);
    
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    
    /* Shrink to fit text, don't span full width */
    width: fit-content;
    max-width: 85%;
    margin-left: auto;              /* Push to the right side */
    
    line-height: 1.5;
    font-size: 0.9rem;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MESSAGE TIMESTAMP - ENTERPRISE FIX (2026-01-11): Fix #15
   Shows time below messages for user and agent
   ═══════════════════════════════════════════════════════════════════════════════ */
.message-timestamp[b-bswc6hpv2l] {
    font-size: 0.7rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
    padding: 0 4px;
    opacity: 0.7;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* User message timestamp - right aligned */
.message-timestamp.user-timestamp[b-bswc6hpv2l] {
    text-align: right;
    margin-right: auto;
    margin-left: 0;
}

/* Agent message timestamp - left aligned */
.message-timestamp.agent-timestamp[b-bswc6hpv2l] {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

/* DEPRECATED: Legacy classes kept for backward compatibility */
.agent-container[b-bswc6hpv2l],
.agent-content-col[b-bswc6hpv2l],
.user-content-col[b-bswc6hpv2l] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* THINKING CARD (Glass) - Friendly Redesign */
/* =============================================
   THINKING CARD - Glassmorphism Style
   Matches Header Pill aesthetic
============================================= */
.thinking-card[b-bswc6hpv2l] {
    /* GLASSMORPHISM - Match Header Pill */
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* Shape & Layout */
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    
    /* Subtle shadow for depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.thinking-header[b-bswc6hpv2l] {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s;
    position: relative;
    /* For progress line positioning */
}

.thinking-header:hover[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.4);
}

.th-title[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: #4b5563;
    flex: 1;
    min-width: 0;
    /* Enable truncation if needed */
}

.th-title svg[b-bswc6hpv2l] {
    flex-shrink: 0;
}

.th-text-col[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.th-main[b-bswc6hpv2l] {
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;                /* Allow wrapping on small screens */
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER AGENT BADGES - Inline next to counter (no background)
   ════════════════════════════════════════════════════════════════════════ */
.header-agents[b-bswc6hpv2l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.header-agent-badge[b-bswc6hpv2l] {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0;
    color: #6b7280;                 /* Neutral gray */
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.header-agent-badge.working[b-bswc6hpv2l] {
    color: #374151;                 /* Dark gray when working */
    font-weight: 600;
}

.header-agent-badge.done[b-bswc6hpv2l] {
    color: #374151;                 /* Dark gray when done */
}

.header-agent-badge.pending[b-bswc6hpv2l] {
    color: #9ca3af;                 /* Light gray when pending */
}

/* Separator between badges */
.header-agent-badge:not(:last-child)[b-bswc6hpv2l]::after {
    content: "→";
    margin-left: 6px;
    color: #d1d5db;
    font-size: 0.6rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROGRESS PERCENTAGE (2026-01-13): Replaced timer with percentage display
   Shows actual progress from backend events - Option B Multi-Step Progress
   ═══════════════════════════════════════════════════════════════════════════════ */

.progress-percent[b-bswc6hpv2l] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #10b981; /* Green accent for active progress */
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'SF Mono', 'Consolas', monospace;
    letter-spacing: 0.02em;
    min-width: 40px;
    text-align: center;
}

.progress-percent.done[b-bswc6hpv2l] {
    color: #6b7280;
    background: #f3f4f6;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PER-STEP PROGRESS BARS (Option B UI)
   Shows progress for each activity step in expanded thinking card
   ═══════════════════════════════════════════════════════════════════════════════ */

.friendly-log-item.with-progress[b-bswc6hpv2l] {
    flex-wrap: wrap;
}

.friendly-log-item .log-content[b-bswc6hpv2l] {
    flex: 1;
    min-width: 0;
}

.friendly-log-item .log-message[b-bswc6hpv2l] {
    word-break: break-word;
}

.friendly-log-item .log-sub-progress[b-bswc6hpv2l] {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 2px;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.friendly-log-item .log-progress-bar[b-bswc6hpv2l] {
    width: 100%;
    height: 4px;
    background: #374151;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
    position: relative;
}

.friendly-log-item .log-progress-fill[b-bswc6hpv2l] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.friendly-log-item .log-progress-text[b-bswc6hpv2l] {
    display: none; /* Hidden - we use .log-percent instead */
}

.friendly-log-item .log-percent[b-bswc6hpv2l] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #10b981;
    font-family: 'SF Mono', 'Consolas', monospace;
    min-width: 36px;
    text-align: right;
    margin-left: 8px;
}

.friendly-log-item .log-percent.done[b-bswc6hpv2l] {
    color: #6b7280;
}

/* Log spinner for active steps */
.log-spinner[b-bswc6hpv2l] {
    width: 12px;
    height: 12px;
    border: 2px solid #374151;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin-b-bswc6hpv2l 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OVERALL PROGRESS FOOTER (Option B)
   Shows aggregated progress at bottom of thinking card
   ═══════════════════════════════════════════════════════════════════════════════ */

.overall-progress-footer[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #1f2937;
    border-top: 1px solid #374151;
    border-radius: 0 0 8px 8px;
}

.overall-progress-footer .overall-label[b-bswc6hpv2l] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
}

.overall-progress-footer .overall-progress-bar[b-bswc6hpv2l] {
    flex: 1;
    height: 6px;
    background: #374151;
    border-radius: 3px;
    overflow: hidden;
}

.overall-progress-footer .overall-progress-fill[b-bswc6hpv2l] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
    border-radius: 3px;
    transition: width 0.3s ease-out;
}

.overall-progress-footer .overall-percent[b-bswc6hpv2l] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #10b981;
    font-family: 'SF Mono', 'Consolas', monospace;
    min-width: 36px;
    text-align: right;
}

@keyframes pulse-subtle-b-bswc6hpv2l {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.th-sub[b-bswc6hpv2l] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.spinner-ring[b-bswc6hpv2l] {
    width: 14px;
    height: 14px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    /* Neutral gray - professional */
    border-radius: 50%;
    animation: spin-b-bswc6hpv2l 1s infinite linear;
    flex-shrink: 0;
}

/* Thinking Chevron Animation */
.thinking-chevron[b-bswc6hpv2l] {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.thinking-chevron.open[b-bswc6hpv2l] {
    transform: rotate(180deg);
}

.thinking-body[b-bswc6hpv2l] {
    padding: 0 12px 6px 12px;
    /* Less bottom padding */
    display: none;
    flex-direction: column;
    gap: 4px;
    /* Sections touch closer */
}

.thinking-card.open .thinking-body[b-bswc6hpv2l] {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    padding-top: 8px;
}

/* Progress Line (Visible when collapsed) */
.thinking-progress-line[b-bswc6hpv2l] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    overflow: hidden;
    display: none;
}

/* Show progress line if the card NOT open but processing */
.thinking-card:not(.open) .thinking-progress-line.active[b-bswc6hpv2l] {
    display: block;
}

/* 2026-01-13: DETERMINATE Progress Bar (width set via inline style) */
.progress-bar-inner[b-bswc6hpv2l] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
    border-radius: 2px;
    transition: width 0.3s ease-out;
    /* Width is now set dynamically via style="width: X%" */
}

/* Friendly Logs - Compact Terminal Stream */
.friendly-log-item[b-bswc6hpv2l] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* Icons closer to text */
    font-size: 0.75rem;
    /* Smaller text */
    color: #4b5563;
    padding: 1px 0;
    /* Almost no space between lines */
    line-height: 1.4;
    min-height: 18px;
    /* Consistent line height */
}

.friendly-log-item div:last-child[b-bswc6hpv2l] {
    flex: 1;
}

.friendly-log-item strong[b-bswc6hpv2l] {
    font-weight: 600;
    color: #1f2937;
}

.log-icon-area[b-bswc6hpv2l] {
    width: 14px;
    /* Smaller icon box */
    height: 14px;
    border-radius: 3px;
    /* Sharper corners - more "tech" */
    background: #f3f4f6;
    color: #9ca3af;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Scale down inner icon SVG */
.log-icon-area svg[b-bswc6hpv2l] {
    width: 10px;
    height: 10px;
}

.log-icon-area.active[b-bswc6hpv2l] {
    background: #f3f4f6;
    /* Neutral gray background */
    color: #6b7280;
}

.log-icon-area.done[b-bswc6hpv2l] {
    background: #f3f4f6;
    color: #374151;
}

/* THINKING LOGS SCROLLABLE CONTAINER */
/* Confines log items to a fixed height with internal scrolling */
.thinking-logs-scroll[b-bswc6hpv2l] {
    max-height: 150px;
    /* ~5 lines at ~30px per line */
    overflow-y: auto;
    /* Enable vertical scrolling */
    margin-top: 8px;
    /* Gap from team section */
    scroll-behavior: smooth;
    /* Smooth scroll interactions */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Clean scrollbar styling for thinking logs */
.thinking-logs-scroll[b-bswc6hpv2l]::-webkit-scrollbar {
    width: 4px;
}

.thinking-logs-scroll[b-bswc6hpv2l]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.thinking-logs-scroll[b-bswc6hpv2l]::-webkit-scrollbar-track {
    background: transparent;
}

/* MULTI-AGENT WORKFLOW VISUALIZATION - Compact High-Density */
.agent-workflow-chain[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Slightly tighter gap */
    padding: 2px 0;
    /* Removes vertical bulk */
    margin-bottom: 6px;
    /* Brings logs closer to team */
    overflow-x: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    scrollbar-width: thin;
}

/* =============================================
   AGENT NODE BADGES - Glassmorphism Style
   Team/Specialist badges with frosted glass look
============================================= */
.agent-node[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    height: 20px;
    
    /* GLASSMORPHISM - Match Header Pill */
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* Shape */
    border-radius: 12px;
    
    /* Typography */
    font-size: 0.70rem;
    color: #4b5563;
    font-weight: 500;
    
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.agent-node.active[b-bswc6hpv2l] {
    /* Neutral - Active Agent */
    background: rgba(243, 244, 246, 0.8);
    border-color: rgba(107, 114, 128, 0.3);
    color: #374151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.agent-node.done[b-bswc6hpv2l] {
    /* Neutral - Completed */
    background: rgba(243, 244, 246, 0.6);
    border-color: rgba(156, 163, 175, 0.3);
    color: #374151;
}

.agent-icon[b-bswc6hpv2l] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.agent-node svg.agent-icon[b-bswc6hpv2l] {
    stroke: currentColor;
    stroke-width: 2;
}

.chain-arrow[b-bswc6hpv2l] {
    color: #9ca3af;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.chain-arrow svg[b-bswc6hpv2l] {
    width: 100%;
    height: 100%;
}

.pulse-dot[b-bswc6hpv2l] {
    width: 6px;
    height: 6px;
    background: #6b7280;
    /* Neutral gray */
    border-radius: 50%;
    animation: pulse-b-bswc6hpv2l 1.5s infinite;
}

@keyframes pulse-b-bswc6hpv2l {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   AGENT TEXT - MOVED TO BEC_Theme.css (Global)
   
   The .agent-text typography styles have been moved to:
   wwwroot/css/BEC_Theme.css -> "AGENT MESSAGE TYPOGRAPHY" section
   
   This fixes the "Blazor Scope Trap" where CSS isolation prevented
   styles from applying to dynamically injected Markdown HTML.
   
   Benefits of global placement:
   - ✅ Styles apply to dynamic MarkupString content
   - ✅ Uses BEC Design Tokens for consistency
   - ✅ Dark mode support via [data-theme="dark"]
   - ✅ No experimental ::deep selectors needed
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   QUICK ACTIONS - Interactive Click-to-Reply Buttons
   MS Fluent Design inspired chips for user responses
   ════════════════════════════════════════════════════════════════════════ */
/* =============================================
   QUICK ACTIONS - Glassmorphism Style
   Action buttons with frosted glass aesthetic
============================================= */
.quick-actions-container[b-bswc6hpv2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 8px;
    /* Removed border-top for cleaner floating look */
}

/* Base Quick Action Button - Glassmorphism */
.quick-action-btn[b-bswc6hpv2l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    
    /* GLASSMORPHISM - Match Header Pill */
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #374151;
    
    border-radius: 20px;            /* Pill shape */
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Remove old outline style */
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.quick-action-btn:hover[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.quick-action-btn:active[b-bswc6hpv2l] {
    transform: translateY(0);
    box-shadow: none;
}

/* Primary Option - Suggested/Recommended Choice (Glassy Blue Tint) */
.quick-action-btn.primary[b-bswc6hpv2l] {
    background: rgba(219, 234, 254, 0.6);  /* Light blue tint */
    border: 1px solid rgba(147, 197, 253, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #1d4ed8;
    font-weight: 600;
}

.quick-action-btn.primary:hover[b-bswc6hpv2l] {
    background: rgba(191, 219, 254, 0.8);
    border-color: rgba(96, 165, 250, 0.8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

/* Disabled state (after clicking) */
.quick-action-btn:disabled[b-bswc6hpv2l] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* LANDING HERO SECTION - Centered within viewport */
.landing-container[b-bswc6hpv2l] {
    flex: 1;
    min-height: 0;
    /* Allow shrinking in flex */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    /* Reduced - input is now part of flex flow */
    text-align: center;
    overflow-y: auto;
    animation: fadeIn-b-bswc6hpv2l 0.5s ease-out;
}

.landing-logo[b-bswc6hpv2l] {
    width: 64px;
    height: 64px;
    background: var(--primary-gradient);
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
    display: grid;
    place-items: center;
    color: white;
}

.landing-title[b-bswc6hpv2l] {
    font-size: 2rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-subtitle[b-bswc6hpv2l] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 500px;
    line-height: 1.5;
}

/* SUGGESTION GRID */
.suggestion-grid[b-bswc6hpv2l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}

.suggestion-card[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 16px;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.suggestion-card:hover[b-bswc6hpv2l] {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #bfdbfe;
}

.sug-title[b-bswc6hpv2l] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
}

.sug-desc[b-bswc6hpv2l] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* INPUT AREA (Gemini Style) - Stacked at bottom of chat-main */
.input-floater-container[b-bswc6hpv2l] {
    position: relative;
    margin: 0 auto 24px auto;
    width: 90%;
    max-width: 900px;
    z-index: 100;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   INPUT PILL - Gemini-style unified input container
   Vertical stacking: context → files → textarea → toolbar
   ════════════════════════════════════════════════════════════════════════ */
.input-pill[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    box-shadow:
        0 20px 40px -4px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 400px;
}

.input-pill:focus-within[b-bswc6hpv2l] {
    background: white;
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow:
        0 25px 50px -12px rgba(37, 99, 235, 0.12),
        0 0 0 2px rgba(37, 99, 235, 0.08);
}

/* ════════════════════════════════════════════════════════════════════════
   INPUT CONTEXT TAG - Inside pill, shows active context
   ════════════════════════════════════════════════════════════════════════ */
.input-context-tag[b-bswc6hpv2l] {
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    cursor: pointer;
    transition: all 0.2s ease;
}

.input-context-tag:hover[b-bswc6hpv2l] {
    background: #e2e8f0;
    color: #475569;
}

.input-context-tag svg[b-bswc6hpv2l] {
    opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   MAIN INPUT TEXTAREA - Full width in column layout
   ════════════════════════════════════════════════════════════════════════ */
.main-input[b-bswc6hpv2l] {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1f2937;
    padding: 4px 0;
    resize: none !important;
    outline: none;
    min-height: 24px;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.6;
    transition: height 0.1s ease-out;
}

.main-input[b-bswc6hpv2l]::placeholder {
    color: #9ca3af;
}

/* Scrollbar for inside input */
.main-input[b-bswc6hpv2l]::-webkit-scrollbar {
    width: 6px;
}

.main-input[b-bswc6hpv2l]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.main-input[b-bswc6hpv2l]::-webkit-scrollbar-track {
    background: transparent;
}

/* ENTERPRISE FIX: Disabled state during reconnection */
.main-input:disabled[b-bswc6hpv2l],
.main-input.disconnected[b-bswc6hpv2l] {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.03);
}

/* ════════════════════════════════════════════════════════════════════════
   INPUT TOOLBAR - Bottom bar with attach (left) and send (right)
   ════════════════════════════════════════════════════════════════════════ */
.input-toolbar[b-bswc6hpv2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.attach-btn[b-bswc6hpv2l] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.attach-btn:hover[b-bswc6hpv2l] {
    background: #f1f5f9;
    color: #2563eb;
    transform: scale(1.05);
}

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

.send-btn[b-bswc6hpv2l] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary-gradient);
    color: white;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.send-btn:hover[b-bswc6hpv2l] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Stop Mode - Red stop button when agent is processing */
.send-btn.stop-mode[b-bswc6hpv2l] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    animation: pulse-stop-b-bswc6hpv2l 1.5s ease-in-out infinite;
}

.send-btn.stop-mode:hover[b-bswc6hpv2l] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    transform: scale(1.08);
}

/* ENTERPRISE FIX: Disabled state during disconnection */
.send-btn:disabled[b-bswc6hpv2l],
.send-btn.disconnected[b-bswc6hpv2l] {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: none;
    transform: none;
}

.send-btn:disabled:hover[b-bswc6hpv2l],
.send-btn.disconnected:hover[b-bswc6hpv2l] {
    transform: none;
    box-shadow: none;
}

@keyframes pulse-stop-b-bswc6hpv2l {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATE MACHINE: Transitioning State (Sending/Cancelling)
   Shows spinner and disables button during state transitions
   ═══════════════════════════════════════════════════════════════════════════════ */
.send-btn.transitioning[b-bswc6hpv2l] {
    opacity: 0.7;
    cursor: wait;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    pointer-events: none;
}

.send-btn.transitioning .spinner[b-bswc6hpv2l] {
    animation: spin-b-bswc6hpv2l 1s linear infinite;
}

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

/* Legacy - keep for backwards compatibility if used elsewhere */
.project-context-tag[b-bswc6hpv2l] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: auto;
    background: rgba(255, 255, 255, 0.8);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════
   PENDING FILES CONTAINER - Gemini-style file cards inside input pill
   Transparent background to blend with white pill
   ════════════════════════════════════════════════════════════════════════ */
.pending-files-container[b-bswc6hpv2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

/* ════════════════════════════════════════════════════════════════════════
   PENDING FILE PILL - Gemini-style grey card with file info
   ════════════════════════════════════════════════════════════════════════ */
.pending-file-pill[b-bswc6hpv2l] {
    background: #f0f4f9;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.8rem;
    border: none;
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 180px;
    max-width: 280px;
    transition: all 0.2s ease;
    position: relative;
}

.pending-file-pill:hover[b-bswc6hpv2l] {
    background: #e8eef5;
}

.pending-file-icon[b-bswc6hpv2l] {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
}

/* File info container - stacks name and size vertically */
.pending-file-info[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.pending-file-name[b-bswc6hpv2l] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1f2937;
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.3;
}

.pending-file-size[b-bswc6hpv2l] {
    color: #6b7280;
    font-size: 0.7rem;
    line-height: 1.2;
}

.pending-file-remove[b-bswc6hpv2l] {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    display: grid;
    place-items: center;
    transition: all 0.2s;
    border-radius: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.pending-file-remove:hover[b-bswc6hpv2l] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.pending-file-remove svg[b-bswc6hpv2l] {
    display: block;
}

.clear-all-files-btn[b-bswc6hpv2l] {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    height: fit-content;
    align-self: center;
}

.clear-all-files-btn:hover[b-bswc6hpv2l] {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

/* Small spinner for upload indicator */
.spinner-small[b-bswc6hpv2l] {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-bswc6hpv2l 0.8s linear infinite;
}

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

/* ════════════════════════════════════════════════════════════════════════
   MESSAGE ATTACHMENTS - Displayed within sent chat messages
   Shows file details with icons and document IDs
   ════════════════════════════════════════════════════════════════════════ */
.message-attachments[b-bswc6hpv2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);  /* Light gray border for white bg */
}

/* ════════════════════════════════════════════════════════════════════════
   MESSAGE ATTACHMENTS - Clean minimal style (no icons)
   Works with white user bubble background
   ════════════════════════════════════════════════════════════════════════ */
.message-attachment-chip[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 235, 0.08);   /* Light blue tint */
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    border: 1px solid rgba(37, 99, 235, 0.15);
    transition: all 0.2s ease;
}

.message-attachment-chip:hover[b-bswc6hpv2l] {
    background: rgba(37, 99, 235, 0.12);
}

/* HIDE the icon */
.message-attachment-chip .attachment-icon[b-bswc6hpv2l] {
    display: none;
}

.message-attachment-chip .attachment-name[b-bswc6hpv2l] {
    color: #1e40af;                 /* Dark blue text */
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-attachment-chip .attachment-size[b-bswc6hpv2l] {
    color: #6b7280;                 /* Gray text */
    font-size: 0.65rem;
}

.message-attachment-chip .attachment-id[b-bswc6hpv2l] {
    background: rgba(37, 99, 235, 0.1);
    color: #3b82f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-family: monospace;
}

/* Failed attachment styles */
.message-attachment-chip.attachment-failed[b-bswc6hpv2l] {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
}

.message-attachment-chip.attachment-failed:hover[b-bswc6hpv2l] {
    background: rgba(220, 53, 69, 0.15);
}

.message-attachment-chip.attachment-failed .attachment-name[b-bswc6hpv2l] {
    color: #dc2626;
    text-decoration: line-through;
}

.message-attachment-chip .attachment-status-failed[b-bswc6hpv2l] {
    background: rgba(220, 53, 69, 0.8);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Uploading attachment styles */
.message-attachment-chip.attachment-uploading[b-bswc6hpv2l] {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    animation: upload-pulse-b-bswc6hpv2l 1.5s ease-in-out infinite;
}

@keyframes upload-pulse-b-bswc6hpv2l {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.message-attachment-chip .attachment-status-uploading[b-bswc6hpv2l] {
    background: rgba(59, 130, 246, 0.8);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
}

/* RIGHT RAIL - Unified Panel (Context, Memory, Admin) */
.right-rail[b-bswc6hpv2l] {
    width: var(--rail-width);
    min-width: var(--rail-width);
    max-width: var(--rail-width);
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-left: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    flex-direction: column;
    position: relative;
    margin-right: calc(var(--rail-width) * -1);
    /* Hidden by default */
    transition: margin-right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.right-rail.open[b-bswc6hpv2l] {
    margin-right: 0;
}

/* Rail Header */
.rail-header[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.rail-header .rail-title[b-bswc6hpv2l] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.02em;
}

.rail-close-btn[b-bswc6hpv2l] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.rail-close-btn:hover[b-bswc6hpv2l] {
    background: rgba(0, 0, 0, 0.05);
    color: #334155;
}

/* Rail Content - Scrollable */
.rail-content[b-bswc6hpv2l] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rail-card[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.7);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.15s ease;
}

.rail-card:hover[b-bswc6hpv2l] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rail-card-title[b-bswc6hpv2l] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rail-title[b-bswc6hpv2l] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.timeline-item[b-bswc6hpv2l] {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: #4b5563;
}

.timeline-item[b-bswc6hpv2l]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    border: 2px solid white;
}

.timeline-item.active[b-bswc6hpv2l]::before {
    background: #10b981;
}

/* TOOL EXECUTIONS */
.tool-executions-list[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    /* Fill the 900px content-stack container */
    box-sizing: border-box;
}

.tool-execution-card[b-bswc6hpv2l] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    font-size: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tool-execution-card.completed[b-bswc6hpv2l] {
    border-left: 3px solid #10b981;
}

.tool-execution-card.failed[b-bswc6hpv2l] {
    border-left: 3px solid #ef4444;
}

.tool-execution-card.running[b-bswc6hpv2l] {
    border-left: 3px solid #3b82f6;
}

.tool-header[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
}

.tool-result-container[b-bswc6hpv2l] {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px;
    overflow-x: auto;
    border: 1px solid #f3f4f6;
}

.tool-result-table[b-bswc6hpv2l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.tool-result-table th[b-bswc6hpv2l] {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid #e5e7eb;
    color: var(--text-secondary);
    font-weight: 600;
}

.tool-result-table td[b-bswc6hpv2l] {
    padding: 4px 8px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

/* CONTEXT PANEL CONTENT (inside rail) */
.context-key[b-bswc6hpv2l] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
}

.context-val[b-bswc6hpv2l] {
    font-size: 0.88rem;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
}

.tags-container[b-bswc6hpv2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tag-item[b-bswc6hpv2l] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    color: #4338ca;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
}

/* TOAST NOTIFICATION */
.toast[b-bswc6hpv2l] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.88rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    animation: fadeIn-b-bswc6hpv2l 0.3s ease-out;
}

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

@keyframes fadeIn-b-bswc6hpv2l {
    from {
        opacity: 0;
        margin-top: 20px;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}

/* ========================================
   INLINE COMPONENT CONTAINER
   Renders interactive components inside chat messages
   Feature 4: Tool-based Generative UI
   ======================================== */
.inline-component-container[b-bswc6hpv2l] {
    padding: 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    animation: slideUp-b-bswc6hpv2l 0.3s ease-out;
    width: 100%;
    /* Fill the 900px content-stack container */
    box-sizing: border-box;
}

@keyframes slideUp-b-bswc6hpv2l {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ========================================
   OVERLAY STYLES
   Modal overlays for dialogs and forms
   HITL Approval, BOQ Upload, Bulk Progress
   ======================================== */
.approval-overlay[b-bswc6hpv2l],
.upload-overlay[b-bswc6hpv2l],
.progress-overlay[b-bswc6hpv2l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-bswc6hpv2l 0.2s ease-out;
}

.overlay-backdrop[b-bswc6hpv2l] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.approval-dialog-container[b-bswc6hpv2l],
.upload-dialog-container[b-bswc6hpv2l],
.progress-dialog-container[b-bswc6hpv2l] {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    animation: scaleIn-b-bswc6hpv2l 0.2s ease-out;
}

@keyframes scaleIn-b-bswc6hpv2l {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.upload-dialog-container[b-bswc6hpv2l] {
    width: 600px;
    padding: 24px;
}

.upload-dialog-header[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.upload-dialog-header h3[b-bswc6hpv2l] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.overlay-close-btn[b-bswc6hpv2l] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f3f4f6;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.overlay-close-btn:hover[b-bswc6hpv2l] {
    background: #e5e7eb;
    color: #1f2937;
}

.progress-dialog-container[b-bswc6hpv2l] {
    width: 500px;
    padding: 24px;
}

.approval-dialog-container[b-bswc6hpv2l] {
    width: 480px;
}

/* ========================================
   CONTEXT PANEL ENHANCEMENTS
   Styles for context content in rail
   ======================================== */

.context-sub[b-bswc6hpv2l] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.context-empty[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
}

.context-empty svg[b-bswc6hpv2l] {
    margin-bottom: 12px;
}

.context-empty span[b-bswc6hpv2l] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.context-empty small[b-bswc6hpv2l] {
    font-size: 0.75rem;
    margin-top: 4px;
    max-width: 200px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   Mobile-friendly overlay sizing
   ======================================== */
@media (max-width: 640px) {

    .upload-dialog-container[b-bswc6hpv2l],
    .progress-dialog-container[b-bswc6hpv2l],
    .approval-dialog-container[b-bswc6hpv2l] {
        width: 95vw;
        max-width: none;
        margin: 10px;
    }

    .inline-component-container[b-bswc6hpv2l] {
        padding: 12px;
        margin-top: 8px;
    }
}

/* ========================================
   HITL CRUD CONFIRMATION DIALOG STYLES
   Human-in-the-Loop confirmation for CRUD operations
   Monochrome professional styling (matching BEC theme)
   ======================================== */

.hitl-confirmation-overlay[b-bswc6hpv2l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn-b-bswc6hpv2l 0.2s ease-out;
}

.hitl-confirmation-card[b-bswc6hpv2l] {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 420px;
    max-width: 90vw;
    overflow: hidden;
    animation: scaleIn-b-bswc6hpv2l 0.2s ease-out;
    border: 1px solid #e5e7eb;
}

/* Header Section */
.hitl-header[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.hitl-icon[b-bswc6hpv2l] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6b7280;
    color: white;
    flex-shrink: 0;
}

.hitl-icon.action-delete[b-bswc6hpv2l] {
    background: #6b7280;
}

.hitl-icon.action-create[b-bswc6hpv2l] {
    background: #6b7280;
}

.hitl-icon.action-update[b-bswc6hpv2l] {
    background: #6b7280;
}

.hitl-title[b-bswc6hpv2l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hitl-title .action-type[b-bswc6hpv2l] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.hitl-title .action-target[b-bswc6hpv2l] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hitl-close-btn[b-bswc6hpv2l] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: all 0.15s ease;
}

.hitl-close-btn:hover[b-bswc6hpv2l] {
    background: #f3f4f6;
    color: #374151;
}

/* Body Section */
.hitl-body[b-bswc6hpv2l] {
    padding: 20px;
}

.hitl-message[b-bswc6hpv2l] {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

/* Impact Summary */
.hitl-impact-summary[b-bswc6hpv2l] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
}

.impact-row[b-bswc6hpv2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
}

.impact-row:not(:last-child)[b-bswc6hpv2l] {
    border-bottom: 1px solid #e5e7eb;
}

.impact-row .label[b-bswc6hpv2l] {
    color: #6b7280;
}

.impact-row .value[b-bswc6hpv2l] {
    font-weight: 600;
    color: #374151;
    font-family: "JetBrains Mono", "Fira Code", monospace;
}

.impact-row.highlight[b-bswc6hpv2l] {
    background: #f3f4f6;
    margin: 4px -8px;
    padding: 8px;
    border-radius: 6px;
}

.impact-row .value.positive[b-bswc6hpv2l] {
    color: #059669;
}

.impact-row .value.negative[b-bswc6hpv2l] {
    color: #dc2626;
}

/* Timer */
.hitl-timer[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #9ca3af;
    padding-top: 8px;
}

/* Actions Section */
.hitl-actions[b-bswc6hpv2l] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.hitl-btn[b-bswc6hpv2l] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.hitl-btn-reject[b-bswc6hpv2l] {
    background: white;
    color: #374151;
    border-color: #d1d5db;
}

.hitl-btn-reject:hover[b-bswc6hpv2l] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.hitl-btn-confirm[b-bswc6hpv2l] {
    background: #374151;
    color: white;
    border-color: #374151;
}

.hitl-btn-confirm:hover[b-bswc6hpv2l] {
    background: #1f2937;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hitl-confirmation-card[b-bswc6hpv2l] {
        width: 95vw;
        margin: 10px;
    }
    
    .hitl-actions[b-bswc6hpv2l] {
        flex-direction: column;
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
   Document Indexing Status Badge
   Shows indexing progress for uploaded documents
   ════════════════════════════════════════════════════════════════════════════════ */

.indexing-status-badge[b-bswc6hpv2l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Idle state - no documents being indexed */
.indexing-status-badge.idle[b-bswc6hpv2l] {
    display: none;
}

/* Pending - documents uploaded, waiting for project selection */
.indexing-status-badge.pending[b-bswc6hpv2l] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.indexing-status-badge.pending[b-bswc6hpv2l]::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: pulse-badge-b-bswc6hpv2l 1.5s infinite;
}

/* Queued - linked to project, waiting to start */
.indexing-status-badge.queued[b-bswc6hpv2l] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.indexing-status-badge.queued[b-bswc6hpv2l]::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #d97706;
    border-radius: 50%;
    animation: pulse-badge-b-bswc6hpv2l 2s infinite;
}

/* Indexing - actively processing */
.indexing-status-badge.indexing[b-bswc6hpv2l],
.indexing-status-badge.extracting[b-bswc6hpv2l],
.indexing-status-badge.chunking[b-bswc6hpv2l],
.indexing-status-badge.embedding[b-bswc6hpv2l] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.indexing-status-badge.indexing[b-bswc6hpv2l]::before,
.indexing-status-badge.extracting[b-bswc6hpv2l]::before,
.indexing-status-badge.chunking[b-bswc6hpv2l]::before,
.indexing-status-badge.embedding[b-bswc6hpv2l]::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-badge-b-bswc6hpv2l 0.8s linear infinite;
}

/* Completed - all documents indexed */
.indexing-status-badge.completed[b-bswc6hpv2l] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
    animation: fade-out-badge-b-bswc6hpv2l 3s forwards;
}

.indexing-status-badge.completed[b-bswc6hpv2l]::before {
    content: '✓';
    font-size: 0.8rem;
}

/* Failed - indexing error */
.indexing-status-badge.failed[b-bswc6hpv2l] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.indexing-status-badge.failed[b-bswc6hpv2l]::before {
    content: '✕';
    font-size: 0.8rem;
}

/* Progress indicator inside badge */
.indexing-progress-bar[b-bswc6hpv2l] {
    width: 40px;
    height: 4px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-left: 4px;
}

.indexing-progress-fill[b-bswc6hpv2l] {
    height: 100%;
    background: #2563eb;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Animations */
@keyframes pulse-badge-b-bswc6hpv2l {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

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

@keyframes fade-out-badge-b-bswc6hpv2l {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   V5 Hive Mind: Memory Organization Indicator
   Engaging inline message shown above input when context is being optimized
   ════════════════════════════════════════════════════════════════════════════════ */

.memory-organization-indicator[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.08));
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.15);
    animation: memory-org-fade-in-b-bswc6hpv2l 0.3s ease-out, memory-org-shimmer-b-bswc6hpv2l 2s ease-in-out infinite;
}

.memory-org-text[b-bswc6hpv2l] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--BEC-text-secondary, #6b7280);
    letter-spacing: 0.01em;
    animation: memory-org-pulse-b-bswc6hpv2l 1.5s ease-in-out infinite;
}

/* Subtle shimmer animation for the background */
@keyframes memory-org-shimmer-b-bswc6hpv2l {
    0%, 100% {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.08));
    }
    50% {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
    }
}

/* Fade in animation */
@keyframes memory-org-fade-in-b-bswc6hpv2l {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Text pulse animation */
@keyframes memory-org-pulse-b-bswc6hpv2l {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
   GOD MODE: Excel Generation Indicator
   Shows progress while Excel file is being generated
   ════════════════════════════════════════════════════════════════════════════════ */

.excel-generation-indicator[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.08));
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    animation: excel-gen-fade-in-b-bswc6hpv2l 0.3s ease-out;
}

.excel-gen-icon[b-bswc6hpv2l] {
    color: #10b981;
    display: flex;
    align-items: center;
}

.excel-gen-text[b-bswc6hpv2l] {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: #e5e7eb;
}

.excel-gen-spinner[b-bswc6hpv2l] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin-b-bswc6hpv2l 0.8s linear infinite;
}

@keyframes excel-gen-fade-in-b-bswc6hpv2l {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
   GOD MODE: Smart Upload Zone
   Context-aware dropzone for re-importing edited Excel files
   ════════════════════════════════════════════════════════════════════════════════ */

.smart-upload-zone[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.05));
    border: 2px dashed rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.smart-upload-zone:hover[b-bswc6hpv2l] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 191, 36, 0.08));
    border-color: rgba(245, 158, 11, 0.5);
}

.smart-upload-zone:active[b-bswc6hpv2l] {
    transform: scale(0.99);
}

.smart-upload-zone .upload-icon[b-bswc6hpv2l] {
    color: #f59e0b;
    display: flex;
    align-items: center;
}

.smart-upload-zone .upload-text[b-bswc6hpv2l] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #fbbf24;
}

/* Drag-over state */
.smart-upload-zone.drag-over[b-bswc6hpv2l] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.15));
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

/* ========================================
   ENTERPRISE FIX: Terminal Death Recovery Overlay
   Full-screen overlay for permanent connection loss
   ======================================== */
.connection-lost-overlay[b-bswc6hpv2l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn-b-bswc6hpv2l 0.3s ease-out;
}

.connection-lost-card[b-bswc6hpv2l] {
    background: white;
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-bswc6hpv2l 0.4s ease-out;
}

.disconnect-icon[b-bswc6hpv2l] {
    color: #ef4444;
    margin-bottom: 1.5rem;
}

.disconnect-icon svg[b-bswc6hpv2l] {
    width: 64px;
    height: 64px;
}

.connection-lost-card h2[b-bswc6hpv2l] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
}

.disconnect-reason[b-bswc6hpv2l] {
    color: #6b7280;
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.disconnect-hint[b-bswc6hpv2l] {
    color: #9ca3af;
    font-size: 0.875rem;
    margin: 0 0 1.5rem 0;
}

.reload-btn[b-bswc6hpv2l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.reload-btn:hover[b-bswc6hpv2l] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

.reload-btn:active[b-bswc6hpv2l] {
    transform: translateY(0);
}

.reload-btn svg[b-bswc6hpv2l] {
    width: 20px;
    height: 20px;
}

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

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

/* ═══════════════════════════════════════════════════════════════════════════════
   SUMMARY CONFIRM CARD STYLES
   HITL confirmation dialog for DOC_SUMMARY_CONFIRM, INSERT_CONFIRM, LEGAL_CHECK steps
   ═══════════════════════════════════════════════════════════════════════════════ */

.summary-confirm-card[b-bswc6hpv2l] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.95));
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: 0;
    margin: 16px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
    animation: slideUp-b-bswc6hpv2l 0.3s ease-out;
}

.summary-header[b-bswc6hpv2l] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(168, 85, 247, 0.1));
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.summary-icon[b-bswc6hpv2l] {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 12px;
}

.summary-title h4[b-bswc6hpv2l] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
}

.hitl-badge[b-bswc6hpv2l] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-radius: 6px;
    margin-top: 4px;
}

.summary-content[b-bswc6hpv2l] {
    padding: 24px;
    color: #cbd5e1;
    font-size: 0.9375rem;
    line-height: 1.7;
    max-height: 400px;
    overflow-y: auto;
}

/* Markdown content styling inside summary */
.summary-content h2[b-bswc6hpv2l] {
    color: #f1f5f9;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.summary-content h3[b-bswc6hpv2l] {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
    margin: 16px 0 8px 0;
}

.summary-content p[b-bswc6hpv2l] {
    margin: 0 0 12px 0;
}

.summary-content ul[b-bswc6hpv2l], .summary-content ol[b-bswc6hpv2l] {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.summary-content li[b-bswc6hpv2l] {
    margin: 4px 0;
}

.summary-content strong[b-bswc6hpv2l] {
    color: #f1f5f9;
}

.summary-content code[b-bswc6hpv2l] {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.875em;
}

.summary-content hr[b-bswc6hpv2l] {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: 16px 0;
}

.summary-actions[b-bswc6hpv2l] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(15, 23, 42, 0.5);
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.summary-actions button[b-bswc6hpv2l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.summary-actions .btn-confirm[b-bswc6hpv2l] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    flex: 1;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.summary-actions .btn-confirm:hover[b-bswc6hpv2l] {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.summary-actions .btn-edit[b-bswc6hpv2l] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.summary-actions .btn-edit:hover[b-bswc6hpv2l] {
    background: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.4);
}

.summary-actions .btn-cancel[b-bswc6hpv2l] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.summary-actions .btn-cancel:hover[b-bswc6hpv2l] {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

/* ========================================
   THIN SCROLLBAR FOR HISTORY LIST
   ENTERPRISE FIX (2026-01-11): Uses BEC Theme variables (no hardcoded values)
   Microsoft Pattern: Sleek, modern scrollbar for sidebars
   ======================================== */
.history-list[b-bswc6hpv2l]::-webkit-scrollbar {
    width: var(--BEC-scrollbarThinWidth);
    height: var(--BEC-scrollbarThinWidth);
}

.history-list[b-bswc6hpv2l]::-webkit-scrollbar-track {
    background: var(--BEC-scrollbarThinTrack);
    border-radius: var(--BEC-scrollbarThinRadius);
}

.history-list[b-bswc6hpv2l]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-scrollbarThinThumb);
    border-radius: var(--BEC-scrollbarThinRadius);
}

.history-list[b-bswc6hpv2l]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-scrollbarThinThumbHover);
}

/* ========================================
   EMPTY STATE - No Conversations
   ENTERPRISE FIX (2026-01-11): User-friendly empty state
   ======================================== */
.no-conversations-state[b-bswc6hpv2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
    gap: 12px;
}

.no-conversations-state svg[b-bswc6hpv2l] {
    width: 48px;
    height: 48px;
    opacity: 0.5;
    margin-bottom: 8px;
}

.no-conversations-state > span:first-of-type[b-bswc6hpv2l] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.no-conversations-state .hint[b-bswc6hpv2l] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.7;
}
/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/DataDisplay/ChangeLogPanel.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Change Log Panel Styles
   Phase 8: BOQ Versioning and Change Management
   ===================================================== */

/* Container */
.changelog-panel[b-seau5qbs96] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-md, 1rem);
    padding: var(--BEC-spacing-lg, 1.5rem);
    background: var(--BEC-surface-primary, #ffffff);
    border-radius: var(--BEC-radius-lg, 12px);
    box-shadow: var(--BEC-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
}

/* Header */
.changelog-header[b-seau5qbs96] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--BEC-spacing-md, 1rem);
}

.changelog-title[b-seau5qbs96] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 0.5rem);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--BEC-text-primary, #1a1a2e);
}

.title-icon[b-seau5qbs96] {
    font-size: 1.25rem;
}

.changelog-summary-badges[b-seau5qbs96] {
    display: flex;
    gap: var(--BEC-spacing-sm, 0.5rem);
}

.badge[b-seau5qbs96] {
    padding: 0.25rem 0.5rem;
    border-radius: var(--BEC-radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: 500;
}

.badge.critical[b-seau5qbs96] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.badge.high[b-seau5qbs96] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.badge.medium[b-seau5qbs96] {
    background: rgba(234, 179, 8, 0.1);
    color: #ca8a04;
}

.badge.unack[b-seau5qbs96] {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
}

/* Stats */
.changelog-stats[b-seau5qbs96] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--BEC-spacing-sm, 0.5rem);
}

.stat-card[b-seau5qbs96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--BEC-spacing-sm, 0.5rem);
    background: var(--BEC-surface-secondary, #f9fafb);
    border-radius: var(--BEC-radius-sm, 4px);
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
}

.stat-card.added[b-seau5qbs96] { border-left: 3px solid #22c55e; }
.stat-card.modified[b-seau5qbs96] { border-left: 3px solid #f59e0b; }
.stat-card.deleted[b-seau5qbs96] { border-left: 3px solid #ef4444; }
.stat-card.variance.positive[b-seau5qbs96] { border-left: 3px solid #22c55e; }
.stat-card.variance.negative[b-seau5qbs96] { border-left: 3px solid #ef4444; }

.stat-value[b-seau5qbs96] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--BEC-text-primary, #1a1a2e);
}

.stat-label[b-seau5qbs96] {
    font-size: 0.6875rem;
    color: var(--BEC-text-secondary, #6b7280);
    text-transform: uppercase;
}

/* Toolbar */
.changelog-toolbar[b-seau5qbs96] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--BEC-spacing-md, 1rem);
    flex-wrap: wrap;
    padding: var(--BEC-spacing-sm, 0.5rem) 0;
    border-top: 1px solid var(--BEC-border-primary, #e5e7eb);
    border-bottom: 1px solid var(--BEC-border-primary, #e5e7eb);
}

.filter-controls[b-seau5qbs96] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 0.5rem);
    flex-wrap: wrap;
}

.filter-controls select[b-seau5qbs96] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
    border-radius: var(--BEC-radius-sm, 4px);
    font-size: 0.8125rem;
    background: var(--BEC-surface-primary, #ffffff);
}

.checkbox-filter[b-seau5qbs96] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--BEC-text-secondary, #6b7280);
    cursor: pointer;
}

.checkbox-filter input[b-seau5qbs96] {
    cursor: pointer;
}

.toolbar-btn[b-seau5qbs96] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: var(--BEC-accent-primary, #3b82f6);
    color: white;
    border: none;
    border-radius: var(--BEC-radius-sm, 4px);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover:not(:disabled)[b-seau5qbs96] {
    background: var(--BEC-accent-primary-hover, #2563eb);
}

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

.spinner-sm[b-seau5qbs96] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-seau5qbs96 0.8s linear infinite;
}

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

/* Change Log List */
.changelog-list[b-seau5qbs96] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-sm, 0.5rem);
    max-height: 500px;
    overflow-y: auto;
}

.changelog-item[b-seau5qbs96] {
    display: flex;
    gap: var(--BEC-spacing-md, 1rem);
    padding: var(--BEC-spacing-md, 1rem);
    background: var(--BEC-surface-secondary, #f9fafb);
    border-radius: var(--BEC-radius-md, 8px);
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
    transition: all 0.2s ease;
}

.changelog-item.unacknowledged[b-seau5qbs96] {
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.3);
}

.changelog-item.severity-critical[b-seau5qbs96] {
    border-left: 3px solid #dc2626;
}

.changelog-item.severity-high[b-seau5qbs96] {
    border-left: 3px solid #f59e0b;
}

.changelog-item.severity-medium[b-seau5qbs96] {
    border-left: 3px solid #eab308;
}

.changelog-item.severity-low[b-seau5qbs96] {
    border-left: 3px solid #22c55e;
}

.change-indicator[b-seau5qbs96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.severity-dot[b-seau5qbs96] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.severity-dot.critical[b-seau5qbs96] { background: #dc2626; }
.severity-dot.high[b-seau5qbs96] { background: #f59e0b; }
.severity-dot.medium[b-seau5qbs96] { background: #eab308; }
.severity-dot.low[b-seau5qbs96] { background: #22c55e; }

.change-type-icon[b-seau5qbs96] {
    font-size: 1rem;
}

.change-content[b-seau5qbs96] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.change-header[b-seau5qbs96] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 0.5rem);
    flex-wrap: wrap;
}

.change-category[b-seau5qbs96] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--BEC-text-primary, #1a1a2e);
}

.change-index[b-seau5qbs96] {
    font-family: monospace;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background: var(--BEC-surface-tertiary, #f3f4f6);
    border-radius: var(--BEC-radius-xs, 2px);
    color: var(--BEC-text-secondary, #6b7280);
}

.change-time[b-seau5qbs96] {
    font-size: 0.75rem;
    color: var(--BEC-text-tertiary, #9ca3af);
    margin-left: auto;
}

.change-description[b-seau5qbs96] {
    font-size: 0.8125rem;
    color: var(--BEC-text-secondary, #6b7280);
}

.field-change[b-seau5qbs96] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.old-value[b-seau5qbs96] {
    text-decoration: line-through;
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
    padding: 0 0.25rem;
    border-radius: 2px;
}

.new-value[b-seau5qbs96] {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.1);
    padding: 0 0.25rem;
    border-radius: 2px;
}

.arrow[b-seau5qbs96] {
    color: var(--BEC-text-tertiary, #9ca3af);
}

.change-impact[b-seau5qbs96] {
    font-size: 0.75rem;
    font-weight: 500;
}

.change-impact.positive[b-seau5qbs96] { color: #16a34a; }
.change-impact.negative[b-seau5qbs96] { color: #dc2626; }

.review-notes[b-seau5qbs96] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--BEC-text-tertiary, #9ca3af);
    font-style: italic;
    padding-top: 0.25rem;
}

.change-actions[b-seau5qbs96] {
    display: flex;
    align-items: flex-start;
}

.ack-btn[b-seau5qbs96] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-accent-primary, #3b82f6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.ack-btn:hover[b-seau5qbs96] {
    background: var(--BEC-accent-primary-hover, #2563eb);
    transform: scale(1.1);
}

.ack-badge[b-seau5qbs96] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border-radius: var(--BEC-radius-xs, 2px);
}

/* Empty & Loading States */
.empty-state[b-seau5qbs96],
.loading-state[b-seau5qbs96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacing-xl, 3rem);
    text-align: center;
    color: var(--BEC-text-tertiary, #9ca3af);
}

.empty-icon[b-seau5qbs96] {
    font-size: 2.5rem;
    margin-bottom: var(--BEC-spacing-sm, 0.5rem);
}

.loading-spinner[b-seau5qbs96] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-border-primary, #e5e7eb);
    border-top-color: var(--BEC-accent-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-seau5qbs96 1s linear infinite;
    margin-bottom: var(--BEC-spacing-sm, 0.5rem);
}

/* Responsive */
@media (max-width: 640px) {
    .changelog-header[b-seau5qbs96] {
        flex-direction: column;
        align-items: flex-start;
    }

    .changelog-toolbar[b-seau5qbs96] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-controls[b-seau5qbs96] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-controls select[b-seau5qbs96] {
        width: 100%;
    }

    .changelog-item[b-seau5qbs96] {
        flex-direction: column;
    }

    .change-indicator[b-seau5qbs96] {
        flex-direction: row;
    }

    .change-time[b-seau5qbs96] {
        margin-left: 0;
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/DataDisplay/ContractRiskSummary.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   BEC Smart Agent - Level 1000 Upgrade
   Contract Risk Summary Component Styles
   ═══════════════════════════════════════════════════════════════════════════════════════
   
   Component: ContractRiskSummary
   Purpose: Display contract risk analysis with killer clause detection
   
   Uses BEC_Theme.css variables for consistent styling
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ======================= */
/* Main Container          */
/* ======================= */

.contract-risk-summary[b-kck5zm26z5] {
    background: var(--BEC-Surface, #1e1e1e);
    border: 1px solid var(--BEC-Border, #333);
    border-radius: var(--BEC-BorderRadius-lg, 12px);
    padding: var(--BEC-Spacing-lg, 20px);
    margin-bottom: var(--BEC-Spacing-lg, 20px);
}

.contract-risk-summary.risk-critical[b-kck5zm26z5] {
    border-left: 4px solid var(--BEC-Error, #e81123);
}

.contract-risk-summary.risk-high[b-kck5zm26z5] {
    border-left: 4px solid #ff8c00;
}

.contract-risk-summary.risk-medium[b-kck5zm26z5] {
    border-left: 4px solid var(--BEC-Warning, #ffb900);
}

.contract-risk-summary.risk-low[b-kck5zm26z5] {
    border-left: 4px solid var(--BEC-Success, #107c10);
}

/* ======================= */
/* Header                  */
/* ======================= */

.risk-header[b-kck5zm26z5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-Spacing-lg, 20px);
    padding-bottom: var(--BEC-Spacing-md, 16px);
    border-bottom: 1px solid var(--BEC-Border, #333);
}

.risk-title[b-kck5zm26z5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.risk-title h3[b-kck5zm26z5] {
    margin: 0;
    font-size: var(--BEC-FontSize-lg, 18px);
    font-weight: 600;
    color: var(--BEC-TextPrimary, #ffffff);
}

.risk-icon[b-kck5zm26z5] {
    font-size: 24px;
}

.overall-risk-badge[b-kck5zm26z5] {
    padding: 8px 16px;
    border-radius: var(--BEC-BorderRadius-md, 8px);
    font-weight: 600;
    font-size: var(--BEC-FontSize-sm, 14px);
}

.badge-critical[b-kck5zm26z5] {
    background: rgba(232, 17, 35, 0.2);
    color: var(--BEC-Error, #e81123);
}

.badge-high[b-kck5zm26z5] {
    background: rgba(255, 140, 0, 0.2);
    color: #ff8c00;
}

.badge-medium[b-kck5zm26z5] {
    background: rgba(255, 185, 0, 0.2);
    color: var(--BEC-Warning, #ffb900);
}

.badge-low[b-kck5zm26z5] {
    background: rgba(16, 124, 16, 0.2);
    color: var(--BEC-Success, #107c10);
}

/* ======================= */
/* Risk Score Section      */
/* ======================= */

.risk-score-section[b-kck5zm26z5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-xl, 32px);
    margin-bottom: var(--BEC-Spacing-lg, 20px);
    padding: var(--BEC-Spacing-md, 16px);
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-md, 8px);
}

.risk-gauge[b-kck5zm26z5] {
    position: relative;
    width: 120px;
    text-align: center;
}

.gauge-svg[b-kck5zm26z5] {
    width: 100%;
    height: auto;
}

.risk-score-value[b-kck5zm26z5] {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--BEC-FontSize-xl, 24px);
    font-weight: 700;
    color: var(--BEC-TextPrimary, #ffffff);
}

.risk-score-label[b-kck5zm26z5] {
    margin-top: 4px;
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risk-stats[b-kck5zm26z5] {
    display: flex;
    gap: var(--BEC-Spacing-lg, 20px);
    flex-wrap: wrap;
}

.stat-item[b-kck5zm26z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--BEC-Spacing-sm, 12px) var(--BEC-Spacing-md, 16px);
    min-width: 80px;
}

.stat-item.critical .stat-value[b-kck5zm26z5] {
    color: var(--BEC-Error, #e81123);
}

.stat-value[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-xl, 24px);
    font-weight: 700;
    color: var(--BEC-Primary, #0078d4);
}

.stat-label[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
    text-align: center;
    margin-top: 4px;
}

/* ======================= */
/* Executive Summary       */
/* ======================= */

.executive-summary[b-kck5zm26z5] {
    padding: var(--BEC-Spacing-md, 16px);
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-md, 8px);
    margin-bottom: var(--BEC-Spacing-lg, 20px);
}

.executive-summary p[b-kck5zm26z5] {
    margin: 0;
    font-size: var(--BEC-FontSize-sm, 14px);
    line-height: 1.6;
    color: var(--BEC-TextPrimary, #ffffff);
}

/* ======================= */
/* Section Headers         */
/* ======================= */

.section-header[b-kck5zm26z5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

.section-header h4[b-kck5zm26z5] {
    margin: 0;
    font-size: var(--BEC-FontSize-md, 16px);
    font-weight: 600;
    color: var(--BEC-TextPrimary, #ffffff);
}

.section-icon[b-kck5zm26z5] {
    font-size: 18px;
}

/* ======================= */
/* Killer Clauses Section  */
/* ======================= */

.killer-clauses-section[b-kck5zm26z5] {
    margin-bottom: var(--BEC-Spacing-lg, 20px);
    padding: var(--BEC-Spacing-md, 16px);
    background: rgba(232, 17, 35, 0.1);
    border: 1px solid rgba(232, 17, 35, 0.3);
    border-radius: var(--BEC-BorderRadius-md, 8px);
}

.killer-clauses-list[b-kck5zm26z5] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-Spacing-md, 16px);
}

.killer-clause-item[b-kck5zm26z5] {
    padding: var(--BEC-Spacing-sm, 12px);
    background: var(--BEC-Surface, #1e1e1e);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
}

.killer-header[b-kck5zm26z5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.killer-type[b-kck5zm26z5] {
    font-weight: 600;
    color: var(--BEC-Error, #e81123);
}

.killer-confidence[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
}

.killer-explanation[b-kck5zm26z5] {
    margin: 0 0 8px 0;
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-TextPrimary, #ffffff);
    line-height: 1.5;
}

.killer-action[b-kck5zm26z5] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px;
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-Warning, #ffb900);
}

.action-icon[b-kck5zm26z5] {
    flex-shrink: 0;
}

/* ======================= */
/* Risk Breakdown          */
/* ======================= */

.risk-breakdown-section[b-kck5zm26z5] {
    margin-bottom: var(--BEC-Spacing-lg, 20px);
}

.risk-breakdown-grid[b-kck5zm26z5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item[b-kck5zm26z5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-sm, 12px);
}

.breakdown-category[b-kck5zm26z5] {
    width: 100px;
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-TextSecondary, #888);
}

.breakdown-bar[b-kck5zm26z5] {
    flex: 1;
    height: 8px;
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-fill[b-kck5zm26z5] {
    height: 100%;
    background: var(--BEC-Primary, #0078d4);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.breakdown-count[b-kck5zm26z5] {
    width: 30px;
    text-align: right;
    font-size: var(--BEC-FontSize-sm, 14px);
    font-weight: 600;
    color: var(--BEC-TextPrimary, #ffffff);
}

/* ======================= */
/* Top Risks Section       */
/* ======================= */

.top-risks-section[b-kck5zm26z5] {
    margin-bottom: var(--BEC-Spacing-lg, 20px);
}

.top-risks-list[b-kck5zm26z5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.risk-item[b-kck5zm26z5] {
    padding: var(--BEC-Spacing-sm, 12px);
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    border-left: 3px solid transparent;
}

.risk-item.badge-critical[b-kck5zm26z5] {
    border-left-color: var(--BEC-Error, #e81123);
}

.risk-item.badge-high[b-kck5zm26z5] {
    border-left-color: #ff8c00;
}

.risk-item.badge-medium[b-kck5zm26z5] {
    border-left-color: var(--BEC-Warning, #ffb900);
}

.risk-item-header[b-kck5zm26z5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.risk-level-badge[b-kck5zm26z5] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--BEC-FontSize-xs, 12px);
    font-weight: 600;
    background: var(--BEC-Surface, #1e1e1e);
}

.risk-clause[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
}

.risk-item-title[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-TextPrimary, #ffffff);
    margin-bottom: 4px;
}

.risk-impact[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-Warning, #ffb900);
}

/* ======================= */
/* Historical Section      */
/* ======================= */

.historical-section[b-kck5zm26z5] {
    margin-bottom: var(--BEC-Spacing-lg, 20px);
}

.historical-list[b-kck5zm26z5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.historical-item[b-kck5zm26z5] {
    padding: var(--BEC-Spacing-md, 16px);
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-md, 8px);
    border: 1px solid var(--BEC-Border, #333);
}

.historical-item.negative-outcome[b-kck5zm26z5] {
    border-left: 3px solid var(--BEC-Error, #e81123);
}

.historical-item.positive-outcome[b-kck5zm26z5] {
    border-left: 3px solid var(--BEC-Success, #107c10);
}

.historical-header[b-kck5zm26z5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.similarity-badge[b-kck5zm26z5] {
    padding: 2px 8px;
    background: var(--BEC-Primary, #0078d4);
    color: white;
    border-radius: 4px;
    font-size: var(--BEC-FontSize-xs, 12px);
    font-weight: 500;
}

.historical-project[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
}

.historical-outcome[b-kck5zm26z5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.outcome-label[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-TextSecondary, #888);
}

.outcome-value[b-kck5zm26z5] {
    font-weight: 600;
    font-size: var(--BEC-FontSize-sm, 14px);
}

.outcome-positive[b-kck5zm26z5] {
    color: var(--BEC-Success, #107c10);
}

.outcome-negative[b-kck5zm26z5] {
    color: var(--BEC-Error, #e81123);
}

.outcome-neutral[b-kck5zm26z5] {
    color: var(--BEC-TextPrimary, #ffffff);
}

.historical-impact[b-kck5zm26z5] {
    font-size: var(--BEC-FontSize-sm, 14px);
    margin-bottom: 8px;
}

.historical-lesson[b-kck5zm26z5] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: var(--BEC-Surface, #1e1e1e);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
    font-style: italic;
}

.lesson-icon[b-kck5zm26z5] {
    flex-shrink: 0;
}

/* ======================= */
/* Recommendations         */
/* ======================= */

.recommendations-section[b-kck5zm26z5] {
    margin-bottom: var(--BEC-Spacing-lg, 20px);
}

.recommendations-list[b-kck5zm26z5] {
    margin: 0;
    padding-left: 20px;
}

.recommendations-list li[b-kck5zm26z5] {
    padding: 8px 0;
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-TextPrimary, #ffffff);
    line-height: 1.5;
}

.recommendations-list li[b-kck5zm26z5]::marker {
    color: var(--BEC-Success, #107c10);
}

/* ======================= */
/* Disclaimer              */
/* ======================= */

.disclaimer[b-kck5zm26z5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--BEC-Spacing-sm, 12px);
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextTertiary, #666);
}

.disclaimer-icon[b-kck5zm26z5] {
    flex-shrink: 0;
    font-size: 14px;
}

/* ======================= */
/* Responsive              */
/* ======================= */

@media (max-width: 768px) {
    .risk-header[b-kck5zm26z5] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .risk-score-section[b-kck5zm26z5] {
        flex-direction: column;
        align-items: center;
    }
    
    .risk-stats[b-kck5zm26z5] {
        justify-content: center;
        width: 100%;
    }
    
    .killer-header[b-kck5zm26z5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/DataDisplay/VersionComparison.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Version Comparison Styles
   Phase 8: BOQ Versioning and Change Management
   ===================================================== */

/* Container */
.version-comparison-container[b-g59xu1ikij] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-lg, 1.5rem);
    padding: var(--BEC-spacing-lg, 1.5rem);
    background: var(--BEC-surface-primary, #ffffff);
    border-radius: var(--BEC-radius-lg, 12px);
    box-shadow: var(--BEC-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
}

/* Header */
.comparison-header[b-g59xu1ikij] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-md, 1rem);
}

.comparison-title[b-g59xu1ikij] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 0.5rem);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--BEC-text-primary, #1a1a2e);
}

.title-icon[b-g59xu1ikij] {
    font-size: 1.5rem;
}

/* Version Selectors */
.version-selectors[b-g59xu1ikij] {
    display: flex;
    align-items: flex-end;
    gap: var(--BEC-spacing-md, 1rem);
    flex-wrap: wrap;
}

.version-selector[b-g59xu1ikij] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-xs, 0.25rem);
    flex: 1;
    min-width: 200px;
}

.version-selector label[b-g59xu1ikij] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--BEC-text-secondary, #6b7280);
}

.version-selector select[b-g59xu1ikij] {
    padding: var(--BEC-spacing-sm, 0.5rem) var(--BEC-spacing-md, 1rem);
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-surface-secondary, #f9fafb);
    font-size: 0.875rem;
    color: var(--BEC-text-primary, #1a1a2e);
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-selector select:hover:not(:disabled)[b-g59xu1ikij] {
    border-color: var(--BEC-accent-primary, #3b82f6);
}

.version-selector select:focus[b-g59xu1ikij] {
    outline: none;
    border-color: var(--BEC-accent-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.version-arrow[b-g59xu1ikij] {
    font-size: 1.5rem;
    color: var(--BEC-text-tertiary, #9ca3af);
    padding-bottom: 0.5rem;
}

.compare-btn[b-g59xu1ikij] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 0.5rem);
    padding: var(--BEC-spacing-sm, 0.5rem) var(--BEC-spacing-lg, 1.5rem);
    background: var(--BEC-accent-primary, #3b82f6);
    color: white;
    border: none;
    border-radius: var(--BEC-radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compare-btn:hover:not(:disabled)[b-g59xu1ikij] {
    background: var(--BEC-accent-primary-hover, #2563eb);
    transform: translateY(-1px);
}

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

/* Summary Cards */
.comparison-summary[b-g59xu1ikij] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--BEC-spacing-md, 1rem);
}

.summary-card[b-g59xu1ikij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--BEC-spacing-md, 1rem);
    background: var(--BEC-surface-secondary, #f9fafb);
    border-radius: var(--BEC-radius-md, 8px);
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
    text-align: center;
}

.summary-card.added[b-g59xu1ikij] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.summary-card.modified[b-g59xu1ikij] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.summary-card.deleted[b-g59xu1ikij] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.summary-card.unchanged[b-g59xu1ikij] {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.05);
}

.summary-card.variance.positive[b-g59xu1ikij] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.summary-card.variance.negative[b-g59xu1ikij] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.summary-icon[b-g59xu1ikij] {
    font-size: 1.5rem;
    margin-bottom: var(--BEC-spacing-xs, 0.25rem);
}

.summary-count[b-g59xu1ikij] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--BEC-text-primary, #1a1a2e);
}

.summary-label[b-g59xu1ikij] {
    font-size: 0.75rem;
    color: var(--BEC-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Filter Bar */
.filter-bar[b-g59xu1ikij] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--BEC-spacing-md, 1rem);
    flex-wrap: wrap;
}

.filter-group[b-g59xu1ikij] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 0.5rem);
}

.filter-group label[b-g59xu1ikij] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--BEC-text-secondary, #6b7280);
}

.filter-btn[b-g59xu1ikij] {
    padding: var(--BEC-spacing-xs, 0.25rem) var(--BEC-spacing-sm, 0.5rem);
    background: transparent;
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
    border-radius: var(--BEC-radius-sm, 4px);
    font-size: 0.75rem;
    color: var(--BEC-text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover[b-g59xu1ikij] {
    border-color: var(--BEC-accent-primary, #3b82f6);
    color: var(--BEC-accent-primary, #3b82f6);
}

.filter-btn.active[b-g59xu1ikij] {
    background: var(--BEC-accent-primary, #3b82f6);
    border-color: var(--BEC-accent-primary, #3b82f6);
    color: white;
}

.search-box input[b-g59xu1ikij] {
    padding: var(--BEC-spacing-xs, 0.25rem) var(--BEC-spacing-md, 1rem);
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
    border-radius: var(--BEC-radius-md, 8px);
    font-size: 0.875rem;
    min-width: 200px;
}

.search-box input:focus[b-g59xu1ikij] {
    outline: none;
    border-color: var(--BEC-accent-primary, #3b82f6);
}

/* Comparison Table */
.comparison-table-container[b-g59xu1ikij] {
    overflow-x: auto;
    border-radius: var(--BEC-radius-md, 8px);
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
}

.comparison-table[b-g59xu1ikij] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.comparison-table th[b-g59xu1ikij] {
    padding: var(--BEC-spacing-sm, 0.5rem);
    background: var(--BEC-surface-tertiary, #f3f4f6);
    border-bottom: 2px solid var(--BEC-border-primary, #e5e7eb);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--BEC-text-secondary, #6b7280);
}

.comparison-table td[b-g59xu1ikij] {
    padding: var(--BEC-spacing-sm, 0.5rem);
    border-bottom: 1px solid var(--BEC-border-secondary, #f3f4f6);
    vertical-align: middle;
}

.comparison-table tr:hover[b-g59xu1ikij] {
    background: var(--BEC-surface-hover, rgba(59, 130, 246, 0.02));
}

/* Row Styles */
.row-added[b-g59xu1ikij] {
    background: rgba(34, 197, 94, 0.03);
}

.row-modified[b-g59xu1ikij] {
    background: rgba(245, 158, 11, 0.03);
}

.row-deleted[b-g59xu1ikij] {
    background: rgba(239, 68, 68, 0.03);
}

/* Change Badge */
.change-badge[b-g59xu1ikij] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.change-badge.added[b-g59xu1ikij] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.change-badge.modified[b-g59xu1ikij] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.change-badge.deleted[b-g59xu1ikij] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.change-badge.unchanged[b-g59xu1ikij] {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

/* Column Widths */
.change-type-col[b-g59xu1ikij] { width: 100px; }
.index-col[b-g59xu1ikij] { width: 100px; }
.description-col[b-g59xu1ikij] { min-width: 200px; max-width: 300px; }
.unit-col[b-g59xu1ikij] { width: 60px; }
.qty-col[b-g59xu1ikij] { width: 80px; text-align: right; }
.rate-col[b-g59xu1ikij] { width: 90px; text-align: right; }
.total-col[b-g59xu1ikij] { width: 100px; text-align: right; }
.variance-col[b-g59xu1ikij] { width: 100px; text-align: right; }

/* Variance Colors */
.variance-positive[b-g59xu1ikij] {
    color: #16a34a;
    font-weight: 500;
}

.variance-negative[b-g59xu1ikij] {
    color: #dc2626;
    font-weight: 500;
}

/* Empty & Loading States */
.empty-state[b-g59xu1ikij],
.loading-state[b-g59xu1ikij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacing-xl, 3rem);
    text-align: center;
    color: var(--BEC-text-tertiary, #9ca3af);
}

.empty-icon[b-g59xu1ikij] {
    font-size: 3rem;
    margin-bottom: var(--BEC-spacing-md, 1rem);
}

.loading-spinner[b-g59xu1ikij] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-border-primary, #e5e7eb);
    border-top-color: var(--BEC-accent-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-g59xu1ikij 1s linear infinite;
    margin-bottom: var(--BEC-spacing-md, 1rem);
}

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

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

/* Actions */
.comparison-actions[b-g59xu1ikij] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacing-md, 1rem);
    padding-top: var(--BEC-spacing-md, 1rem);
    border-top: 1px solid var(--BEC-border-primary, #e5e7eb);
}

.action-btn[b-g59xu1ikij] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 0.5rem);
    padding: var(--BEC-spacing-sm, 0.5rem) var(--BEC-spacing-md, 1rem);
    border-radius: var(--BEC-radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn.primary[b-g59xu1ikij] {
    background: var(--BEC-accent-primary, #3b82f6);
    color: white;
    border: none;
}

.action-btn.primary:hover[b-g59xu1ikij] {
    background: var(--BEC-accent-primary-hover, #2563eb);
}

.action-btn.secondary[b-g59xu1ikij] {
    background: transparent;
    color: var(--BEC-text-primary, #1a1a2e);
    border: 1px solid var(--BEC-border-primary, #e5e7eb);
}

.action-btn.secondary:hover[b-g59xu1ikij] {
    background: var(--BEC-surface-secondary, #f9fafb);
    border-color: var(--BEC-accent-primary, #3b82f6);
}

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

/* Responsive */
@media (max-width: 768px) {
    .version-selectors[b-g59xu1ikij] {
        flex-direction: column;
        align-items: stretch;
    }

    .version-arrow[b-g59xu1ikij] {
        transform: rotate(90deg);
        text-align: center;
        padding: 0;
    }

    .comparison-summary[b-g59xu1ikij] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-bar[b-g59xu1ikij] {
        flex-direction: column;
        align-items: stretch;
    }

    .comparison-table-container[b-g59xu1ikij] {
        margin: 0 -1rem;
        border-radius: 0;
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Dialogs/ApprovalDialog.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Approval Dialog Component
   Phase 6: HITL approval UI styling
   References: BEC_Theme.css variables
   ===================================================== */

/* Overlay */
.approval-dialog-overlay[b-z4yvs1avhd] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.approval-dialog-overlay.visible[b-z4yvs1avhd] {
    opacity: 1;
    visibility: visible;
}

/* Dialog Container */
.approval-dialog[b-z4yvs1avhd] {
    background: var(--BEC-Surface-Primary, #1a1a2e);
    border-radius: var(--BEC-Border-Radius-lg, 12px);
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: dialogSlideIn-b-z4yvs1avhd 0.3s ease;
}

@keyframes dialogSlideIn-b-z4yvs1avhd {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Risk-based border */
.approval-dialog.risk-critical[b-z4yvs1avhd] {
    border: 2px solid var(--BEC-Red-500, #ef4444);
}

.approval-dialog.risk-high[b-z4yvs1avhd] {
    border: 2px solid var(--BEC-Orange-500, #f97316);
}

.approval-dialog.risk-medium[b-z4yvs1avhd] {
    border: 2px solid var(--BEC-Yellow-500, #eab308);
}

.approval-dialog.risk-low[b-z4yvs1avhd] {
    border: 2px solid var(--BEC-Blue-500, #3b82f6);
}

/* Header */
.dialog-header[b-z4yvs1avhd] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
    padding: var(--BEC-Spacing-lg, 24px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.header-icon[b-z4yvs1avhd] {
    font-size: 2rem;
}

.header-content[b-z4yvs1avhd] {
    flex: 1;
}

.header-content h3[b-z4yvs1avhd] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
}

.risk-badge[b-z4yvs1avhd] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-badge.risk-critical[b-z4yvs1avhd] {
    background: var(--BEC-Red-900, #450a0a);
    color: var(--BEC-Red-400, #f87171);
}

.risk-badge.risk-high[b-z4yvs1avhd] {
    background: var(--BEC-Orange-900, #431407);
    color: var(--BEC-Orange-400, #fb923c);
}

.risk-badge.risk-medium[b-z4yvs1avhd] {
    background: var(--BEC-Yellow-900, #422006);
    color: var(--BEC-Yellow-400, #facc15);
}

.risk-badge.risk-low[b-z4yvs1avhd] {
    background: var(--BEC-Blue-900, #1e3a5f);
    color: var(--BEC-Blue-400, #60a5fa);
}

.close-btn[b-z4yvs1avhd] {
    background: transparent;
    border: none;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-btn:hover[b-z4yvs1avhd] {
    color: var(--BEC-Text-Primary, #ffffff);
    background: var(--BEC-Surface-Tertiary, #303050);
}

/* Body */
.dialog-body[b-z4yvs1avhd] {
    padding: var(--BEC-Spacing-lg, 24px);
    max-height: 50vh;
    overflow-y: auto;
}

.dialog-body h4[b-z4yvs1avhd] {
    margin: 0 0 var(--BEC-Spacing-sm, 8px) 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

/* Action Section */
.action-section[b-z4yvs1avhd] {
    margin-bottom: var(--BEC-Spacing-lg, 24px);
}

.action-card[b-z4yvs1avhd] {
    background: var(--BEC-Surface-Secondary, #252542);
    border-radius: var(--BEC-Border-Radius-md, 8px);
    padding: var(--BEC-Spacing-md, 16px);
}

.action-tool[b-z4yvs1avhd] {
    display: inline-block;
    font-family: monospace;
    font-size: 0.8rem;
    padding: 2px 8px;
    background: var(--BEC-Surface-Tertiary, #303050);
    border-radius: 4px;
    color: var(--BEC-Purple-400, #a78bfa);
    margin-bottom: 8px;
}

.action-description[b-z4yvs1avhd] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--BEC-Text-Primary, #ffffff);
}

/* Reason Section */
.reason-section[b-z4yvs1avhd] {
    margin-bottom: var(--BEC-Spacing-lg, 24px);
}

.reason-text[b-z4yvs1avhd] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--BEC-Yellow-400, #facc15);
    background: rgba(234, 179, 8, 0.1);
    padding: var(--BEC-Spacing-sm, 8px) var(--BEC-Spacing-md, 16px);
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    border-left: 3px solid var(--BEC-Yellow-500, #eab308);
}

/* Parameters Section */
.params-section[b-z4yvs1avhd] {
    margin-bottom: var(--BEC-Spacing-lg, 24px);
}

.params-grid[b-z4yvs1avhd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--BEC-Spacing-sm, 8px);
}

.param-item[b-z4yvs1avhd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--BEC-Surface-Secondary, #252542);
    border-radius: var(--BEC-Border-Radius-sm, 4px);
}

.param-key[b-z4yvs1avhd] {
    font-size: 0.7rem;
    color: var(--BEC-Text-Tertiary, #666666);
    text-transform: uppercase;
}

.param-value[b-z4yvs1avhd] {
    font-size: 0.85rem;
    color: var(--BEC-Text-Primary, #ffffff);
    font-family: monospace;
}

.param-more[b-z4yvs1avhd] {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--BEC-Text-Tertiary, #666666);
    padding: 4px;
}

/* Budget Warning */
.budget-warning[b-z4yvs1avhd] {
    display: flex;
    gap: var(--BEC-Spacing-sm, 8px);
    padding: var(--BEC-Spacing-md, 16px);
    border-radius: var(--BEC-Border-Radius-md, 8px);
    margin-bottom: var(--BEC-Spacing-lg, 24px);
}

.budget-warning.warning-critical[b-z4yvs1avhd] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--BEC-Red-500, #ef4444);
}

.budget-warning.warning-high[b-z4yvs1avhd] {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid var(--BEC-Orange-500, #f97316);
}

.budget-warning.warning-medium[b-z4yvs1avhd] {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid var(--BEC-Yellow-500, #eab308);
}

.budget-icon[b-z4yvs1avhd] {
    font-size: 1.5rem;
}

.budget-content strong[b-z4yvs1avhd] {
    display: block;
    font-size: 0.85rem;
    color: var(--BEC-Text-Primary, #ffffff);
    margin-bottom: 4px;
}

.budget-content p[b-z4yvs1avhd] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

/* Timer */
.timer-section[b-z4yvs1avhd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--BEC-Spacing-sm, 8px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-radius: var(--BEC-Border-Radius-sm, 4px);
}

.timer-icon[b-z4yvs1avhd] {
    font-size: 0.9rem;
}

.timer-text[b-z4yvs1avhd] {
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    font-family: monospace;
}

/* Footer */
.dialog-footer[b-z4yvs1avhd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
    padding: var(--BEC-Spacing-lg, 24px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.reject-section[b-z4yvs1avhd] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-sm, 8px);
}

.reject-input[b-z4yvs1avhd] {
    padding: 8px 12px;
    background: var(--BEC-Surface-Primary, #1a1a2e);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    color: var(--BEC-Text-Primary, #ffffff);
    font-size: 0.85rem;
    width: 180px;
}

.reject-input[b-z4yvs1avhd]::placeholder {
    color: var(--BEC-Text-Tertiary, #666666);
}

.btn-reject[b-z4yvs1avhd], .btn-approve[b-z4yvs1avhd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-Border-Radius-md, 8px);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reject[b-z4yvs1avhd] {
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Secondary, #a0a0a0);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.btn-reject:hover:not(:disabled)[b-z4yvs1avhd] {
    background: var(--BEC-Red-900, #450a0a);
    color: var(--BEC-Red-400, #f87171);
    border-color: var(--BEC-Red-500, #ef4444);
}

.btn-approve[b-z4yvs1avhd] {
    background: linear-gradient(135deg, 
        var(--BEC-Green-600, #16a34a), 
        var(--BEC-Green-500, #22c55e));
    color: white;
}

.btn-approve:hover:not(:disabled)[b-z4yvs1avhd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.btn-reject:disabled[b-z4yvs1avhd], .btn-approve:disabled[b-z4yvs1avhd] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

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

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

/* Scrollbar */
.dialog-body[b-z4yvs1avhd]::-webkit-scrollbar {
    width: 6px;
}

.dialog-body[b-z4yvs1avhd]::-webkit-scrollbar-track {
    background: var(--BEC-Surface-Secondary, #252542);
}

.dialog-body[b-z4yvs1avhd]::-webkit-scrollbar-thumb {
    background: var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: 3px;
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Dialogs/ConfirmDialog.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Confirmation Dialog Styles
   Phase 3 (2026-01-11): Enterprise-grade modal dialogs
   Microsoft Fluent Design System aligned
===================================================== */

/* Overlay */
.confirm-dialog-overlay[b-9yb6rlsz29] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-9yb6rlsz29 0.15s ease-out;
}

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

/* Dialog Container */
.confirm-dialog[b-9yb6rlsz29] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 420px;
    margin: 16px;
    animation: slideUp-b-9yb6rlsz29 0.2s ease-out;
    overflow: hidden;
}

@keyframes slideUp-b-9yb6rlsz29 {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.confirm-header[b-9yb6rlsz29] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
}

.confirm-icon[b-9yb6rlsz29] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.confirm-icon.danger[b-9yb6rlsz29] {
    background: #fef2f2;
    color: #dc2626;
}

.confirm-icon.edit[b-9yb6rlsz29] {
    background: #eff6ff;
    color: #0078d4;
}

.confirm-icon.info[b-9yb6rlsz29] {
    background: #f9fafb;
    color: #6b7280;
}

.confirm-title[b-9yb6rlsz29] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
}

/* Body */
.confirm-body[b-9yb6rlsz29] {
    padding: 0 24px 20px;
}

.confirm-message[b-9yb6rlsz29] {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Input Field for Rename */
.confirm-input-wrapper[b-9yb6rlsz29] {
    margin-top: 16px;
}

.confirm-input-wrapper label[b-9yb6rlsz29] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.confirm-input[b-9yb6rlsz29] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1f2937;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.confirm-input:focus[b-9yb6rlsz29] {
    outline: none;
    border-color: #0078d4;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}

.confirm-input[b-9yb6rlsz29]::placeholder {
    color: #9ca3af;
}

/* Footer */
.confirm-footer[b-9yb6rlsz29] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

/* Buttons */
.btn-cancel[b-9yb6rlsz29],
.btn-confirm[b-9yb6rlsz29] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-cancel[b-9yb6rlsz29] {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-cancel:hover:not(:disabled)[b-9yb6rlsz29] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-confirm[b-9yb6rlsz29] {
    background: #0078d4;
    border: none;
    color: #ffffff;
}

.btn-confirm:hover:not(:disabled)[b-9yb6rlsz29] {
    background: #106ebe;
}

.btn-confirm.danger[b-9yb6rlsz29] {
    background: #dc2626;
}

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

.btn-confirm:disabled[b-9yb6rlsz29],
.btn-cancel:disabled[b-9yb6rlsz29] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner for loading state */
.btn-spinner[b-9yb6rlsz29] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-9yb6rlsz29 0.6s linear infinite;
}

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

/* Responsive */
@media (max-width: 480px) {
    .confirm-dialog[b-9yb6rlsz29] {
        max-width: none;
        margin: 12px;
    }
    
    .confirm-footer[b-9yb6rlsz29] {
        flex-direction: column-reverse;
    }
    
    .btn-cancel[b-9yb6rlsz29],
    .btn-confirm[b-9yb6rlsz29] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Dialogs/HitlConfirmationDialog.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - HITL Confirmation Dialog Styles
   Week 5: Differentiated rendering for workflow HITL gates
   References: BEC_Theme.css variables
   ===================================================== */

/* ==========================================
   OVERLAY
   ========================================== */
.hitl-dialog-overlay[b-p1245f4lup] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hitl-dialog-overlay.visible[b-p1245f4lup] {
    opacity: 1;
    visibility: visible;
}

.hitl-dialog-overlay.hidden[b-p1245f4lup] {
    opacity: 0;
    visibility: hidden;
}

/* ==========================================
   DIALOG BASE
   ========================================== */
.hitl-dialog[b-p1245f4lup] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-p1245f4lup 0.3s ease;
}

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

/* ==========================================
   DIALOG VARIANTS
   ========================================== */
.hitl-dialog.hitl-summary[b-p1245f4lup] {
    border-top: 4px solid #3b82f6;
}

.hitl-dialog.hitl-insert[b-p1245f4lup] {
    border-top: 4px solid #f59e0b;
}

.hitl-dialog.hitl-legal[b-p1245f4lup] {
    border-top: 4px solid #6366f1;
}

.hitl-dialog.hitl-legal-block[b-p1245f4lup] {
    border-top: 4px solid #dc2626;
}

.hitl-dialog.hitl-generic[b-p1245f4lup] {
    border-top: 4px solid #6b7280;
}

/* ==========================================
   HEADER
   ========================================== */
.hitl-header[b-p1245f4lup] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.hitl-icon[b-p1245f4lup] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-info .hitl-icon[b-p1245f4lup] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
}

.header-warning .hitl-icon[b-p1245f4lup] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}

.header-legal .hitl-icon[b-p1245f4lup] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4338ca;
}

.header-danger .hitl-icon[b-p1245f4lup] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #b91c1c;
}

.header-default .hitl-icon[b-p1245f4lup] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #4b5563;
}

.hitl-title h3[b-p1245f4lup] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

.hitl-subtitle[b-p1245f4lup] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 4px;
}

/* ==========================================
   BODY
   ========================================== */
.hitl-body[b-p1245f4lup] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Summary Content */
.summary-content .summary-intro[b-p1245f4lup] {
    margin: 0 0 16px 0;
    color: #374151;
    font-size: 0.9375rem;
}

.summary-table[b-p1245f4lup] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row[b-p1245f4lup] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e5e7eb;
}

.summary-row:last-child[b-p1245f4lup] {
    padding-bottom: 0;
    border-bottom: none;
}

.summary-label[b-p1245f4lup] {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
    flex-shrink: 0;
}

.summary-value[b-p1245f4lup] {
    font-size: 0.875rem;
    color: #111827;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.summary-context[b-p1245f4lup] {
    margin-top: 16px;
    padding: 16px;
    background: #eff6ff;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    font-size: 0.875rem;
    color: #1e40af;
}

/* Insert Content */
.insert-content .insert-warning[b-p1245f4lup] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 12px;
    border: 1px solid #fcd34d;
    color: #92400e;
    margin-bottom: 20px;
}

.insert-content .insert-warning svg[b-p1245f4lup] {
    flex-shrink: 0;
}

.insert-details[b-p1245f4lup] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.insert-stat[b-p1245f4lup] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number[b-p1245f4lup] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f59e0b;
    line-height: 1;
}

.stat-label[b-p1245f4lup] {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.insert-target[b-p1245f4lup] {
    font-size: 0.875rem;
    color: #374151;
}

.insert-target code[b-p1245f4lup] {
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
}

.insert-preview[b-p1245f4lup] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
}

.insert-preview h5[b-p1245f4lup] {
    margin: 0 0 12px 0;
    font-size: 0.8125rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insert-preview ul[b-p1245f4lup] {
    margin: 0;
    padding-left: 20px;
}

.insert-preview li[b-p1245f4lup] {
    font-size: 0.875rem;
    color: #374151;
    padding: 4px 0;
}

.preview-more[b-p1245f4lup] {
    display: block;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: #6b7280;
    font-style: italic;
}

/* Legal Content */
.legal-content[b-p1245f4lup] {
    padding: 0;
}

.legal-content.blocked[b-p1245f4lup] {
    background: #fef2f2;
    border-radius: 12px;
    padding: 16px;
}

.legal-block-banner[b-p1245f4lup] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-radius: 12px;
    color: #991b1b;
    font-weight: 700;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.legal-issues h5[b-p1245f4lup] {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 600;
}

.issue-list[b-p1245f4lup] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.issue-list li[b-p1245f4lup] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.875rem;
}

.issue-list li.severity-critical[b-p1245f4lup] {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}

.issue-list li.severity-high[b-p1245f4lup] {
    background: #fff7ed;
    border-left: 3px solid #ea580c;
}

.issue-list li.severity-medium[b-p1245f4lup] {
    background: #fefce8;
    border-left: 3px solid #ca8a04;
}

.issue-list li.severity-low[b-p1245f4lup] {
    background: #f0fdf4;
    border-left: 3px solid #16a34a;
}

.issue-icon[b-p1245f4lup] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.severity-critical .issue-icon[b-p1245f4lup] {
    background: #dc2626;
    color: white;
}

.severity-high .issue-icon[b-p1245f4lup] {
    background: #ea580c;
    color: white;
}

.severity-medium .issue-icon[b-p1245f4lup] {
    background: #ca8a04;
    color: white;
}

.severity-low .issue-icon[b-p1245f4lup] {
    background: #16a34a;
    color: white;
}

.issue-text[b-p1245f4lup] {
    flex: 1;
    color: #374151;
}

.issue-ref[b-p1245f4lup] {
    font-size: 0.75rem;
    color: #6b7280;
    font-family: 'JetBrains Mono', monospace;
}

.legal-recommendation[b-p1245f4lup] {
    margin-top: 20px;
    padding: 16px;
    background: #eff6ff;
    border-radius: 12px;
    border-left: 4px solid #6366f1;
}

.legal-recommendation h5[b-p1245f4lup] {
    margin: 0 0 8px 0;
    font-size: 0.8125rem;
    color: #4338ca;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal-recommendation p[b-p1245f4lup] {
    margin: 0;
    font-size: 0.875rem;
    color: #4338ca;
}

/* Generic Content */
.generic-content p[b-p1245f4lup] {
    margin: 0 0 16px 0;
    color: #374151;
    font-size: 0.9375rem;
}

/* ==========================================
   FOOTER
   ========================================== */
.hitl-footer[b-p1245f4lup] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.hitl-footer.footer-blocked[b-p1245f4lup] {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.block-message[b-p1245f4lup] {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Buttons */
.hitl-footer button[b-p1245f4lup] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-cancel[b-p1245f4lup] {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-cancel:hover:not(:disabled)[b-p1245f4lup] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.btn-edit[b-p1245f4lup] {
    background: #ffffff;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.btn-edit:hover:not(:disabled)[b-p1245f4lup] {
    background: #eff6ff;
}

.btn-confirm[b-p1245f4lup] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.35);
}

.btn-confirm:hover:not(:disabled)[b-p1245f4lup] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.45);
}

.btn-confirm.btn-warning[b-p1245f4lup] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.35);
}

.btn-confirm.btn-warning:hover:not(:disabled)[b-p1245f4lup] {
    box-shadow: 0 6px 20px 0 rgba(245, 158, 11, 0.45);
}

.btn-confirm.btn-legal[b-p1245f4lup] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.35);
}

.btn-confirm.btn-legal:hover:not(:disabled)[b-p1245f4lup] {
    box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.45);
}

.btn-acknowledge[b-p1245f4lup] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.35);
    padding: 12px 24px;
    width: 100%;
    max-width: 280px;
}

.btn-acknowledge:hover:not(:disabled)[b-p1245f4lup] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(220, 38, 38, 0.45);
}

button:disabled[b-p1245f4lup] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner */
.spinner[b-p1245f4lup] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p1245f4lup 0.8s linear infinite;
}

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

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 640px) {
    .hitl-dialog[b-p1245f4lup] {
        max-width: 95%;
        margin: 16px;
    }

    .hitl-header[b-p1245f4lup] {
        padding: 16px;
    }

    .hitl-body[b-p1245f4lup] {
        padding: 16px;
    }

    .hitl-footer[b-p1245f4lup] {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .hitl-footer button[b-p1245f4lup] {
        flex: 1;
        min-width: 100px;
    }

    .insert-details[b-p1245f4lup] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/FileArtifact/FileArtifactCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   GOD MODE: FileArtifactCard - Living Download Card Styles
   
   Visual States:
   - .ready: Default blue/accent theme
   - .generating: Skeleton loading with shimmer
   - .stale: Yellow/orange warning theme
   - .downloading: Pulse animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Base Card Styles
   ───────────────────────────────────────────────────────────────────────────── */
.file-artifact-card[b-4wfr04lxog] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 8px 0;
    position: relative;
    overflow: hidden;
}

.file-artifact-card[b-4wfr04lxog]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.file-artifact-card:hover[b-4wfr04lxog] {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.file-artifact-card:hover[b-4wfr04lxog]::before {
    transform: translateX(100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Generating State (Skeleton Loading)
   ───────────────────────────────────────────────────────────────────────────── */
.file-artifact-card.generating[b-4wfr04lxog] {
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
    cursor: default;
}

.artifact-skeleton[b-4wfr04lxog] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.skeleton-icon[b-4wfr04lxog] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.2) 25%, rgba(156, 163, 175, 0.4) 50%, rgba(156, 163, 175, 0.2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-4wfr04lxog 1.5s infinite;
}

.skeleton-content[b-4wfr04lxog] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-line[b-4wfr04lxog] {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.2) 25%, rgba(156, 163, 175, 0.4) 50%, rgba(156, 163, 175, 0.2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-4wfr04lxog 1.5s infinite;
}

.skeleton-line.primary[b-4wfr04lxog] {
    width: 70%;
}

.skeleton-line.secondary[b-4wfr04lxog] {
    width: 40%;
    height: 10px;
}

@keyframes skeleton-shimmer-b-4wfr04lxog {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Stale State (Warning Theme)
   ───────────────────────────────────────────────────────────────────────────── */
.file-artifact-card.stale[b-4wfr04lxog] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.4);
}

.file-artifact-card.stale:hover[b-4wfr04lxog] {
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.file-artifact-card.stale .artifact-icon[b-4wfr04lxog] {
    color: #f59e0b;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Downloading State
   ───────────────────────────────────────────────────────────────────────────── */
.file-artifact-card.downloading[b-4wfr04lxog] {
    animation: download-pulse-b-4wfr04lxog 1s infinite;
}

@keyframes download-pulse-b-4wfr04lxog {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   File Icon
   ───────────────────────────────────────────────────────────────────────────── */
.artifact-icon[b-4wfr04lxog] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

.file-type-badge[b-4wfr04lxog] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.file-type-badge.excel[b-4wfr04lxog] {
    background: #217346;
    color: white;
}

/* ─────────────────────────────────────────────────────────────────────────────
   File Info
   ───────────────────────────────────────────────────────────────────────────── */
.artifact-info[b-4wfr04lxog] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.artifact-name[b-4wfr04lxog] {
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-meta[b-4wfr04lxog] {
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 8px;
}

.version-badge[b-4wfr04lxog] {
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(107, 114, 128, 0.2);
    border-radius: 4px;
    color: #9ca3af;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Stale Warning Badge
   ───────────────────────────────────────────────────────────────────────────── */
.stale-badge[b-4wfr04lxog] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 6px;
    color: #f59e0b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: badge-pulse-b-4wfr04lxog 2s infinite;
}

@keyframes badge-pulse-b-4wfr04lxog {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Download Button
   ───────────────────────────────────────────────────────────────────────────── */
.download-btn[b-4wfr04lxog] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.download-btn:hover:not(:disabled)[b-4wfr04lxog] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: scale(1.02);
}

.download-btn:disabled[b-4wfr04lxog] {
    background: rgba(107, 114, 128, 0.3);
    cursor: not-allowed;
}

.file-artifact-card.stale .download-btn[b-4wfr04lxog] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.file-artifact-card.stale .download-btn:hover:not(:disabled)[b-4wfr04lxog] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

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

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

/* ─────────────────────────────────────────────────────────────────────────────
   Stale Notice (Below Card)
   ───────────────────────────────────────────────────────────────────────────── */
.stale-notice[b-4wfr04lxog] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #fbbf24;
}

.notice-icon[b-4wfr04lxog] {
    font-size: 16px;
}

.notice-text[b-4wfr04lxog] {
    flex: 1;
}

.refresh-btn[b-4wfr04lxog] {
    padding: 6px 12px;
    background: #f59e0b;
    border: none;
    border-radius: 6px;
    color: #1f2937;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.refresh-btn:hover[b-4wfr04lxog] {
    background: #fbbf24;
    transform: scale(1.02);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive Adjustments
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .file-artifact-card[b-4wfr04lxog] {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .artifact-info[b-4wfr04lxog] {
        flex: 1 1 calc(100% - 52px);
    }
    
    .stale-badge[b-4wfr04lxog] {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    
    .download-btn[b-4wfr04lxog] {
        order: 4;
        width: 100%;
        justify-content: center;
    }
    
    .stale-notice[b-4wfr04lxog] {
        flex-direction: column;
        text-align: center;
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Mapping/CSIMappingPanel.razor.rz.scp.css */
/* =============================================================================
   CSI MasterFormat Mapping Panel Styles
   BEC Assistant V3 - References BEC_Theme.css variables
   ============================================================================= */

/* Container */
.csi-mapping-panel[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-surface-primary, #1e1e1e);
    border-radius: var(--BEC-radius-lg, 12px);
    overflow: hidden;
}

/* Header */
.csi-header[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacing-md, 16px);
    background: var(--BEC-surface-secondary, #252526);
    border-bottom: 1px solid var(--BEC-border-subtle, #333);
}

.csi-title[b-x2j28wclcb] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 8px);
}

.csi-icon[b-x2j28wclcb] {
    font-size: 1.5rem;
}

.csi-title h3[b-x2j28wclcb] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--BEC-text-primary, #fff);
}

.csi-search[b-x2j28wclcb] {
    display: flex;
    gap: var(--BEC-spacing-xs, 4px);
}

.csi-search input[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: 1px solid var(--BEC-border-subtle, #444);
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-surface-tertiary, #2d2d2d);
    color: var(--BEC-text-primary, #fff);
    min-width: 250px;
}

.btn-search[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: none;
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-accent-primary, #0078d4);
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-search:hover[b-x2j28wclcb] {
    background: var(--BEC-accent-primary-hover, #106ebe);
}

/* Tabs */
.csi-tabs[b-x2j28wclcb] {
    display: flex;
    gap: var(--BEC-spacing-xs, 4px);
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    background: var(--BEC-surface-secondary, #252526);
    border-bottom: 1px solid var(--BEC-border-subtle, #333);
}

.tab[b-x2j28wclcb] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-xs, 4px);
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: none;
    border-radius: var(--BEC-radius-md, 8px);
    background: transparent;
    color: var(--BEC-text-secondary, #888);
    cursor: pointer;
    transition: all 0.2s;
}

.tab:hover[b-x2j28wclcb] {
    background: var(--BEC-surface-tertiary, #2d2d2d);
    color: var(--BEC-text-primary, #fff);
}

.tab.active[b-x2j28wclcb] {
    background: var(--BEC-accent-primary, #0078d4);
    color: white;
}

/* Content area */
.csi-content[b-x2j28wclcb] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacing-md, 16px);
}

/* Loading spinner */
.loading-spinner[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacing-xl, 32px);
    gap: var(--BEC-spacing-md, 16px);
}

.spinner[b-x2j28wclcb] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-border-subtle, #444);
    border-top-color: var(--BEC-accent-primary, #0078d4);
    border-radius: 50%;
    animation: spin-b-x2j28wclcb 1s linear infinite;
}

.spinner-small[b-x2j28wclcb] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-x2j28wclcb 1s linear infinite;
}

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

/* Divisions panel */
.divisions-panel[b-x2j28wclcb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacing-md, 16px);
    height: 100%;
}

.divisions-list[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-sm, 8px);
    overflow-y: auto;
    max-height: 500px;
}

.division-card[b-x2j28wclcb] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-md, 16px);
    padding: var(--BEC-spacing-md, 16px);
    background: var(--BEC-surface-secondary, #252526);
    border: 1px solid var(--BEC-border-subtle, #333);
    border-radius: var(--BEC-radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s;
}

.division-card:hover[b-x2j28wclcb] {
    border-color: var(--BEC-accent-primary, #0078d4);
    background: var(--BEC-surface-tertiary, #2d2d2d);
}

.division-card.selected[b-x2j28wclcb] {
    border-color: var(--BEC-accent-primary, #0078d4);
    background: rgba(0, 120, 212, 0.15);
}

.division-code[b-x2j28wclcb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--BEC-accent-primary, #0078d4);
    min-width: 50px;
}

.division-info[b-x2j28wclcb] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.division-name[b-x2j28wclcb] {
    font-weight: 500;
    color: var(--BEC-text-primary, #fff);
}

.division-stats[b-x2j28wclcb] {
    font-size: 0.85rem;
    color: var(--BEC-text-tertiary, #666);
}

.division-arrow[b-x2j28wclcb] {
    color: var(--BEC-text-tertiary, #666);
    font-size: 1.2rem;
}

/* Division sections */
.division-sections[b-x2j28wclcb] {
    background: var(--BEC-surface-secondary, #252526);
    border-radius: var(--BEC-radius-md, 8px);
    padding: var(--BEC-spacing-md, 16px);
    overflow-y: auto;
}

.division-sections h4[b-x2j28wclcb] {
    margin: 0 0 var(--BEC-spacing-md, 16px);
    color: var(--BEC-text-primary, #fff);
}

.section-tree[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-xs, 4px);
}

.section-item[b-x2j28wclcb] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 8px);
    padding: var(--BEC-spacing-sm, 8px);
    border-radius: var(--BEC-radius-sm, 4px);
    cursor: pointer;
    transition: background 0.2s;
}

.section-item:hover[b-x2j28wclcb] {
    background: var(--BEC-surface-tertiary, #2d2d2d);
}

.section-item.level-1[b-x2j28wclcb] { padding-left: var(--BEC-spacing-sm, 8px); }
.section-item.level-2[b-x2j28wclcb] { padding-left: var(--BEC-spacing-lg, 24px); }
.section-item.level-3[b-x2j28wclcb] { padding-left: var(--BEC-spacing-xl, 40px); }
.section-item.level-4[b-x2j28wclcb] { padding-left: calc(var(--BEC-spacing-xl, 40px) + 16px); }

.section-code[b-x2j28wclcb] {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--BEC-accent-secondary, #4ec9b0);
    min-width: 80px;
}

.section-name[b-x2j28wclcb] {
    flex: 1;
    color: var(--BEC-text-primary, #fff);
}

.expand-icon[b-x2j28wclcb] {
    color: var(--BEC-text-tertiary, #666);
    font-size: 0.8rem;
}

/* Sections panel */
.sections-panel[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-md, 16px);
}

.sections-filter[b-x2j28wclcb] {
    display: flex;
    gap: var(--BEC-spacing-sm, 8px);
    flex-wrap: wrap;
}

.sections-filter select[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: 1px solid var(--BEC-border-subtle, #444);
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-surface-tertiary, #2d2d2d);
    color: var(--BEC-text-primary, #fff);
    min-width: 180px;
}

.btn-filter[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: none;
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-accent-primary, #0078d4);
    color: white;
    cursor: pointer;
}

.sections-grid[b-x2j28wclcb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--BEC-spacing-md, 16px);
}

.section-card[b-x2j28wclcb] {
    background: var(--BEC-surface-secondary, #252526);
    border: 1px solid var(--BEC-border-subtle, #333);
    border-radius: var(--BEC-radius-md, 8px);
    overflow: hidden;
    transition: border-color 0.2s;
}

.section-card:hover[b-x2j28wclcb] {
    border-color: var(--BEC-accent-primary, #0078d4);
}

.section-header[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    background: var(--BEC-surface-tertiary, #2d2d2d);
}

.section-header .code[b-x2j28wclcb] {
    font-family: monospace;
    font-weight: 600;
    color: var(--BEC-accent-secondary, #4ec9b0);
}

.section-header .level[b-x2j28wclcb] {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--BEC-accent-primary, #0078d4);
    color: white;
    border-radius: var(--BEC-radius-sm, 4px);
}

.section-body[b-x2j28wclcb] {
    padding: var(--BEC-spacing-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-xs, 4px);
}

.section-body .name[b-x2j28wclcb] {
    font-weight: 500;
    color: var(--BEC-text-primary, #fff);
}

.section-body .division[b-x2j28wclcb] {
    font-size: 0.85rem;
    color: var(--BEC-text-tertiary, #666);
}

.section-footer[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border-top: 1px solid var(--BEC-border-subtle, #333);
    font-size: 0.85rem;
    color: var(--BEC-text-secondary, #888);
}

.section-footer .uom[b-x2j28wclcb] {
    padding: 2px 6px;
    background: var(--BEC-surface-tertiary, #2d2d2d);
    border-radius: var(--BEC-radius-sm, 4px);
}

/* Pagination */
.pagination[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacing-md, 16px);
    color: var(--BEC-text-secondary, #888);
}

.pagination button[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: 1px solid var(--BEC-accent-primary, #0078d4);
    border-radius: var(--BEC-radius-md, 8px);
    background: transparent;
    color: var(--BEC-accent-primary, #0078d4);
    cursor: pointer;
}

.pagination button:hover[b-x2j28wclcb] {
    background: var(--BEC-accent-primary, #0078d4);
    color: white;
}

/* Suggestions panel */
.suggestions-panel[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-lg, 24px);
}

.suggestion-input[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-sm, 8px);
}

.suggestion-input label[b-x2j28wclcb] {
    color: var(--BEC-text-secondary, #888);
}

.suggestion-input textarea[b-x2j28wclcb] {
    padding: var(--BEC-spacing-md, 16px);
    border: 1px solid var(--BEC-border-subtle, #444);
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-surface-secondary, #252526);
    color: var(--BEC-text-primary, #fff);
    resize: vertical;
    font-family: inherit;
}

.suggestion-options[b-x2j28wclcb] {
    display: flex;
    gap: var(--BEC-spacing-sm, 8px);
}

.unit-input[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: 1px solid var(--BEC-border-subtle, #444);
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-surface-secondary, #252526);
    color: var(--BEC-text-primary, #fff);
    width: 120px;
}

.btn-suggest[b-x2j28wclcb] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 8px);
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-lg, 24px);
    border: none;
    border-radius: var(--BEC-radius-md, 8px);
    background: linear-gradient(135deg, #0078d4, #00b294);
    color: white;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.2s;
}

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

.suggestions-list[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-md, 16px);
}

.suggestions-list h4[b-x2j28wclcb] {
    margin: 0;
    color: var(--BEC-text-primary, #fff);
}

.suggestion-card[b-x2j28wclcb] {
    background: var(--BEC-surface-secondary, #252526);
    border: 1px solid var(--BEC-border-subtle, #333);
    border-radius: var(--BEC-radius-md, 8px);
    overflow: hidden;
}

.suggestion-header[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    background: var(--BEC-surface-tertiary, #2d2d2d);
}

.suggestion-header .code[b-x2j28wclcb] {
    font-family: monospace;
    font-weight: 600;
    color: var(--BEC-accent-secondary, #4ec9b0);
}

.suggestion-header .confidence[b-x2j28wclcb] {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: var(--BEC-radius-sm, 4px);
}

.confidence.high[b-x2j28wclcb] {
    background: rgba(0, 200, 83, 0.2);
    color: #00c853;
}

.confidence.medium[b-x2j28wclcb] {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.confidence.low[b-x2j28wclcb] {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

.suggestion-body[b-x2j28wclcb] {
    padding: var(--BEC-spacing-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-xs, 4px);
}

.suggestion-body .name[b-x2j28wclcb] {
    font-weight: 500;
    color: var(--BEC-text-primary, #fff);
}

.suggestion-body .division[b-x2j28wclcb] {
    font-size: 0.85rem;
    color: var(--BEC-text-tertiary, #666);
}

.suggestion-footer[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border-top: 1px solid var(--BEC-border-subtle, #333);
}

.suggestion-footer .method[b-x2j28wclcb] {
    font-size: 0.85rem;
    color: var(--BEC-text-tertiary, #666);
}

.btn-apply[b-x2j28wclcb] {
    padding: var(--BEC-spacing-xs, 4px) var(--BEC-spacing-md, 16px);
    border: none;
    border-radius: var(--BEC-radius-sm, 4px);
    background: var(--BEC-accent-primary, #0078d4);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Analytics panel */
.analytics-panel[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-lg, 24px);
}

.analytics-summary[b-x2j28wclcb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--BEC-spacing-md, 16px);
}

.stat-card[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--BEC-spacing-lg, 24px);
    background: var(--BEC-surface-secondary, #252526);
    border-radius: var(--BEC-radius-md, 8px);
    text-align: center;
}

.stat-value[b-x2j28wclcb] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--BEC-accent-primary, #0078d4);
}

.stat-label[b-x2j28wclcb] {
    color: var(--BEC-text-secondary, #888);
    margin-top: var(--BEC-spacing-xs, 4px);
}

.analytics-details[b-x2j28wclcb] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--BEC-spacing-md, 16px);
}

.verification-stats[b-x2j28wclcb],
.top-divisions[b-x2j28wclcb],
.mapping-types[b-x2j28wclcb] {
    background: var(--BEC-surface-secondary, #252526);
    border-radius: var(--BEC-radius-md, 8px);
    padding: var(--BEC-spacing-md, 16px);
}

.verification-stats h4[b-x2j28wclcb],
.top-divisions h4[b-x2j28wclcb],
.mapping-types h4[b-x2j28wclcb] {
    margin: 0 0 var(--BEC-spacing-md, 16px);
    color: var(--BEC-text-primary, #fff);
}

.progress-bar[b-x2j28wclcb] {
    height: 8px;
    background: var(--BEC-surface-tertiary, #2d2d2d);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--BEC-spacing-sm, 8px);
}

.progress-bar .progress[b-x2j28wclcb] {
    height: 100%;
    background: var(--BEC-success, #00c853);
    transition: width 0.3s;
}

.stats-row[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.stats-row .verified[b-x2j28wclcb] { color: var(--BEC-success, #00c853); }
.stats-row .pending[b-x2j28wclcb] { color: var(--BEC-text-tertiary, #666); }

.division-usage[b-x2j28wclcb] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm, 8px);
    margin-bottom: var(--BEC-spacing-sm, 8px);
}

.division-usage .code[b-x2j28wclcb] {
    font-family: monospace;
    color: var(--BEC-accent-primary, #0078d4);
    min-width: 30px;
}

.division-usage .name[b-x2j28wclcb] {
    flex: 1;
    color: var(--BEC-text-primary, #fff);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usage-bar[b-x2j28wclcb] {
    width: 80px;
    height: 6px;
    background: var(--BEC-surface-tertiary, #2d2d2d);
    border-radius: 3px;
    overflow: hidden;
}

.usage-bar .bar[b-x2j28wclcb] {
    height: 100%;
    background: var(--BEC-accent-primary, #0078d4);
}

.division-usage .count[b-x2j28wclcb] {
    font-size: 0.85rem;
    color: var(--BEC-text-tertiary, #666);
    min-width: 30px;
    text-align: right;
}

.type-stat[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    padding: var(--BEC-spacing-sm, 8px) 0;
    border-bottom: 1px solid var(--BEC-border-subtle, #333);
}

.type-stat:last-child[b-x2j28wclcb] {
    border-bottom: none;
}

.type-name[b-x2j28wclcb] {
    color: var(--BEC-text-primary, #fff);
}

.type-count[b-x2j28wclcb] {
    color: var(--BEC-accent-primary, #0078d4);
    font-weight: 600;
}

/* Empty state */
.empty-state[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacing-xl, 32px);
    color: var(--BEC-text-tertiary, #666);
}

.empty-state span[b-x2j28wclcb] {
    font-size: 3rem;
    margin-bottom: var(--BEC-spacing-md, 16px);
}

/* Modal */
.section-details-modal[b-x2j28wclcb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-x2j28wclcb] {
    background: var(--BEC-surface-primary, #1e1e1e);
    border-radius: var(--BEC-radius-lg, 12px);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-x2j28wclcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacing-md, 16px);
    background: var(--BEC-surface-secondary, #252526);
    border-bottom: 1px solid var(--BEC-border-subtle, #333);
}

.modal-header h3[b-x2j28wclcb] {
    margin: 0;
    color: var(--BEC-text-primary, #fff);
    font-size: 1rem;
}

.btn-close[b-x2j28wclcb] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--BEC-radius-sm, 4px);
    background: transparent;
    color: var(--BEC-text-secondary, #888);
    font-size: 1.5rem;
    cursor: pointer;
}

.btn-close:hover[b-x2j28wclcb] {
    background: var(--BEC-surface-tertiary, #2d2d2d);
    color: var(--BEC-text-primary, #fff);
}

.modal-body[b-x2j28wclcb] {
    padding: var(--BEC-spacing-md, 16px);
    overflow-y: auto;
}

.detail-row[b-x2j28wclcb] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-xs, 4px);
    margin-bottom: var(--BEC-spacing-md, 16px);
}

.detail-row .label[b-x2j28wclcb] {
    color: var(--BEC-text-tertiary, #666);
    font-size: 0.85rem;
}

.detail-row .value[b-x2j28wclcb] {
    color: var(--BEC-text-primary, #fff);
}

.keywords[b-x2j28wclcb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacing-xs, 4px);
}

.keyword-tag[b-x2j28wclcb] {
    padding: 2px 8px;
    background: var(--BEC-surface-tertiary, #2d2d2d);
    border-radius: var(--BEC-radius-sm, 4px);
    font-size: 0.85rem;
    color: var(--BEC-accent-secondary, #4ec9b0);
}

.modal-footer[b-x2j28wclcb] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacing-sm, 8px);
    padding: var(--BEC-spacing-md, 16px);
    background: var(--BEC-surface-secondary, #252526);
    border-top: 1px solid var(--BEC-border-subtle, #333);
}

.btn-secondary[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: 1px solid var(--BEC-border-subtle, #444);
    border-radius: var(--BEC-radius-md, 8px);
    background: transparent;
    color: var(--BEC-text-primary, #fff);
    cursor: pointer;
}

.btn-primary[b-x2j28wclcb] {
    padding: var(--BEC-spacing-sm, 8px) var(--BEC-spacing-md, 16px);
    border: none;
    border-radius: var(--BEC-radius-md, 8px);
    background: var(--BEC-accent-primary, #0078d4);
    color: white;
    cursor: pointer;
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Mapping/MappingReviewCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   MappingReviewCard Component Styles
   BEC Assistant V3 - Phase 3: WBS Package Mapping Review
   
   Microsoft Fluent Design System Implementation
   Uses neutral grays and blacks for professional enterprise look
   References BEC_Theme.css variables for consistency
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Main Container - Microsoft Card Pattern
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.mapping-review-card[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-radius: var(--BEC-borderRadiusXLarge, 8px);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    box-shadow: var(--BEC-shadow4, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14));
    overflow: hidden;
    margin: var(--BEC-spacingHorizontalL, 16px) 0;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI', -apple-system, sans-serif);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Header Section - Microsoft CommandBar Style
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.review-header[b-b6cg0nc77d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL, 16px) var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.review-title[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM, 12px);
}

.review-icon[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase500, 20px);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.title-content h3[b-b6cg0nc77d] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase400, 16px);
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: var(--BEC-lineHeightBase400, 22px);
}

.review-subtitle[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground3, #616161);
    line-height: var(--BEC-lineHeightBase200, 16px);
}

.highlight-warning[b-b6cg0nc77d] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    font-weight: var(--BEC-fontWeightMedium, 500);
}

.highlight-error[b-b6cg0nc77d] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    font-weight: var(--BEC-fontWeightMedium, 500);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Bulk Actions - Microsoft Button Styles
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.bulk-actions[b-b6cg0nc77d] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS, 8px);
}

.btn-bulk-approve[b-b6cg0nc77d],
.btn-export[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalL, 16px);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightMedium, 500);
    font-family: inherit;
    transition: all var(--BEC-durationNormal, 200ms) var(--BEC-curveEasyEase);
}

.btn-bulk-approve[b-b6cg0nc77d] {
    background: var(--BEC-colorPaletteGreenForeground1, #107c10);
    color: #ffffff;
}

.btn-bulk-approve:hover:not(:disabled)[b-b6cg0nc77d] {
    background: #0e6b0e;
    box-shadow: var(--BEC-shadow4);
}

.btn-export[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.btn-export:hover:not(:disabled)[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.btn-bulk-approve:disabled[b-b6cg0nc77d],
.btn-export:disabled[b-b6cg0nc77d] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Tab Navigation - Microsoft Pivot Style
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.review-tabs[b-b6cg0nc77d] {
    display: flex;
    gap: 0;
    padding: 0 var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.tab[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--BEC-spacingHorizontalM, 12px) var(--BEC-spacingHorizontalL, 16px);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--BEC-colorNeutralForeground3, #616161);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300, 14px);
    font-family: inherit;
    font-weight: var(--BEC-fontWeightRegular, 400);
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
    margin-bottom: -1px;
}

.tab:hover[b-b6cg0nc77d] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.tab.active[b-b6cg0nc77d] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-weight: var(--BEC-fontWeightSemibold, 600);
    border-bottom-color: var(--BEC-colorNeutralForeground1, #242424);
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Content Area - Microsoft List Pattern
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.review-content[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalL, 16px) var(--BEC-spacingHorizontalXL, 20px);
    max-height: 500px;
    overflow-y: auto;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
}

/* Loading State - Microsoft Spinner */
.loading-state[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXXXL, 32px);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.spinner[b-b6cg0nc77d] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-top-color: var(--BEC-colorNeutralForeground1, #242424);
    border-radius: 50%;
    animation: spin-b-b6cg0nc77d 0.8s linear infinite;
}

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

/* Empty State - Microsoft MessageBar Pattern */
.empty-state[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXXXL, 32px);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.empty-state span[b-b6cg0nc77d] {
    font-size: 2rem;
    margin-bottom: var(--BEC-spacingHorizontalM, 12px);
    opacity: 0.6;
}

.empty-state.success[b-b6cg0nc77d] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.empty-state.success span[b-b6cg0nc77d] {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Cluster Panel - Microsoft DetailsList Pattern
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.clusters-panel[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS, 8px);
}

.cluster-card[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    overflow: hidden;
    transition: all var(--BEC-durationNormal, 200ms) var(--BEC-curveEasyEase);
}

.cluster-card:hover[b-b6cg0nc77d] {
    box-shadow: var(--BEC-shadow4);
}

.cluster-card.expanded[b-b6cg0nc77d] {
    border-color: var(--BEC-colorNeutralForeground1, #242424);
    box-shadow: var(--BEC-shadow8);
}

.cluster-header[b-b6cg0nc77d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalM, 12px) var(--BEC-spacingHorizontalL, 16px);
    cursor: pointer;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
}

.cluster-header:hover[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.cluster-info[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM, 12px);
}

.cluster-icon[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase500, 20px);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.cluster-details[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
}

.cluster-pattern[b-b6cg0nc77d] {
    font-weight: var(--BEC-fontWeightMedium, 500);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: var(--BEC-fontSizeBase300, 14px);
}

.cluster-stats[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.cluster-actions[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM, 12px);
}

.expand-icon[b-b6cg0nc77d] {
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: var(--BEC-fontSizeBase200, 12px);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Confidence Badge - Microsoft Badge Pattern
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.confidence-badge[b-b6cg0nc77d] {
    padding: 2px var(--BEC-spacingHorizontalS, 8px);
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    font-size: var(--BEC-fontSizeBase100, 10px);
    font-weight: var(--BEC-fontWeightSemibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.confidence-badge.high[b-b6cg0nc77d] {
    background: var(--BEC-colorPaletteGreenBackground2, #d6edd6);
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.confidence-badge.medium[b-b6cg0nc77d] {
    background: var(--BEC-colorPaletteYellowBackground2, #fff8df);
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

.confidence-badge.low[b-b6cg0nc77d] {
    background: var(--BEC-colorPaletteRedBackground2, #f9dadd);
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Cluster Body - Microsoft Expanded Content
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.cluster-body[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalL, 16px);
    border-top: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
}

.cluster-mapping[b-b6cg0nc77d] {
    margin-bottom: var(--BEC-spacingHorizontalM, 12px);
}

.cluster-mapping .label[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-right: var(--BEC-spacingHorizontalS, 8px);
}

.package-path[b-b6cg0nc77d] {
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
}

/* Ratio Warning - Microsoft MessageBar Warning */
.ratio-warning[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS, 8px);
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalM, 12px);
    background: var(--BEC-colorPaletteYellowBackground1, #fffef5);
    border: 1px solid var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    margin-bottom: var(--BEC-spacingHorizontalM, 12px);
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

/* Cluster Items - Microsoft List Rows */
.cluster-items[b-b6cg0nc77d] {
    margin-bottom: var(--BEC-spacingHorizontalL, 16px);
}

.item-row[b-b6cg0nc77d] {
    display: flex;
    justify-content: space-between;
    padding: var(--BEC-spacingHorizontalS, 8px) 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    font-size: var(--BEC-fontSizeBase200, 12px);
}

.item-row:last-child[b-b6cg0nc77d] {
    border-bottom: none;
}

.item-desc[b-b6cg0nc77d] {
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.item-qty[b-b6cg0nc77d] {
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-family: 'Consolas', 'Cascadia Code', monospace;
}

.more-items[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalS, 8px) 0;
    text-align: center;
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-style: italic;
}

/* Cluster Footer - Microsoft Button Group */
.cluster-footer[b-b6cg0nc77d] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS, 8px);
    padding-top: var(--BEC-spacingHorizontalM, 12px);
    border-top: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Action Buttons - Microsoft Button Styles
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.btn-approve[b-b6cg0nc77d],
.btn-reject[b-b6cg0nc77d],
.btn-modify[b-b6cg0nc77d],
.btn-confirm[b-b6cg0nc77d],
.btn-skip[b-b6cg0nc77d],
.btn-create-map[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalL, 16px);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightMedium, 500);
    font-family: inherit;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.btn-approve[b-b6cg0nc77d] {
    background: var(--BEC-colorPaletteGreenForeground1, #107c10);
    color: #ffffff;
}

.btn-approve:hover:not(:disabled)[b-b6cg0nc77d] {
    background: #0e6b0e;
}

.btn-reject[b-b6cg0nc77d] {
    background: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    color: #ffffff;
}

.btn-reject:hover:not(:disabled)[b-b6cg0nc77d] {
    background: #a52a2d;
}

.btn-modify[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.btn-modify:hover:not(:disabled)[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.btn-confirm[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralForeground1, #242424);
    color: #ffffff;
}

.btn-confirm:hover:not(:disabled)[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralForeground2, #424242);
}

.btn-skip[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.btn-skip:hover:not(:disabled)[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.btn-create-map[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralForeground1, #242424);
    color: #ffffff;
}

.btn-create-map:hover:not(:disabled)[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralForeground2, #424242);
}

.btn-approve:disabled[b-b6cg0nc77d],
.btn-reject:disabled[b-b6cg0nc77d],
.btn-modify:disabled[b-b6cg0nc77d],
.btn-confirm:disabled[b-b6cg0nc77d],
.btn-skip:disabled[b-b6cg0nc77d],
.btn-create-map:disabled[b-b6cg0nc77d] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Ambiguous Panel - Microsoft Card List
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.ambiguous-panel[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM, 12px);
}

.ambiguous-card[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    padding: var(--BEC-spacingHorizontalL, 16px);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.ambiguous-card:hover[b-b6cg0nc77d] {
    box-shadow: var(--BEC-shadow4);
}

.item-header[b-b6cg0nc77d] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM, 12px);
    margin-bottom: var(--BEC-spacingHorizontalS, 8px);
}

.item-code[b-b6cg0nc77d] {
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    white-space: nowrap;
}

.item-details[b-b6cg0nc77d] {
    display: flex;
    justify-content: space-between;
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-bottom: var(--BEC-spacingHorizontalM, 12px);
}

.item-source[b-b6cg0nc77d] {
    font-style: italic;
}

.suggestions-list[b-b6cg0nc77d] {
    margin-bottom: var(--BEC-spacingHorizontalM, 12px);
}

.suggestions-label[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-bottom: var(--BEC-spacingHorizontalS, 8px);
    display: block;
}

.suggestion-option[b-b6cg0nc77d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalM, 12px);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.suggestion-option:hover[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-color: var(--BEC-colorNeutralForeground3, #616161);
}

.suggestion-option.selected[b-b6cg0nc77d] {
    border-color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    box-shadow: inset 0 0 0 1px var(--BEC-colorNeutralForeground1, #242424);
}

.suggestion-path[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.item-actions[b-b6cg0nc77d] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS, 8px);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Missing Panel - Microsoft Selection List
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.missing-panel[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM, 12px);
}

.missing-header-actions[b-b6cg0nc77d] {
    margin-bottom: var(--BEC-spacingHorizontalS, 8px);
}

.btn-cluster-create[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorNeutralForeground1, #242424);
    color: #ffffff;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300, 14px);
    font-weight: var(--BEC-fontWeightMedium, 500);
    font-family: inherit;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.btn-cluster-create:hover:not(:disabled)[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralForeground2, #424242);
}

.btn-cluster-create:disabled[b-b6cg0nc77d] {
    opacity: 0.4;
    cursor: not-allowed;
}

.missing-card[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL, 16px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    padding: var(--BEC-spacingHorizontalM, 12px) var(--BEC-spacingHorizontalL, 16px);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.missing-card:hover[b-b6cg0nc77d] {
    box-shadow: var(--BEC-shadow4);
}

.missing-card.selected[b-b6cg0nc77d] {
    border-color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    box-shadow: inset 0 0 0 1px var(--BEC-colorNeutralForeground1, #242424);
}

.missing-checkbox input[b-b6cg0nc77d] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorNeutralForeground1, #242424);
}

.missing-content[b-b6cg0nc77d] {
    flex: 1;
}

.suggested-parent[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    margin-top: 4px;
}

.suggested-parent .label[b-b6cg0nc77d] {
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-right: 6px;
}

.parent-path[b-b6cg0nc77d] {
    font-family: 'Consolas', 'Cascadia Code', monospace;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Approved Panel - Microsoft Success State
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.approved-panel[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL, 16px);
}

.approved-summary[b-b6cg0nc77d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL, 16px);
    background: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1, #107c10);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
    font-weight: var(--BEC-fontWeightMedium, 500);
}

.btn-finalize[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorPaletteGreenForeground1, #107c10);
    color: #ffffff;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300, 14px);
    font-weight: var(--BEC-fontWeightSemibold, 600);
    font-family: inherit;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.btn-finalize:hover:not(:disabled)[b-b6cg0nc77d] {
    background: #0e6b0e;
    box-shadow: var(--BEC-shadow8);
}

.btn-finalize:disabled[b-b6cg0nc77d] {
    opacity: 0.4;
    cursor: not-allowed;
}

.approved-list[b-b6cg0nc77d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.approved-row[b-b6cg0nc77d] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM, 12px);
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalM, 12px);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: var(--BEC-fontSizeBase200, 12px);
}

.approved-row .item-desc[b-b6cg0nc77d] {
    flex: 1;
}

.approved-row .arrow[b-b6cg0nc77d] {
    color: var(--BEC-colorNeutralForeground3, #616161);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Create Package Dialog - Microsoft Dialog Pattern
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.dialog-overlay[b-b6cg0nc77d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-b6cg0nc77d var(--BEC-durationNormal, 200ms) var(--BEC-curveEasyEase);
}

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

.create-package-dialog[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-radius: var(--BEC-borderRadiusLarge, 6px);
    width: 90%;
    max-width: 500px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    box-shadow: var(--BEC-shadow28);
    animation: slideUp-b-b6cg0nc77d var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMid);
}

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

.dialog-header[b-b6cg0nc77d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL, 16px) var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: var(--BEC-borderRadiusLarge, 6px) var(--BEC-borderRadiusLarge, 6px) 0 0;
}

.dialog-header h3[b-b6cg0nc77d] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase400, 16px);
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.btn-close[b-b6cg0nc77d] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: var(--BEC-fontSizeBase500, 20px);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.btn-close:hover[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.dialog-body[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalXL, 20px);
}

.form-group[b-b6cg0nc77d] {
    margin-bottom: var(--BEC-spacingHorizontalL, 16px);
}

.form-group label[b-b6cg0nc77d] {
    display: block;
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightMedium, 500);
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin-bottom: 6px;
}

.form-group input[b-b6cg0nc77d],
.form-group select[b-b6cg0nc77d],
.form-group textarea[b-b6cg0nc77d] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalM, 12px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: var(--BEC-fontSizeBase300, 14px);
    font-family: inherit;
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.form-group input:focus[b-b6cg0nc77d],
.form-group select:focus[b-b6cg0nc77d],
.form-group textarea:focus[b-b6cg0nc77d] {
    outline: none;
    border-color: var(--BEC-colorNeutralForeground1, #242424);
    box-shadow: inset 0 0 0 1px var(--BEC-colorNeutralForeground1, #242424);
}

.items-to-map[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    padding: var(--BEC-spacingHorizontalM, 12px);
    margin-top: var(--BEC-spacingHorizontalL, 16px);
}

.items-to-map label[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-bottom: var(--BEC-spacingHorizontalS, 8px);
    display: block;
}

.items-to-map ul[b-b6cg0nc77d] {
    margin: var(--BEC-spacingHorizontalS, 8px) 0 0;
    padding-left: var(--BEC-spacingHorizontalXL, 20px);
}

.items-to-map li[b-b6cg0nc77d] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin-bottom: 4px;
}

.dialog-footer[b-b6cg0nc77d] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalS, 8px);
    padding: var(--BEC-spacingHorizontalL, 16px) var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-top: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 0 0 var(--BEC-borderRadiusLarge, 6px) var(--BEC-borderRadiusLarge, 6px);
}

.btn-secondary[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300, 14px);
    font-family: inherit;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.btn-secondary:hover[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.btn-primary[b-b6cg0nc77d] {
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalXL, 20px);
    background: var(--BEC-colorNeutralForeground1, #242424);
    color: #ffffff;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300, 14px);
    font-weight: var(--BEC-fontWeightMedium, 500);
    font-family: inherit;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase);
}

.btn-primary:hover:not(:disabled)[b-b6cg0nc77d] {
    background: var(--BEC-colorNeutralForeground2, #424242);
}

.btn-primary:disabled[b-b6cg0nc77d] {
    opacity: 0.4;
    cursor: not-allowed;
}

.spinner-small[b-b6cg0nc77d] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-b6cg0nc77d 0.8s linear infinite;
    display: inline-block;
    margin-right: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Scrollbar Styling - Microsoft Pattern
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.review-content[b-b6cg0nc77d]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.review-content[b-b6cg0nc77d]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.review-content[b-b6cg0nc77d]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 4px;
}

.review-content[b-b6cg0nc77d]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralForeground4, #707070);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Responsive Adjustments
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .review-header[b-b6cg0nc77d] {
        flex-direction: column;
        gap: var(--BEC-spacingHorizontalM, 12px);
        align-items: flex-start;
    }
    
    .bulk-actions[b-b6cg0nc77d] {
        width: 100%;
        justify-content: flex-end;
    }
    
    .review-tabs[b-b6cg0nc77d] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .cluster-footer[b-b6cg0nc77d] {
        flex-wrap: wrap;
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Memory/MemoryPanel.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Memory Panel Component Styles
   Phase 7: Display and manage agent memories
   References: BEC_Theme.css variables
   ===================================================== */

/* -----------------------------------------------------
   Memory Panel Container
   - Collapsible panel for memory management
   ----------------------------------------------------- */
.memory-panel[b-v0rtg45yv3] {
    background: var(--BEC-surface-primary);
    border: 1px solid var(--BEC-border-subtle);
    border-radius: var(--BEC-radius-lg);
    overflow: hidden;
    transition: all var(--BEC-transition-normal);
    box-shadow: var(--BEC-shadow-sm);
}

.memory-panel.expanded[b-v0rtg45yv3] {
    box-shadow: var(--BEC-shadow-lg);
}

/* -----------------------------------------------------
   Panel Header
   - Clickable header to expand/collapse
   ----------------------------------------------------- */
.memory-panel-header[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--BEC-spacing-md) var(--BEC-spacing-lg);
    background: linear-gradient(135deg, 
        var(--BEC-brand-primary-subtle) 0%, 
        var(--BEC-surface-secondary) 100%);
    cursor: pointer;
    user-select: none;
    transition: background var(--BEC-transition-fast);
}

.memory-panel-header:hover[b-v0rtg45yv3] {
    background: linear-gradient(135deg, 
        var(--BEC-brand-primary-light) 0%, 
        var(--BEC-surface-tertiary) 100%);
}

.header-left[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm);
}

.header-icon[b-v0rtg45yv3] {
    font-size: 1.25rem;
}

.header-title[b-v0rtg45yv3] {
    font-weight: 600;
    color: var(--BEC-text-primary);
    font-size: var(--BEC-font-size-md);
}

.memory-badge[b-v0rtg45yv3] {
    background: var(--BEC-brand-primary);
    color: var(--BEC-text-on-primary);
    padding: 2px 8px;
    border-radius: var(--BEC-radius-full);
    font-size: var(--BEC-font-size-xs);
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.expand-icon[b-v0rtg45yv3] {
    color: var(--BEC-text-secondary);
    transition: transform var(--BEC-transition-fast);
}

.memory-panel.expanded .expand-icon[b-v0rtg45yv3] {
    transform: rotate(0deg);
}

/* -----------------------------------------------------
   Memory Content Area
   - Main content when panel is expanded
   ----------------------------------------------------- */
.memory-content[b-v0rtg45yv3] {
    padding: var(--BEC-spacing-md);
    animation: slideDown-b-v0rtg45yv3 0.2s ease-out;
}

@keyframes slideDown-b-v0rtg45yv3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------------
   Category Tabs
   - Tab navigation for memory categories
   ----------------------------------------------------- */
.category-tabs[b-v0rtg45yv3] {
    display: flex;
    gap: var(--BEC-spacing-xs);
    margin-bottom: var(--BEC-spacing-md);
    padding-bottom: var(--BEC-spacing-sm);
    border-bottom: 1px solid var(--BEC-border-subtle);
    overflow-x: auto;
}

.category-tab[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-xs);
    padding: var(--BEC-spacing-xs) var(--BEC-spacing-sm);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--BEC-radius-md);
    color: var(--BEC-text-secondary);
    font-size: var(--BEC-font-size-sm);
    cursor: pointer;
    transition: all var(--BEC-transition-fast);
    white-space: nowrap;
}

.category-tab:hover[b-v0rtg45yv3] {
    background: var(--BEC-surface-hover);
    color: var(--BEC-text-primary);
}

.category-tab.active[b-v0rtg45yv3] {
    background: var(--BEC-brand-primary-subtle);
    border-color: var(--BEC-brand-primary);
    color: var(--BEC-brand-primary);
    font-weight: 500;
}

.tab-icon[b-v0rtg45yv3] {
    font-size: 0.875rem;
}

.tab-count[b-v0rtg45yv3] {
    background: var(--BEC-surface-tertiary);
    color: var(--BEC-text-secondary);
    padding: 1px 6px;
    border-radius: var(--BEC-radius-full);
    font-size: var(--BEC-font-size-xs);
}

.category-tab.active .tab-count[b-v0rtg45yv3] {
    background: var(--BEC-brand-primary);
    color: var(--BEC-text-on-primary);
}

/* -----------------------------------------------------
   Memory List
   - Container for memory items
   ----------------------------------------------------- */
.memory-list[b-v0rtg45yv3] {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-sm);
}

/* -----------------------------------------------------
   Loading State
   ----------------------------------------------------- */
.loading-state[b-v0rtg45yv3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacing-sm);
    padding: var(--BEC-spacing-xl);
    color: var(--BEC-text-secondary);
}

.loading-spinner[b-v0rtg45yv3] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--BEC-border-subtle);
    border-top-color: var(--BEC-brand-primary);
    border-radius: 50%;
    animation: spin-b-v0rtg45yv3 0.8s linear infinite;
}

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

/* -----------------------------------------------------
   Empty State
   ----------------------------------------------------- */
.empty-state[b-v0rtg45yv3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacing-xs);
    padding: var(--BEC-spacing-xl);
    text-align: center;
}

.empty-icon[b-v0rtg45yv3] {
    font-size: 2rem;
    opacity: 0.5;
}

.empty-text[b-v0rtg45yv3] {
    color: var(--BEC-text-secondary);
    font-weight: 500;
}

.empty-hint[b-v0rtg45yv3] {
    color: var(--BEC-text-tertiary);
    font-size: var(--BEC-font-size-sm);
}

/* -----------------------------------------------------
   Memory Item
   - Individual memory card
   ----------------------------------------------------- */
.memory-item[b-v0rtg45yv3] {
    background: var(--BEC-surface-secondary);
    border: 1px solid var(--BEC-border-subtle);
    border-radius: var(--BEC-radius-md);
    padding: var(--BEC-spacing-sm) var(--BEC-spacing-md);
    transition: all var(--BEC-transition-fast);
}

.memory-item:hover[b-v0rtg45yv3] {
    border-color: var(--BEC-brand-primary-light);
    box-shadow: var(--BEC-shadow-sm);
}

.memory-item.verified[b-v0rtg45yv3] {
    border-left: 3px solid var(--BEC-success);
}

.memory-header[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--BEC-spacing-xs);
}

.memory-key[b-v0rtg45yv3] {
    font-weight: 600;
    color: var(--BEC-text-primary);
    font-size: var(--BEC-font-size-sm);
}

.memory-actions[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-xs);
    opacity: 0;
    transition: opacity var(--BEC-transition-fast);
}

.memory-item:hover .memory-actions[b-v0rtg45yv3] {
    opacity: 1;
}

.verified-badge[b-v0rtg45yv3] {
    color: var(--BEC-success);
    font-size: 0.75rem;
}

.action-btn[b-v0rtg45yv3] {
    background: transparent;
    border: none;
    padding: var(--BEC-spacing-xs);
    cursor: pointer;
    border-radius: var(--BEC-radius-sm);
    font-size: 0.75rem;
    opacity: 0.7;
    transition: all var(--BEC-transition-fast);
}

.action-btn:hover[b-v0rtg45yv3] {
    opacity: 1;
    background: var(--BEC-surface-hover);
}

.action-btn.delete:hover[b-v0rtg45yv3] {
    background: var(--BEC-error-subtle);
}

.memory-value[b-v0rtg45yv3] {
    color: var(--BEC-text-primary);
    font-size: var(--BEC-font-size-sm);
    margin-bottom: var(--BEC-spacing-xs);
    line-height: 1.4;
}

.memory-context[b-v0rtg45yv3] {
    color: var(--BEC-text-tertiary);
    font-size: var(--BEC-font-size-xs);
    margin-bottom: var(--BEC-spacing-xs);
    font-style: italic;
}

.context-label[b-v0rtg45yv3] {
    color: var(--BEC-text-secondary);
    margin-right: var(--BEC-spacing-xs);
}

.memory-meta[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-md);
    font-size: var(--BEC-font-size-xs);
    color: var(--BEC-text-tertiary);
}

/* Confidence Bar */
.confidence-bar[b-v0rtg45yv3] {
    width: 60px;
    height: 4px;
    background: var(--BEC-border-subtle);
    border-radius: var(--BEC-radius-full);
    overflow: hidden;
}

.confidence-fill[b-v0rtg45yv3] {
    height: 100%;
    border-radius: var(--BEC-radius-full);
    transition: width var(--BEC-transition-normal);
}

/* -----------------------------------------------------
   Memory Footer
   - Add memory button area
   ----------------------------------------------------- */
.memory-footer[b-v0rtg45yv3] {
    margin-top: var(--BEC-spacing-md);
    padding-top: var(--BEC-spacing-md);
    border-top: 1px solid var(--BEC-border-subtle);
}

.add-memory-btn[b-v0rtg45yv3] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacing-xs);
    padding: var(--BEC-spacing-sm);
    background: transparent;
    border: 1px dashed var(--BEC-border-default);
    border-radius: var(--BEC-radius-md);
    color: var(--BEC-text-secondary);
    font-size: var(--BEC-font-size-sm);
    cursor: pointer;
    transition: all var(--BEC-transition-fast);
}

.add-memory-btn:hover[b-v0rtg45yv3] {
    border-color: var(--BEC-brand-primary);
    color: var(--BEC-brand-primary);
    background: var(--BEC-brand-primary-subtle);
}

/* -----------------------------------------------------
   Memory Dialog
   - Modal for adding/editing memories
   ----------------------------------------------------- */
.memory-dialog-overlay[b-v0rtg45yv3] {
    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-v0rtg45yv3 0.2s ease-out;
}

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

.memory-dialog[b-v0rtg45yv3] {
    background: var(--BEC-surface-primary);
    border-radius: var(--BEC-radius-lg);
    box-shadow: var(--BEC-shadow-xl);
    width: 90%;
    max-width: 480px;
    animation: slideUp-b-v0rtg45yv3 0.3s ease-out;
}

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

.dialog-header[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--BEC-spacing-md) var(--BEC-spacing-lg);
    border-bottom: 1px solid var(--BEC-border-subtle);
}

.dialog-header h3[b-v0rtg45yv3] {
    margin: 0;
    font-size: var(--BEC-font-size-lg);
    font-weight: 600;
    color: var(--BEC-text-primary);
}

.close-btn[b-v0rtg45yv3] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--BEC-text-secondary);
    cursor: pointer;
    padding: var(--BEC-spacing-xs);
    line-height: 1;
    border-radius: var(--BEC-radius-sm);
    transition: all var(--BEC-transition-fast);
}

.close-btn:hover[b-v0rtg45yv3] {
    background: var(--BEC-surface-hover);
    color: var(--BEC-text-primary);
}

.dialog-content[b-v0rtg45yv3] {
    padding: var(--BEC-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-md);
}

.form-group[b-v0rtg45yv3] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacing-xs);
}

.form-group label[b-v0rtg45yv3] {
    font-weight: 500;
    color: var(--BEC-text-secondary);
    font-size: var(--BEC-font-size-sm);
}

.form-select[b-v0rtg45yv3],
.form-input[b-v0rtg45yv3],
.form-textarea[b-v0rtg45yv3] {
    padding: var(--BEC-spacing-sm) var(--BEC-spacing-md);
    border: 1px solid var(--BEC-border-default);
    border-radius: var(--BEC-radius-md);
    background: var(--BEC-surface-secondary);
    color: var(--BEC-text-primary);
    font-size: var(--BEC-font-size-sm);
    transition: all var(--BEC-transition-fast);
}

.form-select:focus[b-v0rtg45yv3],
.form-input:focus[b-v0rtg45yv3],
.form-textarea:focus[b-v0rtg45yv3] {
    outline: none;
    border-color: var(--BEC-brand-primary);
    box-shadow: 0 0 0 3px var(--BEC-brand-primary-subtle);
}

.form-textarea[b-v0rtg45yv3] {
    resize: vertical;
    min-height: 80px;
}

.form-check[b-v0rtg45yv3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm);
}

.form-check input[type="checkbox"][b-v0rtg45yv3] {
    width: 16px;
    height: 16px;
    accent-color: var(--BEC-brand-primary);
}

.form-check label[b-v0rtg45yv3] {
    font-size: var(--BEC-font-size-sm);
    color: var(--BEC-text-secondary);
}

.dialog-footer[b-v0rtg45yv3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacing-sm);
    padding: var(--BEC-spacing-md) var(--BEC-spacing-lg);
    border-top: 1px solid var(--BEC-border-subtle);
    background: var(--BEC-surface-secondary);
}

.btn-cancel[b-v0rtg45yv3],
.btn-save[b-v0rtg45yv3] {
    padding: var(--BEC-spacing-sm) var(--BEC-spacing-lg);
    border-radius: var(--BEC-radius-md);
    font-size: var(--BEC-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--BEC-transition-fast);
}

.btn-cancel[b-v0rtg45yv3] {
    background: transparent;
    border: 1px solid var(--BEC-border-default);
    color: var(--BEC-text-secondary);
}

.btn-cancel:hover[b-v0rtg45yv3] {
    background: var(--BEC-surface-hover);
}

.btn-save[b-v0rtg45yv3] {
    background: var(--BEC-brand-primary);
    border: none;
    color: var(--BEC-text-on-primary);
}

.btn-save:hover:not(:disabled)[b-v0rtg45yv3] {
    background: var(--BEC-brand-primary-hover);
}

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

/* -----------------------------------------------------
   Feedback Toast
   - Notification toast for actions
   ----------------------------------------------------- */
.feedback-toast[b-v0rtg45yv3] {
    position: fixed;
    bottom: var(--BEC-spacing-xl);
    right: var(--BEC-spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacing-sm);
    padding: var(--BEC-spacing-md) var(--BEC-spacing-lg);
    border-radius: var(--BEC-radius-md);
    box-shadow: var(--BEC-shadow-lg);
    animation: toastSlide-b-v0rtg45yv3 0.3s ease-out;
    z-index: 1100;
}

@keyframes toastSlide-b-v0rtg45yv3 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feedback-toast.success[b-v0rtg45yv3] {
    background: var(--BEC-success);
    color: var(--BEC-text-on-primary);
}

.feedback-toast.error[b-v0rtg45yv3] {
    background: var(--BEC-error);
    color: var(--BEC-text-on-primary);
}

.toast-icon[b-v0rtg45yv3] {
    font-size: 1rem;
}

.toast-message[b-v0rtg45yv3] {
    font-size: var(--BEC-font-size-sm);
    font-weight: 500;
}

/* -----------------------------------------------------
   Scrollbar Styling
   ----------------------------------------------------- */
.memory-list[b-v0rtg45yv3]::-webkit-scrollbar {
    width: 6px;
}

.memory-list[b-v0rtg45yv3]::-webkit-scrollbar-track {
    background: transparent;
}

.memory-list[b-v0rtg45yv3]::-webkit-scrollbar-thumb {
    background: var(--BEC-border-default);
    border-radius: var(--BEC-radius-full);
}

.memory-list[b-v0rtg45yv3]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-border-strong);
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Progress/BulkOperationProgress.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Bulk Operation Progress Component
   Phase 3: Real-time streaming progress UI styles
   References: BEC_Theme.css variables
   ===================================================== */

/* Container */
.bulk-operation-progress[b-wgwlede51f] {
    background: var(--BEC-Surface-Primary, #1a1a2e);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: var(--BEC-Border-Radius-lg, 12px);
    padding: var(--BEC-Spacing-md, 16px);
    margin: var(--BEC-Spacing-sm, 8px) 0;
    transition: all 0.3s ease;
    box-shadow: var(--BEC-Shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
}

.bulk-operation-progress.hidden[b-wgwlede51f] {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.bulk-operation-progress.visible[b-wgwlede51f] {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
.progress-header[b-wgwlede51f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-Spacing-md, 16px);
    padding-bottom: var(--BEC-Spacing-sm, 8px);
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.progress-title[b-wgwlede51f] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-sm, 8px);
}

.operation-icon[b-wgwlede51f] {
    font-size: 1.5rem;
}

.operation-name[b-wgwlede51f] {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
    font-size: 1.1rem;
}

.operation-status[b-wgwlede51f] {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.operation-status.status-processing[b-wgwlede51f] {
    background: var(--BEC-Blue-500, #3b82f6);
    color: white;
    animation: pulse-b-wgwlede51f 2s infinite;
}

.operation-status.status-completed[b-wgwlede51f] {
    background: var(--BEC-Green-500, #22c55e);
    color: white;
}

.operation-status.status-failed[b-wgwlede51f] {
    background: var(--BEC-Red-500, #ef4444);
    color: white;
}

.operation-status.status-cancelled[b-wgwlede51f] {
    background: var(--BEC-Yellow-500, #f59e0b);
    color: black;
}

@keyframes pulse-b-wgwlede51f {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.cancel-btn[b-wgwlede51f] {
    background: transparent;
    border: 1px solid var(--BEC-Red-500, #ef4444);
    color: var(--BEC-Red-500, #ef4444);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn:hover[b-wgwlede51f] {
    background: var(--BEC-Red-500, #ef4444);
    color: white;
}

/* Progress Bar */
.progress-bar-container[b-wgwlede51f] {
    width: 100%;
    height: 24px;
    background: var(--BEC-Surface-Secondary, #252542);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

.progress-bar[b-wgwlede51f] {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--BEC-Blue-500, #3b82f6), 
        var(--BEC-Purple-500, #8b5cf6));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    transition: width 0.3s ease;
    min-width: 40px;
}

.progress-text[b-wgwlede51f] {
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Progress Details */
.progress-details[b-wgwlede51f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--BEC-Spacing-sm, 8px);
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

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

.detail-label[b-wgwlede51f] {
    font-size: 0.7rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-wgwlede51f] {
    font-size: 0.95rem;
    color: var(--BEC-Text-Primary, #ffffff);
    font-weight: 500;
}

.detail-value.phase-initializing[b-wgwlede51f] { color: var(--BEC-Blue-400, #60a5fa); }
.detail-value.phase-validating[b-wgwlede51f] { color: var(--BEC-Yellow-400, #facc15); }
.detail-value.phase-processing[b-wgwlede51f] { color: var(--BEC-Purple-400, #a78bfa); }
.detail-value.phase-inserting[b-wgwlede51f] { color: var(--BEC-Green-400, #4ade80); }
.detail-value.phase-finalizing[b-wgwlede51f] { color: var(--BEC-Teal-400, #2dd4bf); }
.detail-value.phase-complete[b-wgwlede51f] { color: var(--BEC-Green-500, #22c55e); }
.detail-value.phase-failed[b-wgwlede51f] { color: var(--BEC-Red-500, #ef4444); }

/* Status Counts */
.status-counts[b-wgwlede51f] {
    display: flex;
    gap: var(--BEC-Spacing-md, 16px);
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

.count-item[b-wgwlede51f] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-xs, 4px);
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--BEC-Surface-Secondary, #252542);
}

.count-item.success[b-wgwlede51f] { border-left: 3px solid var(--BEC-Green-500, #22c55e); }
.count-item.warning[b-wgwlede51f] { border-left: 3px solid var(--BEC-Yellow-500, #f59e0b); }
.count-item.error[b-wgwlede51f] { border-left: 3px solid var(--BEC-Red-500, #ef4444); }

.count-icon[b-wgwlede51f] {
    font-size: 0.9rem;
}

.count-item.success .count-icon[b-wgwlede51f] { color: var(--BEC-Green-500, #22c55e); }
.count-item.warning .count-icon[b-wgwlede51f] { color: var(--BEC-Yellow-500, #f59e0b); }
.count-item.error .count-icon[b-wgwlede51f] { color: var(--BEC-Red-500, #ef4444); }

.count-value[b-wgwlede51f] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--BEC-Text-Primary, #ffffff);
}

.count-label[b-wgwlede51f] {
    font-size: 0.75rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

/* Message */
.progress-message[b-wgwlede51f] {
    padding: var(--BEC-Spacing-sm, 8px) var(--BEC-Spacing-md, 16px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-radius: 8px;
    color: var(--BEC-Text-Primary, #ffffff);
    font-size: 0.9rem;
    margin-bottom: var(--BEC-Spacing-sm, 8px);
}

/* Recent Issues */
.recent-issues[b-wgwlede51f] {
    margin-top: var(--BEC-Spacing-md, 16px);
    padding-top: var(--BEC-Spacing-sm, 8px);
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.issues-header[b-wgwlede51f] {
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    margin-bottom: var(--BEC-Spacing-xs, 4px);
    font-weight: 600;
}

.issue-item[b-wgwlede51f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-Spacing-xs, 4px);
    padding: var(--BEC-Spacing-xs, 4px) var(--BEC-Spacing-sm, 8px);
    margin: 2px 0;
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--BEC-Surface-Secondary, #252542);
}

.issue-item.warning[b-wgwlede51f] {
    border-left: 2px solid var(--BEC-Yellow-500, #f59e0b);
}

.issue-item.error[b-wgwlede51f] {
    border-left: 2px solid var(--BEC-Red-500, #ef4444);
}

.issue-row[b-wgwlede51f] {
    color: var(--BEC-Text-Secondary, #a0a0a0);
    font-weight: 500;
}

.issue-column[b-wgwlede51f] {
    color: var(--BEC-Blue-400, #60a5fa);
    font-weight: 600;
}

.issue-text[b-wgwlede51f] {
    color: var(--BEC-Text-Primary, #ffffff);
    flex: 1;
}

.issue-fix[b-wgwlede51f] {
    color: var(--BEC-Green-400, #4ade80);
    font-style: italic;
}

/* Loading State */
.loading-state[b-wgwlede51f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-Spacing-sm, 8px);
    padding: var(--BEC-Spacing-lg, 24px);
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.loading-spinner[b-wgwlede51f] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--BEC-Surface-Secondary, #252542);
    border-top-color: var(--BEC-Blue-500, #3b82f6);
    border-radius: 50%;
    animation: spin-b-wgwlede51f 1s linear infinite;
}

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

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Progress/PipelineReviewTable.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Pipeline Human Review Table
   Phase 7: Construction Pipeline HITL Review UI Styling
   References: BEC_Theme.css variables
   ===================================================== */

/* ═══════════════════════════════════════════════════════
   CONTAINER - Main table wrapper
   ═══════════════════════════════════════════════════════ */
.pipeline-review-table[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Primary, #1a1a2e);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: var(--BEC-Border-Radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--BEC-Shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.3));
}

/* ═══════════════════════════════════════════════════════
   HEADER - Pipeline info and filter tabs
   ═══════════════════════════════════════════════════════ */
.table-header[b-aq4v8rhsbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-Spacing-md, 16px) var(--BEC-Spacing-lg, 24px);
    background: linear-gradient(135deg, 
        var(--BEC-Surface-Secondary, #252542), 
        var(--BEC-Surface-Tertiary, #303050));
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.header-left h4[b-aq4v8rhsbe] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-info[b-aq4v8rhsbe] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-sm, 8px);
    margin-top: 4px;
}

.project-name[b-aq4v8rhsbe] {
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.pipeline-status[b-aq4v8rhsbe] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pipeline-status.running[b-aq4v8rhsbe] {
    background: var(--BEC-Blue-900, #1e3a5f);
    color: var(--BEC-Blue-400, #60a5fa);
}

.pipeline-status.waitingforhuman[b-aq4v8rhsbe] {
    background: var(--BEC-Yellow-900, #422006);
    color: var(--BEC-Yellow-400, #facc15);
    animation: pulse-b-aq4v8rhsbe 2s ease-in-out infinite;
}

.pipeline-status.completed[b-aq4v8rhsbe] {
    background: var(--BEC-Green-900, #14532d);
    color: var(--BEC-Green-400, #4ade80);
}

@keyframes pulse-b-aq4v8rhsbe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════
   CONNECTION STATUS - Real-time indicator
   ═══════════════════════════════════════════════════════ */
.connection-status[b-aq4v8rhsbe] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--BEC-Spacing-lg, 24px);
    font-size: 0.75rem;
    background: var(--BEC-Surface-Secondary, #252542);
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.status-dot[b-aq4v8rhsbe] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.connection-status.connected[b-aq4v8rhsbe] {
    color: var(--BEC-Green-400, #4ade80);
}

.connection-status.connected .status-dot[b-aq4v8rhsbe] {
    background: var(--BEC-Green-500, #22c55e);
    box-shadow: 0 0 8px var(--BEC-Green-500, #22c55e);
}

.connection-status.disconnected[b-aq4v8rhsbe] {
    color: var(--BEC-Yellow-400, #facc15);
}

.connection-status.disconnected .status-dot[b-aq4v8rhsbe] {
    background: var(--BEC-Yellow-500, #eab308);
    animation: blink-b-aq4v8rhsbe 1s infinite;
}

@keyframes blink-b-aq4v8rhsbe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════
   FILTER TABS - Priority filtering
   ═══════════════════════════════════════════════════════ */
.filter-tabs[b-aq4v8rhsbe] {
    display: flex;
    gap: 4px;
    background: var(--BEC-Surface-Primary, #1a1a2e);
    padding: 4px;
    border-radius: var(--BEC-Border-Radius-md, 8px);
}

.filter-tab[b-aq4v8rhsbe] {
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Primary, #ffffff);
}

.filter-tab.active[b-aq4v8rhsbe] {
    background: var(--BEC-Blue-500, #3b82f6);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.filter-tab.critical.active[b-aq4v8rhsbe] { 
    background: linear-gradient(135deg, var(--BEC-Red-600, #dc2626), var(--BEC-Red-700, #b91c1c));
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}
.filter-tab.high.active[b-aq4v8rhsbe] { 
    background: linear-gradient(135deg, var(--BEC-Yellow-600, #ca8a04), var(--BEC-Yellow-700, #a16207));
    box-shadow: 0 2px 8px rgba(202, 138, 4, 0.4);
}
.filter-tab.normal.active[b-aq4v8rhsbe] { 
    background: linear-gradient(135deg, var(--BEC-Green-600, #16a34a), var(--BEC-Green-700, #15803d));
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);
}

/* ═══════════════════════════════════════════════════════
   TOOLBAR - Selection controls and actions
   ═══════════════════════════════════════════════════════ */
.table-toolbar[b-aq4v8rhsbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-Spacing-sm, 8px) var(--BEC-Spacing-lg, 24px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.toolbar-left[b-aq4v8rhsbe] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
}

.select-all-checkbox[b-aq4v8rhsbe] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    cursor: pointer;
}

.select-all-checkbox input[b-aq4v8rhsbe] {
    width: 16px;
    height: 16px;
    accent-color: var(--BEC-Blue-500, #3b82f6);
}

.selection-count[b-aq4v8rhsbe] {
    font-size: 0.85rem;
    color: var(--BEC-Blue-400, #60a5fa);
    font-weight: 500;
}

.selection-value[b-aq4v8rhsbe] {
    font-size: 0.85rem;
    color: var(--BEC-Green-400, #4ade80);
}

.toolbar-right[b-aq4v8rhsbe] {
    display: flex;
    gap: var(--BEC-Spacing-sm, 8px);
}

.toolbar-btn[b-aq4v8rhsbe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Secondary, #a0a0a0);
    border-radius: var(--BEC-Border-Radius-md, 8px);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover:not(:disabled)[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Secondary, #252542);
    color: var(--BEC-Text-Primary, #ffffff);
    border-color: var(--BEC-Border-Default, rgba(255, 255, 255, 0.2));
}

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

.toolbar-btn.reject[b-aq4v8rhsbe] {
    border-color: var(--BEC-Red-800, #991b1b);
    color: var(--BEC-Red-400, #f87171);
}

.toolbar-btn.reject:hover:not(:disabled)[b-aq4v8rhsbe] {
    background: var(--BEC-Red-900, #450a0a);
}

.toolbar-btn.primary[b-aq4v8rhsbe] {
    background: linear-gradient(135deg, 
        var(--BEC-Green-600, #16a34a), 
        var(--BEC-Green-700, #15803d));
    color: white;
    border: none;
}

.toolbar-btn.primary:hover:not(:disabled)[b-aq4v8rhsbe] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}

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

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

/* ═══════════════════════════════════════════════════════
   TABLE CONTAINER - Scrollable data area
   ═══════════════════════════════════════════════════════ */
.table-container[b-aq4v8rhsbe] {
    overflow-x: auto;
    max-height: 450px;
    overflow-y: auto;
}

.table-loading[b-aq4v8rhsbe], .table-empty[b-aq4v8rhsbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-Spacing-md, 16px);
    padding: var(--BEC-Spacing-xl, 32px);
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.loading-spinner[b-aq4v8rhsbe] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-Surface-Tertiary, #303050);
    border-top-color: var(--BEC-Blue-500, #3b82f6);
    border-radius: 50%;
    animation: spin-b-aq4v8rhsbe 0.8s linear infinite;
}

.empty-icon[b-aq4v8rhsbe] {
    font-size: 3rem;
}

.empty-subtitle[b-aq4v8rhsbe] {
    font-size: 0.85rem;
    color: var(--BEC-Text-Tertiary, #666666);
}

/* ═══════════════════════════════════════════════════════
   DATA TABLE - Review items grid
   ═══════════════════════════════════════════════════════ */
.data-table[b-aq4v8rhsbe] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table th[b-aq4v8rhsbe] {
    position: sticky;
    top: 0;
    background: var(--BEC-Surface-Secondary, #252542);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    white-space: nowrap;
    z-index: 10;
}

.data-table td[b-aq4v8rhsbe] {
    padding: 14px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.05));
    color: var(--BEC-Text-Primary, #ffffff);
    vertical-align: middle;
}

.data-table tbody tr[b-aq4v8rhsbe] {
    transition: all 0.2s ease;
    cursor: pointer;
}

.data-table tbody tr:hover[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Secondary, #252542);
}

.data-table tbody tr.selected[b-aq4v8rhsbe] {
    background: rgba(59, 130, 246, 0.15);
    border-left: 3px solid var(--BEC-Blue-500, #3b82f6);
}

.data-table tbody tr.row-critical[b-aq4v8rhsbe] { 
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid var(--BEC-Red-500, #ef4444);
}

.data-table tbody tr.row-high[b-aq4v8rhsbe] { 
    background: rgba(245, 158, 11, 0.06);
    border-left: 3px solid var(--BEC-Yellow-500, #f59e0b);
}

.data-table tbody tr.row-critical.selected[b-aq4v8rhsbe],
.data-table tbody tr.row-high.selected[b-aq4v8rhsbe] {
    border-left: 3px solid var(--BEC-Blue-500, #3b82f6);
}

/* Column Widths */
.col-select[b-aq4v8rhsbe] { width: 45px; text-align: center; }
.col-priority[b-aq4v8rhsbe] { width: 100px; }
.col-type[b-aq4v8rhsbe] { width: 100px; }
.col-description[b-aq4v8rhsbe] { min-width: 200px; }
.col-original[b-aq4v8rhsbe] { width: 140px; }
.col-suggested[b-aq4v8rhsbe] { width: 140px; }
.col-variance[b-aq4v8rhsbe] { width: 80px; text-align: center; }
.col-confidence[b-aq4v8rhsbe] { width: 100px; }
.col-reasons[b-aq4v8rhsbe] { min-width: 150px; }
.col-actions[b-aq4v8rhsbe] { width: 110px; text-align: center; }

/* ═══════════════════════════════════════════════════════
   PRIORITY BADGE - Visual indicator
   ═══════════════════════════════════════════════════════ */
.priority-badge[b-aq4v8rhsbe] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.critical[b-aq4v8rhsbe] {
    background: var(--BEC-Red-900, #450a0a);
    color: var(--BEC-Red-400, #f87171);
    animation: pulse-b-aq4v8rhsbe 2s ease-in-out infinite;
}

.priority-badge.high[b-aq4v8rhsbe] {
    background: var(--BEC-Yellow-900, #422006);
    color: var(--BEC-Yellow-400, #facc15);
}

.priority-badge.normal[b-aq4v8rhsbe] {
    background: var(--BEC-Green-900, #14532d);
    color: var(--BEC-Green-400, #4ade80);
}

/* ═══════════════════════════════════════════════════════
   VALUE CELLS - Original/Suggested display
   ═══════════════════════════════════════════════════════ */
.value-cell[b-aq4v8rhsbe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.value-cell .qty[b-aq4v8rhsbe] {
    font-weight: 500;
    color: var(--BEC-Text-Primary, #ffffff);
}

.value-cell .rate[b-aq4v8rhsbe] {
    font-size: 0.75rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.value-cell.suggested .qty[b-aq4v8rhsbe] {
    color: var(--BEC-Blue-400, #60a5fa);
}

.value-cell.suggested .rate[b-aq4v8rhsbe] {
    color: var(--BEC-Blue-300, #93c5fd);
}

/* ═══════════════════════════════════════════════════════
   VARIANCE DISPLAY
   ═══════════════════════════════════════════════════════ */
.variance-value[b-aq4v8rhsbe] {
    font-weight: 600;
    font-size: 0.85rem;
}

.col-variance.variance-critical .variance-value[b-aq4v8rhsbe] { color: var(--BEC-Red-400, #f87171); }
.col-variance.variance-high .variance-value[b-aq4v8rhsbe] { color: var(--BEC-Yellow-400, #facc15); }
.col-variance.variance-medium .variance-value[b-aq4v8rhsbe] { color: var(--BEC-Blue-400, #60a5fa); }
.col-variance.variance-low .variance-value[b-aq4v8rhsbe] { color: var(--BEC-Green-400, #4ade80); }

/* ═══════════════════════════════════════════════════════
   CONFIDENCE BAR - Visual indicator
   ═══════════════════════════════════════════════════════ */
.col-confidence[b-aq4v8rhsbe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.confidence-bar[b-aq4v8rhsbe] {
    height: 6px;
    background: var(--BEC-Surface-Tertiary, #303050);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-fill[b-aq4v8rhsbe] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.confidence-fill.confidence-low[b-aq4v8rhsbe] { background: var(--BEC-Red-500, #ef4444); }
.confidence-fill.confidence-medium[b-aq4v8rhsbe] { background: var(--BEC-Yellow-500, #f59e0b); }
.confidence-fill.confidence-high[b-aq4v8rhsbe] { background: var(--BEC-Green-500, #22c55e); }

.confidence-value[b-aq4v8rhsbe] {
    font-size: 0.7rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   REASONS TAGS
   ═══════════════════════════════════════════════════════ */
.reasons-list[b-aq4v8rhsbe] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.reason-tag[b-aq4v8rhsbe] {
    padding: 2px 8px;
    background: var(--BEC-Surface-Tertiary, #303050);
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.reason-more[b-aq4v8rhsbe] {
    padding: 2px 8px;
    background: var(--BEC-Blue-900, #1e3a5f);
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--BEC-Blue-400, #60a5fa);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   ACTION BUTTONS
   ═══════════════════════════════════════════════════════ */
.action-btn[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Tertiary, #303050);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    transition: all 0.2s ease;
    margin: 0 2px;
}

.action-btn:hover[b-aq4v8rhsbe] {
    transform: scale(1.1);
}

.action-btn.approve[b-aq4v8rhsbe] {
    color: var(--BEC-Green-400, #4ade80);
}

.action-btn.approve:hover[b-aq4v8rhsbe] {
    background: var(--BEC-Green-900, #14532d);
    border-color: var(--BEC-Green-700, #15803d);
}

.action-btn.modify[b-aq4v8rhsbe] {
    color: var(--BEC-Blue-400, #60a5fa);
}

.action-btn.modify:hover[b-aq4v8rhsbe] {
    background: var(--BEC-Blue-900, #1e3a5f);
    border-color: var(--BEC-Blue-700, #1d4ed8);
}

.action-btn.reject[b-aq4v8rhsbe] {
    color: var(--BEC-Red-400, #f87171);
}

.action-btn.reject:hover[b-aq4v8rhsbe] {
    background: var(--BEC-Red-900, #450a0a);
    border-color: var(--BEC-Red-700, #b91c1c);
}

/* ═══════════════════════════════════════════════════════
   CELL STYLES
   ═══════════════════════════════════════════════════════ */
.cell-code[b-aq4v8rhsbe] {
    display: block;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: var(--BEC-Blue-400, #60a5fa);
    margin-top: 2px;
}

.cell-text[b-aq4v8rhsbe] {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-type[b-aq4v8rhsbe] {
    font-size: 0.75rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    text-transform: capitalize;
}

/* ═══════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════ */
.table-pagination[b-aq4v8rhsbe] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
    padding: var(--BEC-Spacing-md, 16px);
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.page-btn[b-aq4v8rhsbe] {
    padding: 8px 16px;
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    background: var(--BEC-Surface-Secondary, #252542);
    color: var(--BEC-Text-Secondary, #a0a0a0);
    border-radius: var(--BEC-Border-Radius-md, 8px);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Primary, #ffffff);
}

.page-btn:disabled[b-aq4v8rhsbe] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-aq4v8rhsbe] {
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

/* ═══════════════════════════════════════════════════════
   FOOTER - Summary stats
   ═══════════════════════════════════════════════════════ */
.table-footer[b-aq4v8rhsbe] {
    padding: var(--BEC-Spacing-md, 16px) var(--BEC-Spacing-lg, 24px);
    background: linear-gradient(135deg, 
        var(--BEC-Surface-Secondary, #252542), 
        var(--BEC-Surface-Tertiary, #303050));
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.summary-stats[b-aq4v8rhsbe] {
    display: flex;
    justify-content: center;
    gap: var(--BEC-Spacing-xl, 32px);
    flex-wrap: wrap;
}

.stat-item[b-aq4v8rhsbe] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-label[b-aq4v8rhsbe] {
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.stat-value[b-aq4v8rhsbe] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
}

.stat-item.critical .stat-value[b-aq4v8rhsbe] { color: var(--BEC-Red-400, #f87171); }
.stat-item.high .stat-value[b-aq4v8rhsbe] { color: var(--BEC-Yellow-400, #facc15); }
.stat-value.highlight[b-aq4v8rhsbe] { 
    color: var(--BEC-Blue-400, #60a5fa);
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════
   DIALOGS - Modify and Batch action modals
   ═══════════════════════════════════════════════════════ */
.modify-dialog-overlay[b-aq4v8rhsbe] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-aq4v8rhsbe 0.2s ease;
}

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

.modify-dialog[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Primary, #1a1a2e);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: var(--BEC-Border-Radius-lg, 12px);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--BEC-Shadow-xl, 0 20px 50px rgba(0, 0, 0, 0.5));
    animation: slideUp-b-aq4v8rhsbe 0.3s ease;
}

.batch-dialog[b-aq4v8rhsbe] {
    max-width: 450px;
}

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

.dialog-header[b-aq4v8rhsbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-Spacing-md, 16px) var(--BEC-Spacing-lg, 24px);
    background: linear-gradient(135deg, 
        var(--BEC-Blue-600, #2563eb), 
        var(--BEC-Purple-600, #9333ea));
    border-radius: var(--BEC-Border-Radius-lg, 12px) var(--BEC-Border-Radius-lg, 12px) 0 0;
}

.dialog-header.reject[b-aq4v8rhsbe] {
    background: linear-gradient(135deg, 
        var(--BEC-Red-600, #dc2626), 
        var(--BEC-Red-700, #b91c1c));
}

.dialog-header h3[b-aq4v8rhsbe] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.close-btn[b-aq4v8rhsbe] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.close-btn:hover[b-aq4v8rhsbe] {
    background: rgba(255, 255, 255, 0.3);
}

.dialog-body[b-aq4v8rhsbe] {
    padding: var(--BEC-Spacing-lg, 24px);
}

.modify-field[b-aq4v8rhsbe] {
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

.modify-field label[b-aq4v8rhsbe] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    margin-bottom: 6px;
}

.modify-field input[b-aq4v8rhsbe],
.modify-field textarea[b-aq4v8rhsbe] {
    width: 100%;
    padding: 10px 14px;
    background: var(--BEC-Surface-Secondary, #252542);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: var(--BEC-Border-Radius-md, 8px);
    color: var(--BEC-Text-Primary, #ffffff);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.modify-field input:focus[b-aq4v8rhsbe],
.modify-field textarea:focus[b-aq4v8rhsbe] {
    outline: none;
    border-color: var(--BEC-Blue-500, #3b82f6);
}

.modify-row[b-aq4v8rhsbe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-Spacing-md, 16px);
}

.original-values[b-aq4v8rhsbe] {
    display: flex;
    justify-content: space-between;
    padding: var(--BEC-Spacing-sm, 8px) var(--BEC-Spacing-md, 16px);
    background: var(--BEC-Surface-Tertiary, #303050);
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.batch-summary[b-aq4v8rhsbe] {
    text-align: center;
    font-size: 1rem;
    color: var(--BEC-Text-Primary, #ffffff);
    margin-bottom: var(--BEC-Spacing-lg, 24px);
}

.batch-summary strong[b-aq4v8rhsbe] {
    color: var(--BEC-Blue-400, #60a5fa);
}

.dialog-footer[b-aq4v8rhsbe] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-Spacing-sm, 8px);
    padding: var(--BEC-Spacing-md, 16px) var(--BEC-Spacing-lg, 24px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: 0 0 var(--BEC-Border-Radius-lg, 12px) var(--BEC-Border-Radius-lg, 12px);
}

.btn-cancel[b-aq4v8rhsbe] {
    padding: 10px 20px;
    background: var(--BEC-Surface-Tertiary, #303050);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    color: var(--BEC-Text-Secondary, #a0a0a0);
    border-radius: var(--BEC-Border-Radius-md, 8px);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-aq4v8rhsbe] {
    background: var(--BEC-Surface-Secondary, #252542);
    color: var(--BEC-Text-Primary, #ffffff);
}

.btn-submit[b-aq4v8rhsbe] {
    padding: 10px 24px;
    background: linear-gradient(135deg, 
        var(--BEC-Green-600, #16a34a), 
        var(--BEC-Green-700, #15803d));
    border: none;
    color: white;
    border-radius: var(--BEC-Border-Radius-md, 8px);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover:not(:disabled)[b-aq4v8rhsbe] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}

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

.btn-submit.reject[b-aq4v8rhsbe] {
    background: linear-gradient(135deg, 
        var(--BEC-Red-600, #dc2626), 
        var(--BEC-Red-700, #b91c1c));
}

.btn-submit.reject:hover:not(:disabled)[b-aq4v8rhsbe] {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ═══════════════════════════════════════════════════════ */
.table-container[b-aq4v8rhsbe]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-aq4v8rhsbe]::-webkit-scrollbar-track {
    background: var(--BEC-Surface-Secondary, #252542);
}

.table-container[b-aq4v8rhsbe]::-webkit-scrollbar-thumb {
    background: var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.15));
    border-radius: 4px;
}

.table-container[b-aq4v8rhsbe]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-Text-Secondary, #a0a0a0);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .table-header[b-aq4v8rhsbe] {
        flex-direction: column;
        gap: var(--BEC-Spacing-md, 16px);
    }
    
    .filter-tabs[b-aq4v8rhsbe] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .table-toolbar[b-aq4v8rhsbe] {
        flex-direction: column;
        gap: var(--BEC-Spacing-sm, 8px);
    }
    
    .toolbar-right[b-aq4v8rhsbe] {
        width: 100%;
        justify-content: space-between;
    }
    
    .summary-stats[b-aq4v8rhsbe] {
        flex-direction: column;
        align-items: center;
        gap: var(--BEC-Spacing-sm, 8px);
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Progress/StagingVerificationTable.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Staging Verification Table
   Phase 5: Review imported BOQ rows styling
   References: BEC_Theme.css variables
   ===================================================== */

/* Container */
.staging-verification-table[b-10vb0sbe5r] {
    background: var(--BEC-Surface-Primary, #1a1a2e);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: var(--BEC-Border-Radius-lg, 12px);
    overflow: hidden;
}

/* Header */
.table-header[b-10vb0sbe5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-Spacing-md, 16px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.header-left h4[b-10vb0sbe5r] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
}

.session-info[b-10vb0sbe5r] {
    font-size: 0.75rem;
    color: var(--BEC-Text-Tertiary, #666666);
    font-family: monospace;
}

/* Filter Tabs */
.filter-tabs[b-10vb0sbe5r] {
    display: flex;
    gap: 4px;
    background: var(--BEC-Surface-Primary, #1a1a2e);
    padding: 4px;
    border-radius: var(--BEC-Border-Radius-md, 8px);
}

.filter-tab[b-10vb0sbe5r] {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover[b-10vb0sbe5r] {
    background: var(--BEC-Surface-Tertiary, #303050);
}

.filter-tab.active[b-10vb0sbe5r] {
    background: var(--BEC-Blue-500, #3b82f6);
    color: white;
}

.filter-tab.valid.active[b-10vb0sbe5r] { background: var(--BEC-Green-600, #16a34a); }
.filter-tab.warning.active[b-10vb0sbe5r] { background: var(--BEC-Yellow-600, #ca8a04); }
.filter-tab.error.active[b-10vb0sbe5r] { background: var(--BEC-Red-600, #dc2626); }

/* Toolbar */
.table-toolbar[b-10vb0sbe5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-Spacing-sm, 8px) var(--BEC-Spacing-md, 16px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.toolbar-left[b-10vb0sbe5r] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
}

.select-all-checkbox[b-10vb0sbe5r] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    cursor: pointer;
}

.select-all-checkbox input[b-10vb0sbe5r] {
    width: 16px;
    height: 16px;
    accent-color: var(--BEC-Blue-500, #3b82f6);
}

.selection-count[b-10vb0sbe5r] {
    font-size: 0.8rem;
    color: var(--BEC-Blue-400, #60a5fa);
}

.toolbar-right[b-10vb0sbe5r] {
    display: flex;
    gap: var(--BEC-Spacing-sm, 8px);
}

.toolbar-btn[b-10vb0sbe5r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Secondary, #a0a0a0);
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover:not(:disabled)[b-10vb0sbe5r] {
    background: var(--BEC-Surface-Secondary, #252542);
    color: var(--BEC-Text-Primary, #ffffff);
}

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

.toolbar-btn.primary[b-10vb0sbe5r] {
    background: linear-gradient(135deg, 
        var(--BEC-Blue-500, #3b82f6), 
        var(--BEC-Purple-500, #8b5cf6));
    color: white;
    border: none;
}

.toolbar-btn.primary:hover:not(:disabled)[b-10vb0sbe5r] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

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

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

/* Table Container */
.table-container[b-10vb0sbe5r] {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

/* Loading & Empty States */
.table-loading[b-10vb0sbe5r], .table-empty[b-10vb0sbe5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-Spacing-md, 16px);
    padding: var(--BEC-Spacing-xl, 32px);
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.loading-spinner[b-10vb0sbe5r] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-Surface-Tertiary, #303050);
    border-top-color: var(--BEC-Blue-500, #3b82f6);
    border-radius: 50%;
    animation: spin-b-10vb0sbe5r 0.8s linear infinite;
}

.empty-icon[b-10vb0sbe5r] {
    font-size: 2rem;
    opacity: 0.5;
}

/* Data Table */
.data-table[b-10vb0sbe5r] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table th[b-10vb0sbe5r] {
    position: sticky;
    top: 0;
    background: var(--BEC-Surface-Secondary, #252542);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    white-space: nowrap;
}

.data-table td[b-10vb0sbe5r] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.05));
    color: var(--BEC-Text-Primary, #ffffff);
    vertical-align: middle;
}

.data-table tbody tr[b-10vb0sbe5r] {
    transition: background 0.2s ease;
    cursor: pointer;
}

.data-table tbody tr:hover[b-10vb0sbe5r] {
    background: var(--BEC-Surface-Secondary, #252542);
}

.data-table tbody tr.selected[b-10vb0sbe5r] {
    background: rgba(59, 130, 246, 0.1);
}

.data-table tbody tr.row-valid td[b-10vb0sbe5r] { color: var(--BEC-Text-Primary, #ffffff); }
.data-table tbody tr.row-warning[b-10vb0sbe5r] { background: rgba(245, 158, 11, 0.05); }
.data-table tbody tr.row-error[b-10vb0sbe5r] { background: rgba(239, 68, 68, 0.05); }
.data-table tbody tr.row-committed[b-10vb0sbe5r] { opacity: 0.5; }

/* Column Widths */
.col-select[b-10vb0sbe5r] { width: 40px; text-align: center; }
.col-row[b-10vb0sbe5r] { width: 50px; }
.col-status[b-10vb0sbe5r] { width: 100px; }
.col-index[b-10vb0sbe5r] { width: 120px; }
.col-description[b-10vb0sbe5r] { min-width: 200px; }
.col-uom[b-10vb0sbe5r] { width: 60px; }
.col-qty[b-10vb0sbe5r] { width: 80px; text-align: right; }
.col-rate[b-10vb0sbe5r] { width: 100px; text-align: right; }
.col-actions[b-10vb0sbe5r] { width: 80px; text-align: center; }

/* Cell Styles */
.cell-code[b-10vb0sbe5r] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--BEC-Blue-400, #60a5fa);
}

.cell-text[b-10vb0sbe5r] {
    display: block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status Badge */
.status-badge[b-10vb0sbe5r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.valid[b-10vb0sbe5r] {
    background: var(--BEC-Green-900, #14532d);
    color: var(--BEC-Green-400, #4ade80);
}

.status-badge.warning[b-10vb0sbe5r] {
    background: var(--BEC-Yellow-900, #422006);
    color: var(--BEC-Yellow-400, #facc15);
}

.status-badge.error[b-10vb0sbe5r] {
    background: var(--BEC-Red-900, #450a0a);
    color: var(--BEC-Red-400, #f87171);
}

.status-badge.pending[b-10vb0sbe5r] {
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.status-badge.committed[b-10vb0sbe5r] {
    background: var(--BEC-Blue-900, #1e3a5f);
    color: var(--BEC-Blue-400, #60a5fa);
}

/* Action Buttons */
.action-btn[b-10vb0sbe5r] {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.action-btn:hover[b-10vb0sbe5r] {
    opacity: 1;
}

/* Error Detail Row */
.error-detail-row[b-10vb0sbe5r] {
    background: rgba(239, 68, 68, 0.05) !important;
}

.error-detail-row td[b-10vb0sbe5r] {
    padding: 6px 12px 6px 52px;
    border-bottom: none;
}

.error-detail[b-10vb0sbe5r] {
    font-size: 0.75rem;
    color: var(--BEC-Red-400, #f87171);
}

/* Pagination */
.table-pagination[b-10vb0sbe5r] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
    padding: var(--BEC-Spacing-md, 16px);
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.page-btn[b-10vb0sbe5r] {
    padding: 6px 14px;
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    background: var(--BEC-Surface-Secondary, #252542);
    color: var(--BEC-Text-Secondary, #a0a0a0);
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-10vb0sbe5r] {
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Primary, #ffffff);
}

.page-btn:disabled[b-10vb0sbe5r] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-10vb0sbe5r] {
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

/* Footer */
.table-footer[b-10vb0sbe5r] {
    padding: var(--BEC-Spacing-md, 16px);
    background: var(--BEC-Surface-Secondary, #252542);
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.summary-stats[b-10vb0sbe5r] {
    display: flex;
    justify-content: center;
    gap: var(--BEC-Spacing-xl, 32px);
}

.stat-item[b-10vb0sbe5r] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-label[b-10vb0sbe5r] {
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.stat-value[b-10vb0sbe5r] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
}

.stat-item.valid .stat-value[b-10vb0sbe5r] { color: var(--BEC-Green-400, #4ade80); }
.stat-item.warning .stat-value[b-10vb0sbe5r] { color: var(--BEC-Yellow-400, #facc15); }
.stat-item.error .stat-value[b-10vb0sbe5r] { color: var(--BEC-Red-400, #f87171); }

/* Scrollbar */
.table-container[b-10vb0sbe5r]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-10vb0sbe5r]::-webkit-scrollbar-track {
    background: var(--BEC-Surface-Secondary, #252542);
}

.table-container[b-10vb0sbe5r]::-webkit-scrollbar-thumb {
    background: var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
}

.table-container[b-10vb0sbe5r]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-Text-Secondary, #a0a0a0);
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Rates/RateLookup.razor.rz.scp.css */
/* =============================================================================
   Rate Lookup Component Styles - Phase 9: Pricing Intelligence
   BEC Assistant V3 - AI-Powered Virtual Construction Estimation Expert
   ============================================================================= */

/* Container */
.rate-lookup-container[b-1682h9cygm] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-Surface-Primary, #1e1e2e);
    border-radius: 12px;
    overflow: hidden;
}

/* Header Section */
.rate-lookup-header[b-1682h9cygm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-Surface-Secondary, #252536);
    border-bottom: 1px solid var(--BEC-Border-Primary, #3d3d5c);
}

.search-section[b-1682h9cygm] {
    display: flex;
    flex: 1;
    gap: 8px;
}

.search-input-wrapper[b-1682h9cygm] {
    display: flex;
    align-items: center;
    flex: 1;
    background: var(--BEC-Surface-Primary, #1e1e2e);
    border: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color 0.2s;
}

.search-input-wrapper:focus-within[b-1682h9cygm] {
    border-color: var(--BEC-Accent-Primary, #6366f1);
}

.search-icon[b-1682h9cygm] {
    font-size: 16px;
    margin-right: 8px;
    opacity: 0.6;
}

.search-input[b-1682h9cygm] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--BEC-Text-Primary, #e4e4e7);
    font-size: 14px;
    padding: 10px 0;
    outline: none;
}

.search-input[b-1682h9cygm]::placeholder {
    color: var(--BEC-Text-Tertiary, #71717a);
}

.clear-search[b-1682h9cygm] {
    background: transparent;
    border: none;
    color: var(--BEC-Text-Tertiary, #71717a);
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    transition: color 0.2s;
}

.clear-search:hover[b-1682h9cygm] {
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.search-button[b-1682h9cygm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--BEC-Accent-Primary, #6366f1);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.search-button:hover:not(:disabled)[b-1682h9cygm] {
    background: var(--BEC-Accent-Hover, #4f46e5);
}

.search-button:disabled[b-1682h9cygm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.filters-toggle[b-1682h9cygm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--BEC-Surface-Primary, #1e1e2e);
    color: var(--BEC-Text-Secondary, #a1a1aa);
    border: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.filters-toggle:hover[b-1682h9cygm] {
    border-color: var(--BEC-Accent-Primary, #6366f1);
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.filter-count[b-1682h9cygm] {
    background: var(--BEC-Accent-Primary, #6366f1);
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Filters Section */
.filters-section[b-1682h9cygm] {
    padding: 16px;
    background: var(--BEC-Surface-Tertiary, #2a2a3d);
    border-bottom: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    animation: slideDown-b-1682h9cygm 0.2s ease-out;
}

@keyframes slideDown-b-1682h9cygm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-grid[b-1682h9cygm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-group[b-1682h9cygm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label[b-1682h9cygm] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-Text-Secondary, #a1a1aa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group select[b-1682h9cygm],
.filter-group input[type="text"][b-1682h9cygm],
.filter-group input[type="number"][b-1682h9cygm] {
    padding: 8px 12px;
    background: var(--BEC-Surface-Primary, #1e1e2e);
    border: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    border-radius: 6px;
    color: var(--BEC-Text-Primary, #e4e4e7);
    font-size: 13px;
}

.filter-group select:focus[b-1682h9cygm],
.filter-group input:focus[b-1682h9cygm] {
    outline: none;
    border-color: var(--BEC-Accent-Primary, #6366f1);
}

.checkbox-group[b-1682h9cygm] {
    flex-direction: row;
    align-items: center;
}

.checkbox-group label[b-1682h9cygm] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-transform: none;
    font-size: 13px;
}

.filter-actions[b-1682h9cygm] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.clear-filters-btn[b-1682h9cygm] {
    padding: 8px 16px;
    background: transparent;
    color: var(--BEC-Text-Secondary, #a1a1aa);
    border: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-filters-btn:hover[b-1682h9cygm] {
    color: var(--BEC-Text-Primary, #e4e4e7);
    border-color: var(--BEC-Text-Secondary, #a1a1aa);
}

.apply-filters-btn[b-1682h9cygm] {
    padding: 8px 16px;
    background: var(--BEC-Accent-Primary, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.apply-filters-btn:hover[b-1682h9cygm] {
    background: var(--BEC-Accent-Hover, #4f46e5);
}

/* Results Section */
.results-section[b-1682h9cygm] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.results-header[b-1682h9cygm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.results-count[b-1682h9cygm] {
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #a1a1aa);
}

.view-toggle[b-1682h9cygm] {
    display: flex;
    gap: 4px;
}

.view-toggle button[b-1682h9cygm] {
    padding: 6px 10px;
    background: var(--BEC-Surface-Secondary, #252536);
    border: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    color: var(--BEC-Text-Secondary, #a1a1aa);
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle button:first-child[b-1682h9cygm] {
    border-radius: 6px 0 0 6px;
}

.view-toggle button:last-child[b-1682h9cygm] {
    border-radius: 0 6px 6px 0;
}

.view-toggle button.active[b-1682h9cygm] {
    background: var(--BEC-Accent-Primary, #6366f1);
    border-color: var(--BEC-Accent-Primary, #6366f1);
    color: white;
}

/* Grid View */
.results-grid[b-1682h9cygm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.rate-card[b-1682h9cygm] {
    background: var(--BEC-Surface-Secondary, #252536);
    border: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.rate-card:hover[b-1682h9cygm] {
    border-color: var(--BEC-Accent-Primary, #6366f1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.rate-card.selected[b-1682h9cygm] {
    border-color: var(--BEC-Accent-Primary, #6366f1);
    background: var(--BEC-Surface-Tertiary, #2a2a3d);
}

.rate-card-header[b-1682h9cygm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.rate-code[b-1682h9cygm] {
    font-weight: 600;
    color: var(--BEC-Accent-Primary, #6366f1);
    font-size: 13px;
}

.confidence-badge[b-1682h9cygm] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.confidence-high[b-1682h9cygm] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.confidence-medium[b-1682h9cygm] {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.confidence-low[b-1682h9cygm] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.confidence-unknown[b-1682h9cygm] {
    background: rgba(161, 161, 170, 0.2);
    color: #a1a1aa;
}

.rate-description[b-1682h9cygm] {
    font-size: 14px;
    color: var(--BEC-Text-Primary, #e4e4e7);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rate-details[b-1682h9cygm] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--BEC-Text-Tertiary, #71717a);
}

.rate-prices[b-1682h9cygm] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.price[b-1682h9cygm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price .label[b-1682h9cygm] {
    font-size: 11px;
    color: var(--BEC-Text-Tertiary, #71717a);
    text-transform: uppercase;
}

.price .value[b-1682h9cygm] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.price.selling .value[b-1682h9cygm] {
    color: var(--BEC-Success, #22c55e);
}

.rate-actions[b-1682h9cygm] {
    display: flex;
    justify-content: flex-end;
}

.apply-btn[b-1682h9cygm] {
    padding: 8px 16px;
    background: var(--BEC-Accent-Primary, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.apply-btn:hover[b-1682h9cygm] {
    background: var(--BEC-Accent-Hover, #4f46e5);
}

/* List View */
.results-list[b-1682h9cygm] {
    overflow-x: auto;
}

.results-list table[b-1682h9cygm] {
    width: 100%;
    border-collapse: collapse;
}

.results-list th[b-1682h9cygm] {
    text-align: left;
    padding: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #a1a1aa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--BEC-Surface-Secondary, #252536);
    border-bottom: 1px solid var(--BEC-Border-Primary, #3d3d5c);
}

.results-list td[b-1682h9cygm] {
    padding: 12px;
    font-size: 13px;
    color: var(--BEC-Text-Primary, #e4e4e7);
    border-bottom: 1px solid var(--BEC-Border-Primary, #3d3d5c);
}

.results-list tr[b-1682h9cygm] {
    cursor: pointer;
    transition: background 0.2s;
}

.results-list tbody tr:hover[b-1682h9cygm] {
    background: var(--BEC-Surface-Tertiary, #2a2a3d);
}

.results-list tr.selected[b-1682h9cygm] {
    background: var(--BEC-Surface-Tertiary, #2a2a3d);
}

.results-list .code[b-1682h9cygm] {
    font-weight: 600;
    color: var(--BEC-Accent-Primary, #6366f1);
}

.results-list .description[b-1682h9cygm] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.results-list .rate[b-1682h9cygm] {
    font-weight: 500;
}

.results-list .rate.selling[b-1682h9cygm] {
    color: var(--BEC-Success, #22c55e);
}

.apply-btn-small[b-1682h9cygm] {
    padding: 4px 12px;
    background: var(--BEC-Accent-Primary, #6366f1);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.apply-btn-small:hover[b-1682h9cygm] {
    background: var(--BEC-Accent-Hover, #4f46e5);
}

/* Pagination */
.pagination[b-1682h9cygm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-Border-Primary, #3d3d5c);
}

.pagination button[b-1682h9cygm] {
    padding: 8px 16px;
    background: var(--BEC-Surface-Secondary, #252536);
    color: var(--BEC-Text-Secondary, #a1a1aa);
    border: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination button:hover:not(:disabled)[b-1682h9cygm] {
    border-color: var(--BEC-Accent-Primary, #6366f1);
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.pagination button:disabled[b-1682h9cygm] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-1682h9cygm] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #a1a1aa);
}

/* States */
.loading-state[b-1682h9cygm],
.empty-state[b-1682h9cygm],
.initial-state[b-1682h9cygm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--BEC-Text-Secondary, #a1a1aa);
}

.loading-spinner[b-1682h9cygm] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-Border-Primary, #3d3d5c);
    border-top-color: var(--BEC-Accent-Primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-1682h9cygm 1s linear infinite;
    margin-bottom: 16px;
}

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

.spinner[b-1682h9cygm] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-1682h9cygm 1s linear infinite;
}

.empty-icon[b-1682h9cygm],
.search-icon-large[b-1682h9cygm] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-state h3[b-1682h9cygm],
.initial-state h3[b-1682h9cygm] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.empty-state p[b-1682h9cygm],
.initial-state p[b-1682h9cygm] {
    margin: 0;
    font-size: 14px;
}

/* Detail Panel */
.rate-detail-panel[b-1682h9cygm] {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: var(--BEC-Surface-Secondary, #252536);
    border-left: 1px solid var(--BEC-Border-Primary, #3d3d5c);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-1682h9cygm 0.3s ease-out;
}

@keyframes slideIn-b-1682h9cygm {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.panel-header[b-1682h9cygm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--BEC-Border-Primary, #3d3d5c);
}

.panel-header h3[b-1682h9cygm] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.close-panel[b-1682h9cygm] {
    background: transparent;
    border: none;
    color: var(--BEC-Text-Tertiary, #71717a);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.close-panel:hover[b-1682h9cygm] {
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.panel-content[b-1682h9cygm] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.detail-section[b-1682h9cygm] {
    margin-bottom: 24px;
}

.detail-section h4[b-1682h9cygm] {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #a1a1aa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-row[b-1682h9cygm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--BEC-Border-Primary, #3d3d5c);
}

.detail-row .label[b-1682h9cygm] {
    font-size: 13px;
    color: var(--BEC-Text-Tertiary, #71717a);
}

.detail-row .value[b-1682h9cygm] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #e4e4e7);
    font-weight: 500;
}

.rate-breakdown[b-1682h9cygm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item[b-1682h9cygm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--BEC-Surface-Primary, #1e1e2e);
    border-radius: 8px;
}

.breakdown-item.highlight[b-1682h9cygm] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.breakdown-item .label[b-1682h9cygm] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #a1a1aa);
}

.breakdown-item .value[b-1682h9cygm] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #e4e4e7);
}

.breakdown-item.highlight .value[b-1682h9cygm] {
    color: var(--BEC-Success, #22c55e);
}

.status-badge[b-1682h9cygm] {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.status-badge.active[b-1682h9cygm] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge.inactive[b-1682h9cygm] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-badge.current[b-1682h9cygm] {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.panel-actions[b-1682h9cygm] {
    padding: 20px;
    border-top: 1px solid var(--BEC-Border-Primary, #3d3d5c);
}

.apply-rate-btn[b-1682h9cygm] {
    width: 100%;
    padding: 14px;
    background: var(--BEC-Accent-Primary, #6366f1);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.apply-rate-btn:hover[b-1682h9cygm] {
    background: var(--BEC-Accent-Hover, #4f46e5);
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Rates/RateValidationCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   BEC Smart Agent - Level 1000 Upgrade
   Rate Validation Card Component Styles
   ═══════════════════════════════════════════════════════════════════════════════════════
   
   Component: RateValidationCard
   Purpose: Display historical rate recommendations with Smart Match confidence
   
   Uses BEC_Theme.css variables for consistent styling
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ======================= */
/* Card Container          */
/* ======================= */

.rate-validation-card[b-fv39g6bfh4] {
    background: var(--BEC-Surface, #1e1e1e);
    border: 1px solid var(--BEC-Border, #333);
    border-radius: var(--BEC-BorderRadius-lg, 12px);
    padding: var(--BEC-Spacing-md, 16px);
    margin-bottom: var(--BEC-Spacing-sm, 12px);
    transition: all 0.2s ease;
}

.rate-validation-card:hover[b-fv39g6bfh4] {
    border-color: var(--BEC-Primary, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.15);
}

.rate-validation-card.high-confidence[b-fv39g6bfh4] {
    border-left: 3px solid var(--BEC-Success, #107c10);
}

.rate-validation-card.low-confidence[b-fv39g6bfh4] {
    border-left: 3px solid var(--BEC-Warning, #ffaa44);
}

/* ======================= */
/* Header Section          */
/* ======================= */

.rate-card-header[b-fv39g6bfh4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

.rate-info[b-fv39g6bfh4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 70%;
}

.rate-description[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-TextPrimary, #ffffff);
    font-weight: 500;
    line-height: 1.4;
}

.rate-unit[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ======================= */
/* Confidence Badge        */
/* ======================= */

.confidence-badge[b-fv39g6bfh4] {
    padding: 4px 10px;
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    font-size: var(--BEC-FontSize-xs, 12px);
    font-weight: 600;
    white-space: nowrap;
}

.confidence-excellent[b-fv39g6bfh4] {
    background: rgba(16, 124, 16, 0.2);
    color: var(--BEC-Success, #107c10);
}

.confidence-good[b-fv39g6bfh4] {
    background: rgba(255, 185, 0, 0.2);
    color: #f0b400;
}

.confidence-moderate[b-fv39g6bfh4] {
    background: rgba(255, 170, 68, 0.2);
    color: var(--BEC-Warning, #ffaa44);
}

.confidence-low[b-fv39g6bfh4] {
    background: rgba(232, 17, 35, 0.2);
    color: var(--BEC-Error, #e81123);
}

/* ======================= */
/* Rate Display            */
/* ======================= */

.rate-display[b-fv39g6bfh4] {
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-md, 8px);
    padding: var(--BEC-Spacing-md, 16px);
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

.recommended-rate[b-fv39g6bfh4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rate-label[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rate-value[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-xl, 24px);
    font-weight: 700;
    color: var(--BEC-Primary, #0078d4);
    font-family: var(--BEC-FontFamily-mono, 'JetBrains Mono', monospace);
}

.escalation-info[b-fv39g6bfh4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--BEC-Border, #333);
}

.original-rate[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-sm, 14px);
    color: var(--BEC-TextSecondary, #888);
    text-decoration: line-through;
}

.escalation-arrow[b-fv39g6bfh4] {
    color: var(--BEC-TextTertiary, #666);
}

.escalation-factor[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-sm, 14px);
    font-weight: 500;
    color: var(--BEC-Warning, #ffaa44);
    padding: 2px 6px;
    background: rgba(255, 170, 68, 0.15);
    border-radius: 4px;
}

/* ======================= */
/* Source Information      */
/* ======================= */

.source-info[b-fv39g6bfh4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-Spacing-sm, 12px);
    margin-bottom: var(--BEC-Spacing-md, 16px);
    padding: var(--BEC-Spacing-sm, 12px);
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
}

.source-item[b-fv39g6bfh4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
}

.source-icon[b-fv39g6bfh4] {
    font-size: 14px;
}

.source-text[b-fv39g6bfh4] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verified-badge[b-fv39g6bfh4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(16, 124, 16, 0.2);
    color: var(--BEC-Success, #107c10);
    border-radius: 4px;
    font-size: var(--BEC-FontSize-xs, 12px);
    font-weight: 500;
}

.verified-icon[b-fv39g6bfh4] {
    font-weight: 700;
}

/* ======================= */
/* Reasoning Section       */
/* ======================= */

.reasoning-section[b-fv39g6bfh4] {
    margin-bottom: var(--BEC-Spacing-md, 16px);
}

.reasoning-toggle[b-fv39g6bfh4] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--BEC-TextSecondary, #888);
    font-size: var(--BEC-FontSize-xs, 12px);
    cursor: pointer;
    transition: color 0.2s ease;
}

.reasoning-toggle:hover[b-fv39g6bfh4] {
    color: var(--BEC-Primary, #0078d4);
}

.reasoning-content[b-fv39g6bfh4] {
    padding: var(--BEC-Spacing-sm, 12px);
    margin-top: 4px;
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
    line-height: 1.6;
    animation: fadeIn-b-fv39g6bfh4 0.2s ease;
}

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

/* ======================= */
/* Alternatives Section    */
/* ======================= */

.alternatives-section[b-fv39g6bfh4] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-sm, 12px);
    margin-bottom: var(--BEC-Spacing-md, 16px);
    padding: 8px 12px;
    background: var(--BEC-SurfaceAlt, #252525);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
}

.alternatives-label[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextTertiary, #666);
}

.alternatives-preview[b-fv39g6bfh4] {
    display: flex;
    gap: 8px;
}

.alt-rate[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-TextSecondary, #888);
    padding: 2px 6px;
    background: var(--BEC-Surface, #1e1e1e);
    border-radius: 4px;
    cursor: help;
}

/* ======================= */
/* Action Buttons          */
/* ======================= */

.rate-card-actions[b-fv39g6bfh4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: var(--BEC-Spacing-sm, 12px);
    border-top: 1px solid var(--BEC-Border, #333);
}

.action-hint[b-fv39g6bfh4] {
    font-size: var(--BEC-FontSize-xs, 12px);
    color: var(--BEC-Warning, #ffaa44);
    padding: 6px 10px;
    background: rgba(255, 170, 68, 0.1);
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    text-align: center;
}

.action-buttons[b-fv39g6bfh4] {
    display: flex;
    gap: 8px;
}

.action-buttons button[b-fv39g6bfh4] {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: var(--BEC-BorderRadius-sm, 6px);
    font-size: var(--BEC-FontSize-sm, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-buttons button:disabled[b-fv39g6bfh4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-apply[b-fv39g6bfh4] {
    background: var(--BEC-Primary, #0078d4);
    color: white;
}

.btn-apply:hover:not(:disabled)[b-fv39g6bfh4] {
    background: var(--BEC-PrimaryHover, #106ebe);
}

.btn-verify[b-fv39g6bfh4] {
    background: var(--BEC-SurfaceAlt, #252525);
    color: var(--BEC-TextPrimary, #ffffff);
    border: 1px solid var(--BEC-Border, #333);
}

.btn-verify:hover:not(:disabled)[b-fv39g6bfh4] {
    border-color: var(--BEC-Primary, #0078d4);
    color: var(--BEC-Primary, #0078d4);
}

.btn-reject[b-fv39g6bfh4] {
    background: transparent;
    color: var(--BEC-TextSecondary, #888);
    border: 1px solid var(--BEC-Border, #333);
}

.btn-reject:hover:not(:disabled)[b-fv39g6bfh4] {
    border-color: var(--BEC-Error, #e81123);
    color: var(--BEC-Error, #e81123);
}

/* ======================= */
/* Spinner                 */
/* ======================= */

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

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

/* ======================= */
/* Responsive              */
/* ======================= */

@media (max-width: 480px) {
    .rate-card-header[b-fv39g6bfh4] {
        flex-direction: column;
        gap: 8px;
    }
    
    .rate-info[b-fv39g6bfh4] {
        max-width: 100%;
    }
    
    .action-buttons[b-fv39g6bfh4] {
        flex-direction: column;
    }
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Timeline/AgentEventTimeline.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - Agent Event Timeline Styles
   "Pulse Thread Hybrid" Design
   ===================================================== */

/* -----------------------------------------------------
   Rail Header (Internal) - For Correlation/Reload
   ----------------------------------------------------- */
.rail-header-internal[b-s3pzr4v06s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
    min-height: 28px;
}

.correlation-info[b-s3pzr4v06s] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.8em;
    color: #9ca3af;
}

.correlation-info .label[b-s3pzr4v06s] {
    font-size: 0.75em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.8;
}

.correlation-info .value[b-s3pzr4v06s] {
    font-family: 'JetBrains Mono', monospace;
    color: #6b7280;
}

.icon-refresh[b-s3pzr4v06s] {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-refresh:hover:not(:disabled)[b-s3pzr4v06s] {
    background: rgba(0, 0, 0, 0.05);
    color: #4b5563;
}

.icon-refresh:disabled[b-s3pzr4v06s] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* -----------------------------------------------------
   Timeline Body & Container
   ----------------------------------------------------- */
.timeline-body[b-s3pzr4v06s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 2px 4px;
    /* Slight padding for card shadows */
}

/* Scrollbar styles (Webkit) */
.timeline-body[b-s3pzr4v06s]::-webkit-scrollbar {
    width: 4px;
}

.timeline-body[b-s3pzr4v06s]::-webkit-scrollbar-track {
    background: transparent;
}

.timeline-body[b-s3pzr4v06s]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 4px;
}

.timeline-body[b-s3pzr4v06s]::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

.pulse-thread-container[b-s3pzr4v06s] {
    padding: 10px 0;
    position: relative;
    min-height: 200px;
}

/* The vertical background line */
.thread-line-bg[b-s3pzr4v06s] {
    position: absolute;
    left: 19px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    z-index: 0;
}

/* -----------------------------------------------------
   Timeline Items
   ----------------------------------------------------- */
.timeline-item[b-s3pzr4v06s] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.marker-column[b-s3pzr4v06s] {
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
    flex-shrink: 0;
}

/* -----------------------------------------------------
   Markers (Dots)
   ----------------------------------------------------- */
.marker-dot[b-s3pzr4v06s] {
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid #2563eb;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px #f3f4f6;
    /* Should match rail bg */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.marker-dot.success[b-s3pzr4v06s] {
    border-color: #059669;
}

.marker-dot.warning[b-s3pzr4v06s] {
    border-color: #d97706;
}

.marker-dot.error[b-s3pzr4v06s] {
    border-color: #EF4444;
}

.marker-dot.neutral[b-s3pzr4v06s] {
    border-color: #9ca3af;
    background: #e5e7eb;
}

/* Pulse Animation */
.marker-dot.pulse[b-s3pzr4v06s] {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    animation: pulse-ring-b-s3pzr4v06s 2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

@keyframes pulse-ring-b-s3pzr4v06s {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* -----------------------------------------------------
   Event Cards
   ----------------------------------------------------- */
.timeline-card[b-s3pzr4v06s] {
    flex: 1;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 8px 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 0;
    /* Text truncation handling */
}

.timeline-card:hover[b-s3pzr4v06s] {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.timeline-card.active-load[b-s3pzr4v06s] {
    border-left: 2px solid #2563eb;
}

/* Header within card */
.tl-header[b-s3pzr4v06s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.tl-time[b-s3pzr4v06s] {
    font-size: 10px;
    color: #6b7280;
    font-family: 'JetBrains Mono', monospace;
}

/* Badges */
.tl-badge[b-s3pzr4v06s] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.tag-sys[b-s3pzr4v06s] {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

/* Blue */
.tag-tool[b-s3pzr4v06s] {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

/* Amber */
.tag-res[b-s3pzr4v06s] {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

/* Green */
.tag-err[b-s3pzr4v06s] {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

/* Red */

/* Content */
.tl-body[b-s3pzr4v06s] {
    font-size: 12px;
    color: #1f2937;
    line-height: 1.35;
    word-break: break-word;
}

.tl-meta[b-s3pzr4v06s] {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
    display: block;
    font-family: 'Inter', sans-serif;
}

/* -----------------------------------------------------
   States
   ----------------------------------------------------- */
.empty-state[b-s3pzr4v06s] {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85em;
    font-style: italic;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    margin-top: 10px;
}
/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Upload/BOQFileUpload.razor.rz.scp.css */
/* =====================================================
   BEC Assistant V3 - BOQ File Upload Component
   Phase 5: Drag-drop file upload styling
   References: BEC_Theme.css variables
   ===================================================== */

/* Container */
.boq-file-upload[b-ppx9jq2tyq] {
    background: var(--BEC-Surface-Primary, #1a1a2e);
    border: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
    border-radius: var(--BEC-Border-Radius-lg, 12px);
    overflow: hidden;
}

/* Drop Zone */
.drop-zone[b-ppx9jq2tyq] {
    position: relative;
    padding: var(--BEC-Spacing-xl, 32px);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px dashed var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.2));
    border-radius: var(--BEC-Border-Radius-md, 8px);
    margin: var(--BEC-Spacing-md, 16px);
    background: var(--BEC-Surface-Secondary, #252542);
}

.boq-file-upload.dragging .drop-zone[b-ppx9jq2tyq] {
    border-color: var(--BEC-Blue-500, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
}

.boq-file-upload.uploading .drop-zone[b-ppx9jq2tyq] {
    border-color: var(--BEC-Purple-500, #8b5cf6);
}

/* Drop Content */
.drop-content[b-ppx9jq2tyq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-Spacing-sm, 8px);
}

.drop-icon[b-ppx9jq2tyq] {
    font-size: 3rem;
    opacity: 0.7;
}

.drop-content h4[b-ppx9jq2tyq] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
}

.drop-content p[b-ppx9jq2tyq] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.file-types[b-ppx9jq2tyq] {
    font-size: 0.75rem;
    color: var(--BEC-Text-Tertiary, #666666);
    margin-top: var(--BEC-Spacing-sm, 8px);
}

.file-input[b-ppx9jq2tyq] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Upload Progress */
.upload-progress[b-ppx9jq2tyq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
}

.upload-spinner[b-ppx9jq2tyq] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-Surface-Tertiary, #303050);
    border-top-color: var(--BEC-Blue-500, #3b82f6);
    border-radius: 50%;
    animation: spin-b-ppx9jq2tyq 0.8s linear infinite;
}

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

.upload-text[b-ppx9jq2tyq] {
    font-size: 1rem;
    color: var(--BEC-Text-Primary, #ffffff);
}

.upload-progress .progress-bar-container[b-ppx9jq2tyq] {
    width: 100%;
    max-width: 300px;
    height: 8px;
    background: var(--BEC-Surface-Tertiary, #303050);
    border-radius: 4px;
    overflow: hidden;
}

.upload-progress .progress-bar[b-ppx9jq2tyq] {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--BEC-Blue-500, #3b82f6), 
        var(--BEC-Purple-500, #8b5cf6));
    transition: width 0.3s ease;
}

.progress-text[b-ppx9jq2tyq] {
    font-size: 0.85rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

/* Upload Success */
.upload-success[b-ppx9jq2tyq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-Spacing-md, 16px);
}

.success-icon[b-ppx9jq2tyq] {
    font-size: 2.5rem;
}

.file-info[b-ppx9jq2tyq] {
    text-align: center;
}

.file-name[b-ppx9jq2tyq] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
}

.file-meta[b-ppx9jq2tyq] {
    display: block;
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary, #a0a0a0);
    margin-top: 4px;
}

.file-actions[b-ppx9jq2tyq] {
    display: flex;
    gap: var(--BEC-Spacing-sm, 8px);
    margin-top: var(--BEC-Spacing-sm, 8px);
}

.btn-action[b-ppx9jq2tyq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-Border-Radius-md, 8px);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, 
        var(--BEC-Blue-500, #3b82f6), 
        var(--BEC-Purple-500, #8b5cf6));
    color: white;
}

.btn-action:hover:not(:disabled)[b-ppx9jq2tyq] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

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

.btn-action.secondary[b-ppx9jq2tyq] {
    background: var(--BEC-Surface-Tertiary, #303050);
    color: var(--BEC-Text-Secondary, #a0a0a0);
}

.btn-action.secondary:hover:not(:disabled)[b-ppx9jq2tyq] {
    background: var(--BEC-Surface-Secondary, #252542);
    box-shadow: none;
}

/* Column Mapping */
.column-mapping[b-ppx9jq2tyq] {
    padding: var(--BEC-Spacing-md, 16px);
    border-top: 1px solid var(--BEC-Border-Subtle, rgba(255, 255, 255, 0.1));
}

.column-mapping h4[b-ppx9jq2tyq] {
    margin: 0 0 var(--BEC-Spacing-md, 16px) 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #ffffff);
}

.mapping-grid[b-ppx9jq2tyq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-Spacing-sm, 8px);
}

.mapping-item[b-ppx9jq2tyq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--BEC-Surface-Secondary, #252542);
    border-radius: var(--BEC-Border-Radius-sm, 4px);
    font-size: 0.75rem;
}

.mapping-item.mapped[b-ppx9jq2tyq] {
    border-left: 3px solid var(--BEC-Green-500, #22c55e);
}

.mapping-item.unmapped[b-ppx9jq2tyq] {
    border-left: 3px solid var(--BEC-Yellow-500, #f59e0b);
    opacity: 0.7;
}

.column-letter[b-ppx9jq2tyq] {
    font-family: monospace;
    font-weight: 600;
    color: var(--BEC-Blue-400, #60a5fa);
    background: var(--BEC-Surface-Primary, #1a1a2e);
    padding: 2px 6px;
    border-radius: 3px;
}

.column-header[b-ppx9jq2tyq] {
    color: var(--BEC-Text-Primary, #ffffff);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.column-mapping-arrow[b-ppx9jq2tyq] {
    color: var(--BEC-Text-Tertiary, #666666);
}

.column-target[b-ppx9jq2tyq] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--BEC-Green-900, #14532d);
    color: var(--BEC-Green-400, #4ade80);
}

.column-target.unmapped[b-ppx9jq2tyq] {
    background: var(--BEC-Yellow-900, #422006);
    color: var(--BEC-Yellow-400, #facc15);
}

.column-target.indexcode[b-ppx9jq2tyq] { background: var(--BEC-Blue-900, #1e3a5f); color: var(--BEC-Blue-400, #60a5fa); }
.column-target.description[b-ppx9jq2tyq] { background: var(--BEC-Purple-900, #1e1b4b); color: var(--BEC-Purple-400, #a78bfa); }
.column-target.quantity[b-ppx9jq2tyq] { background: var(--BEC-Cyan-900, #164e63); color: var(--BEC-Cyan-400, #22d3ee); }
.column-target.materialrate[b-ppx9jq2tyq],
.column-target.consumablerate[b-ppx9jq2tyq],
.column-target.installationrate[b-ppx9jq2tyq],
.column-target.equipmentrate[b-ppx9jq2tyq],
.column-target.subcontractorrate[b-ppx9jq2tyq] {
    background: var(--BEC-Orange-900, #431407);
    color: var(--BEC-Orange-400, #fb923c);
}

.mapping-more[b-ppx9jq2tyq] {
    font-size: 0.75rem;
    color: var(--BEC-Text-Tertiary, #666666);
    padding: 6px 10px;
}

/* Error Display */
.upload-error[b-ppx9jq2tyq] {
    display: flex;
    align-items: center;
    gap: var(--BEC-Spacing-sm, 8px);
    padding: var(--BEC-Spacing-md, 16px);
    background: rgba(239, 68, 68, 0.1);
    border-top: 1px solid var(--BEC-Red-500, #ef4444);
}

.error-icon[b-ppx9jq2tyq] {
    font-size: 1rem;
}

.error-text[b-ppx9jq2tyq] {
    flex: 1;
    font-size: 0.85rem;
    color: var(--BEC-Red-400, #f87171);
}

.btn-dismiss[b-ppx9jq2tyq] {
    background: transparent;
    border: 1px solid var(--BEC-Red-500, #ef4444);
    color: var(--BEC-Red-400, #f87171);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-dismiss:hover[b-ppx9jq2tyq] {
    background: var(--BEC-Red-500, #ef4444);
    color: white;
}

/* /Components/Pages/MainLayout/BEC_Assistant_V3/Components/Upload/ProjectDocsDropdown.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   BEC Assistant V3 - Project Documents Dropdown
   Page: BEC_Assistant_V3 - RFP Registration Workflow
   References: BEC_Theme.css for design tokens
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Container & Positioning --- */
.project-docs-dropdown[b-9g8q57e1rz] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* --- Trigger Button --- */
.docs-trigger-btn[b-9g8q57e1rz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: var(--BEC-radius-md, 6px);
    color: var(--BEC-text-secondary, #8b949e);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.docs-trigger-btn:hover[b-9g8q57e1rz] {
    background: var(--BEC-surface-hover, rgba(255, 255, 255, 0.05));
    color: var(--BEC-text-primary, #e6edf3);
}

.docs-trigger-btn.has-docs[b-9g8q57e1rz] {
    color: var(--BEC-accent-primary, #58a6ff);
}

.docs-trigger-btn.has-docs:hover[b-9g8q57e1rz] {
    color: var(--BEC-accent-hover, #79c0ff);
}

/* Badge for document count */
.docs-badge[b-9g8q57e1rz] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--BEC-accent-primary, #58a6ff);
    color: var(--BEC-bg-primary, #0d1117);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
}

/* --- Dropdown Panel --- */
.docs-dropdown-panel[b-9g8q57e1rz] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-height: 400px;
    margin-top: 0.5rem;
    background: var(--BEC-surface-primary, #161b22);
    border: 1px solid var(--BEC-border-primary, #30363d);
    border-radius: var(--BEC-radius-lg, 8px);
    box-shadow: var(--BEC-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4));
    overflow: hidden;
    z-index: 1000;
    animation: dropdownFadeIn-b-9g8q57e1rz 0.15s ease;
}

@keyframes dropdownFadeIn-b-9g8q57e1rz {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Header --- */
.docs-dropdown-header[b-9g8q57e1rz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--BEC-surface-secondary, #21262d);
    border-bottom: 1px solid var(--BEC-border-primary, #30363d);
}

.header-icon[b-9g8q57e1rz] {
    font-size: 16px;
}

.header-title[b-9g8q57e1rz] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-text-primary, #e6edf3);
}

.project-code-badge[b-9g8q57e1rz] {
    padding: 2px 8px;
    background: var(--BEC-accent-primary, #58a6ff);
    color: var(--BEC-bg-primary, #0d1117);
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Document List --- */
.docs-list[b-9g8q57e1rz] {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.5rem;
}

.docs-list[b-9g8q57e1rz]::-webkit-scrollbar {
    width: 6px;
}

.docs-list[b-9g8q57e1rz]::-webkit-scrollbar-track {
    background: transparent;
}

.docs-list[b-9g8q57e1rz]::-webkit-scrollbar-thumb {
    background: var(--BEC-border-primary, #30363d);
    border-radius: 3px;
}

/* --- Document Item --- */
.doc-item[b-9g8q57e1rz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--BEC-radius-md, 6px);
    text-decoration: none;
    transition: background 0.15s ease;
    cursor: pointer;
}

.doc-item:hover[b-9g8q57e1rz] {
    background: var(--BEC-surface-hover, rgba(255, 255, 255, 0.05));
}

.doc-icon[b-9g8q57e1rz] {
    font-size: 18px;
    flex-shrink: 0;
}

.doc-info[b-9g8q57e1rz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-name[b-9g8q57e1rz] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-text-primary, #e6edf3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta[b-9g8q57e1rz] {
    font-size: 11px;
    color: var(--BEC-text-secondary, #8b949e);
}

.doc-action-icon[b-9g8q57e1rz] {
    flex-shrink: 0;
    color: var(--BEC-text-muted, #484f58);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.doc-item:hover .doc-action-icon[b-9g8q57e1rz] {
    opacity: 1;
    color: var(--BEC-text-secondary, #8b949e);
}

/* --- Empty State --- */
.empty-state[b-9g8q57e1rz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.empty-state svg[b-9g8q57e1rz] {
    color: var(--BEC-text-muted, #484f58);
    margin-bottom: 0.75rem;
}

.empty-title[b-9g8q57e1rz] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-text-secondary, #8b949e);
    margin-bottom: 0.25rem;
}

.empty-subtitle[b-9g8q57e1rz] {
    font-size: 11px;
    color: var(--BEC-text-muted, #484f58);
}

/* --- Loading State --- */
.loading-state[b-9g8q57e1rz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 0.75rem;
    color: var(--BEC-text-secondary, #8b949e);
    font-size: 12px;
}

.loading-spinner[b-9g8q57e1rz] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--BEC-border-primary, #30363d);
    border-top-color: var(--BEC-accent-primary, #58a6ff);
    border-radius: 50%;
    animation: spin-b-9g8q57e1rz 0.8s linear infinite;
}

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

/* --- Footer --- */
.docs-dropdown-footer[b-9g8q57e1rz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--BEC-border-primary, #30363d);
    background: var(--BEC-surface-secondary, #21262d);
}

.refresh-btn[b-9g8q57e1rz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid var(--BEC-border-primary, #30363d);
    border-radius: var(--BEC-radius-sm, 4px);
    color: var(--BEC-text-secondary, #8b949e);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.refresh-btn:hover:not(:disabled)[b-9g8q57e1rz] {
    background: var(--BEC-surface-hover, rgba(255, 255, 255, 0.05));
    color: var(--BEC-text-primary, #e6edf3);
    border-color: var(--BEC-border-secondary, #484f58);
}

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

.refresh-btn svg.spinning[b-9g8q57e1rz] {
    animation: spin-b-9g8q57e1rz 1s linear infinite;
}

/* --- Backdrop for closing dropdown --- */
.docs-backdrop[b-9g8q57e1rz] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .docs-dropdown-panel[b-9g8q57e1rz] {
        width: calc(100vw - 2rem);
        right: -1rem;
    }
}

/* /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 Floating) - MATCHING REQUEST DETAIL
   ======================================== */
[b-22pogpxcos] .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-22pogpxcos] .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-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;
    /* Fixed: hover color */
}

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

[b-22pogpxcos] .e-toolbar .e-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: 20px !important;
    margin: 0 8px !important;
}

/* Search Input */
[b-22pogpxcos] .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;
}

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

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

display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;[b-22pogpxcos]
}

.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;
    min-height: 100vh;
    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
   ======================================== */
.erp-page-content.content-split-layout[b-4p8xqcgl44] {
    display: flex;
    flex: 1;
    overflow: hidden;
    /* Stop page scroll, use pane scroll */
    margin-top: 10px;
    height: calc(100vh - 120px);
    /* Fill remaining height */
}

/* LEFT SIDE: CONTEXT PANEL */
.context-panel[b-4p8xqcgl44] {
    width: 320px;
    min-width: 320px;
    background: white;
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    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: 700;
    margin-bottom: 8px;
}

.context-val-big[b-4p8xqcgl44] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.2;
}

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

/* RIGHT SIDE: QUOTE FEED */
.quote-feed[b-4p8xqcgl44] {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
    background: var(--BEC-colorNeutralBackground2);
}

.feed-header[b-4p8xqcgl44] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.feed-header h3[b-4p8xqcgl44] {
    margin: 0;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 600;
}

.feed-count[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 600;
    background: white;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* LARGE QUOTE CARD (Option 3 Design) */
.quote-card-large[b-4p8xqcgl44] {
    background: white;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 20px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    transition: all 0.2s ease;
    overflow: hidden;
}

.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 Info Column */
.quote-info-col[b-4p8xqcgl44] {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.vendor-title[b-4p8xqcgl44] {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.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: 700;
    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: 180px;
    min-width: 180px;
    border-left: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background: #faf9f8;
}

.price-display[b-4p8xqcgl44] {
    margin-bottom: 12px;
    text-align: right;
}

.price-val[b-4p8xqcgl44] {
    font-size: 22px;
    font-weight: 800;
    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 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: 26px;
}

.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(100px, 1fr));
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 8px;
}

.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: 13px;
    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: 20px;
    font-weight: 700;
    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: 12px;
    padding-top: 12px;
    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: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    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: 10px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.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: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}

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

.booking-doc-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px 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: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.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: 14px;
    margin-bottom: 2px;
}

.booking-doc-name[b-4p8xqcgl44] {
    color: #64748b;
    font-size: 12px;
    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: 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 8px;
    border: 1px solid #93c5fd;
}

.booking-notes-from-vendor strong[b-4p8xqcgl44] {
    display: block;
    font-size: 12px;
    color: #1e40af;
    margin-bottom: 6px;
}

.booking-notes-from-vendor p[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

/* ========================================
   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;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

[b-quzbmv4vnr] .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 var(--BEC-durationNormal) ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn: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 in Toolbar */
[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
}

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

[b-quzbmv4vnr] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !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: 2000;
    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);
}

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

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

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

.req-icon[b-nv45pxmb3v] {
    font-size: var(--BEC-fontSizeBase300);
    margin-right: var(--BEC-spacingHorizontalS);
    color: var(--BEC-neutralTertiary);
}

.req-icon.active[b-nv45pxmb3v] {
    color: var(--BEC-themePrimary);
}

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

.wizard-container[b-aui3v7vria] {
    background-color: var(--BEC-colorNeutralBackground2);
    height: calc(100vh - 50px);
    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 HEADER (Context) */
.wizard-header[b-aui3v7vria] {
    height: 50px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Spreads Title and User Info */
    padding: 0 24px;
    flex-shrink: 0;
}

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

.header-breadcrumbs[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-right: 16px;
}

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

/* User Info Styling */
.header-user-info[b-aui3v7vria] {
    display: flex;
    gap: 12px;
}

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

/* 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) */
.workspace[b-aui3v7vria] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* === LEFT PANEL: Itinerary & Global Actions === */
.left-panel[b-aui3v7vria] {
    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: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Match editor-header height for alignment */
    min-height: 56px;
}

.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 */
.left-panel-footer[b-aui3v7vria] {
    padding: 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}


/* === RIGHT PANEL: Editor Canvas === */
.right-panel[b-aui3v7vria] {
    flex: 1;
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    flex-direction: column;
}

.editor-header[b-aui3v7vria] {
    padding: 16px 32px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    /* Match left-panel-header height for alignment */
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

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

.editor-content[b-aui3v7vria] {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Form Layout */
.form-grid-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.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;
    gap: 12px;
    background: var(--BEC-colorNeutralBackground1);
}

/* 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 h1[b-nva36r8d3x] {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-title .badge[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-weight: 600;
}

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

/* --- 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.closed[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.closed {
    background-color: #f1f5f9;
    /* Soft Gray */
    color: #64748b;
}

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

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

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

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

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

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

/* ============================================================================
   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] {
    padding: 12px 24px 10px 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: 10px 16px 6px 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; /* ~10 rows at 20px line-height + padding */
    padding: 4px 0;
    border: none;
    border-radius: 0;
    font-family: var(--BEC-fontFamily);
    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: 6px;
    padding: 6px 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: 3px 6px;
    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;
}

/* Tiny animated progress dot */
.chip-progress[b-rfrlq6kjvz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground, #0078d4);
    animation: chipPulse-b-rfrlq6kjvz 0.8s ease-in-out infinite alternate;
}

@keyframes chipPulse-b-rfrlq6kjvz {
    from { opacity: 0.3; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1.2); }
}

.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: 6px;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    margin-top: 6px;
    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: 6px;
    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: #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: #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: #424242;
    color: #fff;
}

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

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

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

.input-disclaimer[b-rfrlq6kjvz] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    text-align: right;
}
/* /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;
}

/* Hidden scrollbar — functional scroll without visible track */
.message-list[b-hkd9htrwo9]::-webkit-scrollbar {
    width: 0;
    display: none;
}

.message-list[b-hkd9htrwo9] {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
}

/* ===== 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;
    border-radius: 50%;
    background: linear-gradient(135deg, #0078d4, #50a5e6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-avatar i[b-hkd9htrwo9] {
    font-size: 24px;
    color: #fff;
}
/* /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: var(--BEC-colorNeutralBackground3, #edebe9);
}

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

.ai-avatar[b-2526gbn6cr] {
    background: linear-gradient(135deg, #0078d4, #005a9e);
}

.ai-avatar i[b-2526gbn6cr] {
    font-size: 12px;
    color: #fff;
}

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

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

/* ===== Body: content with left padding aligned under name ===== */
.msg-body[b-2526gbn6cr] {
    padding-left: 36px; /* avatar width (28px) + gap (8px) */
}


/* =============================================================================
   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: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #242424;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* 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 12px 0;
    line-height: 1.6;
    color: #242424;
}

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

/* ===== #2 Headings (h1–h6) ===== */
[b-2526gbn6cr] .msg-content h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #242424;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #0F6CBD;
    letter-spacing: -0.3px;
}

[b-2526gbn6cr] .msg-content h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #242424;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #E0E0E0;
}

[b-2526gbn6cr] .msg-content h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #242424;
    margin: 20px 0 8px 0;
}

[b-2526gbn6cr] .msg-content h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #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: #616161;
    margin: 16px 0 6px 0;
}

[b-2526gbn6cr] .msg-content h6 {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 12px 0 6px 0;
}

/* ===== #3 Bold ===== */
[b-2526gbn6cr] .msg-content strong {
    font-weight: 600;
    color: #242424;
}

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

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

/* ===== #5 Ordered Lists ===== */
[b-2526gbn6cr] .msg-content ol {
    margin: 8px 0 12px 0;
    padding-left: 24px;
    list-style-type: decimal;
}

[b-2526gbn6cr] .msg-content ol li {
    margin-bottom: 4px;
    padding-left: 4px;
    line-height: 1.6;
}

[b-2526gbn6cr] .msg-content ol li::marker {
    color: #0F6CBD;
    font-weight: 600;
    font-size: 13px;
}

/* ===== #6 Unordered Lists ===== */
[b-2526gbn6cr] .msg-content ul {
    margin: 8px 0 12px 0;
    padding-left: 20px;
    list-style-type: disc;
}

[b-2526gbn6cr] .msg-content ul li {
    margin-bottom: 4px;
    padding-left: 4px;
    line-height: 1.6;
}

[b-2526gbn6cr] .msg-content ul li::marker {
    color: #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 #E0E0E0;
    border-radius: 6px;
    overflow: hidden;
}

[b-2526gbn6cr] .msg-content thead {
    background: #F5F5F5;
}

[b-2526gbn6cr] .msg-content thead th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #616161;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #D1D1D1;
    white-space: nowrap;
}

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

[b-2526gbn6cr] .msg-content tbody tr:hover {
    background: #EBF3FC;
    transition: background 0.12s ease;
}

/* Wide table scroll wrapper */
[b-2526gbn6cr] .msg-content div:has(> table) {
    overflow-x: auto;
    margin: 12px 0;
    -webkit-overflow-scrolling: touch;
}

[b-2526gbn6cr] .msg-content div:has(> table) table {
    margin: 0;
}

/* ===== #9 Code Blocks (multi-line) ===== */
[b-2526gbn6cr] .msg-content pre {
    background: #1B1B1F;
    color: #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 #2D2D30;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
    tab-size: 4;
    -moz-tab-size: 4;
    -webkit-overflow-scrolling: touch;
}

[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: #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: '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: #F0F0F0;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12.5px;
    padding: 2px 6px;
    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;
    background: #EBF3FC;
    border-left: 3px solid #0F6CBD;
    border-radius: 0 4px 4px 0;
    color: #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);
}

[b-2526gbn6cr] .msg-content blockquote blockquote blockquote {
    background: rgba(15, 108, 189, 0.03);
    border-left-color: rgba(15, 108, 189, 0.25);
}

/* ===== #12 Links ===== */
[b-2526gbn6cr] .msg-content a {
    color: #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: #115EA3;
    border-bottom-color: #115EA3;
}

[b-2526gbn6cr] .msg-content a:active {
    color: #0C5A9E;
}

/* ===== #13 Horizontal Rules ===== */
[b-2526gbn6cr] .msg-content hr {
    border: none;
    height: 1px;
    background: #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 #D1D1D1;
    border-radius: 4px;
    margin-top: 2px;
    cursor: default;
    position: relative;
    background: #FFFFFF;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

[b-2526gbn6cr] .msg-content li > input[type="checkbox"]:checked {
    background: #0F6CBD;
    border-color: #0F6CBD;
}

[b-2526gbn6cr] .msg-content li > input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ===== #15 Strikethrough ===== */
[b-2526gbn6cr] .msg-content del,
[b-2526gbn6cr] .msg-content s {
    text-decoration: line-through;
    color: #9E9E9E;
    text-decoration-color: #9E9E9E;
}

/* ===== #16 Highlighted Text (==highlight==) ===== */
[b-2526gbn6cr] .msg-content mark {
    background: #FFF3CD;
    color: #242424;
    padding: 1px 5px;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ===== #17 Definition Lists ===== */
[b-2526gbn6cr] .msg-content dl {
    margin: 12px 0;
}

[b-2526gbn6cr] .msg-content dt {
    font-weight: 600;
    color: #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;
    padding-left: 12px;
    border-left: 2px solid #E0E0E0;
    color: #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: #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 #E0E0E0;
    font-size: 12.5px;
    color: #616161;
}

[b-2526gbn6cr] .msg-content .footnotes ol {
    padding-left: 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: #0F6CBD;
    margin-left: 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 #E0E0E0;
    display: block;
}

[b-2526gbn6cr] .msg-content img + em,
[b-2526gbn6cr] .msg-content figure figcaption {
    display: block;
    font-size: 12px;
    color: #9E9E9E;
    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: #616161;
}

[b-2526gbn6cr] .msg-content sup {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    color: #616161;
}

/* ===== #23 Abbreviations (<abbr>) ===== */
[b-2526gbn6cr] .msg-content abbr,
[b-2526gbn6cr] .msg-content abbr[title] {
    text-decoration: underline dotted;
    text-decoration-color: #9E9E9E;
    text-underline-offset: 3px;
    cursor: help;
    font-variant: none;
}

[b-2526gbn6cr] .msg-content abbr[title]:hover {
    text-decoration-color: #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: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 3px 7px;
    color: #242424;
    background: #FAFAFA;
    border: 1px solid #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 #E0E0E0;
    border-radius: 6px;
    background: #FAFAFA;
    overflow: hidden;
}

[b-2526gbn6cr] .msg-content details summary {
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    color: #242424;
    cursor: pointer;
    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 #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: #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: #242424;
}


/* =============================================================================
   ATTACHMENT & UI COMPONENTS (non-markdown)
   ============================================================================= */

/* ===== Attachment Container (user messages) ===== */
.msg-attachments[b-2526gbn6cr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* 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) — visible on hover ===== */
.message-actions[b-2526gbn6cr] {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.msg:hover .message-actions[b-2526gbn6cr] {
    opacity: 1;
}

.msg-action-btn[b-2526gbn6cr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 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; }
}

/* ===== Typing Indicator (waiting for first chunk) ===== */
.msg-typing[b-2526gbn6cr] {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-dot[b-2526gbn6cr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralForeground3, #a19f9d);
    animation: bounce-dot-b-2526gbn6cr 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2)[b-2526gbn6cr] {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3)[b-2526gbn6cr] {
    animation-delay: 0.4s;
}

@keyframes bounce-dot-b-2526gbn6cr {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}
/* /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 14px;
    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: 10px 12px 6px 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 10px 0 30px;
    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: #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-colorNeutralForeground3); /* #a19f9d */
    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-colorNeutralForeground3, #a19f9d);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 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: #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: 7px 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;
}

/* ===== 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: 6px;
    color: var(--BEC-colorNeutralForeground1);
}

.rename-input[b-vnbhgyk9cz] {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    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: #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: #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 + Text
   ==============================================================================
   The chip is tiny (~18-22px tall, ~120px wide). Subtle, not competing.
   Thinking text: 12px italic muted, 50% width, no border, max 4 lines auto-scroll.
   Auto-collapses when streaming ends (before reply appears).
   ============================================================================== */

.thinking-wrapper[b-v2fwtt0yjk] {
    margin: 4px 0 6px 0;
}

/* ===== Tiny Chip ===== */
.thinking-chip[b-v2fwtt0yjk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    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: 9px;
    color: var(--BEC-colorNeutralForeground3); /* #a19f9d */
}

.thinking-active .thinking-icon[b-v2fwtt0yjk] {
    color: var(--BEC-colorBrandForeground1); /* #0078d4 */
    animation: pulse-think-b-v2fwtt0yjk 1.5s ease-in-out infinite;
}

@keyframes pulse-think-b-v2fwtt0yjk {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.thinking-label[b-v2fwtt0yjk] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3); /* #a19f9d */
}

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

/* ===== Expanded Thinking Text ===== */
.thinking-text[b-v2fwtt0yjk] {
    margin-top: 4px;
    max-width: 50%;
    font-size: 12px;
    font-style: italic;
    color: var(--BEC-colorNeutralForeground3); /* #a19f9d */
    line-height: 1.3;
    max-height: 64px; /* ~4 lines at 12px * 1.3 line-height */
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Thin scrollbar for thinking text */
.thinking-text[b-v2fwtt0yjk]::-webkit-scrollbar {
    width: 3px;
}

.thinking-text[b-v2fwtt0yjk]::-webkit-scrollbar-track {
    background: transparent;
}

.thinking-text[b-v2fwtt0yjk]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralBorder1); /* #e1dfdd */
    border-radius: 2px;
}
/* /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-fontFamily);
    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;
}

/* ===== CONTENT AREA ===== */
.agent-content[b-kh7xrag7y5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex child from overflowing */
    overflow: hidden;
}

/* ===== ERROR BANNER (floating toast above input) ===== */
.agent-error-banner[b-kh7xrag7y5] {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff0f1;
    color: #b91c1c;
    border: 1px solid #fecdd3;
    padding: 10px 16px 10px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.4;
    box-shadow: 0 2px 12px rgba(185, 28, 28, 0.08);
    z-index: 100;
    max-width: 520px;
    animation: errorSlideIn-b-kh7xrag7y5 0.25s ease-out;
}

.agent-error-banner i.fa-triangle-exclamation[b-kh7xrag7y5] {
    font-size: 15px;
    color: #dc2626;
    flex-shrink: 0;
}

.error-dismiss[b-kh7xrag7y5] {
    background: none;
    border: none;
    color: #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-kh7xrag7y5] {
    opacity: 1;
    background: rgba(185, 28, 28, 0.08);
}

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

.hero-banner-inner[b-9qrq7oltca] {
    max-height: 400px;
}

.hero-banner-img[b-9qrq7oltca] {
    max-width: 100%;
    object-fit: cover;
}

/* 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] { 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 --- */
.fixed.inset-0.z-\[88\][b-9qrq7oltca], /* news details wizard */
.fixed.inset-0.z-\[87\][b-9qrq7oltca], /* event details wizard */
.fixed.inset-0.z-\[89\][b-9qrq7oltca], /* events list wizard */
.fixed.inset-0.z-\[90\][b-9qrq7oltca], /* videos sidebar */
.fixed.inset-0.z-\[85\][b-9qrq7oltca], /* images sidebar */
.fixed.inset-0.z-\[100\][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;
}

.fixed.inset-0.z-\[88\] > div[b-9qrq7oltca],
.fixed.inset-0.z-\[87\] > div[b-9qrq7oltca],
.fixed.inset-0.z-\[89\] > div[b-9qrq7oltca],
.fixed.inset-0.z-\[90\] > div[b-9qrq7oltca],
.fixed.inset-0.z-\[85\] > div[b-9qrq7oltca] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.fixed.inset-0.z-\[88\] > .wizard-panel[b-9qrq7oltca],
.fixed.inset-0.z-\[87\] > .wizard-panel[b-9qrq7oltca],
.fixed.inset-0.z-\[89\] > .wizard-panel[b-9qrq7oltca],
.fixed.inset-0.z-\[90\] > .wizard-panel[b-9qrq7oltca],
.fixed.inset-0.z-\[85\] > .wizard-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;
}

.absolute.inset-0.bg-black\/20.backdrop-blur-sm[b-9qrq7oltca],
.absolute.inset-0.bg-black\/20[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 */
.fixed.inset-0.z-\[88\] .aspect-video[b-9qrq7oltca],
.fixed.inset-0.z-\[87\] .aspect-video[b-9qrq7oltca] {
    aspect-ratio: 16 / 5.8 !important;
    max-height: 220px;
}

.fixed.inset-0.z-\[88\] .aspect-video + *[b-9qrq7oltca],
.fixed.inset-0.z-\[87\] .aspect-video + *[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 */

/* /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/KnowledgeBase.razor.rz.scp.css */
/* Knowledge Base - V1 Standard Docs Design */
:root[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
   ======================================== */

:root[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;
    }
}
/* /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/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;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   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 30px 20px;
    position: relative;
}

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

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

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

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

/* ========================================
   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 #e0e0e0;
    background: white;
    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: #242424;
}

.sidebar-title i[b-d7wu06z1m2] {
    color: #0078d4;
    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: #f3f3f3;
}

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

.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: #242424;
    margin: 0 0 8px 0;
}

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

.step-description[b-d7wu06z1m2] {
    font-size: 14px;
    color: #605e5c;
    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: #d13438;
    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: #d13438;
    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: 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-d7wu06z1m2] {
    font-size: 18px;
    color: #7b1fa2;
    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: #1565c0;
    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: #ffffff;
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-d7wu06z1m2] {
    background: #0b5c0b;
    border-color: #0b5c0b;
    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: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-d7wu06z1m2] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-d7wu06z1m2] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-d7wu06z1m2] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-d7wu06z1m2] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-d7wu06z1m2] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-d7wu06z1m2] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-d7wu06z1m2] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-d7wu06z1m2] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-d7wu06z1m2] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-d7wu06z1m2] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-d7wu06z1m2] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

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

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

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

.warning-text-red[b-d7wu06z1m2] {
    color: #d13438;
    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
   ======================================== */

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

/* ========================================
   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 0 24px !important;
    flex-shrink: 0 !important;
}

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

/* Right-aligned items */
[b-jv58okxham] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[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;
}

/* Button Icons - MICROSOFT STYLE */
[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;
}

/* Button Text - MICROSOFT STYLE */
[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;
}

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

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

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

/* ========================================
   COMPACT STATS (Above Progress Bar)
   STICKY: Directly below toolbar - NO gap
   Aligned to the RIGHT side
   ======================================== */
.compact-stats[b-jv58okxham] {
    position: sticky;
    top: 70px;
    z-index: 80;
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    padding: 4px 20px;
    font-size: 12px;
    flex-shrink: 0;
}

.compact-stat[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.compact-stat-score[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
    font-size: 13px;
}

.stat-separator[b-jv58okxham] {
    color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PROGRESS BAR
   STICKY: Directly below compact stats
   ======================================== */
.progress-container[b-jv58okxham] {
    position: sticky;
    top: 78px;
    z-index: 79;
    background: var(--BEC-colorNeutralBackground1);
    padding: 0 20px 12px 20px;
    margin: 0;
    flex-shrink: 0;
}

.progress-bar[b-jv58okxham] {
    width: 100%;
    height: 6px;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
}

.progress-fill[b-jv58okxham] {
    height: 100%;
    background: var(--BEC-colorBrandBackground);
    transition: width 0.3s ease;
    border-radius: var(--BEC-borderRadiusSmall);
}

/* ========================================
   CATEGORY TILE
   ======================================== */
.category-tile[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-tile:not(:first-child)[b-jv58okxham] {
    margin-top: 24px;
}

.category-name[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 13px;
}

.category-meta[b-jv58okxham] {
    font-size: 11px;
    opacity: 0.9;
}

/* ========================================
   QUESTIONS LIST (Single-Line Rows)
   SCROLLABLE: This area scrolls while header/toolbar/progress stay fixed
   ======================================== */
.questions-list[b-jv58okxham] {
    margin-top: 8px;
    margin-bottom: 24px;
}

.question-row[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 4px;
    background: var(--BEC-colorNeutralBackground1);
    transition: all 0.2s ease;
}

.question-row:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground2);
}

.question-row.answered[b-jv58okxham] {
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground1);
}

.question-row.unanswered[b-jv58okxham] {
    border-left: 3px solid var(--BEC-colorNeutralStroke2);
}

/* Question Number */
.q-number[b-jv58okxham] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    min-width: 35px;
    flex-shrink: 0;
}

/* Question Text */
.q-text[b-jv58okxham] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1.4;
}

/* Question Meta (Score Range, Weight) */
.q-meta[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Question Input */
.q-input[b-jv58okxham] {
    flex-shrink: 0;
}

[b-jv58okxham] .q-input .score-input-compact .e-input-group {
    height: 32px !important;
    min-width: 120px !important;
}

[b-jv58okxham] .q-input .score-input-compact .e-input-group input.e-input {
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    padding: 6px 12px !important;
    text-align: center !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jv58okxham] .q-input .score-input-compact .e-input-group .e-spin-up,
[b-jv58okxham] .q-input .score-input-compact .e-input-group .e-spin-down {
    width: 24px !important;
}

[b-jv58okxham] .q-input .score-input-compact .e-input-group .e-spin-up .e-spin-icon,
[b-jv58okxham] .q-input .score-input-compact .e-input-group .e-spin-down .e-spin-icon {
    font-size: 10px !important;
}

/* Question Actions (Comment Button) */
.q-actions[b-jv58okxham] {
    flex-shrink: 0;
}

.comment-icon-btn[b-jv58okxham] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.comment-icon-btn:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandBackground);
}

.comment-icon-btn i.fa-comment-dots[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    margin-top: 40px;
}

.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);
    margin-top: 40px;
}

.error-container i[b-jv58okxham] {
    font-size: 48px;
}

.error-container p[b-jv58okxham] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   NO QUESTIONS
   ======================================== */
.no-questions[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
    margin-top: 40px;
}

.no-questions i[b-jv58okxham] {
    font-size: 48px;
    opacity: 0.5;
}

.no-questions p[b-jv58okxham] {
    margin: 0;
}

/* ========================================
   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-warning[b-jv58okxham] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-danger[b-jv58okxham] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

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

/* Comments Dialog */
.comments-dialog-content[b-jv58okxham] {
    padding: 8px 0;
}

.comments-dialog-content p[b-jv58okxham] {
    margin-bottom: 16px;
    font-size: 13px;
}

.char-count[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: right;
    margin-top: 4px;
}

/* Submit Dialog Content */
.submit-dialog-content[b-jv58okxham] {
    padding: 8px 0;
}

.submit-summary[b-jv58okxham] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

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

.summary-item label[b-jv58okxham] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
}

.summary-item span[b-jv58okxham] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.warning-message[b-jv58okxham] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 3px solid var(--BEC-colorPaletteDarkOrangeForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    margin: 16px 0;
    font-size: 13px;
    color: var(--BEC-colorPaletteDarkOrangeForeground1);
}

.warning-message i[b-jv58okxham] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

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

.form-label[b-jv58okxham] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

/* ========================================
   SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-jv58okxham] {
    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-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

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

.sidebar-close-btn[b-jv58okxham] {
    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-jv58okxham] {
    background: #f3f3f3;
}

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

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

.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%;
    text-align: center;
    padding: 20px;
}

.step-icon[b-jv58okxham] {
    margin-bottom: 24px;
}

.step-title[b-jv58okxham] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

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

.form-section[b-jv58okxham] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-jv58okxham] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-jv58okxham] {
    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-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.sidebar-footer[b-jv58okxham] {
    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-jv58okxham] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Buttons */
.btn[b-jv58okxham] {
    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-jv58okxham] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-jv58okxham] {
    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-jv58okxham] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: #ffffff;
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-jv58okxham] {
    background: #0b5c0b;
    border-color: #0b5c0b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn i[b-jv58okxham] {
    font-size: 14px;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   ======================================== */

[b-jv58okxham] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-jv58okxham] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-jv58okxham] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-jv58okxham] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

/* ========================================
   PAGER (Matches All Evaluations Grid Pager)
   ======================================== */
.pager-container[b-jv58okxham] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-top: 16px;
    gap: 16px;
}

.pager-left[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pager-right[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pager Buttons */
.pager-btn[b-jv58okxham] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground2);
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 11px;
}

.pager-btn:hover:not(:disabled)[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandForeground1);
}

.pager-btn:disabled[b-jv58okxham] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Page Numbers */
.pager-numbers[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 8px;
}

.pager-number[b-jv58okxham] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--BEC-colorNeutralForeground2);
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
}

.pager-number:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke1);
}

.pager-number.active[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightBold);
}

/* Pager Info */
.pager-info[b-jv58okxham] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
}

/* Page Size Selector */
.pager-pagesize[b-jv58okxham] {
    height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pager-pagesize:hover[b-jv58okxham] {
    border-color: var(--BEC-colorBrandBackground);
}

.pager-pagesize:focus[b-jv58okxham] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
}

.pager-label[b-jv58okxham] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
}

/* ========================================
   STRENGTHS & WEAKNESSES SECTION
   100% Identical styling for both
   ======================================== */

/* Section Title */
.sw-section-title[b-jv58okxham] {
    margin: 24px 20px 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sw-section-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandBackground);
    font-size: 18px;
}

.sw-subtitle[b-jv58okxham] {
    margin-left: auto;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground3);
}

.sw-subtitle-below[b-jv58okxham] {
    margin: 0 20px 12px 20px;
}

/* Grid - Two Columns Side by Side */
[b-jv58okxham] .sw-grid-flat {
    margin: 0 20px 24px 20px;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

/* Column Container */
[b-jv58okxham] .sw-column-flat {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Header for Strengths and Weaknesses */
[b-jv58okxham] .sw-header-flat {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    color: white !important;
    border-radius: var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0 0 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 13px !important;
    min-height: 38px !important;
}

/* Blue header for Strengths */
[b-jv58okxham] .sw-header-flat.strengths {
    background: var(--BEC-colorBrandBackground) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Red header for Weaknesses - FORCE DISPLAY */
[b-jv58okxham] .sw-header-flat.weaknesses {
    background: #d13438 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    min-height: 38px !important;
    width: 100% !important;
}

[b-jv58okxham] .sw-header-flat i {
    font-size: 14px !important;
}

[b-jv58okxham] .sw-header-flat span {
    display: inline-block !important;
}

/* Count Badge (0 / 3) */
.sw-count-flat[b-jv58okxham] {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
}

/* Items List - 2 Columns - All Items Visible */
.sw-items-list[b-jv58okxham] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-top: none;
    border-radius: 0 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall);
    overflow: visible;
}

/* Individual Checkbox Item */
.sw-checkbox-item[b-jv58okxham] {
    padding: 3px 8px;
    border-right: 1px solid var(--BEC-colorNeutralStroke2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    transition: background-color 0.2s ease;
    min-height: 32px;
    display: flex;
    align-items: center;
}

/* Remove right border for 2nd column items */
.sw-checkbox-item:nth-child(2n)[b-jv58okxham] {
    border-right: none;
}

/* Remove bottom border for last row */
.sw-checkbox-item:nth-last-child(-n+2)[b-jv58okxham] {
    border-bottom: none;
}

.sw-checkbox-item:hover:not(.disabled)[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.sw-checkbox-item.selected[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
}

.sw-checkbox-item.disabled[b-jv58okxham] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Syncfusion Checkbox Deep Styling */
[b-jv58okxham] .sw-checkbox {
    width: 100%;
}

[b-jv58okxham] .sw-checkbox .e-checkbox-wrapper {
    width: 100%;
}

[b-jv58okxham] .sw-checkbox .e-frame {
    border-color: var(--BEC-colorNeutralStroke2);
}

[b-jv58okxham] .sw-checkbox .e-checkbox:checked + .e-frame {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
}

[b-jv58okxham] .sw-checkbox .e-label {
    width: 100%;
    padding-left: 4px;
}

[b-jv58okxham] .sw-checkbox .e-checkbox-wrapper .e-frame {
    width: 14px;
    height: 14px;
}

[b-jv58okxham] .sw-checkbox .e-checkbox-wrapper .e-icons {
    font-size: 10px;
}

/* Checkbox Content Layout */
.sw-checkbox-content[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Code Badge (01, 02, etc) */
.sw-checkbox-code[b-jv58okxham] {
    flex-shrink: 0;
    width: 26px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.sw-checkbox-item.selected .sw-checkbox-code[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

/* Checkbox Description Text */
.sw-checkbox-text[b-jv58okxham] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
}

/* Custom Scrollbar for SW Items */
.sw-items[b-jv58okxham]::-webkit-scrollbar {
    width: 8px;
}

.sw-items[b-jv58okxham]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: 4px;
}

.sw-items[b-jv58okxham]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
}

.sw-items[b-jv58okxham]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

/* Item */
.sw-item[b-jv58okxham] {
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    cursor: pointer;
}

.sw-item:hover[b-jv58okxham] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sw-item.selected[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2);
}

/* Syncfusion TextBox Styling for S&W Section */
[b-jv58okxham] .sw-textbox {
    flex: 1;
}

[b-jv58okxham] .sw-textbox .e-input-group {
    border-color: var(--BEC-colorNeutralStroke2);
}

[b-jv58okxham] .sw-textbox .e-input-group:hover {
    border-color: var(--BEC-colorNeutralStroke1);
}

[b-jv58okxham] .sw-textbox .e-input-group.e-input-focus {
    border-color: var(--BEC-colorBrandBackground);
}

/* Item Content */
.sw-item-content[b-jv58okxham] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sw-item-text[b-jv58okxham] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.sw-item-meta[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sw-category[b-jv58okxham] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-weight: var(--BEC-fontWeightMedium);
}

.sw-score[b-jv58okxham] {
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

/* Empty State */
.sw-empty[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

.sw-empty i[b-jv58okxham] {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.sw-empty p[b-jv58okxham] {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}
/* /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;
    min-height: 100vh;
    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;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   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;
    overflow: hidden !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;
}

/* 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 #e0e0e0;
    background: white;
    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: #242424;
}

.sidebar-title i[b-j1w3mnfhnl] {
    color: #0078d4;
    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: #f3f3f3;
}

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

.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: #242424;
    margin: 0 0 8px 0;
}

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

.step-description[b-j1w3mnfhnl] {
    font-size: 14px;
    color: #605e5c;
    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: #d13438;
    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: #d13438;
    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: 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-j1w3mnfhnl] {
    font-size: 18px;
    color: #7b1fa2;
    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: #1565c0;
    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: #ffffff;
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: #0b5c0b;
    border-color: #0b5c0b;
    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: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-j1w3mnfhnl] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-j1w3mnfhnl] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-j1w3mnfhnl] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-j1w3mnfhnl] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-j1w3mnfhnl] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-j1w3mnfhnl] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-j1w3mnfhnl] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-j1w3mnfhnl] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-j1w3mnfhnl] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

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

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

/* ========================================
   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: 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-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: white;
    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: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-j1w3mnfhnl] {
    color: #10b981;
    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: 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-j1w3mnfhnl] {
    color: #f59e0b;
    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: white;
    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: #d13438;
}

/* ========================================
   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 #e0e0e0;
    background: white;
    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: #242424;
    margin: 0;
}

.wizard-header h3 i[b-j1w3mnfhnl] {
    color: #0078d4;
    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: #f3f3f3;
}

.close-button i[b-j1w3mnfhnl] {
    font-size: 18px;
    color: #605e5c;
}

.wizard-content[b-j1w3mnfhnl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
}

.wizard-footer[b-j1w3mnfhnl] {
    padding: 10px 16px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    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: #d13438;
    font-weight: 600;
    font-size: 18px;
}

.dialog-header-danger i[b-j1w3mnfhnl] {
    font-size: 20px;
}

.warning-text[b-j1w3mnfhnl] {
    color: #d13438;
    margin-top: 16px;
    font-size: 14px;
}

.warning-text-red[b-j1w3mnfhnl] {
    color: #d13438;
    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 #EEEEEE;
    background: #FFFFFF;
    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: #0078d4;
    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: #363636;
    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: #6b6565;
}

/* ========================================
   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: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%);
    border: 1px solid #2196f3;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    color: #1565c0;
}

.info-message i[b-j1w3mnfhnl] {
    font-size: 12px;
    color: #2196f3;
    flex-shrink: 0;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Matches Excel Filter Design
   ======================================== */
[b-j1w3mnfhnl] .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-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;
}

/* /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;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   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 #e0e0e0;
    background: white;
    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: #242424;
}

.sidebar-title i[b-ibfmmcuka5] {
    color: #0078d4;
    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: #f3f3f3;
}

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

.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: #242424;
    margin: 0 0 8px 0;
}

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

.step-description[b-ibfmmcuka5] {
    font-size: 14px;
    color: #605e5c;
    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: #323130;
    margin-bottom: 8px;
}

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

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-ibfmmcuka5] {
    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-ibfmmcuka5] {
    font-size: 18px;
    color: #7b1fa2;
    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: #1565c0;
    font-weight: 600;
}

.form-value[b-ibfmmcuka5] {
    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-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: #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-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: #f3f2f1;
    color: #323130;
}

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

.btn-success[b-ibfmmcuka5] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-ibfmmcuka5] {
    background: #0b5c0b;
}

.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: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-ibfmmcuka5] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-ibfmmcuka5] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-ibfmmcuka5] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-ibfmmcuka5] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-ibfmmcuka5] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-ibfmmcuka5] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-ibfmmcuka5] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-ibfmmcuka5] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-ibfmmcuka5] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-ibfmmcuka5] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-ibfmmcuka5] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

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

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

/* ========================================
   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: 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-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: white;
    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: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-ibfmmcuka5] {
    color: #10b981;
    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: 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-ibfmmcuka5] {
    color: #f59e0b;
    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: #f3f2f1;
    color: #323130;
}

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

.btn-next[b-ibfmmcuka5] {
    background: #0078d4;
    color: #ffffff;
}

.btn-next:hover:not(:disabled)[b-ibfmmcuka5] {
    background: #106ebe;
}

/* 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;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   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: white !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 #e0e0e0;
    background: white;
    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: #242424;
}

.sidebar-title i[b-g4nseeny06] {
    color: #0078d4;
    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: #f3f3f3;
}

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

.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: #242424;
    margin: 0 0 8px 0;
}

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

.step-description[b-g4nseeny06] {
    font-size: 14px;
    color: #605e5c;
    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: #323130;
    margin-bottom: 8px;
}

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

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-g4nseeny06] {
    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-g4nseeny06] {
    font-size: 18px;
    color: #7b1fa2;
    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: #1565c0;
    font-weight: 600;
}

.form-value[b-g4nseeny06] {
    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-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: #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-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: #f3f2f1;
    color: #323130;
}

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

.btn-success[b-g4nseeny06] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-g4nseeny06] {
    background: #0b5c0b;
}

.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: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-g4nseeny06] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-g4nseeny06] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-g4nseeny06] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-g4nseeny06] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-g4nseeny06] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-g4nseeny06] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-g4nseeny06] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-g4nseeny06] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-g4nseeny06] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-g4nseeny06] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-g4nseeny06] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

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

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

/* ========================================
   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: 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-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: white;
    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: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-g4nseeny06] {
    color: #10b981;
    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: 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-g4nseeny06] {
    color: #f59e0b;
    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: #f3f2f1;
    color: #323130;
}

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

.btn-next[b-g4nseeny06] {
    background: #0078d4;
    color: #ffffff;
}

.btn-next:hover:not(:disabled)[b-g4nseeny06] {
    background: #106ebe;
}

/* 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;
    /* 🔧 FIX: Full width layout - removed max-width constraint */
    width: 100%;
    margin: 0;
}

/* 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: #d1fae5;
    color: #065f46;
}

.badge-warning[b-86b04ci52r] {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-danger[b-86b04ci52r] {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-info[b-86b04ci52r] {
    background-color: #e0f2fe;
    color: #075985;
}

.badge-secondary[b-86b04ci52r] {
    background-color: #e2e8f0;
    color: #475569;
}

.badge-light[b-86b04ci52r] {
    background-color: #f8fafc;
    color: #64748b;
}

/* Grid Layout */
.dashboard-grid[b-86b04ci52r] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem; /* Spacing between evaluations */
}

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

    .list-item:last-child[b-86b04ci52r] {
        border-bottom: none;
        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);
}
/* /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;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   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: #6c757d;
    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 #e0e0e0;
    background: white;
    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: #242424;
}

.sidebar-title i[b-o3dmwcxyuk] {
    color: #0078d4;
    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: #f3f3f3;
}

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

.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: #242424;
    margin: 0 0 8px 0;
}

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

.step-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: #605e5c;
    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: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-o3dmwcxyuk]::after {
    content: " *";
    color: #d13438;
    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: #d13438;
    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: 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-o3dmwcxyuk] {
    font-size: 18px;
    color: #7b1fa2;
    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: #1565c0;
    font-weight: 600;
}

.form-value[b-o3dmwcxyuk] {
    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-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: #ffffff;
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-o3dmwcxyuk] {
    background: #0b5c0b;
    border-color: #0b5c0b;
    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: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-o3dmwcxyuk] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-o3dmwcxyuk] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-o3dmwcxyuk] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-o3dmwcxyuk] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-o3dmwcxyuk] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-o3dmwcxyuk] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-o3dmwcxyuk] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-o3dmwcxyuk] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-o3dmwcxyuk] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

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

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

/* ========================================
   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: 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-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: white;
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3);
}

.step.completed .step-circle[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: white;
}

.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: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 1px solid #90caf9;
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 20px;
    font-size: 13px;
    color: #1565c0;
}

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

.warning-text-red[b-o3dmwcxyuk] {
    color: #d13438;
    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 #e0e0e0;
    border-radius: 4px;
    transition: all 0.15s ease;
    background: #ffffff;
    cursor: pointer;
    font-size: 13px;
}

.version-radio-item-compact:hover[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    background: #fafafa;
}

.version-radio-item-compact.selected[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    background: #f0f6ff;
    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%, #0056b3 100%);
    border-radius: 4px;
    margin-bottom: 6px;
}

.category-name[b-o3dmwcxyuk] {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

.category-weight[b-o3dmwcxyuk] {
    font-size: 10px;
    font-weight: 500;
    color: #ffffff;
    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: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.question-item:hover[b-o3dmwcxyuk] {
    background: #ffffff;
    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: #ffffff;
    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: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 4px;
    color: #ffffff;
    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: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%);
    border: 1px solid #ffc107;
    border-radius: 4px;
    margin-bottom: 8px;
}

.activation-warning i[b-o3dmwcxyuk] {
    color: #ff9800;
    font-size: 12px;
    flex-shrink: 0;
}

.activation-warning span[b-o3dmwcxyuk] {
    font-size: 9px;
    color: #856404;
    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: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%);
    border: 1px solid #ffc107;
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.activation-warning-inline i[b-o3dmwcxyuk] {
    color: #ff9800;
    font-size: 12px;
    flex-shrink: 0;
}

.activation-warning-inline span[b-o3dmwcxyuk] {
    font-size: 11px;
    color: #856404;
    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: #ffffff;
    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: #ffffff;
    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
   ======================================== */

:root[b-pwgbzq4men] {
    --bec-transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    --bec-shadow-premium: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    --z-header: 100;
    --z-footer: 100;
    --z-content: 10;
}

/* ── RESET & STRUCTURE ────────────────── */
.public-form-container[b-pwgbzq4men] {
    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;
}
/* /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 wizard-shared.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/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%;
}
/* /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);
}

.BEC-Header-Row[b-pvpj5widno] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

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

/* ── Stats Bar ── */
.BEC-Stats-Row[b-pvpj5widno] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
}

.BEC-Stats-Row-Actions[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.BEC-Stats-Bar[b-pvpj5widno] {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
}

.BEC-Stat[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 16px;
    border-radius: 6px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    min-width: 64px;
    gap: 2px;
}

.BEC-Stat:first-child[b-pvpj5widno] {
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-Stat-Count[b-pvpj5widno] {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.2;
}

.BEC-Stat-Count--qualified[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Stat-Count--hired[b-pvpj5widno] {
    color: var(--BEC-colorBrandForeground1, #2b579a);
}

.BEC-Stat-Count--scoring[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Stat-Count--rejected[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Stat-Count--flagged[b-pvpj5widno] {
    color: var(--BEC-Warning-Main, #ffb900);
}

.BEC-Stat-Count--pending[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

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

.BEC-Stat-Pct[b-pvpj5widno] {
    font-weight: 400;
    color: var(--BEC-Text-Disabled, #a19f9d);
}

/* ── 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: 12px;
    padding: 10px 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: var(--BEC-Warning-Main, #ffaa44);
}

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

/* ── Load More ── */
.BEC-Load-More[b-pvpj5widno] {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── 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: 1px 6px;
    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: 12px;
    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: 12px;
}

.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: 6px;
    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 12px;
    background: var(--BEC-Surface-Elevated, #faf9f8);
    border-radius: 6px;
}

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

.BEC-Required[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Pay-Input[b-pvpj5widno] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #8a8886);
    border-radius: 6px;
    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-Disabled, #a19f9d);
}

/* ── Badge accent (for "Hired" status in persona) ── */
.BEC-Badge--accent[b-pvpj5widno] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #fff;
    font-size: 11px;
    padding: 2px 10px;
    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: 12px 0 0 0;
}

.BEC-Tab-Content--grid[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    padding: 12px 0 0 0;
    gap: 8px;
    overflow: hidden;
}

/* BEC-Tab-Header-Row removed — search/filter removed from JO tab */

/* ── Search Box ── */
.BEC-Search-Box[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    padding: 5px 12px;
    background: var(--BEC-Surface-Base, #fff);
    flex: 1;
    min-width: 180px;
    max-width: 320px;
    transition: border-color 0.15s ease;
}

.BEC-Search-Box:focus-within[b-pvpj5widno] {
    border-color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Search-Box input[b-pvpj5widno] {
    border: none;
    outline: none;
    font-size: 13px;
    flex: 1;
    background: transparent;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── JO Stats ── */
.BEC-Stats-Total[b-pvpj5widno] {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── JO Status Counter Colors (boxed counters) ── */
.BEC-Stat-Count--draft[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Stat-Count--published[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Stat-Count--onhold[b-pvpj5widno] {
    color: var(--BEC-Warning-Main, #ffb900);
}

.BEC-Stat-Count--closed[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Stat-Count--filled[b-pvpj5widno] {
    color: #5c2d91;
}

.BEC-Stat-Count--cancelled[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[b-pvpj5widno] {
    background: #f3f2f1;
    color: #605e5c;
}

.BEC-Badge--accent[b-pvpj5widno] {
    background: #e0d7ef;
    color: #5c2d91;
}

/* ── Tags ── */
.BEC-Tag-List[b-pvpj5widno] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.BEC-Tag[b-pvpj5widno] {
    display: inline-block;
    padding: 3px 10px;
    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: 10px;
    padding: 16px 20px;
    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 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.BEC-Detail-Row[b-pvpj5widno] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

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

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

.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: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* BEC-Filter-Dropdown removed — filter removed from JO tab */

/* ── Responsive ── */
@media (max-width: 768px) {
    .BEC-Layout[b-pvpj5widno] {
        padding: 16px;
    }

    .BEC-Header[b-pvpj5widno] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .BEC-Stats-Bar[b-pvpj5widno] {
        width: 100%;
        flex-wrap: wrap;
    }

    .BEC-Stat[b-pvpj5widno] {
        padding: 4px 10px;
        min-width: 48px;
    }

    .BEC-Tab-Header-Row[b-pvpj5widno] {
        display: none;
    }

    .BEC-Stats-Row[b-pvpj5widno] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .BEC-Stats-Row-Actions[b-pvpj5widno] {
        width: 100%;
        justify-content: flex-start;
    }

    .BEC-Search-Box[b-pvpj5widno] {
        flex: 1;
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .BEC-Detail-Row[b-pvpj5widno] {
        flex-direction: column;
        gap: 4px;
    }

    .BEC-Detail-Label[b-pvpj5widno] {
        min-width: 0;
    }
}
/* /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/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 styles for status */
.BEC-Badge[b-nb5bpo28de] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

.BEC-Badge--success[b-nb5bpo28de] {
    background: var(--BEC-Success-Subtle, #dff6dd);
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Badge--neutral[b-nb5bpo28de] {
    background: var(--BEC-Surface-Alt, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Badge--warning[b-nb5bpo28de] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-Warning-Main, #ffaa44);
}

.BEC-CompactBar-Label--subtle[b-nb5bpo28de] {
    font-size: 11px;
    opacity: 0.8;
}

/* 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: 18px;
    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;
    /* No outer border */
    border-radius: 0;
    /* Square edges */
    overflow: hidden;
    box-shadow: none;
    /* No shadow for full viewport */
}

/* ── 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;
}
    /* Force left align */
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-row:hover .e-rowcell {
    background: var(--BEC-Surface-Alt, #faf9f8) !important;
}

/* ── Badge Styles ── */
.BEC-Badge[b-jnrqejhlmo] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.BEC-Badge--success[b-jnrqejhlmo] {
    background: var(--BEC-Success-Subtle, #dff6dd);
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Badge--info[b-jnrqejhlmo] {
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Badge--error[b-jnrqejhlmo] {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Badge--neutral[b-jnrqejhlmo] {
    background: var(--BEC-Surface-Alt, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Badge--warning[b-jnrqejhlmo] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-Warning-Main, #ffaa44);
}

.BEC-Badge--accent[b-jnrqejhlmo] {
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Info-Main, #0078d4);
    font-weight: 700;
}

.BEC-Badge--viewed[b-jnrqejhlmo] {
    background: var(--BEC-Success-Subtle, #dff6dd);
    color: var(--BEC-Success-Main, #107c10);
    font-size: 11px;
}

/* ============================================================================
   [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: 4px;
}

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

.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: 6px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 200px;
    max-width: 300px;
    background: var(--BEC-Surface-Base, #fff);
    transition: border-color 0.15s ease;
}

.BEC-Search-Box:focus-within[b-jnrqejhlmo] {
    border-color: var(--BEC-Info-Main, #0078d4);
}

.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: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

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

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

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

:root[b-h5g4v4emmb] {
    --bec-transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    --bec-shadow-premium: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    --z-header: 100;
    --z-footer: 100;
    --z-content: 10;
}

/* ── RESET & STRUCTURE ────────────────── */
.public-form-container[b-h5g4v4emmb] {
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile */
    width: 100vw;
    background: #F5F7FA;
    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: white;
    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;
}

/* ── 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;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 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: #1a1f2c;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

h2[b-h5g4v4emmb] {
    font-size: 24px;
    font-weight: 700;
    color: #1a1f2c;
    margin-bottom: 8px;
}

p.subtitle[b-h5g4v4emmb] {
    font-size: 16px;
    color: #64748b;
    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: white;
    border: 1px solid #e2e8f0;
    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: #f8fafc;
}

.selection-card.selected[b-h5g4v4emmb] {
    border-color: var(--BEC-themePrimary, #0078d4);
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.card-title[b-h5g4v4emmb] {
    font-weight: 600;
    font-size: 16px;
    color: #1e293b;
}

.card-subtitle[b-h5g4v4emmb] {
    font-size: 13px;
    color: #64748b;
}

/* ── 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: white !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !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: #ef4444 !important;
    animation: shake-b-h5g4v4emmb 0.4s;
}

.validation-message[b-h5g4v4emmb] {
    color: #ef4444;
    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.9);
    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: white;
}

.btn-secondary[b-h5g4v4emmb] {
    background: #e2e8f0;
    color: #475569;
}

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

/* ── DESKTOP ONLY OVERRIDES ──────────────── */
@media (min-width: 900px) {
    .public-form-container[b-h5g4v4emmb] {
        padding: 40px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f0f2f5 0%, #e1e4e8 100%);
    }

    .app-container[b-h5g4v4emmb] {
        max-width: 1000px;
        height: 80vh;
        max-height: 800px;
        background: white;
        border-radius: 24px;
        box-shadow: var(--bec-shadow-premium);
        flex-direction: row;
        overflow: hidden;
    }

    /* Sidebar */
    .app-sidebar[b-h5g4v4emmb] {
        width: 320px;
        background: #002050;
        /* Deep Blue */
        padding: 40px;
        color: white;
        background: #002050;
        /* Deep Blue */
        padding: 40px;
        color: white;
        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 #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;
    text-align: center;
    position: relative;
    /* Context for absolute input */
    overflow: hidden;
}

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

/* File Preview */
.file-preview[b-h5g4v4emmb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 12px;
    border: 1px solid #dbeafe;
}

.btn-icon-remove[b-h5g4v4emmb] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    display: flex;
    opacity: 0.7;
    transition: 0.2s;
}

.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: #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-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: #334155;
    margin-bottom: 8px;
}

.success-thankyou[b-h5g4v4emmb] {
    font-size: 14px;
    color: #94a3b8;
    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, #0f172a 0%, #1e293b 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: #10b981;
    color: white;
    border-color: #10b981;
    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: white;
    color: #0f172a;
    border-color: white;
    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;
}
/* /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;
    }
}
/* /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;
}