/* /Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* Scoped styles for ForgotPassword page (dark theme, matching Login) */
.login-page[b-qw62ckk22v] { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    background: transparent; 
}

/* Dark card - same width as login */
.login-card[b-qw62ckk22v] { 
    width: 390px; 
    border: 1px solid #3a3d45; 
    border-radius: 6px; 
    background: #1f2126; 
    box-shadow: 0 4px 18px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4); 
    font-size: 13px; 
    overflow: hidden; 
    color: #e6e8ea; 
}

/* Header: gradient with logo */
.login-header[b-qw62ckk22v] { 
    height: 90px; 
    background: linear-gradient(#3f4248,#1f2126); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 14px; 
    padding: 0 34px; 
    color: #fff; 
    font-weight: 600; 
    font-size: 16px; 
    border-bottom: 1px solid #30343b; 
}

.login-logo[b-qw62ckk22v] { 
    height: 55px; 
}

/* Body - minimal padding to match login height */
.forgot-body[b-qw62ckk22v] { 
    padding: 20px 40px 20px 40px; 
}

/* Instruction text */
.instruction-text[b-qw62ckk22v] {
    font-size: 13px;
    color: #c9ccd1;
    margin-bottom: 14px;
    line-height: 1.35;
}

.instruction-text a[b-qw62ckk22v] {
    color: #5fbfe6;
    text-decoration: none;
}

.instruction-text a:hover[b-qw62ckk22v] {
    color: #8dd3ef;
    text-decoration: underline;
}

/* Form groups */
.form-group[b-qw62ckk22v] { 
    margin-bottom: 12px; 
}

.form-label[b-qw62ckk22v] {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #c9ccd1;
    font-weight: 500;
}

/* Captcha container */
.captcha-container[b-qw62ckk22v] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.captcha-input-wrapper[b-qw62ckk22v] {
    flex: 1;
}

.captcha-image[b-qw62ckk22v] {
    width: 100px;
    height: 40px;
    border: 2px solid #3d4a55;
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.captcha-image svg[b-qw62ckk22v] {
    width: 100%;
    height: 100%;
}

/* Show another code link */
.captcha-refresh[b-qw62ckk22v] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    margin-left: 2px;
}

.captcha-refresh-link[b-qw62ckk22v] {
    font-size: 11px;
    color: #5fbfe6;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s;
}

.captcha-refresh-link:hover[b-qw62ckk22v] {
    color: #8dd3ef;
    text-decoration: underline;
}

.captcha-refresh-icon[b-qw62ckk22v] {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* Button */
.send-button[b-qw62ckk22v] {
    width: 100%;
    margin-bottom: 14px;
}

/* Back to login link */
.back-link[b-qw62ckk22v] {
    text-align: center;
    font-size: 11px;
    color: #c9ccd1;
}

.back-link a[b-qw62ckk22v] {
    color: #5fbfe6;
    text-decoration: none;
    transition: color .15s;
}

.back-link a:hover[b-qw62ckk22v] {
    color: #8dd3ef;
    text-decoration: underline;
}

/* Error message */
.error-message[b-qw62ckk22v] {
    background: #4a1f1f;
    border: 1px solid #8b3838;
    color: #ffb3b3;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 16px;
}

/* Inputs (DevExpress) - matching login style */
[b-qw62ckk22v] .forgot-input.dx-texteditor { 
    background: #2b3036; 
    border: 2px solid #3d4a55; 
    border-radius: 4px; 
    height: 44px; 
    display: flex; 
    align-items: center; 
    padding: 0 12px; 
    box-sizing: border-box; 
    transition: border-color .15s, box-shadow .15s; 
}

[b-qw62ckk22v] .forgot-input.dx-texteditor .dx-texteditor-input { 
    background: transparent !important; 
    color: #e6e8ea; 
    font-size: 13px; 
}

[b-qw62ckk22v] .forgot-input.dx-texteditor .dx-placeholder { 
    color: #8b9198; 
    opacity: 1; 
}

/* focus + hover states */
[b-qw62ckk22v] .forgot-input.dx-texteditor.dx-state-focused { 
    border-color: #58b9e3; 
    box-shadow: 0 0 0 1px #58b9e366, 0 0 0 4px #58b9e31a; 
    outline: none; 
}

[b-qw62ckk22v] .forgot-input.dx-texteditor:hover { 
    border-color: #58b9e3; 
}

/* Ensure full width container */
[b-qw62ckk22v] .forgot-input.dx-texteditor .dx-texteditor-container { 
    width: 100%; 
}

/* Button styling */
[b-qw62ckk22v] .send-button.dx-button { 
    background: #58b9e3; 
    border: none; 
    color: #fff; 
    font-weight: 600; 
    height: 44px; 
    border-radius: 4px; 
    transition: background .15s; 
}

[b-qw62ckk22v] .send-button.dx-button:hover { 
    background: #4aa8d1; 
}

[b-qw62ckk22v] .send-button.dx-button .dx-button-content { 
    padding: 0 24px; 
}
/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Scoped styles for Login page (dark theme) */
.login-page[b-e02xvlf6zy] { display: flex; justify-content: center; align-items: center; height: 100%; background: transparent; }

/* Dark card */
.login-card[b-e02xvlf6zy] { width: 390px; border: 1px solid #3a3d45; border-radius: 6px; background: #1f2126; box-shadow: 0 4px 18px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4); font-size: 13px; overflow: hidden; color: #e6e8ea; }

/* Header: keep gradient but darken */
.login-header[b-e02xvlf6zy] { height: 90px; background: linear-gradient(#3f4248,#1f2126); display: flex; align-items: center; gap: 14px; padding: 0 34px; color: #fff; font-weight: 600; font-size: 16px; border-bottom: 1px solid #30343b; }
.login-logo[b-e02xvlf6zy] { height: 55px; }

/* Body */
.login-body[b-e02xvlf6zy] { padding: 34px 80px 0 80px; }
.form-group[b-e02xvlf6zy] { margin-bottom: 34px; }

/* HTML Input fields - visible styling for dark theme */
.login-input[b-e02xvlf6zy] {
    width: 100%;
    height: 37px;
    background-color: #454b54 !important;
    border: 1px solid #6a7580 !important;
    border-radius: 4px;
    padding: 0 12px;
    box-sizing: border-box;
    color: #e6e8ea !important;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-input[b-e02xvlf6zy]::placeholder {
    color: #9aa0a8;
    opacity: 1;
}

.login-input:hover[b-e02xvlf6zy] {
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) !important;
}

.login-input:focus[b-e02xvlf6zy] {
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) 40%, transparent), 
                0 0 0 4px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) 10%, transparent);
    outline: none;
}

/* Alert messages - full width of card with rounded corners */
[b-e02xvlf6zy] .login-body .alert {
    width: calc(100% + 160px);
    margin-left: -80px;
    margin-right: -80px;
    margin-bottom: 34px;
    border-radius: 4px;
    padding: 12px 34px;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

/* Links - use theme accent color */
.forgot-row[b-e02xvlf6zy] { text-align: center; margin-bottom: 40px; }
.forgot-link[b-e02xvlf6zy] { font-size: 13px; color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)); text-decoration: none; transition: color .15s; }
.forgot-link:hover[b-e02xvlf6zy] { color: var(--dxbl-accent-bg, var(--bs-primary, #8dd3ef)); filter: brightness(1.2); text-decoration: underline; }

/* Footer - full card width */
.login-footer[b-e02xvlf6zy] { width: calc(100% + 160px); background: #262a30; border-top: 1px solid #30343b; margin-top: 40px; margin-left: -80px; margin-right: -80px; padding: 18px 34px 22px 34px; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; font-size: 13px; color: #c9ccd1; box-sizing: border-box; }
.remember-me[b-e02xvlf6zy] { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Remember Me checkbox - custom dark theme styling */
.remember-me input[type="checkbox"][b-e02xvlf6zy] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #3a4048;
    border: 1px solid #5a6570;
    border-radius: 3px;
    cursor: pointer;
    margin: 0;
    position: relative;
    transition: background-color 0.15s, border-color 0.15s;
}

.remember-me input[type="checkbox"]:hover[b-e02xvlf6zy] {
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3));
}

.remember-me input[type="checkbox"]:checked[b-e02xvlf6zy] {
    background-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3));
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3));
}

.remember-me input[type="checkbox"]:checked[b-e02xvlf6zy]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Login button - styled with theme accent color */
/* Uses --dxbl-accent-bg for Fluent themes, --bs-primary as fallback for classic themes */
.login-button[b-e02xvlf6zy] { 
    min-width: 90px; 
    background-color: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s, filter 0.15s;
}

.login-button:hover[b-e02xvlf6zy] {
    background-color: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    filter: brightness(0.85);
    color: #fff !important;
}

.login-button:active[b-e02xvlf6zy] {
    background-color: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    filter: brightness(0.75);
}

.login-button:disabled[b-e02xvlf6zy] {
    background-color: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    opacity: 0.7;
    cursor: not-allowed;
}

/* Target DevExpress component wrappers */
[b-e02xvlf6zy] .login-footer > * { flex-shrink: 0; }
[b-e02xvlf6zy] .login-footer .remember-me { order: 0 !important; }
[b-e02xvlf6zy] .login-footer .login-button { order: 1 !important; }

/* Inputs (DevExpress) - use theme accent color for focus/hover */
[b-e02xvlf6zy] .login-input.dx-texteditor { background: #3a4048; border: 1px solid #5a6570; border-radius: 4px; height: 44px; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
[b-e02xvlf6zy] .login-input.dx-texteditor .dx-texteditor-input { background: transparent !important; color: #e6e8ea; font-size: 13px; }
[b-e02xvlf6zy] .login-input.dx-texteditor .dx-placeholder { color: #8b9198; opacity: 1; }
/* focus + hover states - use theme accent color */
[b-e02xvlf6zy] .login-input.dx-texteditor.dx-state-focused { border-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) 40%, transparent), 0 0 0 4px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) 10%, transparent); outline: none; }
[b-e02xvlf6zy] .login-input.dx-texteditor:hover { border-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3));}

/* Ensure full width container */
[b-e02xvlf6zy] .login-input.dx-texteditor .dx-texteditor-container { width: 100%; }

/* Adjust checkbox - use theme accent color */
[b-e02xvlf6zy] .login-footer .dx-checkbox-icon { background: #3a4048; border: 1px solid #5a6570; }
[b-e02xvlf6zy] .login-footer .dx-checkbox-checked .dx-checkbox-icon { background: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)); border-color: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)); }

/* Login button spinner */
.login-spinner[b-e02xvlf6zy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spinner-icon[b-e02xvlf6zy] {
    width: 16px;
    height: 16px;
    animation: spin-b-e02xvlf6zy 1s linear infinite;
}

.spinner-circle[b-e02xvlf6zy] {
    stroke-dasharray: 31.4;
    stroke-dashoffset: 10;
    stroke-linecap: round;
}

@keyframes spin-b-e02xvlf6zy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
.info-message[b-mn4b2qb2ie] {
    margin: 0.625rem 0 0.625rem 0;
    justify-content: start;
}
/* /Components/Account/Pages/Manage/ExternalLogins.razor.rz.scp.css */
.current-logins[b-ky56qzrz5l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.current-logins-item[b-ky56qzrz5l] {
    display: flex;
    gap: 0.625rem;
}
/* /Components/Account/Pages/QlmMFA.razor.rz.scp.css */
/* Scoped styles for QlmMFA page (dark theme) */

/* Match Login page dark theme styling */
.login-page[b-t3en2nojog] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: transparent;
}

.mfa-card[b-t3en2nojog] {
    width: 550px;
    max-width: 90%;
    min-height: 350px;
    border: 1px solid #3a3d45;
    border-radius: 8px;
    background: #1f2126;
    box-shadow: 0 4px 18px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
    font-size: 14px;
    overflow: hidden;
    color: #e6e8ea;
    display: flex;
    flex-direction: column;
}

/* Header with gradient matching Login page */
.login-header[b-t3en2nojog] {
    height: 100px;
    background: linear-gradient(#3f4248,#1f2126);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 40px;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    border-bottom: 1px solid #30343b;
}

.login-logo[b-t3en2nojog] {
    height: 60px;
}

.login-title[b-t3en2nojog] {
    color: #fff;
}

.mfa-body[b-t3en2nojog] {
    padding: 40px 45px 0;
    background: #1f2126;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mfa-buttons-container[b-t3en2nojog] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mfa-buttons-row[b-t3en2nojog] {
    display: flex;
    flex-direction: row;
    gap: 18px;
}

/* MFA Auth buttons - use theme accent color */
.mfa-auth-button[b-t3en2nojog] {
    flex: 1;
    height: 56px;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    border: 2px solid var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
    padding: 8px 16px;
}

/* Hover state for enabled buttons */
.mfa-auth-button:hover[b-t3en2nojog] {
    background: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 15%, transparent) !important;
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 20%, transparent);
}

/* Target DevExpress button internals */
[b-t3en2nojog] .mfa-auth-button {
    background: rgba(255, 255, 255, 0.05) !important;
}

[b-t3en2nojog] .mfa-auth-button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[b-t3en2nojog] .mfa-auth-button .dx-button-content {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
}

[b-t3en2nojog] .mfa-auth-button:hover .dx-button-content {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
}

.mfa-action-buttons[b-t3en2nojog] {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.mfa-ok-button[b-t3en2nojog],
.mfa-cancel-button[b-t3en2nojog] {
    min-width: 110px;
    height: 42px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* OK Button - use theme accent color */
.mfa-ok-button[b-t3en2nojog] {
    background: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) !important;
    color: #fff !important;
    border: none !important;
}

[b-t3en2nojog] .mfa-ok-button .dx-button-content {
    background: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) !important;
    color: #fff !important;
}

.mfa-ok-button:hover[b-t3en2nojog] {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) 30%, transparent);
}

[b-t3en2nojog] .mfa-ok-button:hover .dx-button-content {
    filter: brightness(1.15);
}

.mfa-ok-button:active[b-t3en2nojog] {
    transform: translateY(1px);
}

.mfa-cancel-button[b-t3en2nojog] {
    background: #2b3036 !important;
    color: #e6e8ea !important;
    border: 1px solid #3d4a55 !important;
}

[b-t3en2nojog] .mfa-cancel-button .dx-button-content {
    background: #2b3036 !important;
    color: #e6e8ea !important;
}

.mfa-cancel-button:hover[b-t3en2nojog] {
    background: #3a3f47 !important;
    border-color: #4a5563 !important;
}

[b-t3en2nojog] .mfa-cancel-button:hover .dx-button-content {
    background: #3a3f47 !important;
}

.mfa-action-buttons:active[b-t3en2nojog] {
    transform: translateY(1px);
}

/* Footer section - matches Login page style */
.mfa-footer[b-t3en2nojog] {
    width: calc(100% + 90px);
    background: #262a30;
    border-top: 1px solid #30343b;
    margin-top: auto;
    margin-left: -45px;
    margin-right: -45px;
    padding: 20px 40px 22px 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    box-sizing: border-box;
}

.mfa-footer .mfa-ok-button[b-t3en2nojog],
.mfa-footer .mfa-cancel-button[b-t3en2nojog] {
    min-width: 100px;
    height: 38px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Footer OK Button - use theme accent color */
.mfa-footer .mfa-ok-button[b-t3en2nojog] {
    background: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) !important;
    color: #fff !important;
    border: none !important;
}

[b-t3en2nojog] .mfa-footer .mfa-ok-button .dx-button-content {
    background: var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) !important;
    color: #fff !important;
}

.mfa-footer .mfa-ok-button:hover[b-t3en2nojog] {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #58b9e3)) 30%, transparent);
}

[b-t3en2nojog] .mfa-footer .mfa-ok-button:hover .dx-button-content {
    filter: brightness(1.15);
}

.mfa-footer .mfa-ok-button:active[b-t3en2nojog] {
    transform: translateY(1px);
}

.mfa-footer .mfa-cancel-button[b-t3en2nojog] {
    background: #2b3036 !important;
    color: #e6e8ea !important;
    border: 1px solid #3d4a55 !important;
}

[b-t3en2nojog] .mfa-footer .mfa-cancel-button .dx-button-content {
    background: #2b3036 !important;
    color: #e6e8ea !important;
}

.mfa-footer .mfa-cancel-button:hover[b-t3en2nojog] {
    background: #3a3f47 !important;
    border-color: #4a5563 !important;
}

[b-t3en2nojog] .mfa-footer .mfa-cancel-button:hover .dx-button-content {
    background: #3a3f47 !important;
}

.mfa-footer .mfa-cancel-button:active[b-t3en2nojog] {
    transform: translateY(1px);
}


/* Code entry state styles */
.mfa-instruction[b-t3en2nojog] {
    text-align: center;
    font-size: 15px;
    color: #e6e8ea;
    margin-bottom: 28px;
    line-height: 1.6;
    font-weight: 400;
}

.mfa-code-input[b-t3en2nojog] {
    margin-bottom: 24px;
}

.mfa-code-textbox[b-t3en2nojog] {
    width: 100%;
}

[b-t3en2nojog] .mfa-code-textbox input {
    height: 44px;
    background: #2b3036 !important;
    border: 1px solid #3d4a55 !important;
    border-radius: 6px;
    color: #e6e8ea !important;
    font-size: 16px;
    padding: 0 16px;
    text-align: center;
    letter-spacing: 2px;
}

[b-t3en2nojog] .mfa-code-textbox input:focus {
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 15%, transparent);
}

.mfa-resend-buttons[b-t3en2nojog] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

/* Resend/Switch buttons - use theme accent color */
.mfa-resend-button[b-t3en2nojog],
.mfa-switch-button[b-t3en2nojog] {
    min-width: 200px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    border: 1px solid var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 16px;
}

[b-t3en2nojog] .mfa-resend-button .dx-button-content,
[b-t3en2nojog] .mfa-switch-button .dx-button-content {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
}

.mfa-resend-button:hover[b-t3en2nojog],
.mfa-switch-button:hover[b-t3en2nojog] {
    background: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 12%, transparent) !important;
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    transform: translateY(-1px);
}

[b-t3en2nojog] .mfa-resend-button:hover .dx-button-content,
[b-t3en2nojog] .mfa-switch-button:hover .dx-button-content {
    background: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 12%, transparent) !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
}

.mfa-resend-button:active[b-t3en2nojog],
.mfa-switch-button:active[b-t3en2nojog] {
    transform: translateY(1px);
}
/* /Components/Account/Pages/QlmMFACodeInput.razor.rz.scp.css */
/* Scoped styles for QlmMFACodeInput page (dark theme) */

/* Match Login page dark theme styling */
.login-page[b-1xjphmljue] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: transparent;
}

.mfa-card[b-1xjphmljue] {
    width: 550px;
    max-width: 90%;
    min-height: 350px;
    border: 1px solid #3a3d45;
    border-radius: 8px;
    background: #1f2126 !important;
    box-shadow: 0 4px 18px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
    font-size: 14px;
    overflow: hidden;
    color: #e6e8ea;
    display: flex;
    flex-direction: column;
}

/* Header with gradient matching Login page */
.login-header[b-1xjphmljue] {
    height: 100px;
    background: linear-gradient(#3f4248,#1f2126) !important;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 40px;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    border-bottom: 1px solid #30343b;
}

.login-logo[b-1xjphmljue] {
    height: 60px;
}

.login-title[b-1xjphmljue] {
    color: #fff;
}

.mfa-body[b-1xjphmljue] {
    padding: 40px 45px 0;
    background: #1f2126 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Code entry state styles */
.mfa-instruction[b-1xjphmljue] {
    text-align: center;
    font-size: 15px;
    color: #e6e8ea;
    margin-bottom: 28px;
    line-height: 1.6;
    font-weight: 400;
}

.mfa-code-input[b-1xjphmljue] {
    margin-bottom: 24px;
    width: 100%;
}

/* Target the input element directly with high specificity */
.mfa-code-input input[b-1xjphmljue],
.mfa-code-input input.form-control[b-1xjphmljue],
.mfa-code-input input.mfa-code-textbox[b-1xjphmljue],
.mfa-code-input .mfa-code-textbox[b-1xjphmljue],
input.mfa-code-textbox[b-1xjphmljue],
.mfa-code-textbox[b-1xjphmljue] {
    width: 100% !important;
    height: 44px !important;
    background: #2b3036 !important;
    background-color: #2b3036 !important;
    border: 1px solid #3d4a55 !important;
    border-radius: 6px !important;
    color: #e6e8ea !important;
    font-size: 16px !important;
    padding: 0 16px !important;
    text-align: center;
    letter-spacing: 2px;
    box-sizing: border-box !important;
}

/* Input focus - use theme accent color */
.mfa-code-input input:focus[b-1xjphmljue],
.mfa-code-input input.form-control:focus[b-1xjphmljue],
input.mfa-code-textbox:focus[b-1xjphmljue],
.mfa-code-textbox:focus[b-1xjphmljue] {
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 15%, transparent) !important;
    outline: none !important;
    background: #2b3036 !important;
    background-color: #2b3036 !important;
}

.mfa-code-input input[b-1xjphmljue]::placeholder,
input.mfa-code-textbox[b-1xjphmljue]::placeholder,
.mfa-code-textbox[b-1xjphmljue]::placeholder {
    color: #8b9198 !important;
}

.mfa-buttons-container[b-1xjphmljue] {
    margin-bottom: 40px;
}

.mfa-buttons-row[b-1xjphmljue] {
    display: flex;
    flex-direction: row;
    gap: 18px;
    justify-content: center;
}

/* MFA Auth buttons - use theme accent color */
.mfa-auth-button[b-1xjphmljue] {
    flex: 1;
    max-width: 280px;
    min-height: 56px !important;
    height: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    border: 2px solid var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: normal !important;
    word-wrap: break-word;
    padding: 8px 16px !important;
}

/* Target DevExpress button internals for auth buttons */
[b-1xjphmljue] .mfa-auth-button {
    background: transparent !important;
    background-color: transparent !important;
    min-height: 56px !important;
}

[b-1xjphmljue] .mfa-auth-button .dxbl-btn-content,
[b-1xjphmljue] .mfa-auth-button .dx-button-content {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

/* Hover state for auth buttons */
.mfa-auth-button:hover[b-1xjphmljue] {
    background: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 10%, transparent) !important;
    background-color: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 10%, transparent) !important;
    border-color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
}

[b-1xjphmljue] .mfa-auth-button:hover,
[b-1xjphmljue] .mfa-auth-button:hover .dxbl-btn-content,
[b-1xjphmljue] .mfa-auth-button:hover .dx-button-content {
    background: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 10%, transparent) !important;
    background-color: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) 10%, transparent) !important;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5fbfe6)) !important;
}

.mfa-auth-button:active[b-1xjphmljue] {
    transform: translateY(1px);
}

/* Footer section - matches Login page style */
.mfa-footer[b-1xjphmljue] {
    width: calc(100% + 90px);
    background: #262a30 !important;
    border-top: 1px solid #30343b;
    margin-top: auto;
    margin-left: -45px;
    margin-right: -45px;
    padding: 20px 40px 22px 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    box-sizing: border-box;
}

/* OK and Cancel button base styles */
.mfa-ok-button[b-1xjphmljue],
.mfa-cancel-button[b-1xjphmljue] {
    min-width: 100px !important;
    height: 38px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* OK Button - use theme accent color */
.mfa-ok-button[b-1xjphmljue] {
    background: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    background-color: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    color: #fff !important;
    border: none !important;
}

[b-1xjphmljue] .mfa-ok-button,
[b-1xjphmljue] .mfa-ok-button .dxbl-btn-content,
[b-1xjphmljue] .mfa-ok-button .dx-button-content {
    background: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    background-color: var(--dxbl-accent-bg, var(--bs-primary, #1a8fbf)) !important;
    color: #fff !important;
}

.mfa-ok-button:hover[b-1xjphmljue] {
    filter: brightness(0.85);
}

[b-1xjphmljue] .mfa-ok-button:hover,
[b-1xjphmljue] .mfa-ok-button:hover .dxbl-btn-content,
[b-1xjphmljue] .mfa-ok-button:hover .dx-button-content {
    filter: brightness(0.85);
    color: #fff !important;
}

.mfa-ok-button:active[b-1xjphmljue] {
    transform: translateY(1px);
}

/* Cancel Button - Secondary dark filled */
.mfa-cancel-button[b-1xjphmljue] {
    background: #2b3036 !important;
    background-color: #2b3036 !important;
    color: #e6e8ea !important;
    border: 1px solid #3d4a55 !important;
}

[b-1xjphmljue] .mfa-cancel-button,
[b-1xjphmljue] .mfa-cancel-button .dxbl-btn-content,
[b-1xjphmljue] .mfa-cancel-button .dx-button-content {
    background: #2b3036 !important;
    background-color: #2b3036 !important;
    color: #e6e8ea !important;
}

.mfa-cancel-button:hover[b-1xjphmljue] {
    background: #3a3f47 !important;
    background-color: #3a3f47 !important;
    border-color: #4a5563 !important;
}

[b-1xjphmljue] .mfa-cancel-button:hover,
[b-1xjphmljue] .mfa-cancel-button:hover .dxbl-btn-content,
[b-1xjphmljue] .mfa-cancel-button:hover .dx-button-content {
    background: #3a3f47 !important;
    background-color: #3a3f47 !important;
}

.mfa-cancel-button:active[b-1xjphmljue] {
    transform: translateY(1px);
}

/* Alert messages */
.alert[b-1xjphmljue] {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px !important;
    text-align: center;
    white-space: nowrap;
}

.alert-danger[b-1xjphmljue] {
    background: rgba(220, 53, 69, 0.1) !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: #ff6b81 !important;
}

.alert-success[b-1xjphmljue] {
    background: rgba(40, 167, 69, 0.15) !important;
    background-color: rgba(40, 167, 69, 0.15) !important;
    border: 1px solid rgba(40, 167, 69, 0.4) !important;
    color: #51cf66 !important;
}

/* Override any Bootstrap/Fluent alert styles */
.mfa-body .alert[b-1xjphmljue],
.mfa-body .alert-success[b-1xjphmljue],
.mfa-body .alert-danger[b-1xjphmljue] {
    background: rgba(40, 167, 69, 0.15) !important;
    background-color: rgba(40, 167, 69, 0.15) !important;
    border: 1px solid rgba(40, 167, 69, 0.4) !important;
    color: #51cf66 !important;
    font-size: 13px !important;
    white-space: nowrap;
    padding: 12px 16px !important;
}

.mfa-body .alert-danger[b-1xjphmljue] {
    background: rgba(220, 53, 69, 0.1) !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: #ff6b81 !important;
}
/* /Components/Account/Pages/ResetPassword.razor.rz.scp.css */
/* Scoped styles for ResetPassword page (dark theme, matching Login style) */
.reset-page[b-fzg9g7gcz7] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: transparent;
}

/* Dark card matching login style */
.reset-card[b-fzg9g7gcz7] {
    width: 500px;
    max-width: 100%;
    border: 1px solid #3a3d45;
    border-radius: 6px;
    background: #1f2126;
    box-shadow: 0 4px 18px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
    font-size: 13px;
    overflow: hidden;
    color: #e6e8ea;
}

/* Header with gradient matching login */
.reset-header[b-fzg9g7gcz7] {
    height: 100px;
    background: linear-gradient(#3f4248,#1f2126);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #30343b;
}

.reset-logo[b-fzg9g7gcz7] {
    height: 60px;
}

/* Body */
.reset-body[b-fzg9g7gcz7] {
    padding: 30px 40px;
}

.reset-title[b-fzg9g7gcz7] {
    font-size: 18px;
    font-weight: 600;
    color: #e6e8ea;
    margin: 0 0 10px 0;
    text-align: center;
}

.reset-subtitle[b-fzg9g7gcz7] {
    font-size: 13px;
    color: #c9ccd1;
    margin: 0 0 25px 0;
    text-align: center;
    line-height: 1.5;
}

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

.form-label[b-fzg9g7gcz7] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #c9ccd1;
}

/* Input styling - matching login */
[b-fzg9g7gcz7] .reset-input.dx-texteditor {
    background: #2b3036;
    border: 2px solid #3d4a55;
    border-radius: 4px;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

[b-fzg9g7gcz7] .reset-input.dx-texteditor .dx-texteditor-input {
    background: transparent !important;
    color: #e6e8ea;
    font-size: 13px;
}

[b-fzg9g7gcz7] .reset-input.dx-texteditor .dx-placeholder {
    color: #8b9198;
    opacity: 1;
}

[b-fzg9g7gcz7] .reset-input.dx-texteditor.dx-state-focused {
    border-color: #58b9e3;
    box-shadow: 0 0 0 1px #58b9e366, 0 0 0 4px #58b9e31a;
    outline: none;
}

[b-fzg9g7gcz7] .reset-input.dx-texteditor:hover {
    border-color: #58b9e3;
}

[b-fzg9g7gcz7] .reset-input.dx-texteditor .dx-texteditor-container {
    width: 100%;
}

/* Reset button - matching login */
.reset-button[b-fzg9g7gcz7] {
    width: 100%;
    margin-bottom: 15px;
}

[b-fzg9g7gcz7] .reset-button.dx-button {
    background: #58b9e3;
    border: none;
    color: #fff;
    font-weight: 600;
    height: 44px;
    border-radius: 4px;
    transition: background .15s;
}

[b-fzg9g7gcz7] .reset-button.dx-button:hover {
    background: #4aa8d1;
}

[b-fzg9g7gcz7] .reset-button.dx-button .dx-button-content {
    padding: 0 24px;
}

/* Back link - matching dark theme */
.back-link[b-fzg9g7gcz7] {
    text-align: center;
    font-size: 11px;
    color: #c9ccd1;
}

.back-link a[b-fzg9g7gcz7] {
    color: #5fbfe6;
    text-decoration: none;
    transition: color .15s;
}

.back-link a:hover[b-fzg9g7gcz7] {
    color: #8dd3ef;
    text-decoration: underline;
}

/* Error message - dark theme */
.error-message[b-fzg9g7gcz7] {
    background: #4a1f1f;
    border: 1px solid #8b3838;
    color: #ffb3b3;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 16px;
    text-align: center;
}
/* /Components/Account/Pages/VerifySecurityQuestion.razor.rz.scp.css */
/* Scoped styles for VerifySecurityQuestion page (dark theme, matching Login/ForgotPassword) */
.security-page[b-qdw2vl3459] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: transparent;
}

/* Dark card matching login style */
.security-card[b-qdw2vl3459] {
    width: 500px;
    max-width: 100%;
    border: 1px solid #3a3d45;
    border-radius: 6px;
    background: #1f2126;
    box-shadow: 0 4px 18px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
    font-size: 13px;
    overflow: hidden;
    color: #e6e8ea;
}

/* Header with gradient matching login */
.security-header[b-qdw2vl3459] {
    height: 100px;
    background: linear-gradient(#3f4248,#1f2126);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #30343b;
}

.security-logo[b-qdw2vl3459] {
    height: 60px;
}

/* Body */
.security-body[b-qdw2vl3459] {
    padding: 30px 40px;
}

.security-title[b-qdw2vl3459] {
    font-size: 18px;
    font-weight: 600;
    color: #e6e8ea;
    margin: 0 0 10px 0;
    text-align: center;
}

.security-subtitle[b-qdw2vl3459] {
    font-size: 13px;
    color: #c9ccd1;
    margin: 0 0 25px 0;
    text-align: center;
    line-height: 1.5;
}

/* Info section - dark theme */
.security-info[b-qdw2vl3459] {
    background: #2b3036;
    border: 1px solid #3d4a55;
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.info-row[b-qdw2vl3459] {
    display: flex;
    margin-bottom: 10px;
    font-size: 13px;
}

.info-row:last-child[b-qdw2vl3459] {
    margin-bottom: 0;
}

.info-label[b-qdw2vl3459] {
    font-weight: 600;
    color: #c9ccd1;
    min-width: 100px;
}

.info-value[b-qdw2vl3459] {
    color: #e6e8ea;
}

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

.form-label[b-qdw2vl3459] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #c9ccd1;
}

/* Input styling - matching login/forgot password */
[b-qdw2vl3459] .security-input.dx-texteditor {
    background: #2b3036;
    border: 2px solid #3d4a55;
    border-radius: 4px;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

[b-qdw2vl3459] .security-input.dx-texteditor .dx-texteditor-input {
    background: transparent !important;
    color: #e6e8ea;
    font-size: 13px;
}

[b-qdw2vl3459] .security-input.dx-texteditor .dx-placeholder {
    color: #8b9198;
    opacity: 1;
}

[b-qdw2vl3459] .security-input.dx-texteditor.dx-state-focused {
    border-color: #58b9e3;
    box-shadow: 0 0 0 1px #58b9e366, 0 0 0 4px #58b9e31a;
    outline: none;
}

[b-qdw2vl3459] .security-input.dx-texteditor:hover {
    border-color: #58b9e3;
}

[b-qdw2vl3459] .security-input.dx-texteditor .dx-texteditor-container {
    width: 100%;
}

/* Submit button - matching login/forgot password */
.submit-button[b-qdw2vl3459] {
    width: 100%;
    margin-bottom: 15px;
}

[b-qdw2vl3459] .submit-button.dx-button {
    background: #58b9e3;
    border: none;
    color: #fff;
    font-weight: 600;
    height: 44px;
    border-radius: 4px;
    transition: background .15s;
}

[b-qdw2vl3459] .submit-button.dx-button:hover {
    background: #4aa8d1;
}

[b-qdw2vl3459] .submit-button.dx-button .dx-button-content {
    padding: 0 24px;
}

/* Back link - matching dark theme */
.back-link[b-qdw2vl3459] {
    text-align: center;
    font-size: 11px;
    color: #c9ccd1;
}

.back-link a[b-qdw2vl3459] {
    color: #5fbfe6;
    text-decoration: none;
    transition: color .15s;
}

.back-link a:hover[b-qdw2vl3459] {
    color: #8dd3ef;
    text-decoration: underline;
}

/* Error message - dark theme */
.error-message[b-qdw2vl3459] {
    background: #4a1f1f;
    border: 1px solid #8b3838;
    color: #ffb3b3;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 16px;
    text-align: center;
}

/* Success message - dark theme */
.success-message[b-qdw2vl3459] {
    background: #1f4a2f;
    border: 1px solid #3a8b52;
    color: #b3ffcc;
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
}


/* /Components/Account/Shared/ExternalLoginPicker.razor.rz.scp.css */
.external-logins[b-cvr211ysyz] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 500px) {
    .external-logins[b-cvr211ysyz] {
        flex-direction: column;
    }
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
[b-ijbbrz9ena] .tab-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

[b-ijbbrz9ena] .icon-profile {
    -webkit-mask-image: url("images/account/manage-profile.svg");
    mask-image: url("images/account/manage-profile.svg");
}

[b-ijbbrz9ena] .icon-email {
    -webkit-mask-image: url("images/account/manage-email.svg");
    mask-image: url("images/account/manage-email.svg");
}

[b-ijbbrz9ena] .icon-two-factor {
    -webkit-mask-image: url("images/account/manage-two-factor.svg");
    mask-image: url("images/account/manage-two-factor.svg");
}

[b-ijbbrz9ena] .icon-password {
    -webkit-mask-image: url("images/account/manage-password.svg");
    mask-image: url("images/account/manage-password.svg");
}

[b-ijbbrz9ena] .icon-personal {
    -webkit-mask-image: url("images/account/manage-personal.svg");
    mask-image: url("images/account/manage-personal.svg");
}

[b-ijbbrz9ena] .icon-external {
    -webkit-mask-image: url("images/account/user.svg");
    mask-image: url("images/account/user.svg");
}
/* /Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
.codes[b-lxys125656] {
    margin: 0.625rem 0px 0.625rem 0px;
}
/* /Components/Layout/Drawer.razor.rz.scp.css */
[b-soimslamzz] .navigation-drawer {
    --dxbl-drawer-panel-footer-justify-content: center;
    height: 100vh;
    max-height: 100%;
}

[b-soimslamzz] .panel-open:not(.mobile) .menu-button {
    display: none;
}

@media (max-width: 768px) {
    [b-soimslamzz] .panel-open:not(.mobile) .menu-button {
        display: inline-flex;
    }

    .mobile-drawer-closed .shading-copy[b-soimslamzz] {
        display: none;
        visibility: hidden;
    }

    [b-soimslamzz] .shading-copy {
        background-color: var(--dxbl-drawer-content-shading-bg);
        height: 100%;
        position: absolute;
        transition: opacity ease var(--dxbl-drawer-animation-duration);
        visibility: visible;
        width: 100%;
        z-index: 99;
        opacity: var(--dxbl-drawer-content-shading-opacity);
    }

    [b-soimslamzz] .panel-open .shading-copy {
        opacity: 0;
        visibility: unset;
        height: unset;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-vjuxp6ezc0] {
    height: 100%;
    font-family: var(--bs-font-sans-serif);
    width: 100%;
}

.main-content-wrapper[b-vjuxp6ezc0] {
    height: 100vh;
    overflow: auto;
    width: 100%;
}

[b-vjuxp6ezc0] .icon {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-mask-position: center center;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}
/* /Components/Pages/Index.razor.rz.scp.css */
[b-5pytu3u184] .welcome-gridlayout {
    margin: auto;
    width: auto;
    height: auto;
}

[b-5pytu3u184] .welcome-gridlayout .dxbl-gridlayout-root {
    align-content: center;
    justify-content: center;
}

[b-5pytu3u184] .title {
    text-align: center;
}

[b-5pytu3u184] .welcome-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

[b-5pytu3u184] .welcome-card {
    width: 26.25rem;
    height: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    border-radius: 1rem;
    color: var(--bs-link-color-rgb);
    gap: 1.5rem;
    text-decoration: none;
    position: relative;
}

    [b-5pytu3u184] .welcome-card:hover {
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    }

    [b-5pytu3u184] .welcome-card .welcome-card-img {
        width: 6.5rem;
        height: 6.5rem;
    }

    [b-5pytu3u184] .welcome-card .welcome-card-text {
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: 0em;
        text-align: center;
        text-decoration: unset;
    }

    [b-5pytu3u184] .icon-fill {
        fill: var(--bs-primary);
    }

    [b-5pytu3u184] .welcome-card .welcome-card-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bs-body-color);
        opacity: 0.05;
        border-radius: 1rem;
        z-index: -2;
    }
/* /Components/Pages/QlmActivateControl.razor.rz.scp.css */
/* Activate License Popup - inherit from DevExpress theme */
.activate-popup-body[b-hjkdi4ezym] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.activate-popup-content[b-hjkdi4ezym] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Tabs - Fixed at top */
.activate-tabs[b-hjkdi4ezym] {
    flex-shrink: 0;
    padding-left: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    width: 100%;
}

.activate-tabs .dxbl-tab[b-hjkdi4ezym] {
    padding: 12px 20px 12px 0px;
}

/* Scrollable Content Area */
.activate-content[b-hjkdi4ezym] {
    flex: 1 1 0;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
}

/* Ensure DxLoadingPanel inside activate-content doesn't break layout */
.activate-content[b-hjkdi4ezym]  .dxbl-loading-panel {
    height: auto !important;
    min-height: 0 !important;
}

.form-row-horizontal[b-hjkdi4ezym] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 10px;
}

.form-label-inline[b-hjkdi4ezym] {
    min-width: 140px;
    max-width: 140px;
    font-weight: 500;
    text-align: left;
    padding-right: 10px;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
}

.form-label-inline .required[b-hjkdi4ezym] {
    margin-left: 2px;
    font-weight: bold;
    opacity: 0.8;
}

[b-hjkdi4ezym] .form-control-inline {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Validation styling - highlight invalid fields with red border */
[b-hjkdi4ezym] .is-invalid,
[b-hjkdi4ezym] .is-invalid input,
[b-hjkdi4ezym] .is-invalid .dxbl-edit-input-container,
[b-hjkdi4ezym] .is-invalid .dxbl-editor-input-container {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

[b-hjkdi4ezym] .is-invalid:focus,
[b-hjkdi4ezym] .is-invalid input:focus,
[b-hjkdi4ezym] .is-invalid .dxbl-edit-input-container:focus-within,
[b-hjkdi4ezym] .is-invalid .dxbl-editor-input-container:focus-within {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Input with icons */
.input-with-icons[b-hjkdi4ezym] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
}

.input-with-icons[b-hjkdi4ezym]  .form-control-inline {
    flex: 1;
}

.icon-btn[b-hjkdi4ezym] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: transparent !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.icon-btn:hover[b-hjkdi4ezym] {
    opacity: 0.8;
}

.icon-btn img[b-hjkdi4ezym] {
    width: 16px;
    height: 16px;
}

.advanced-checkbox-container[b-hjkdi4ezym] {
    border: 1px solid rgba(128, 128, 128, 0.3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-item[b-hjkdi4ezym] {
    display: flex;
    align-items: center;
}

[b-hjkdi4ezym] .advanced-checkbox {
    font-size: 14px;
}

/* Footer - Fixed at Bottom */
.popup-footer[b-hjkdi4ezym] {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
}

[b-hjkdi4ezym] .footer-btn {
    min-width: 100px;
}

[b-hjkdi4ezym] .ok-btn {
    min-width: 100px;
}

[b-hjkdi4ezym] .cancel-btn {
    min-width: 100px;
}

/* Success Popup */
.success-popup-content[b-hjkdi4ezym] {
    padding: 20px;
}

.success-message[b-hjkdi4ezym] {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.6;
}

.computer-key-text[b-hjkdi4ezym] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    word-break: break-all;
    display: inline;
}

.success-popup-footer[b-hjkdi4ezym] {
    display: flex;
    justify-content: center;
    padding: 0 20px 20px 20px;
}

[b-hjkdi4ezym] .success-ok-btn {
    min-width: 100px;
}

/* Responsive adjustments */
@@media (max-width: 600px) {
    .form-row-horizontal[b-hjkdi4ezym] {
        flex-direction: column;
        gap: 6px;
    }
    
    .form-label-inline[b-hjkdi4ezym] {
        max-width: 100%;
        text-align: left;
    }
}
/* /Components/Pages/QlmPortal.razor.rz.scp.css */
/* === LAYOUT === */
.qlmportal-root[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100vh;
    overflow: hidden;
}

/* === HEADER === */
.qlmportal-header[b-jw8ss7ice5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    flex-shrink: 0;
    gap: 1rem;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%);
    border: 1px solid rgba(128, 128, 128, 0.3);
}

.hdr-left[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.hdr-logo[b-jw8ss7ice5] {
    height: 40px;
}

.hdr-right[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.hdr-username[b-jw8ss7ice5] {
    font-size: 0.9rem;
    opacity: 0.9;
    padding-right: 0.5rem;
}

.lang-select[b-jw8ss7ice5] {
    min-width: 80px;
}

/* User dropdown - remove button styling */
[b-jw8ss7ice5] .user-dd button,
[b-jw8ss7ice5] .user-dd button:hover,
[b-jw8ss7ice5] .user-dd button:focus,
[b-jw8ss7ice5] .user-dd button:active {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.user-display[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

    .user-display:hover[b-jw8ss7ice5] {
        opacity: 0.85;
    }

.user-display-icon[b-jw8ss7ice5] {
    width: 20px;
    height: 20px;
}


/* User dropdown - remove button styling */
[b-jw8ss7ice5] .user-dd button,
[b-jw8ss7ice5] .user-dd button:hover,
[b-jw8ss7ice5] .user-dd button:focus,
[b-jw8ss7ice5] .user-dd button:active {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* User dropdown menu container - prevent horizontal scrollbar */
[b-jw8ss7ice5] .user-dd .dxbl-dropdown-button-items,
[b-jw8ss7ice5] .user-dd .dxbl-dropdown,
[b-jw8ss7ice5] .user-dd .dxbl-dropdown-menu,
[b-jw8ss7ice5] .user-dd .dxbs-dropdown-menu,
[b-jw8ss7ice5] .user-dd .dropdown-menu {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    width: max-content !important;
    min-width: 150px !important;
}

/* User dropdown - remove button styling */
[b-jw8ss7ice5] .user-dd button,
[b-jw8ss7ice5] .user-dd button:hover,
[b-jw8ss7ice5] .user-dd button:focus,
[b-jw8ss7ice5] .user-dd button:active {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* User dropdown menu container - prevent horizontal scrollbar */
[b-jw8ss7ice5] .user-dd .dxbl-dropdown-button-items,
[b-jw8ss7ice5] .user-dd .dxbl-dropdown,
[b-jw8ss7ice5] .user-dd .dxbl-dropdown-menu,
[b-jw8ss7ice5] .user-dd .dxbs-dropdown-menu,
[b-jw8ss7ice5] .user-dd .dropdown-menu {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    width: max-content !important;
    min-width: 150px !important;
}

/* User dropdown menu items - ensure no overflow */
[b-jw8ss7ice5] .user-dd .dxbl-dropdown-item,
[b-jw8ss7ice5] .user-dd .dxbs-dropdown-item,
[b-jw8ss7ice5] .user-dd .dropdown-item {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.user-display[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

    .user-display:hover[b-jw8ss7ice5] {
        opacity: 0.85;
    }

.user-display-icon[b-jw8ss7ice5] {
    width: 20px;
    height: 20px;
}

.user-display-name[b-jw8ss7ice5] {
    white-space: nowrap;
}

/* === TABS === */
.qlmportal-tabs[b-jw8ss7ice5] {
    margin: 0;
    flex-shrink: 0;
}

/* === RIBBON === */
.license-ribbon[b-jw8ss7ice5] {
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-shrink: 0;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.ribbon-group[b-jw8ss7ice5] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Ribbon separator - vertical bar between button groups */
.ribbon-separator[b-jw8ss7ice5] {
    width: 1px;
    align-self: stretch; /* Make separator stretch to full height of ribbon-group */
    background-color: rgba(128, 128, 128, 0.3);
    margin: -0.35rem 0.5rem; /* Negative margin to extend beyond ribbon padding */
    flex-shrink: 0;
}

.ribbon-btn[b-jw8ss7ice5] {
    min-width: 60px;
    line-height: 1.05;
    white-space: pre-line;
    font-size: 0.7rem;
    cursor: pointer;
}

/* Ribbon button styling */
[b-jw8ss7ice5] .ribbon-btn button,
[b-jw8ss7ice5] .ribbon-btn button[type="button"],
[b-jw8ss7ice5] .ribbon-group .ribbon-btn button,
[b-jw8ss7ice5] .license-ribbon .ribbon-btn button {
    background: transparent !important;
    background-image: none !important;
    padding: 0.35rem 0.25rem !important;
    cursor: pointer !important;
}

    [b-jw8ss7ice5] .ribbon-btn button:hover {
        opacity: 0.8;
        cursor: pointer !important;
    }

    [b-jw8ss7ice5] .ribbon-btn button:active,
    [b-jw8ss7ice5] .ribbon-btn button:focus {
        opacity: 0.9;
    }

.ribbon-btn-content[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
    cursor: pointer;
}

.ribbon-icon[b-jw8ss7ice5] {
    width: 24px;
    height: 24px;
    display: block;
}

.ribbon-btn-content span[b-jw8ss7ice5] {
    text-align: center;
    line-height: 1.1;
    font-size: 0.7rem;
    white-space: pre-line;
}

[b-jw8ss7ice5] .ribbon-btn-content .dxbl-image,
[b-jw8ss7ice5] .ribbon-btn-content .dxbl-image svg {
    width: 24px !important;
    height: 24px !important;
}

/* === LICENSES LAYOUT === */
.licenses-layout[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.licenses-content[b-jw8ss7ice5] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0.5rem; /* Add gap between sidebar and grid */
}

/* === SIDEBAR === */
.licenses-sidebar[b-jw8ss7ice5] {
    width: 200px;
    min-width: 120px;
    max-width: 400px;
    padding: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.7rem;
    flex-shrink: 0;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    position: relative;
}

/* === SIDEBAR RESIZER === */
.sidebar-resizer[b-jw8ss7ice5] {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
}

    .sidebar-resizer:hover[b-jw8ss7ice5],
    .sidebar-resizer.resizing[b-jw8ss7ice5] {
        background-color: var(--dxbl-accent-bg, var(--bs-primary, #0d6efd));
        opacity: 0.5;
    }

    .sidebar-resizer[b-jw8ss7ice5]::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 30px;
        background-color: rgba(128, 128, 128, 0.4);
        border-radius: 1px;
    }

    .sidebar-resizer:hover[b-jw8ss7ice5]::before {
        background-color: var(--dxbl-accent-bg, var(--bs-primary, #0d6efd));
    }

.licenses-sidebar ul[b-jw8ss7ice5] {
    list-style: none;
    padding: 0 0.25rem;
    margin: 0;
}

.licenses-sidebar li[b-jw8ss7ice5] {
    padding: 0.3rem 0.5rem;
    margin: 0.1rem 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem;
    border-radius: 4px;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

    .licenses-sidebar li:hover[b-jw8ss7ice5] {
        background-color: rgba(128, 128, 128, 0.15);
        opacity: 1;
    }

    /* Selected/Active sidebar item - use theme accent color */
    /* DevExpress Fluent themes use --dxbl-accent-bg for the accent color */
    /* Fall back through --bs-primary (Bootstrap) to default blue */
    .licenses-sidebar li.active[b-jw8ss7ice5] {
        font-weight: 600;
        background-color: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #0d6efd)) 25%, transparent 75%);
        border-left: 3px solid var(--dxbl-accent-bg, var(--bs-primary, #0d6efd));
        border-radius: 0 4px 4px 0;
        color: var(--bs-body-color, #ffffff);
    }

        .licenses-sidebar li.active:hover[b-jw8ss7ice5] {
            background-color: color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #0d6efd)) 30%, transparent 70%);
        }

        /* Active item icon - make it brighter */
.licenses-sidebar li.active .sidebar-icon[b-jw8ss7ice5] {
    filter: brightness(1.2);
}

.licenses-sidebar .item-name[b-jw8ss7ice5] { flex: 1; }
.licenses-sidebar .item-count[b-jw8ss7ice5] { opacity: 0.7; font-size: 0.65rem; margin-left: 0.5rem; }

.sidebar-icon[b-jw8ss7ice5] { 
    width: 16px; 
    height: 16px; 
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.active-filter[b-jw8ss7ice5] { 
    padding: 0.5rem; 
    margin-bottom: 0.75rem; 
    border-radius: 4px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.7rem; 
}

.active-filter span[b-jw8ss7ice5] { font-weight: 600; }
.clear-filter-btn[b-jw8ss7ice5] { font-size: 0.65rem !important; padding: 0.15rem 0.4rem !important; }

.grouping-info[b-jw8ss7ice5] { 
    padding: 0.5rem 0.75rem; 
    margin-bottom: 0.5rem; 
    border-radius: 4px; 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    font-size: 0.75rem; 
}

.grouping-info .info-icon[b-jw8ss7ice5] { font-weight: bold; font-size: 1rem; }

 /*=== GRID === */
.licenses-grid[b-jw8ss7ice5] { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    min-width: 0; 
    min-height: 0;
    overflow: hidden; 
    padding: 0.5rem; 
    position: relative;
    max-width: 100%;
}

.licenses-datagrid[b-jw8ss7ice5] {
    width: 100%;
    height: 100% !important;
    max-height: calc(100vh - 280px) !important; /* Responsive max-height with extra space for filter builder */
    min-height: 400px !important; /* Minimum height to ensure usability */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

 /*Data View Grid specific styling */
.data-view-datagrid[b-jw8ss7ice5] {
    width: 100%;
    height: 100% !important;
    max-height: calc(100vh - 550px) !important; /* Same as licenses but with more offset for analytics container */
    min-height: 200px !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

 /*Grid structure */
[b-jw8ss7ice5] .licenses-datagrid {
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: calc(100vh - 280px) !important; /* Responsive max-height with extra space for filter builder */
    min-height: 400px !important; /* Minimum height to ensure usability */
    height: 100% !important;
}

[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-table { 
    table-layout: auto !important;
    width: 100% !important;
}

[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-header { 
    font-weight: 600; 
    white-space: nowrap; 
    flex-shrink: 0;
}

[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-header-content { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

 /*Force scrollbar on grid content area - this is the data rows container */
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-content,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-content,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-table-container,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-table-container { 
    flex: 1 1 auto !important;
    min-height: 0 !important;  /*Critical: Allow content to shrink below natural size */
    max-height: 100% !important;
    overflow-y: scroll !important;  
    overflow-x: scroll !important;  
    scrollbar-width: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

 /*Ensure scrollbars are always visible (not hidden) on WebKit browsers */
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-content::-webkit-scrollbar,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-content::-webkit-scrollbar,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-table-container::-webkit-scrollbar,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-table-container::-webkit-scrollbar {
    width: 12px !important;  
    height: 12px !important;  
    display: block !important;  
}
 
 /*Scrollbar track styling */
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-content::-webkit-scrollbar-track,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-content::-webkit-scrollbar-track,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-table-container::-webkit-scrollbar-track,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-table-container::-webkit-scrollbar-track {
    background-color: rgba(128, 128, 128, 0.1) !important;
    border-radius: 4px !important;
}

 /*Scrollbar thumb (draggable part) styling */
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-content::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-content::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-table-container::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-table-container::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.4) !important;
    border-radius: 4px !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}
 /*Scrollbar thumb hover state */
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-content::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-content::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-table-container::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-table-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.6) !important;
}

    /*Scrollbar corner (where horizontal and vertical scrollbars meet) */
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-content::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-content::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-table-container::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-table-container::-webkit-scrollbar-corner {
    background-color: rgba(128, 128, 128, 0.1) !important;
}
 
 /*Prevent grid from expanding beyond container */
    [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid,
    [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid {
        max-height: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Ensure grid wrapper respects height */
    [b-jw8ss7ice5] .licenses-datagrid > div,
    [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-container,
    [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-container {
        max-height: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Override: Force pager itself to use row direction */
    [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-pager,
    [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-pager {
        flex-direction: row !important;
        flex-shrink: 0 !important; /* Prevent pager from shrinking */
        height: auto !important; /* Let pager use its natural height */
    }


    /* Grid cells */
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-header-cell,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-data-cell,
[b-jw8ss7ice5] .licenses-datagrid th,
[b-jw8ss7ice5] .licenses-datagrid td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
}
    
 /*Target the virtual scroll container specifically */
 /*
    ::deep .licenses-datagrid .dxbl-grid-scroll-viewer,
    ::deep .licenses-datagrid .dxbs-grid-scroll-viewer,
    ::deep .licenses-datagrid [class*="scroll-viewer"],
    ::deep .licenses-datagrid [class*="ScrollViewer"] {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }*/
 
[b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-filter-row-cell,
[b-jw8ss7ice5] .licenses-datagrid .dxbs-filter-row-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
}

    /* ===  LICENSES & CUSTOMERS GRID - FILTER ROW STYLING (Same as Data View) === */

    /* Licenses & Customers Grid - Filter Row Background & Padding */
    [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-filter-row,
    [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-filter-row,
    [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-filter-row td,
    [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-filter-row td,
    [b-jw8ss7ice5] .licenses-datagrid .dxbs-filter-row-cell,
    [b-jw8ss7ice5] .licenses-datagrid .dxbl-filter-row-cell {
        background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%) !important;
        padding: 0.4rem 0.5rem !important;
        position: relative !important;
    }

        /* Licenses & Customers Grid - Filter inputs */
        [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-filter-row input,
        [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-filter-row input,
        [b-jw8ss7ice5] .licenses-datagrid .dxbs-filter-row-cell input,
        [b-jw8ss7ice5] .licenses-datagrid .dxbl-filter-row-cell input {
            background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 85%, black 15%) !important;
            border: 1px solid color-mix(in srgb, var(--bs-border-color, rgba(128, 128, 128, 0.5)) 60%, transparent 40%) !important;
            border-radius: 3px !important;
            padding: 0.35rem 0.5rem !important;
            color: var(--bs-body-color, #e0e0e0) !important;
            font-size: 0.75rem !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

            [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-filter-row input::placeholder,
            [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-filter-row input::placeholder {
                color: color-mix(in srgb, var(--bs-secondary-color, #adb5bd) 70%, transparent 30%) !important;
            }

            [b-jw8ss7ice5] .licenses-datagrid .dxbs-grid-filter-row input:focus,
            [b-jw8ss7ice5] .licenses-datagrid .dxbl-grid-filter-row input:focus {
                border-color: var(--bs-primary, #0d6efd) !important;
                outline: none !important;
                background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 90%, white 10%) !important;
            }

/* Show DevExpress native filter icons for Data View Grid */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"],
[b-jw8ss7ice5] .data_view_datsagrid .dxbs_filter_row_cell button[aria-label*="calendar"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 0.7 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0.25rem !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Position calendar and spin buttons absolutely on the right for Data View */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"] {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

    /* Hover state for icons - Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button:hover,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button:hover,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"]:hover,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"]:hover {
        opacity: 1 !important;
    }

/* Style DevExpress filter icons - Data View */
[b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button svg,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button .dxbl-image,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-spin-button svg,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_spin_button .dxbl-image {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8 !important;
}

/* Adjust input padding to make room for icons - Data View */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-container,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-container,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell .dxbl-editor-container,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_filter_row_cell .dxbl-editor-container {
    position: relative !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-input-container,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row .dxbl-editor-input-container {
    padding-right: 24px !important;
}

/* Show number input spin buttons (browser native) - Data View */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-outer-spin-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: auto !important;
    display: block !important;
    opacity: 0.7 !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"],
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"] {
    -moz-appearance: auto !important;
}

/* === FILTER === */
.filter-container[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 85%, black 15%);
}

.filter-header[b-jw8ss7ice5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.filter-title[b-jw8ss7ice5] {
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-actions[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-reset-btn[b-jw8ss7ice5],
.filter-apply-btn[b-jw8ss7ice5] {
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
}

.filter-reset-btn[b-jw8ss7ice5] {
    background-color: transparent;
    color: var(--bs-danger, #dc3545);
}

.filter-apply-btn[b-jw8ss7ice5] {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* Filter input styling */
.filter-input[b-jw8ss7ice5] {
    padding: 0.35rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, rgba(128, 128, 128, 0.5)) 60%, transparent 40%);
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 85%, black 15%);
    color: var(--bs-body-color, #e0e0e0);
    font-size: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

    .filter-input[b-jw8ss7ice5]::placeholder {
        color: color-mix(in srgb, var(--bs-secondary-color, #adb5bd) 70%, transparent 30%);
    }

/* Date range picker specific styling */
.date-range-picker[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .date-range-picker input[b-jw8ss7ice5] {
        flex: 1;
    }

    /* Date range picker calendar icon */
    .date-range-picker .dxbl-editor-dropdown-button[b-jw8ss7ice5] {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

        .date-range-picker .dxbl-editor-dropdown-button:hover[b-jw8ss7ice5] {
            opacity: 1;
        }

/* Hover state for filter buttons */
.filter-reset-btn:hover[b-jw8ss7ice5],
.filter-apply-btn:hover[b-jw8ss7ice5] {
    opacity: 0.8;
}

/* === PAGINATION === */
.grid-footer[b-jw8ss7ice5] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 0;
    gap: 1rem;
    flex-shrink: 0;
    z-index: 100;
}

.pager-info[b-jw8ss7ice5] { font-size: 0.75rem; }

[b-jw8ss7ice5] .dxbl-grid-pager,
[b-jw8ss7ice5] .dxbs-grid-pager,
[b-jw8ss7ice5] .dxbl-grid-pager *,
[b-jw8ss7ice5] .dxbs-grid-pager * {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    vertical-align: middle !important;
}

[b-jw8ss7ice5] .dxbl-grid-pager,
[b-jw8ss7ice5] .dxbs-grid-pager {
    justify-content: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
}

    /* Force ALL children and descendants to be inline */
    [b-jw8ss7ice5] .dxbl-grid-pager > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > *,
    [b-jw8ss7ice5] .dxbl-grid-pager > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > *,
    [b-jw8ss7ice5] .dxbl-grid-pager > * > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > * > *,
    [b-jw8ss7ice5] .dxbl-grid-pager > * > * > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > * > * > * {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

/* Page size selector - push to right */
[b-jw8ss7ice5] .dxbl-grid-pager-page-size,
[b-jw8ss7ice5] .dxbs-grid-pager-page-size,
[b-jw8ss7ice5] [class*="pager-page-size"],
[b-jw8ss7ice5] [class*="page-size-selector"],
[b-jw8ss7ice5] [class*="PageSize"] {
    margin-left: auto !important;
}

/* === PLACEHOLDER === */
.placeholder[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.2rem;
    opacity: 0.7;
}

/* === FILTER DESCRIPTION === */
.filter-description-text[b-jw8ss7ice5] {
    font-size: 13px;
    font-weight: 500;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5b9bd5)) !important;
}

/* Advanced Filter Icon Button - Remove ALL padding */
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"],
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] button,
[b-jw8ss7ice5] button[title="Advanced Filter"],
[b-jw8ss7ice5] [title="Advanced Filter"].dxbl-btn,
[b-jw8ss7ice5] [title="Advanced Filter"] .dxbl-btn-content {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

    /* Ensure the image inside takes full space */
    [b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] img,
    [b-jw8ss7ice5] button[title="Advanced Filter"] img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

[b-jw8ss7ice5] .filter-clear-btn,
[b-jw8ss7ice5] .filter-clear-btn button {
    min-width: 80px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
}

/* === DEBUG INFO === */
.grouping-active-message[b-jw8ss7ice5] {
    font-weight: 600;
    margin-left: 0.5rem;
}

.debug-message[b-jw8ss7ice5] {
    font-size: 0.7rem;
    opacity: 0.8;
    font-family: monospace;
}

/* === ACTIVATION LOG GRID === */
.activation-log-grid[b-jw8ss7ice5] {
    width: 100%;
    max-width: 100%;
    background: inherit !important;
}

/* Make activation log grid respect the detail row container background */
[b-jw8ss7ice5] .activation-log-grid {
    background: inherit !important;
}

    [b-jw8ss7ice5] .activation-log-grid .dxbs-grid,
    [b-jw8ss7ice5] .activation-log-grid .dxbl-grid {
        background: inherit !important;
    }

    /* Activation log grid - auto-size table to content */
    [b-jw8ss7ice5] .activation-log-grid table {
        table-layout: auto !important;
        width: auto !important;
    }

    /* Make header content inherit text color too */
    [b-jw8ss7ice5] .activation-log-grid .dxbl-grid-header-content,
    [b-jw8ss7ice5] .activation-log-grid .dxbs-grid-header-content {
        background-color: transparent !important;
        background: transparent !important;
        color: inherit !important;
    }

/* === ANALYTICS PAGE === */
.analytics-container[b-jw8ss7ice5] {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 15px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.analytics-filters[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 15px 20px;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.filter-group[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label[b-jw8ss7ice5] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin: 0;
}

.filter-dropdown[b-jw8ss7ice5] {
    min-width: 200px;
}

.analytics-tabs[b-jw8ss7ice5] {
    margin: 0;
    flex-shrink: 0;
}

.analytics-content[b-jw8ss7ice5] {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    border: none;
    border-radius: 0;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

/* Style the analytics sub-tabs */
[b-jw8ss7ice5] .analytics-tabs .dxbl-tab-button,
[b-jw8ss7ice5] .analytics-tabs .dxbs-tab-button,
[b-jw8ss7ice5] .analytics-tabs button {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

[b-jw8ss7ice5] .analytics-tabs .dxbl-tab-active,
[b-jw8ss7ice5] .analytics-tabs .dxbs-tab-active,
[b-jw8ss7ice5] .analytics-tabs .active {
    font-weight: 600;
}

/* === ANALYTICS SUMMARY BOXES === */
.analytics-summary-boxes[b-jw8ss7ice5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    padding: 0 5px;
}

.summary-box[b-jw8ss7ice5] {
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 130px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .summary-box:hover[b-jw8ss7ice5] {
        background-color: color-mix(in srgb, var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e)) 85%, var(--bs-primary, currentColor) 15%);
        border-color: var(--bs-primary, var(--bs-border-color, rgba(128, 128, 128, 0.5)));
        transform: scale(1.03);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

.summary-box-header[b-jw8ss7ice5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 15px;
}

.summary-box-title[b-jw8ss7ice5] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color, currentColor);
    opacity: 0.95;
    letter-spacing: 0.3px;
}

.summary-box-icon[b-jw8ss7ice5] {
    width: 32px;
    height: 32px;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.summary-box:hover .summary-box-icon[b-jw8ss7ice5] {
    opacity: 1;
    transform: scale(1.1);
}

.summary-box-value[b-jw8ss7ice5] {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--bs-body-color, currentColor);
    line-height: 1;
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 992px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: 1fr;
    }
}

/* === ANALYTICS CHARTS === */
.analytics-charts-row[b-jw8ss7ice5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.analytics-chart-container[b-jw8ss7ice5] {
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 350px;
    overflow: hidden;
    width: 100%;
}

.chart-header[b-jw8ss7ice5] {
    padding: 15px 20px;
    border-bottom: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
}

.chart-title[b-jw8ss7ice5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, currentColor);
}

.chart-body[b-jw8ss7ice5] {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 100%;
}

/* DevExpress Chart styling */
[b-jw8ss7ice5] .chart-body .dxc-chart,
[b-jw8ss7ice5] .chart-body svg {
    width: 100% !important;
    height: 100% !important;
}

.chart-placeholder[b-jw8ss7ice5] {
    text-align: center;
    opacity: 0.6;
}

    .chart-placeholder p[b-jw8ss7ice5] {
        margin: 8px 0;
        font-size: 0.9rem;
    }

.chart-hint[b-jw8ss7ice5] {
    font-size: 0.75rem !important;
    opacity: 0.7;
    font-style: italic;
}

/* Responsive chart layout */
@media (max-width: 992px) {
    .analytics-charts-row[b-jw8ss7ice5] {
        grid-template-columns: 1fr;
    }
}

/* === CHART LEGEND COLOR BOX === */
.chart-legend-color-box[b-jw8ss7ice5] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
    /* Color set via inline style using DevExpress theme variable */
}

/* === PIE CHART LEGEND MARKERS === */
/* Make DevExpress pie chart legend markers smaller and more square */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker,
[b-jw8ss7ice5] .dxc-legend-item-marker,
[b-jw8ss7ice5] .analytics-chart-container .dxc-legend .dxc-legend-item-marker {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

    /* Target the SVG rect element inside the marker */
    [b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker rect,
    [b-jw8ss7ice5] .dxc-legend-item-marker rect {
        width: 12px !important;
        height: 12px !important;
    }

/* Target DevExpress Blazor specific legend icon class */
[b-jw8ss7ice5] .dxbl-chart-legend-def-icon,
[b-jw8ss7ice5] rect.dxbl-chart-legend-def-icon,
[b-jw8ss7ice5] svg .dxbl-chart-legend-def-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

/* Ensure the parent SVG container of the legend icon is also constrained */
[b-jw8ss7ice5] .dxbl-chart-legend-icon,
[b-jw8ss7ice5] svg.dxbl-chart-legend-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

/* Ensure the marker container doesn't expand */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker,
[b-jw8ss7ice5] .dxc-legend-item-marker {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Adjust legend item spacing */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item,
[b-jw8ss7ice5] .dxc-legend-item,
[b-jw8ss7ice5] .dxbl-chart-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
}

    /* Make sure text is aligned with markers */
    [b-jw8ss7ice5] .dxc-legend .dxc-legend-item text,
    [b-jw8ss7ice5] .dxc-legend-item text,
    [b-jw8ss7ice5] .dxbl-chart-legend-text {
        vertical-align: middle !important;
    }


/* === CHART LEGEND BORDER === */
/* Apply border to all DevExpress chart legends */
[b-jw8ss7ice5] .dxc-legend,
[b-jw8ss7ice5] .dxbl-chart-legend,
[b-jw8ss7ice5] svg[class*="legend"] > rect:first-child {
    stroke: rgba(128, 128, 128, 0.3) !important;
    stroke-width: 1 !important;
}

/* Alternative approach - target the legend background */
[b-jw8ss7ice5] .dxc-legend-background,
[b-jw8ss7ice5] .dxbl-chart-legend-background {
    stroke: rgba(128, 128, 0.3) !important;
    stroke-width: 1 !important;
}

/* Target legends positioned outside (for DxChart bar charts) */

[b-jw8ss7ice5] .dxbl-chart-with-legend-container .dxbl-chart-legend {
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 4px !important;
}

/* === DATA VIEW TAB === */
.data-view-container[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.data-view-toolbar[b-jw8ss7ice5] {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem;
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.data-view-grid-container[b-jw8ss7ice5] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

/* Data View Grid structure with responsive height constraints */
[b-jw8ss7ice5] .data-view-datagrid {
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: calc(100vh - 550px) !important; /* Same as licenses but with more offset for analytics container */
    min-height: 200px !important;
    height: 100% !important;
}

    /* Data View Grid - table styling */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table {
        table-layout: auto !important;
        width: 100% !important;
    }

    /* Data View Grid - header styling */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header {
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }

    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Force scrollbar on Data View grid content area - this is the data rows container */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container {
        flex: 1 1 auto !important;
        min-height: 0 !important; /* Critical: Allow content to shrink below natural size */
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
    }

    /* Prevent Data View grid from expanding beyond container */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid {
        max-height: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Ensure Data View grid wrapper respects height */
    [b-jw8ss7ice5] .data-view-datagrid > div,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-container {
        max-height: 100% !important;
        height: 100% !important; /* Force container to take full available height */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Override: Force Data View pager itself to use row direction */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-pager,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-pager {
        flex-direction: row !important;
        flex-shrink: 0 !important; /* Prevent pager from shrinking */
        height: auto !important; /* Let pager use its natural height */
    }


/* Grid cells */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-data-cell,
[b-jw8ss7ice5] .data-view-datagrid th,
[b-jw8ss7ice5] .data-view-datagrid td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
}

/* Data View Grid filter row cells */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Data View Grid - Filter Row Styling */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row td,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row td,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-filter-row-cell {
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%) !important;
    padding: 0.4rem 0.5rem !important;
    position: relative !important;
}

    /* Data View Grid - Filter inputs */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-filter-row-cell input {
        background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 85%, black 15%) !important;
        border: 1px solid color-mix(in srgb, var(--bs-border-color, rgba(128, 128, 128, 0.5)) 60%, transparent 40%) !important;
        border-radius: 3px !important;
        padding: 0.35rem 0.5rem !important;
        color: var(--bs-body-color, #e0e0e0) !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input::placeholder,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input::placeholder {
            color: color-mix(in srgb, var(--bs-secondary-color, #adb5bd) 70%, transparent 30%) !important;
        }

        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input:focus,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input:focus {
            border-color: var(--bs-primary, #0d6efd) !important;
            outline: none !important;
            background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 90%, white 10%) !important;
        }

    /* Show DevExpress native filter icons for Data View Grid */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbs_filter_row_cell button[aria-label*="calendar"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.7 !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0.25rem !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Position calendar and spin buttons absolutely on the right for Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"] {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

        /* Hover state for icons - Data View */
        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"]:hover,
        [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"]:hover {
            opacity: 1 !important;
        }

/* Style DevExpress filter icons - Data View */
[b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button svg,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button .dxbl-image,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-spin-button svg,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_spin_button .dxbl-image {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8 !important;
}

/* Adjust input padding to make room for icons - Data View */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-container,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-container,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell .dxbl-editor-container,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_filter_row_cell .dxbl-editor-container {
    position: relative !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-input-container,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row .dxbl-editor-input-container {
    padding-right: 24px !important;
}

/* Show number input spin buttons (browser native) - Data View */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-outer-spin-button,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: auto !important;
    display: block !important;
    opacity: 0.7 !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"],
[b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"] {
    -moz-appearance: auto !important;
}

/* === FILTER === */
.filter-container[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 85%, black 15%);
}

.filter-header[b-jw8ss7ice5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.filter-title[b-jw8ss7ice5] {
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-actions[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-reset-btn[b-jw8ss7ice5],
.filter-apply-btn[b-jw8ss7ice5] {
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
}

.filter-reset-btn[b-jw8ss7ice5] {
    background-color: transparent;
    color: var(--bs-danger, #dc3545);
}

.filter-apply-btn[b-jw8ss7ice5] {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* Filter input styling */
.filter-input[b-jw8ss7ice5] {
    padding: 0.35rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, rgba(128, 128, 128, 0.5)) 60%, transparent 40%);
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 85%, black 15%);
    color: var(--bs-body-color, #e0e0e0);
    font-size: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

    .filter-input[b-jw8ss7ice5]::placeholder {
        color: color-mix(in srgb, var(--bs-secondary-color, #adb5bd) 70%, transparent 30%);
    }

/* Date range picker specific styling */
.date-range-picker[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .date-range-picker input[b-jw8ss7ice5] {
        flex: 1;
    }

    /* Date range picker calendar icon */
    .date-range-picker .dxbl-editor-dropdown-button[b-jw8ss7ice5] {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

        .date-range-picker .dxbl-editor-dropdown-button:hover[b-jw8ss7ice5] {
            opacity: 1;
        }

/* Hover state for filter buttons */
.filter-reset-btn:hover[b-jw8ss7ice5],
.filter-apply-btn:hover[b-jw8ss7ice5] {
    opacity: 0.8;
}

/* === PAGINATION === */
.grid-footer[b-jw8ss7ice5] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 0;
    gap: 1rem;
    flex-shrink: 0;
    z-index: 100;
}

.pager-info[b-jw8ss7ice5] { font-size: 0.75rem; }

[b-jw8ss7ice5] .dxbl-grid-pager,
[b-jw8ss7ice5] .dxbs-grid-pager,
[b-jw8ss7ice5] .dxbl-grid-pager *,
[b-jw8ss7ice5] .dxbs-grid-pager * {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    vertical-align: middle !important;
}

[b-jw8ss7ice5] .dxbl-grid-pager,
[b-jw8ss7ice5] .dxbs-grid-pager {
    justify-content: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
}

    /* Force ALL children and descendants to be inline */
[b-jw8ss7ice5] .dxbl-grid-pager > *,
[b-jw8ss7ice5] .dxbs-grid-pager > *,
[b-jw8ss7ice5] .dxbl-grid-pager > * > *,
[b-jw8ss7ice5] .dxbs-grid-pager > * > *,
[b-jw8ss7ice5] .dxbl-grid-pager > * > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > * > *,
    [b-jw8ss7ice5] .dxbl-grid-pager > * > * > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > * > * > * {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

/* Page size selector - push to right */
[b-jw8ss7ice5] .dxbl-grid-pager-page-size,
[b-jw8ss7ice5] .dxbs-grid-pager-page-size,
[b-jw8ss7ice5] [class*="pager-page-size"],
[b-jw8ss7ice5] [class*="page-size-selector"],
[b-jw8ss7ice5] [class*="PageSize"] {
    margin-left: auto !important;
}

/* === PLACEHOLDER === */
.placeholder[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.2rem;
    opacity: 0.7;
}

/* === FILTER DESCRIPTION === */
.filter-description-text[b-jw8ss7ice5] {
    font-size: 13px;
    font-weight: 500;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-primary, #5b9bd5) !important;
}

/* Advanced Filter Icon Button - Remove ALL padding */
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"],
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] button,
[b-jw8ss7ice5] button[title="Advanced Filter"],
[b-jw8ss7ice5] [title="Advanced Filter"].dxbl-btn,
[b-jw8ss7ice5] [title="Advanced Filter"] .dxbl-btn-content {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

    /* Ensure the image inside takes full space */
    [b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] img,
    [b-jw8ss7ice5] button[title="Advanced Filter"] img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

[b-jw8ss7ice5] .filter-clear-btn,
[b-jw8ss7ice5] .filter-clear-btn button {
    min-width: 80px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
}

/* === DEBUG INFO === */
.grouping-active-message[b-jw8ss7ice5] {
    font-weight: 600;
    margin-left: 0.5rem;
}

.debug-message[b-jw8ss7ice5] {
    font-size: 0.7rem;
    opacity: 0.8;
    font-family: monospace;
}

/* === ACTIVATION LOG GRID === */
.activation-log-grid[b-jw8ss7ice5] {
    width: 100%;
    max-width: 100%;
    background: inherit !important;
}

/* Make activation log grid respect the detail row container background */
[b-jw8ss7ice5] .activation-log-grid {
    background: inherit !important;
}

    [b-jw8ss7ice5] .activation-log-grid .dxbs-grid,
    [b-jw8ss7ice5] .activation-log-grid .dxbl-grid {
        background: inherit !important;
    }

    /* Activation log grid - auto-size table to content */
    [b-jw8ss7ice5] .activation-log-grid table {
        table-layout: auto !important;
        width: auto !important;
    }

    /* Make header content inherit text color too */
    [b-jw8ss7ice5] .activation-log-grid .dxbl-grid-header-content,
    [b-jw8ss7ice5] .activation-log-grid .dxbs-grid-header-content {
        background-color: transparent !important;
        background: transparent !important;
        color: inherit !important;
    }

/* === ANALYTICS PAGE === */
.analytics-container[b-jw8ss7ice5] {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 15px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.analytics-filters[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 15px 20px;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.filter-group[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label[b-jw8ss7ice5] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin: 0;
}

.filter-dropdown[b-jw8ss7ice5] {
    min-width: 200px;
}

.analytics-tabs[b-jw8ss7ice5] {
    margin: 0;
    flex-shrink: 0;
}

.analytics-content[b-jw8ss7ice5] {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    border: none;
    border-radius: 0;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

/* Style the analytics sub-tabs */
[b-jw8ss7ice5] .analytics-tabs .dxbl-tab-button,
[b-jw8ss7ice5] .analytics-tabs .dxbs-tab-button,
[b-jw8ss7ice5] .analytics-tabs button {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

[b-jw8ss7ice5] .analytics-tabs .dxbl-tab-active,
[b-jw8ss7ice5] .analytics-tabs .dxbs-tab-active,
[b-jw8ss7ice5] .analytics-tabs .active {
    font-weight: 600;
}

/* === ANALYTICS SUMMARY BOXES === */
.analytics-summary-boxes[b-jw8ss7ice5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    padding: 0 5px;
}

.summary-box[b-jw8ss7ice5] {
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 130px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .summary-box:hover[b-jw8ss7ice5] {
        background-color: color-mix(in srgb, var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e)) 85%, var(--bs-primary, currentColor) 15%);
        border-color: var(--bs-primary, var(--bs-border-color, rgba(128, 128, 128, 0.5)));
        transform: scale(1.03);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

.summary-box-header[b-jw8ss7ice5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 15px;
}

.summary-box-title[b-jw8ss7ice5] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color, currentColor);
    opacity: 0.95;
    letter-spacing: 0.3px;
}

.summary-box-icon[b-jw8ss7ice5] {
    width: 32px;
    height: 32px;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.summary-box:hover .summary-box-icon[b-jw8ss7ice5] {
    opacity: 1;
    transform: scale(1.1);
}

.summary-box-value[b-jw8ss7ice5] {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--bs-body-color, currentColor);
    line-height: 1;
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 992px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: 1fr;
    }
}

/* === ANALYTICS CHARTS === */
.analytics-charts-row[b-jw8ss7ice5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.analytics-chart-container[b-jw8ss7ice5] {
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 350px;
    overflow: hidden;
    width: 100%;
}

.chart-header[b-jw8ss7ice5] {
    padding: 15px 20px;
    border-bottom: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
}

.chart-title[b-jw8ss7ice5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, currentColor);
}

.chart-body[b-jw8ss7ice5] {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 100%;
}

/* DevExpress Chart styling */
[b-jw8ss7ice5] .chart-body .dxc-chart,
[b-jw8ss7ice5] .chart-body svg {
    width: 100% !important;
    height: 100% !important;
}

.chart-placeholder[b-jw8ss7ice5] {
    text-align: center;
    opacity: 0.6;
}

    .chart-placeholder p[b-jw8ss7ice5] {
        margin: 8px 0;
        font-size: 0.9rem;
    }

.chart-hint[b-jw8ss7ice5] {
    font-size: 0.75rem !important;
    opacity: 0.7;
    font-style: italic;
}

/* Responsive chart layout */
@media (max-width: 992px) {
    .analytics-charts-row[b-jw8ss7ice5] {
        grid-template-columns: 1fr;
    }
}

/* === CHART LEGEND COLOR BOX === */
.chart-legend-color-box[b-jw8ss7ice5] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
    /* Color set via inline style using DevExpress theme variable */
}

/* === PIE CHART LEGEND MARKERS === */
/* Make DevExpress pie chart legend markers smaller and more square */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker,
[b-jw8ss7ice5] .dxc-legend-item-marker,
[b-jw8ss7ice5] .analytics-chart-container .dxc-legend .dxc-legend-item-marker {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

    /* Target the SVG rect element inside the marker */
    [b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker rect,
    [b-jw8ss7ice5] .dxc-legend-item-marker rect {
        width: 12px !important;
        height: 12px !important;
    }

/* Target DevExpress Blazor specific legend icon class */
[b-jw8ss7ice5] .dxbl-chart-legend-def-icon,
[b-jw8ss7ice5] rect.dxbl-chart-legend-def-icon,
[b-jw8ss7ice5] svg .dxbl-chart-legend-def-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

/* Ensure the parent SVG container of the legend icon is also constrained */
[b-jw8ss7ice5] .dxbl-chart-legend-icon,
[b-jw8ss7ice5] svg.dxbl-chart-legend-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

/* Ensure the marker container doesn't expand */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker,
[b-jw8ss7ice5] .dxc-legend-item-marker {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Adjust legend item spacing */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item,
[b-jw8ss7ice5] .dxc-legend-item,
[b-jw8ss7ice5] .dxbl-chart-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
}

    /* Make sure text is aligned with markers */
    [b-jw8ss7ice5] .dxc-legend .dxc-legend-item text,
    [b-jw8ss7ice5] .dxc-legend-item text,
    [b-jw8ss7ice5] .dxbl-chart-legend-text {
        vertical-align: middle !important;
    }


/* === CHART LEGEND BORDER === */
/* Apply border to all DevExpress chart legends */
[b-jw8ss7ice5] .dxc-legend,
[b-jw8ss7ice5] .dxbl-chart-legend,
[b-jw8ss7ice5] svg[class*="legend"] > rect:first-child {
    stroke: rgba(128, 128, 128, 0.3) !important;
    stroke-width: 1 !important;
}

/* Alternative approach - target the legend background */
[b-jw8ss7ice5] .dxc-legend-background,
[b-jw8ss7ice5] .dxbl-chart-legend-background {
    stroke: rgba(128, 128, 0.3) !important;
    stroke-width: 1 !important;
}

/* Target legends positioned outside (for DxChart bar charts) */

[b-jw8ss7ice5] .dxbl-chart-with-legend-container .dxbl-chart-legend {
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 4px !important;
}

/* === DATA VIEW TAB === */
.data-view-container[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.data-view-toolbar[b-jw8ss7ice5] {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem;
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.data-view-grid-container[b-jw8ss7ice5] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

/* Data View Grid structure with responsive height constraints */
[b-jw8ss7ice5] .data-view-datagrid {
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: calc(100vh - 550px) !important; /* Same as licenses but with more offset for analytics container */
    min-height: 200px !important;
    height: 100% !important;
}

    /* Data View Grid - table styling */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table {
        table-layout: auto !important;
        width: 100% !important;
    }

    /* Data View Grid - header styling */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header {
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }

    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Force scrollbar on Data View grid content area - this is the data rows container */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container { 
    flex: 1 1 auto !important;
    min-height: 0 !important;  /*Critical: Allow content to shrink below natural size */
    max-height: 100% !important;
    overflow-y: scroll !important;  
    overflow-x: scroll !important;  
    scrollbar-width: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

 /*Ensure scrollbars are always visible for Data View Grid */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar {
    width: 12px !important;  
    height: 12px !important;  
    display: block !important;  
}
 
 /*Scrollbar track styling */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-track,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-track,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-track,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-track {
    background-color: rgba(128, 128, 128, 0.1) !important;
    border-radius: 4px !important;
}

 /*Scrollbar thumb (draggable part) styling */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.4) !important;
    border-radius: 4px !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.6) !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-corner {
    background-color: rgba(128, 128, 128, 0.1) !important;
}
 
 /*Prevent grid from expanding beyond container */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid {
        max-height: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Ensure Data View grid wrapper respects height */
    [b-jw8ss7ice5] .data-view-datagrid > div,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-container {
        max-height: 100% !important;
        height: 100% !important; /* Force container to take full available height */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Override: Force Data View pager itself to use row direction */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-pager,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-pager {
        flex-direction: row !important;
        flex-shrink: 0 !important; /* Prevent pager from shrinking */
        height: auto !important; /* Let pager use its natural height */
    }

    /* Force Data View data area to fill remaining space after headers/filters/pager */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content {
    flex: 1 1 auto !important;  /*Fill available space */
    overflow-y: scroll !important;  /*Always show vertical scrollbar */
    overflow-x: scroll !important;  /*Always show horizontal scrollbar */
}

/* Grid cells */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-data-cell,
[b-jw8ss7ice5] .data-view-datagrid th,
[b-jw8ss7ice5] .data-view-datagrid td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
}

/* Data View Grid filter row cells */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Data View Grid - Filter Row Styling */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row td,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row td,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-filter-row-cell {
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%) !important;
    padding: 0.4rem 0.5rem !important;
    position: relative !important;
}

    /* Data View Grid - Filter inputs */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-filter-row-cell input {
        background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 85%, black 15%) !important;
        border: 1px solid color-mix(in srgb, var(--bs-border-color, rgba(128, 128, 128, 0.5)) 60%, transparent 40%) !important;
        border-radius: 3px !important;
        padding: 0.35rem 0.5rem !important;
        color: var(--bs-body-color, #e0e0e0) !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input::placeholder,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input::placeholder {
            color: color-mix(in srgb, var(--bs-secondary-color, #adb5bd) 70%, transparent 30%) !important;
        }

        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input:focus,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input:focus {
            border-color: var(--bs-primary, #0d6efd) !important;
            outline: none !important;
            background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 90%, white 10%) !important;
        }

    /* Show DevExpress native filter icons for Data View Grid */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.7 !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0.25rem !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Position calendar and spin buttons absolutely on the right for Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"] {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

        /* Hover state for icons - Data View */
        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"]:hover,
        [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"]:hover {
            opacity: 1 !important;
        }

    /* Style DevExpress filter icons - Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button svg,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button .dxbl-image,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-spin-button svg,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_spin_button .dxbl-image {
        width: 14px !important;
        height: 14px !important;
        opacity: 0.8 !important;
    }

    /* Adjust input padding to make room for icons - Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell .dxbl-editor-container,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_filter_row_cell .dxbl-editor-container {
        position: relative !important;
    }

    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-input-container,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row .dxbl-editor-input-container {
        padding-right: 24px !important;
    }

    /* Show number input spin buttons (browser native) - Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-outer-spin-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: auto !important;
        display: block !important;
        opacity: 0.7 !important;
    }

    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"] {
        -moz-appearance: auto !important;
    }

/* Data View Toolbar - Horizontal Button Style */
.data-view-toolbar-horizontal[b-jw8ss7ice5] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%);
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    align-items: center;
}

/* Data View Button Styling */
[b-jw8ss7ice5] .data-view-btn,
[b-jw8ss7ice5] .data-view-btn button {
    min-width: 100px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    height: 32px !important;
    border-radius: 3px !important;
}

[b-jw8ss7ice5] .data-view-toolbar-horizontal .dxbl-btn,
[b-jw8ss7ice5] .data-view-toolbar-horizontal button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    color: var(--bs-body-color, #e0e0e0) !important;
    transition: all 0.15s ease !important;
}

    [b-jw8ss7ice5] .data-view-toolbar-horizontal .dxbl-btn:hover,
    [b-jw8ss7ice5] .data-view-toolbar-horizontal button:hover {
        background-color: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(128, 128, 128, 0.5) !important;
    }

    [b-jw8ss7ice5] .data-view-toolbar-horizontal .dxbl-btn:active,
    [b-jw8ss7ice5] .data-view-toolbar-horizontal button:active {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
/* === FILTER === */
.filter-container[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 85%, black 15%);
}

.filter-header[b-jw8ss7ice5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.filter-title[b-jw8ss7ice5] {
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-actions[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-reset-btn[b-jw8ss7ice5],
.filter-apply-btn[b-jw8ss7ice5] {
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
}

.filter-reset-btn[b-jw8ss7ice5] {
    background-color: transparent;
    color: var(--bs-danger, #dc3545);
}

.filter-apply-btn[b-jw8ss7ice5] {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* Filter input styling */
.filter-input[b-jw8ss7ice5] {
    padding: 0.35rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, rgba(128, 128, 128, 0.5)) 60%, transparent 40%);
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 85%, black 15%);
    color: var(--bs-body-color, #e0e0e0);
    font-size: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

    .filter-input[b-jw8ss7ice5]::placeholder {
        color: color-mix(in srgb, var(--bs-secondary-color, #adb5bd) 70%, transparent 30%);
    }

/* Date range picker specific styling */
.date-range-picker[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .date-range-picker input[b-jw8ss7ice5] {
        flex: 1;
    }

    /* Date range picker calendar icon */
    .date-range-picker .dxbl-editor-dropdown-button[b-jw8ss7ice5] {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

        .date-range-picker .dxbl-editor-dropdown-button:hover[b-jw8ss7ice5] {
            opacity: 1;
        }

/* Hover state for filter buttons */
.filter-reset-btn:hover[b-jw8ss7ice5],
.filter-apply-btn:hover[b-jw8ss7ice5] {
    opacity: 0.8;
}

/* === PAGINATION === */
.grid-footer[b-jw8ss7ice5] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 0;
    gap: 1rem;
    flex-shrink: 0;
    z-index: 100;
}

.pager-info[b-jw8ss7ice5] { font-size: 0.75rem; }

[b-jw8ss7ice5] .dxbl-grid-pager,
[b-jw8ss7ice5] .dxbs-grid-pager,
[b-jw8ss7ice5] .dxbl-grid-pager *,
[b-jw8ss7ice5] .dxbs-grid-pager * {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    vertical-align: middle !important;
}

[b-jw8ss7ice5] .dxbl-grid-pager,
[b-jw8ss7ice5] .dxbs-grid-pager {
    justify-content: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
}

    /* Force ALL children and descendants to be inline */
    [b-jw8ss7ice5] .dxbl-grid-pager > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > *,
    [b-jw8ss7ice5] .dxbl-grid-pager > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > *,
    [b-jw8ss7ice5] .dxbl-grid-pager > * > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > * > *,
    [b-jw8ss7ice5] .dxbl-grid-pager > * > * > * > *,
    [b-jw8ss7ice5] .dxbs-grid-pager > * > * > * > * {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

/* Page size selector - push to right */
[b-jw8ss7ice5] .dxbl-grid-pager-page-size,
[b-jw8ss7ice5] .dxbs-grid-pager-page-size,
[b-jw8ss7ice5] [class*="pager-page-size"],
[b-jw8ss7ice5] [class*="page-size-selector"],
[b-jw8ss7ice5] [class*="PageSize"] {
    margin-left: auto !important;
}

/* === PLACEHOLDER === */
.placeholder[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.2rem;
    opacity: 0.7;
}

/* === FILTER DESCRIPTION === */
.filter-description-text[b-jw8ss7ice5] {
    font-size: 13px;
    font-weight: 500;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dxbl-accent-bg, var(--bs-primary, #5b9bd5)) !important;
}

/* Advanced Filter Icon Button - Remove ALL padding */
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"],
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] button,
[b-jw8ss7ice5] button[title="Advanced Filter"],
[b-jw8ss7ice5] [title="Advanced Filter"].dxbl-btn,
[b-jw8ss7ice5] [title="Advanced Filter"] .dxbl-btn-content {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

    /* Ensure the image inside takes full space */
    [b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] img,
    [b-jw8ss7ice5] button[title="Advanced Filter"] img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

/* Filter/Funnel icon - accent color tint */
/* Use CSS filter to colorize the icon */
.licenses-grid img[src*="funnel"][b-jw8ss7ice5],
.grid-footer img[src*="funnel"][b-jw8ss7ice5],
[b-jw8ss7ice5] button[title="Advanced Filter"] img,
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] img {
    /* Create accent color tint effect */
    filter: sepia(1) saturate(5) hue-rotate(var(--filter-hue, 200deg)) brightness(0.9);
}

/* Define hue rotation for different accent colors */
:root[b-jw8ss7ice5] {
    --filter-hue: 200deg; /* Default blue */
}

/* SVG filter icons - direct fill color */
.licenses-grid svg[b-jw8ss7ice5],
.grid-footer svg[b-jw8ss7ice5],
[b-jw8ss7ice5] button[title="Advanced Filter"] svg,
[b-jw8ss7ice5] .dxbl-btn[title="Advanced Filter"] svg {
    fill: var(--dxbl-accent-bg, var(--bs-primary, #0d6efd));
    color: var(--dxbl-accent-bg, var(--bs-primary, #0d6efd));
}

[b-jw8ss7ice5] .filter-clear-btn,
[b-jw8ss7ice5] .filter-clear-btn button {
    min-width: 80px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
}

/* === DEBUG INFO === */
.grouping-active-message[b-jw8ss7ice5] {
    font-weight: 600;
    margin-left: 0.5rem;
}

.debug-message[b-jw8ss7ice5] {
    font-size: 0.7rem;
    opacity: 0.8;
    font-family: monospace;
}

/* === ACTIVATION LOG GRID === */
.activation-log-grid[b-jw8ss7ice5] {
    width: 100%;
    max-width: 100%;
    background: inherit !important;
}

/* Make activation log grid respect the detail row container background */
[b-jw8ss7ice5] .activation-log-grid {
    background: inherit !important;
}

    [b-jw8ss7ice5] .activation-log-grid .dxbs-grid,
    [b-jw8ss7ice5] .activation-log-grid .dxbl-grid {
        background: inherit !important;
    }

    /* Activation log grid - auto-size table to content */
    [b-jw8ss7ice5] .activation-log-grid table {
        table-layout: auto !important;
        width: auto !important;
    }

    /* Make header content inherit text color too */
    [b-jw8ss7ice5] .activation-log-grid .dxbl-grid-header-content,
    [b-jw8ss7ice5] .activation-log-grid .dxbs-grid-header-content {
        background-color: transparent !important;
        background: transparent !important;
        color: inherit !important;
    }

/* === ANALYTICS PAGE === */
.analytics-container[b-jw8ss7ice5] {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 15px;
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.analytics-filters[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 15px 20px;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.filter-group[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label[b-jw8ss7ice5] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin: 0;
}

.filter-dropdown[b-jw8ss7ice5] {
    min-width: 200px;
}
/* Analytics Refresh Icon Button */
.analytics-refresh-icon-btn[b-jw8ss7ice5] {
    padding: 4px;
    cursor: pointer;
}

[b-jw8ss7ice5] .analytics-refresh-icon-btn button {
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
}

    [b-jw8ss7ice5] .analytics-refresh-icon-btn button:hover {
        opacity: 0.8;
    }
.analytics-tabs[b-jw8ss7ice5] {
    margin: 0;
    flex-shrink: 0;
}

.analytics-content[b-jw8ss7ice5] {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    border: none;
    border-radius: 0;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

/* Style the analytics sub-tabs */
[b-jw8ss7ice5] .analytics-tabs .dxbl-tab-button,
[b-jw8ss7ice5] .analytics-tabs .dxbs-tab-button,
[b-jw8ss7ice5] .analytics-tabs button {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

[b-jw8ss7ice5] .analytics-tabs .dxbl-tab-active,
[b-jw8ss7ice5] .analytics-tabs .dxbs-tab-active,
[b-jw8ss7ice5] .analytics-tabs .active {
    font-weight: 600;
}

/* === ANALYTICS SUMMARY BOXES === */
.analytics-summary-boxes[b-jw8ss7ice5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    padding: 0 5px;
}

.summary-box[b-jw8ss7ice5] {
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 130px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .summary-box:hover[b-jw8ss7ice5] {
        background-color: color-mix(in srgb, var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e)) 85%, var(--bs-primary, currentColor) 15%);
        border-color: var(--bs-primary, var(--bs-border-color, rgba(128, 128, 128, 0.5)));
        transform: scale(1.03);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

.summary-box-header[b-jw8ss7ice5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 15px;
}

.summary-box-title[b-jw8ss7ice5] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color, currentColor);
    opacity: 0.95;
    letter-spacing: 0.3px;
}

.summary-box-icon[b-jw8ss7ice5] {
    width: 32px;
    height: 32px;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.summary-box:hover .summary-box-icon[b-jw8ss7ice5] {
    opacity: 1;
    transform: scale(1.1);
}

.summary-box-value[b-jw8ss7ice5] {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--bs-body-color, currentColor);
    line-height: 1;
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 992px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .analytics-summary-boxes[b-jw8ss7ice5] {
        grid-template-columns: 1fr;
    }
}

/* === ANALYTICS CHARTS === */
.analytics-charts-row[b-jw8ss7ice5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.analytics-chart-container[b-jw8ss7ice5] {
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 350px;
    overflow: hidden;
    width: 100%;
}

.chart-header[b-jw8ss7ice5] {
    padding: 15px 20px;
    border-bottom: 1px solid var(--bs-border-color, rgba(128, 128, 128, 0.3));
}

.chart-title[b-jw8ss7ice5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, currentColor);
}

.chart-body[b-jw8ss7ice5] {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 100%;
}

/* DevExpress Chart styling */
[b-jw8ss7ice5] .chart-body .dxc-chart,
[b-jw8ss7ice5] .chart-body svg {
    width: 100% !important;
    height: 100% !important;
}

.chart-placeholder[b-jw8ss7ice5] {
    text-align: center;
    opacity: 0.6;
}

    .chart-placeholder p[b-jw8ss7ice5] {
        margin: 8px 0;
        font-size: 0.9rem;
    }

.chart-hint[b-jw8ss7ice5] {
    font-size: 0.75rem !important;
    opacity: 0.7;
    font-style: italic;
}

/* Responsive chart layout */
@media (max-width: 992px) {
    .analytics-charts-row[b-jw8ss7ice5] {
        grid-template-columns: 1fr;
    }
}

/* === CHART LEGEND COLOR BOX === */
.chart-legend-color-box[b-jw8ss7ice5] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
    /* Color set via inline style using DevExpress theme variable */
}

/* === PIE CHART LEGEND MARKERS === */
/* Make DevExpress pie chart legend markers smaller and more square */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker,
[b-jw8ss7ice5] .dxc-legend-item-marker,
[b-jw8ss7ice5] .analytics-chart-container .dxc-legend .dxc-legend-item-marker {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

    /* Target the SVG rect element inside the marker */
    [b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker rect,
    [b-jw8ss7ice5] .dxc-legend-item-marker rect {
        width: 12px !important;
        height: 12px !important;
    }

/* Target DevExpress Blazor specific legend icon class */
[b-jw8ss7ice5] .dxbl-chart-legend-def-icon,
[b-jw8ss7ice5] rect.dxbl-chart-legend-def-icon,
[b-jw8ss7ice5] svg .dxbl-chart-legend-def-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

/* Ensure the parent SVG container of the legend icon is also constrained */
[b-jw8ss7ice5] .dxbl-chart-legend-icon,
[b-jw8ss7ice5] svg.dxbl-chart-legend-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}

/* Ensure the marker container doesn't expand */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item-marker,
[b-jw8ss7ice5] .dxc-legend-item-marker {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Adjust legend item spacing */
[b-jw8ss7ice5] .dxc-legend .dxc-legend-item,
[b-jw8ss7ice5] .dxc-legend-item,
[b-jw8ss7ice5] .dxbl-chart-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
}

    /* Make sure text is aligned with markers */
    [b-jw8ss7ice5] .dxc-legend .dxc-legend-item text,
    [b-jw8ss7ice5] .dxc-legend-item text,
    [b-jw8ss7ice5] .dxbl-chart-legend-text {
        vertical-align: middle !important;
    }


/* === CHART LEGEND BORDER === */
/* Apply border to all DevExpress chart legends */
[b-jw8ss7ice5] .dxc-legend,
[b-jw8ss7ice5] .dxbl-chart-legend,
[b-jw8ss7ice5] svg[class*="legend"] > rect:first-child {
    stroke: rgba(128, 128, 128, 0.3) !important;
    stroke-width: 1 !important;
}

/* Alternative approach - target the legend background */
[b-jw8ss7ice5] .dxc-legend-background,
[b-jw8ss7ice5] .dxbl-chart-legend-background {
    stroke: rgba(128, 128, 0.3) !important;
    stroke-width: 1 !important;
}

/* Target legends positioned outside (for DxChart bar charts) */

[b-jw8ss7ice5] .dxbl-chart-with-legend-container .dxbl-chart-legend {
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 4px !important;
}

/* === DATA VIEW TAB === */
.data-view-container[b-jw8ss7ice5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.data-view-toolbar[b-jw8ss7ice5] {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem;
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.data-view-grid-container[b-jw8ss7ice5] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--dxbl-tabs-bg, var(--bs-body-bg, #1e1e1e));
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

/* Data View Grid structure with responsive height constraints */
[b-jw8ss7ice5] .data-view-datagrid {
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: calc(100vh - 550px) !important; /* Same as licenses but with more offset for analytics container */
    min-height: 200px !important;
    height: 100% !important;
}

    /* Data View Grid - table styling */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table {
        table-layout: auto !important;
        width: 100% !important;
    }

    /* Data View Grid - header styling */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header {
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }

    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Force scrollbar on Data View grid content area - this is the data rows container */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;  /*Critical: Allow content to shrink below natural size */
    max-height: 100% !important;
    overflow-y: scroll !important;  
    overflow-x: scroll !important;  
    scrollbar-width: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

 /*Ensure scrollbars are always visible for Data View Grid */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar {
    width: 12px !important;  
    height: 12px !important;  
    display: block !important;  
}
 
 /*Scrollbar track styling */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-track,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-track,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-track,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-track {
    background-color: rgba(128, 128, 128, 0.1) !important;
    border-radius: 4px !important;
}

 /*Scrollbar thumb (draggable part) styling */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-thumb,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.4) !important;
    border-radius: 4px !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-thumb:hover,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.6) !important;
}

[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-table-container::-webkit-scrollbar-corner,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-table-container::-webkit-scrollbar-corner {
    background-color: rgba(128, 128, 128, 0.1) !important;
}
 
 /*Prevent grid from expanding beyond container */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid {
        max-height: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Ensure Data View grid wrapper respects height */
    [b-jw8ss7ice5] .data-view-datagrid > div,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-container {
        max-height: 100% !important;
        height: 100% !important; /* Force container to take full available height */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Override: Force Data View pager itself to use row direction */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-pager,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-pager {
        flex-direction: row !important;
        flex-shrink: 0 !important; /* Prevent pager from shrinking */
        height: auto !important; /* Let pager use its natural height */
    }

    /* Force Data View data area to fill remaining space after headers/filters/pager */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-content,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-content {
    flex: 1 1 auto !important;  /*Fill available space */
    overflow-y: scroll !important;  /*Always show vertical scrollbar */
    overflow-x: scroll !important;  /*Always show horizontal scrollbar */
}

/* Grid cells */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-header-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-data-cell,
[b-jw8ss7ice5] .data-view-datagrid th,
[b-jw8ss7ice5] .data-view-datagrid td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
}

/* Data View Grid filter row cells */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Data View Grid - Filter Row Styling */
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row td,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row td,
[b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell,
[b-jw8ss7ice5] .data-view-datagrid .dxbl-filter-row-cell {
    background-color: color-mix(in srgb, var(--bs-body-bg, #2b2b2b) 80%, black 20%) !important;
    padding: 0.4rem 0.5rem !important;
    position: relative !important;
}

    /* Data View Grid - Filter inputs */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell input,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-filter-row-cell input {
        background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 85%, black 15%) !important;
        border: 1px solid color-mix(in srgb, var(--bs-border-color, rgba(128, 128, 128, 0.5)) 60%, transparent 40%) !important;
        border-radius: 3px !important;
        padding: 0.35rem 0.5rem !important;
        color: var(--bs-body-color, #e0e0e0) !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input::placeholder,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input::placeholder {
            color: color-mix(in srgb, var(--bs-secondary-color, #adb5bd) 70%, transparent 30%) !important;
        }

        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input:focus,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input:focus {
            border-color: var(--bs-primary, #0d6efd) !important;
            outline: none !important;
            background-color: color-mix(in srgb, var(--bs-body-bg, #1e1e1e) 90%, white 10%) !important;
        }

    /* Show DevExpress native filter icons for Data View Grid */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.7 !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0.25rem !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Position calendar and spin buttons absolutely on the right for Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"] {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

        /* Hover state for icons - Data View */
        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row button[aria-label*="calendar"]:hover,
        [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row button[aria-label*="calendar"]:hover {
            opacity: 1 !important;
        }

    /* Style DevExpress filter icons - Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button svg,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-editor-dropdown-button .dxbl-image,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-spin-button svg,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_spin_button .dxbl-image {
        width: 14px !important;
        height: 14px !important;
        opacity: 0.8 !important;
    }

    /* Adjust input padding to make room for icons - Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row .dxbl-editor-container,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-filter-row-cell .dxbl-editor-container,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_filter_row_cell .dxbl-editor-container {
        position: relative !important;
    }

    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row .dxbl-editor-input-container,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row .dxbl-editor-input-container {
        padding-right: 24px !important;
    }

    /* Show number input spin buttons (browser native) - Data View */
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"]::-webkit-outer-spin-button,
    [b-jw8ss7ice5] .data-view-datagrid .dxbl-grid-filter-row input[type="number"]::-webkit-inner-spin-button,
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: auto !important;
        display: block !important;
        opacity: 0.7 !important;
    }

    [b-jw8ss7ice5] .data-view-datagrid .dxbs-grid-filter-row input[type="number"],
    [b-jw8ss7ice5] .data_view_datsagrid .dxbl_grid_filter_row input[type="number"] {
        -moz-appearance: auto !important;
    }

/* === MODERNIZED USER DROPDOWN === */

/* User avatar circle */
.user-avatar[b-jw8ss7ice5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dxbl-accent-bg, var(--bs-primary, #0d6efd)) 0%, color-mix(in srgb, var(--dxbl-accent-bg, var(--bs-primary, #0d6efd)) 70%, white 30%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar-text[b-jw8ss7ice5] {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.user-dropdown-arrow[b-jw8ss7ice5] {
    opacity: 0.6;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.user-display:hover .user-dropdown-arrow[b-jw8ss7ice5] {
    opacity: 1;
}

/* User menu item styling */
.user-menu-item[b-jw8ss7ice5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    min-width: 200px;
}

    .user-menu-item:hover[b-jw8ss7ice5] {
        background-color: rgba(255, 255, 255, 0.08);
    }

.user-menu-icon-wrapper[b-jw8ss7ice5] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: rgba(128, 128, 128, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.user-menu-item:hover .user-menu-icon-wrapper[b-jw8ss7ice5] {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
}

.user-menu-icon[b-jw8ss7ice5] {
    width: 18px;
    height: 18px;
    opacity: 0.85;
}

.user-menu-item:hover .user-menu-icon[b-jw8ss7ice5] {
    opacity: 1;
}

.user-menu-text[b-jw8ss7ice5] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color, #e0e0e0);
}

/* Danger item styling (Sign out) */
.user-menu-item-danger .user-menu-text[b-jw8ss7ice5] {
    color: var(--bs-danger, #dc3545);
}

.user-menu-icon-danger[b-jw8ss7ice5] {
    background-color: rgba(220, 53, 69, 0.12) !important;
}

.user-menu-item-danger:hover .user-menu-icon-wrapper[b-jw8ss7ice5] {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

/* Separator styling for sign out item */
[b-jw8ss7ice5] .user-dd .user-menu-separator .user-menu-item {
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    margin-top: 6px;
    padding-top: calc(0.65rem + 6px);
}
/* /Components/Shared/FunnelChart.razor.rz.scp.css */
.funnel-chart-container[b-lp8ompjdgy] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.funnel-chart[b-lp8ompjdgy] {
    width: 100%;
    max-width: 600px;
    position: relative;
}

.funnel-content[b-lp8ompjdgy] {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.funnel-row[b-lp8ompjdgy] {
    position: relative;
    display: grid;
    grid-template-columns: 200px 400px;
    align-items: center;
    gap: 0;
}

.funnel-label[b-lp8ompjdgy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 15px;
    z-index: 2;
}

.funnel-label-text[b-lp8ompjdgy] {
    font-weight: 500;
    font-size: 13px;
    text-align: right;
    color: var(--bs-body-color, currentColor);
    opacity: 0.85;
}

.funnel-value-text[b-lp8ompjdgy] {
    font-weight: 700;
    font-size: 16px;
    color: var(--bs-body-color, currentColor);
    opacity: 0.95;
}

.funnel-segment-container[b-lp8ompjdgy] {
    position: relative;
    width: 100%;
}

.funnel-line-wrapper[b-lp8ompjdgy] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(var(--line-end) * 1% + var(--line-base));
    z-index: 1;
    pointer-events: none;
}

.funnel-line[b-lp8ompjdgy] {
    width: 100%;
    height: 100%;
}

.funnel-segment[b-lp8ompjdgy] {
    position: relative;
    width: 100%;
    transition: all 0.3s ease;
    clip-path: polygon( var(--top-inset) 0%, calc(100% - var(--top-inset)) 0%, calc(100% - var(--bottom-inset)) 100%, var(--bottom-inset) 100% );
}

    .funnel-segment:hover[b-lp8ompjdgy] {
        filter: brightness(1.15);
        z-index: 10;
    }

.funnel-segment-inner[b-lp8ompjdgy] {
    background: var(--color);
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .funnel-segment-inner[b-lp8ompjdgy]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }

    .funnel-segment-inner[b-lp8ompjdgy]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(128, 128, 128, 0.3);
        pointer-events: none;
    }

.funnel-chart-empty[b-lp8ompjdgy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--bs-body-color, currentColor);
    opacity: 0.5;
    font-size: 14px;
}

@media (max-width: 768px) {
    .funnel-row[b-lp8ompjdgy] {
        grid-template-columns: 140px 1fr;
    }

    .funnel-label[b-lp8ompjdgy] {
        padding-right: 10px;
    }

    .funnel-label-text[b-lp8ompjdgy] {
        font-size: 11px;
    }

    .funnel-value-text[b-lp8ompjdgy] {
        font-size: 14px;
    }

    .funnel-segment-inner[b-lp8ompjdgy] {
        min-height: 48px;
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    .funnel-row[b-lp8ompjdgy] {
        grid-template-columns: 100px 1fr;
    }

    .funnel-label[b-lp8ompjdgy] {
        padding-right: 8px;
    }

    .funnel-label-text[b-lp8ompjdgy] {
        font-size: 10px;
    }

    .funnel-value-text[b-lp8ompjdgy] {
        font-size: 12px;
    }
}
/* /Components/Shared/QlmCreateCustomerControl.razor.rz.scp.css */
/* Create Customer Popup Styles */
.create-customer-popup-body[b-3w8rq702u0] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.create-customer-content[b-3w8rq702u0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Scrollable Form Grid */
.customer-form-grid[b-3w8rq702u0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
}

.form-section[b-3w8rq702u0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.section-header[b-3w8rq702u0] {
    font-weight: 600;
    margin: 0 0 12px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
}

.form-group[b-3w8rq702u0] {
    display: grid;
    grid-template-columns: minmax(120px, 150px) minmax(200px, 1fr);
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.form-label[b-3w8rq702u0] {
    font-weight: 500;
    text-align: left;
    word-wrap: break-word;
}

.form-control[b-3w8rq702u0] {
    width: 100%;
    min-width: 0;
}

/* Validation - Invalid field styling */
[b-3w8rq702u0] .invalid-field,
[b-3w8rq702u0] .invalid-field input,
[b-3w8rq702u0] .invalid-field .dxbl-edit-input-container,
[b-3w8rq702u0] .invalid-field .dxbl-editor-input-container,
[b-3w8rq702u0] .invalid-field .dxbl-edit-text,
[b-3w8rq702u0] .invalid-field .dxbl-spin-edit,
[b-3w8rq702u0] .invalid-field .dxbl-date-edit,
[b-3w8rq702u0] .invalid-field .dxbl-combo-box {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

[b-3w8rq702u0] .invalid-field .dxbl-edit-input-container:focus-within,
[b-3w8rq702u0] .invalid-field .dxbl-editor-input-container:focus-within,
[b-3w8rq702u0] .invalid-field .dxbl-edit-text:focus,
[b-3w8rq702u0] .invalid-field .dxbl-spin-edit:focus,
[b-3w8rq702u0] .invalid-field .dxbl-date-edit:focus,
[b-3w8rq702u0] .invalid-field .dxbl-combo-box:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

[b-3w8rq702u0] .invalid-field input,
[b-3w8rq702u0] .invalid-field .dxbl-editor-input-container input {
    background-color: rgba(220, 53, 69, 0.05) !important;
}

.required[b-3w8rq702u0] {
    margin-left: 2px;
}

.form-checkbox[b-3w8rq702u0] {
    justify-self: start;
}

/* Footer - Fixed at Bottom */
.popup-footer[b-3w8rq702u0] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
}

.footer-btn[b-3w8rq702u0] {
    min-width: 100px;
    padding: 6px 20px;
}

.ok-btn[b-3w8rq702u0] {
    min-width: 100px;
}

.cancel-btn[b-3w8rq702u0] {
    min-width: 100px;
}

/* Responsive: Switch to single column on smaller popup sizes */
@media (max-width: 800px) {
    .customer-form-grid[b-3w8rq702u0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .form-group[b-3w8rq702u0] {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .form-label[b-3w8rq702u0] {
        text-align: left;
    }
}
/* /Components/Shared/QlmCreateLicenseControl.razor.rz.scp.css */
/* Create License Popup - inherit from DevExpress theme */
.create-license-popup-body[b-756l48zaft] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Make sure any inner wrapper DevExpress adds has no side padding */
:host[b-756l48zaft]  .create-license-popup-body > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.create-license-popup-footer[b-756l48zaft] {
    border-top: 1px solid rgba(128, 128, 128, 0.3) !important;
    padding: 0 !important;
}

.create-license-content[b-756l48zaft] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Tabs - inherit theme */
.create-license-tabs[b-756l48zaft] {
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    padding-left: 20px;
    width: 100%;
}

/* Ensure tabs don't wrap and stay in one line */
.create-license-tabs[b-756l48zaft]  .dxbl-tabs-content {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.create-license-tabs .dxbl-tab[b-756l48zaft] {
    padding: 12px 20px 12px 0px;
    white-space: nowrap;
    flex-shrink: 0;
}

    .create-license-tabs .dxbl-tab.dxbl-active[b-756l48zaft] {
        border-bottom: 2px solid currentColor;
    }

    .create-license-tabs .dxbl-tab:hover[b-756l48zaft] {
        opacity: 0.8;
    }

/* Tab Content - Scrollable Area */
.tab-content[b-756l48zaft] {
    flex: 1 1 0;
    padding: 20px 0px 20px 0px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
}

/* Ensure DxLoadingPanel inside tab-content doesn't break layout */
.tab-content[b-756l48zaft]  .dxbl-loading-panel {
    height: auto !important;
    min-height: 0 !important;
}

/* General Tab */
.general-tab[b-756l48zaft] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 100%;
}

.form-row[b-756l48zaft] {
    display: grid;
    grid-template-columns: minmax(150px, 280px) minmax(200px, 1fr);
    align-items: center;
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

.form-label[b-756l48zaft] {
    text-align: left;
    font-weight: 500;
    padding-left: 0;
    word-wrap: break-word;
}

    .form-label.required[b-756l48zaft]::after {
        content: "*";
        margin-left: 4px;
        opacity: 0.7;
    }

.form-control[b-756l48zaft] {
    padding: 6px 10px;
    width: 100%;
    min-width: 0;
}

    .form-control:focus[b-756l48zaft] {
        opacity: 0.9;
    }

/* Validation - Invalid field styling */
/* Use ::deep to pierce through Blazor component isolation and reach DevExpress components */
[b-756l48zaft] .invalid-field,
[b-756l48zaft] .invalid-field input,
[b-756l48zaft] .invalid-field .dxbl-edit-input-container,
[b-756l48zaft] .invalid-field .dxbl-editor-input-container,
[b-756l48zaft] .invalid-field .dxbl-edit-text,
[b-756l48zaft] .invalid-field .dxbl-spin-edit,
[b-756l48zaft] .invalid-field .dxbl-date-edit,
[b-756l48zaft] .invalid-field .dxbl-combo-box {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

    [b-756l48zaft] .invalid-field .dxbl-edit-input-container:focus-within,
    [b-756l48zaft] .invalid-field .dxbl-editor-input-container:focus-within,
    [b-756l48zaft] .invalid-field .dxbl-edit-text:focus,
    [b-756l48zaft] .invalid-field .dxbl-spin-edit:focus,
    [b-756l48zaft] .invalid-field .dxbl-date-edit:focus,
    [b-756l48zaft] .invalid-field .dxbl-combo-box:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }

    /* Also add light red background to make it more obvious */
    [b-756l48zaft] .invalid-field input,
    [b-756l48zaft] .invalid-field .dxbl-editor-input-container input {
        background-color: rgba(220, 53, 69, 0.05) !important;
    }

/* Input with icons */
.input-with-icons[b-756l48zaft] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .input-with-icons .form-control[b-756l48zaft] {
        flex: 1;
    }

.icon-group[b-756l48zaft] {
    display: flex;
    gap: 4px;
}

.icon-btn[b-756l48zaft] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: transparent !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

    .icon-btn:hover[b-756l48zaft] {
        opacity: 0.8;
    }

    .icon-btn img[b-756l48zaft] {
        width: 16px;
        height: 16px;
    }

/* Maintenance Plan Row */
.maintenance-plan-row[b-756l48zaft] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.maintenance-checkbox[b-756l48zaft] {
    flex-shrink: 0;
}

.maintenance-date[b-756l48zaft] {
    flex: 1;
}

/* Footer - Fixed at Bottom */
.popup-footer[b-756l48zaft] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: transparent !important;
    border-top: 1px solid rgba(128, 128, 128, 0.3) !important;
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-left[b-756l48zaft] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-label[b-756l48zaft] {
    font-weight: 500;
    white-space: nowrap;
}

.settings-combo[b-756l48zaft] {
    min-width: 150px;
    max-width: 200px;
}

.footer-right[b-756l48zaft] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-btn[b-756l48zaft] {
    min-width: 100px;
    padding: 6px 20px;
}

.ok-btn:hover[b-756l48zaft] {
    opacity: 0.9;
}

.cancel-btn:hover[b-756l48zaft] {
    opacity: 0.9;
}

/* Features Tab */
.features-tab[b-756l48zaft] {
    padding-left: 20px;
    padding-right: 20px;
}

.features-list[b-756l48zaft] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 10px 20px;
    min-height: 500px;
}

.feature-item[b-756l48zaft] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    transition: background-color 0.2s;
}

    .feature-item:hover[b-756l48zaft] {
        background-color: rgba(128, 128, 128, 0.1);
    }

    /* Highlight selected features */
    .feature-item.selected[b-756l48zaft] {
        background-color: rgba(128, 128, 128, 0.25);
    }

.feature-checkbox[b-756l48zaft] {
    flex-shrink: 0;
}

.feature-label[b-756l48zaft] {
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

/* Placeholder tabs */
.userdata-tab[b-756l48zaft],
.comments-tab[b-756l48zaft] {
    padding: 20px 20px;
}

/* Advanced Tab */
.advanced-tab[b-756l48zaft] {
    padding: 20px 20px;
}

/* Product Properties Tab */
.product-properties-tab[b-756l48zaft] {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
}

.product-properties-content[b-756l48zaft] {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Grid wrapper */
.grid-container-wrapper[b-756l48zaft] {
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    background-color: transparent !important;
    border-radius: 4px;
    padding: 0;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}

/* Grid styling - inherit theme */
.product-properties-grid[b-756l48zaft] {
    background-color: transparent !important;
    border: none !important;
    width: 100%;
    min-width: 600px;
}

[b-756l48zaft] .product-properties-grid .dxbl-grid-header-content,
[b-756l48zaft] .product-properties-grid .dxbl-grid-group-panel,
[b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row {
    background-color: transparent !important;
}

[b-756l48zaft] .product-properties-grid .dxbl-grid-header-cell,
[b-756l48zaft] .product-properties-grid th {
    background-color: transparent !important;
}

[b-756l48zaft] .product-properties-grid .dxbl-grid-data-row,
[b-756l48zaft] .product-properties-grid .dxbl-grid-data-cell,
[b-756l48zaft] .product-properties-grid td {
    background-color: transparent !important;
}

/* Filter row inputs */
[b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-edit-text,
[b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-date-edit {
    height: 32px !important;
}

    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-edit-text:focus,
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-date-edit:focus {
        opacity: 0.9;
    }

@keyframes slideIn-b-756l48zaft {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === FILTER ROW - Dark Background matching input === */
[b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row,
[b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row,
[b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row td,
[b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row td,
[b-756l48zaft] .product-properties-grid .dxbs-filter-row-cell,
[b-756l48zaft] .product-properties-grid .dxbl-filter-row-cell {
    background-color: #2d2d2d !important;
    padding: 0.4rem 0.5rem !important;
    position: relative !important;
}

    /* Filter inputs - dark styling with gray border, purple on focus */
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row input,
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row input,
    [b-756l48zaft] .product-properties-grid .dxbs-filter-row-cell input,
    [b-756l48zaft] .product-properties-grid .dxbl-filter-row-cell input{
        background-color: #2d2d2d !important;
        border: 1px solid rgba(128, 128, 128, 0.5) !important;
        border-radius: 3px !important;
        padding: 0.35rem 0.5rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

        [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row input::placeholder,
        [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row input::placeholder {
            color: rgba(200, 200, 200, 0.6) !important;
        }

        /* Focus state - purple/magenta border like license grid */
        [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row input:focus,
        [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row input:focus {
            border-color: rgba(120, 120, 120, 0.8) !important;
            outline: none !important;
            box-shadow: 0 0 0 1px #a855f7 !important;
        }

    /* Show DevExpress native filter icons (calendar, dropdown, spin buttons, etc.) */
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row button[aria-label*="calendar"],
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row button[aria-label*="Calendar"],
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row button[aria-label*="Calendar"],
    [b-756l48zaft] .product-properties-grid .dxbs-filter-row-cell .dxbl-editor-dropdown-button,
    [b-756l48zaft] .product-properties-grid .dxbl-filter-row-cell .dxbl-editor-dropdown-button,
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row .dxbl-spin-button,
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-spin-button,
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row [class*="spin-button"],
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row [class*="spin-button"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.7 !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0.25rem !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Position calendar and spin buttons absolutely on the right */
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row .dxbl-editor-dropdown-button,
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-editor-dropdown-button,
    [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row button[aria-label*="calendar"],
    [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row button[aria-label*="calendar"] {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

        /* Hover state for icons */
        [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-editor-dropdown-button:hover,
        [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row button[aria-label*="calendar"]:hover,
        [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row button[aria-label*="calendar"]:hover,
        [b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row .dxbl-spin-button:hover,
        [b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-spin-button:hover {
            opacity: 1 !important;
        }

        /* Style DevExpress filter icons */
[b-756l48zaft] .product-properties-grid .dxbl-editor-dropdown-button svg,
[b-756l48zaft] .product-properties-grid .dxbl-editor-dropdown-button .dxbl-image,
[b-756l48zaft] .product-properties-grid .dxbl-spin-button svg,
[b-756l48zaft] .product-properties-grid .dxbl-spin-button .dxbl-image {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8 !important;
}

/* Adjust input padding to make room for icons */
[b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row .dxbl-editor-container,
[b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-editor-container,
[b-756l48zaft] .product-properties-grid .dxbs-filter-row-cell .dxbl-editor-container,
[b-756l48zaft] .product-properties-grid .dxbl-filter-row-cell .dxbl-editor-container {
    position: relative !important;
}

[b-756l48zaft] .product-properties-grid .dxbs-grid-filter-row .dxbl-editor-input-container,
[b-756l48zaft] .product-properties-grid .dxbl-grid-filter-row .dxbl-editor-input-container,
[b-756l48zaft] .product-properties-grid .dxbs-filter-row-cell .dxbl-editor-input-container,
[b-756l48zaft] .product-properties-grid .dxbl-filter-row-cell .dxbl-editor-input-container {
    padding-right: 24px !important;
}


/* Responsive: Adjust form layout for smaller popup sizes */
@@media (max-width: 900px) {
    .form-row[b-756l48zaft] {
        grid-template-columns: 200px 1fr;
    }
}

@@media (max-width: 700px) {
    .form-row[b-756l48zaft] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .form-label[b-756l48zaft] {
        text-align: left;
    }
}

/* Container-based responsive adjustments */
@@container (max-width: 700px) {
    .form-row[b-756l48zaft] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .form-label[b-756l48zaft] {
        text-align: left;
    }
    
    .popup-footer[b-756l48zaft] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .footer-left[b-756l48zaft],
    .footer-right[b-756l48zaft] {
        width: 100%;
        justify-content: center;
    }
}

/* Fallback media queries for browsers without container query support */
@@media (max-width: 700px) {
    .form-row[b-756l48zaft] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .form-label[b-756l48zaft] {
        text-align: left;
    }
}
/* /Components/Shared/QlmCreateOrganizationControl.razor.rz.scp.css */
/* Create Organization Popup Styles */
.create-organization-popup-body[b-7kcsm7s881] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.create-organization-content[b-7kcsm7s881] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Scrollable Form Fields */
.organization-form-fields[b-7kcsm7s881] {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-7kcsm7s881] {
    display: grid;
    grid-template-columns: minmax(120px, 140px) minmax(200px, 1fr);
    align-items: center;
    gap: 10px;
}

.form-label[b-7kcsm7s881] {
    font-weight: 500;
    font-size: 14px;
    text-align: left;
    padding-right: 10px;
    word-wrap: break-word;
}

.form-input[b-7kcsm7s881] {
    width: 100%;
    min-width: 0;
}

/* Fixed Footer */
.form-buttons[b-7kcsm7s881] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
}

.create-org-btn-ok[b-7kcsm7s881],
.create-org-btn-cancel[b-7kcsm7s881] {
    min-width: 80px;
}

/* Responsive adjustments */
@media (max-width: 500px) {
    .form-group[b-7kcsm7s881] {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .form-label[b-7kcsm7s881] {
        text-align: left;
    }
}
/* /Components/Shared/QlmCustomize.razor.rz.scp.css */
/* Column Chooser Popup Styling */

.column-chooser-content[b-pb0y4k43iw] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-box[b-pb0y4k43iw] {
    margin-bottom: 8px;
}

.search-input[b-pb0y4k43iw] {
    width: 100%;
}

.column-list[b-pb0y4k43iw] {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.column-item[b-pb0y4k43iw] {
    padding: 8px 4px;
}

.column-item:hover[b-pb0y4k43iw] {
    filter: brightness(0.95);
}

.column-checkbox[b-pb0y4k43iw] {
    font-size: 13px;
}

.no-results[b-pb0y4k43iw] {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

.popup-footer[b-pb0y4k43iw] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 16px;
    padding-top: 12px;
}

.footer-btn[b-pb0y4k43iw] {
    min-width: 70px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
}

/* Scrollbar styling - minimal, let browser/theme handle colors */
.column-list[b-pb0y4k43iw]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-pb0y4k43iw]::-webkit-scrollbar-track {
    border-radius: 4px;
}

.column-list[b-pb0y4k43iw]::-webkit-scrollbar-thumb {
    border-radius: 4px;
}
/* /Components/Shared/QlmDeactivateControl.razor.rz.scp.css */
/* Deactivate License Popup - inherit from DevExpress theme */
.deactivate-content[b-c9oe213kuy] {
    padding: 20px;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

/* Message styling - DevExpress handles all colors */
.message-box[b-c9oe213kuy] {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 14px;
}

.deactivate-caption[b-c9oe213kuy] {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 4px;
    border-left: 3px solid rgba(128, 128, 128, 0.5);
}

.deactivate-caption p[b-c9oe213kuy] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.form-row-horizontal[b-c9oe213kuy] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}

.form-label-inline[b-c9oe213kuy] {
    min-width: 140px;
    max-width: 140px;
    font-weight: 500;
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
}

.required-asterisk[b-c9oe213kuy] {
    margin-left: 2px;
    font-weight: bold;
    opacity: 0.8;
}

[b-c9oe213kuy] .form-control-inline {
    flex: 1;
    min-width: 0;
}

/* Invalid field styling - matching Create Customer popup style */
[b-c9oe213kuy] .invalid-field,
[b-c9oe213kuy] .invalid-field input,
[b-c9oe213kuy] .invalid-field .dxbl-edit-input-container,
[b-c9oe213kuy] .invalid-field .dxbl-editor-input-container,
[b-c9oe213kuy] .invalid-field .dxbl-edit-text {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

[b-c9oe213kuy] .invalid-field .dxbl-edit-input-container:focus-within,
[b-c9oe213kuy] .invalid-field .dxbl-editor-input-container:focus-within,
[b-c9oe213kuy] .invalid-field .dxbl-edit-text:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

[b-c9oe213kuy] .invalid-field input,
[b-c9oe213kuy] .invalid-field .dxbl-editor-input-container input {
    background-color: rgba(220, 53, 69, 0.05) !important;
}

.popup-footer[b-c9oe213kuy] {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
}

[b-c9oe213kuy] .footer-btn {
    min-width: 120px;
}

[b-c9oe213kuy] .skip-btn {
    margin-right: auto;
}

[b-c9oe213kuy] .ok-btn {
    min-width: 120px;
}

[b-c9oe213kuy] .cancel-btn {
    min-width: 120px;
}
/* /Components/Shared/QlmEditCustomerControl.razor.rz.scp.css */
/* Edit Customer Popup Styles */
.edit-customer-popup-body[b-bnomiydhd3] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.edit-customer-content[b-bnomiydhd3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Scrollable Form Grid */
.customer-form-grid[b-bnomiydhd3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
}

.form-section[b-bnomiydhd3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.section-header[b-bnomiydhd3] {
    font-weight: 600;
    margin: 0 0 12px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
}

.form-group[b-bnomiydhd3] {
    display: grid;
    grid-template-columns: minmax(120px, 150px) minmax(200px, 1fr);
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.form-label[b-bnomiydhd3] {
    font-weight: 500;
    text-align: left;
    word-wrap: break-word;
}

.required[b-bnomiydhd3] {
    margin-left: 2px;
    color: inherit;
    opacity: 0.7;
}

.form-control[b-bnomiydhd3] {
    width: 100%;
    min-width: 0;
}

/* Validation - Invalid field styling */
[b-bnomiydhd3] .invalid-field,
[b-bnomiydhd3] .invalid-field input,
[b-bnomiydhd3] .invalid-field .dxbl-edit-input-container,
[b-bnomiydhd3] .invalid-field .dxbl-editor-input-container,
[b-bnomiydhd3] .invalid-field .dxbl-edit-text,
[b-bnomiydhd3] .invalid-field .dxbl-spin-edit,
[b-bnomiydhd3] .invalid-field .dxbl-date-edit,
[b-bnomiydhd3] .invalid-field .dxbl-combo-box {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

[b-bnomiydhd3] .invalid-field .dxbl-edit-input-container:focus-within,
[b-bnomiydhd3] .invalid-field .dxbl-editor-input-container:focus-within,
[b-bnomiydhd3] .invalid-field .dxbl-edit-text:focus,
[b-bnomiydhd3] .invalid-field .dxbl-spin-edit:focus,
[b-bnomiydhd3] .invalid-field .dxbl-date-edit:focus,
[b-bnomiydhd3] .invalid-field .dxbl-combo-box:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

[b-bnomiydhd3] .invalid-field input,
[b-bnomiydhd3] .invalid-field .dxbl-editor-input-container input {
    background-color: rgba(220, 53, 69, 0.05) !important;
}

.form-checkbox[b-bnomiydhd3] {
    justify-self: start;
}

/* Footer - Fixed at Bottom */
.popup-footer[b-bnomiydhd3] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
}

.footer-btn[b-bnomiydhd3] {
    min-width: 100px;
    padding: 6px 20px;
}

.update-btn[b-bnomiydhd3] {
    min-width: 100px;
}

.cancel-btn[b-bnomiydhd3] {
    min-width: 100px;
}

/* Responsive: Switch to single column on smaller popup sizes */
@media (max-width: 800px) {
    .customer-form-grid[b-bnomiydhd3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .form-group[b-bnomiydhd3] {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .form-label[b-bnomiydhd3] {
        text-align: left;
    }
}
/* /Components/Shared/QlmEditLicenseControl.razor.rz.scp.css */
/* Edit License Popup Styles */
.edit-license-popup-body[b-22z10ndf5j] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Make sure any inner wrapper DevExpress adds has no side padding */
:host[b-22z10ndf5j]  .edit-license-popup-body > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.edit-license-popup-footer[b-22z10ndf5j] {
    padding: 0 !important;
}

.edit-license-content[b-22z10ndf5j] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Tabs */
.edit-license-tabs[b-22z10ndf5j] {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.edit-license-tabs .dxbl-tab[b-22z10ndf5j] {
    padding: 12px 20px 12px 0px;
}

/* Tab Content - Scrollable Area */
.tab-content[b-22z10ndf5j] {
    flex: 1 1 0;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
}

/* Alert styling */
.alert[b-22z10ndf5j] {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
    z-index: 10;
}

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

.alert-danger[b-22z10ndf5j] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* General Tab */
.general-tab[b-22z10ndf5j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 !important;
}

.general-tab .form-column[b-22z10ndf5j] {
    gap: 16px !important;
}

.form-row[b-22z10ndf5j] {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(200px, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 !important;
    max-width: 100%;
}

.form-label[b-22z10ndf5j] {
    text-align: left;
    font-weight: 500;
    padding-left: 0 !important;
    word-wrap: break-word;
}

.form-label.required[b-22z10ndf5j]::after {
    content: "*";
    margin-left: 4px;
}

.form-control[b-22z10ndf5j] {
    padding: 6px 10px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

/* Email field container - display combo and button side by side */
.email-field-container[b-22z10ndf5j] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.email-field-container .email-combobox[b-22z10ndf5j] {
    flex: 1;
    min-width: 0; /* allow flex item to shrink */
}

.email-field-container .select-customer-btn[b-22z10ndf5j] {
    flex-shrink: 0;
    min-width: auto;
    padding: 4px 8px;
}

.select-customer-icon[b-22z10ndf5j] {
    width: 20px;
    height: 20px;
    display: block;
}

/* Input with icons */
.input-with-icons[b-22z10ndf5j] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-icons .form-control[b-22z10ndf5j] {
    flex: 1;
}

.icon-group[b-22z10ndf5j] {
    display: flex;
    gap: 4px;
}

.icon-btn[b-22z10ndf5j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-btn img[b-22z10ndf5j] {
    width: 16px;
    height: 16px;
}

/* Maintenance Plan Row */
.maintenance-plan-row[b-22z10ndf5j] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.maintenance-checkbox[b-22z10ndf5j] {
    flex-shrink: 0;
}

.maintenance-date[b-22z10ndf5j] {
    flex: 1;
}

/* Footer - Fixed at Bottom */
.popup-footer[b-22z10ndf5j] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 20px !important;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-left[b-22z10ndf5j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-label[b-22z10ndf5j] {
    font-weight: 500;
    white-space: nowrap;
}

.settings-combo[b-22z10ndf5j] {
    width: 200px;
}

.footer-right[b-22z10ndf5j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-btn[b-22z10ndf5j] {
    min-width: 100px;
    padding: 6px 20px;
}

/* Features Tab */
.features-tab[b-22z10ndf5j] {
    padding: 0px !important;
    height: 100%;
}

.features-list[b-22z10ndf5j] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    padding: 10px 20px;
    height: 100%;
    min-height: 0;
}

.feature-item[b-22z10ndf5j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    transition: background-color 0.2s;
}

.feature-item:hover[b-22z10ndf5j] {
    background-color: rgba(128, 128, 128, 0.1);
}

/* Highlight selected features */
.feature-item.selected[b-22z10ndf5j] {
    background-color: rgba(128, 128, 128, 0.25);
}

.feature-checkbox[b-22z10ndf5j] {
    flex-shrink: 0;
}

.feature-label[b-22z10ndf5j] {
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

/* Placeholder tabs */
.userdata-tab[b-22z10ndf5j],
.comments-tab[b-22z10ndf5j] {
    padding: 0px !important;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    height: 100%;
}

.userdata-tab .large-memo-field[b-22z10ndf5j],
.comments-tab .large-memo-field[b-22z10ndf5j] {
    flex: 1;
    height: 100%;
}

/* Product Properties Tab */
.product-properties-tab[b-22z10ndf5j] {
    padding: 0px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

.product-properties-content[b-22z10ndf5j] {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Simplified grid wrapper */
.grid-container-wrapper[b-22z10ndf5j] {
    border-radius: 4px;
    padding: 0;
}

/* Grid styling */
.product-properties-grid[b-22z10ndf5j] {
    width: 100%;
}

/* Filter cell with icon (kept) */
.filter-cell-with-icon[b-22z10ndf5j] { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    width: 100%; 
    position: relative; 
    z-index: 1; 
}

.filter-icon-wrapper[b-22z10ndf5j] { 
    position: relative; 
    flex-shrink: 0; 
    z-index: 1; 
}

.filter-icon[b-22z10ndf5j] { 
    width: 16px; 
    height: 16px; 
    flex-shrink: 0; 
    opacity: 0.7; 
    transition: opacity 0.2s; 
    cursor: pointer; 
}

.filter-icon:hover[b-22z10ndf5j] { 
    opacity: 1; 
}

/* Filter dropdown */
.filter-dropdown-menu[b-22z10ndf5j] { 
    position: absolute; 
    top: 100%; 
    right: -150px; 
    margin-top: 4px; 
    border-radius: 4px; 
    min-width: 200px; 
    z-index: 100000; 
    padding: 6px 0; 
    max-height: 300px; 
    overflow-y: auto !important; 
    overflow-x: hidden; 
    overscroll-behavior: contain; 
    -webkit-overflow-scrolling: touch; 
}

.filter-menu-item[b-22z10ndf5j] { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 8px 14px; 
    cursor: pointer; 
    transition: background-color 0.2s; 
    font-size: 13px; 
    line-height: 1.4; 
    min-height: 36px; 
    white-space: nowrap; 
    box-sizing: border-box; 
}

.filter-menu-item.selected[b-22z10ndf5j] { 
    font-weight: 600;
}

.filter-menu-text[b-22z10ndf5j] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.description-section[b-22z10ndf5j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.description-label[b-22z10ndf5j] {
    text-align: left;
    font-weight: 500;
    padding-left: 0;
    font-size: 14px;
}

.description-memo[b-22z10ndf5j] {
    width: 100%;
    padding: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
}

/* Advanced Tab */
.advanced-tab[b-22z10ndf5j] {
    padding: 0px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.advanced-tab .form-row[b-22z10ndf5j] {
    margin-bottom: 0;
}

/* Responsive adjustments */
@@media (max-width: 900px) {
    .general-tab[b-22z10ndf5j] {
        grid-template-columns: 1fr;
    }
    
    .form-row[b-22z10ndf5j] {
        grid-template-columns: minmax(120px, 150px) 1fr;
    }
}

@@media (max-width: 700px) {
    .form-row[b-22z10ndf5j] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .form-label[b-22z10ndf5j] {
        text-align: left;
    }
}
/* /Components/Shared/QlmEditOrganizationControl.razor.rz.scp.css */
/* Edit Organization Popup Styles */
.edit-organization-popup-body[b-n16bdd62er] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.edit-organization-content[b-n16bdd62er] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Scrollable Form Fields */
.organization-form-fields[b-n16bdd62er] {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-n16bdd62er] {
    display: grid;
    grid-template-columns: minmax(120px, 140px) minmax(200px, 1fr);
    align-items: center;
    gap: 10px;
}

.form-label[b-n16bdd62er] {
    font-weight: 500;
    font-size: 14px;
    text-align: left;
    padding-right: 10px;
    word-wrap: break-word;
}

.form-input[b-n16bdd62er] {
    width: 100%;
    min-width: 0;
}

/* Fixed Footer */
.form-buttons[b-n16bdd62er] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
}

.edit-org-btn-ok[b-n16bdd62er],
.edit-org-btn-cancel[b-n16bdd62er] {
    min-width: 80px;
}

/* Responsive adjustments */
@media (max-width: 500px) {
    .form-group[b-n16bdd62er] {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .form-label[b-n16bdd62er] {
        text-align: left;
    }
}
/* /Components/Shared/QlmOrganizationsControl.razor.rz.scp.css */
/* Organizations Popup Styles */
.organizations-popup-body[b-un8hny9mn5] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.organizations-content[b-un8hny9mn5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Toolbar - Fixed at top */
.organizations-toolbar[b-un8hny9mn5] {
    display: flex;
    gap: 5px;
    padding: 15px 15px 10px 15px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
}

.toolbar-btn[b-un8hny9mn5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.toolbar-btn:hover[b-un8hny9mn5] {
    background-color: rgba(128, 128, 128, 0.1);
}

.toolbar-btn-content[b-un8hny9mn5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.toolbar-icon[b-un8hny9mn5] {
    width: 24px;
    height: 24px;
}

.toolbar-btn span[b-un8hny9mn5] {
    font-size: 11px;
    white-space: nowrap;
}

/* Grid Container - Scrollable */
.organizations-grid-container[b-un8hny9mn5] {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
    max-height: 100%;
    padding: 15px;
}

.organizations-grid[b-un8hny9mn5] {
    height: 100%;
    min-height: 400px;
}

.loading-overlay[b-un8hny9mn5] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    font-size: 16px;
}

/* Footer - Fixed at bottom */
.organizations-footer[b-un8hny9mn5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px 15px 15px;
    gap: 15px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
}

.pager-info[b-un8hny9mn5] {
    font-size: 14px;
    flex: 1;
}

.page-size-selector[b-un8hny9mn5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-size-label[b-un8hny9mn5] {
    font-size: 14px;
    white-space: nowrap;
}

.page-size-select[b-un8hny9mn5] {
    width: 80px;
}

.footer-buttons[b-un8hny9mn5] {
    display: flex;
    gap: 10px;
}

.organizations-close-btn[b-un8hny9mn5] {
    min-width: 100px;
}

/* Delete Confirmation Popup Styles */
.delete-confirmation-popup-body[b-un8hny9mn5] {
    padding: 20px !important;
}

.delete-confirmation-content[b-un8hny9mn5] {
    text-align: center;
}

.delete-message[b-un8hny9mn5] {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.delete-confirmation-buttons[b-un8hny9mn5] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.delete-confirm-btn[b-un8hny9mn5] {
    min-width: 80px;
}

.delete-cancel-btn[b-un8hny9mn5] {
    min-width: 80px;
}

/* Error Popup Styles */
.error-popup-body[b-un8hny9mn5] {
    padding: 20px !important;
}

.error-message-content[b-un8hny9mn5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.error-message-text[b-un8hny9mn5] {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.error-popup-footer[b-un8hny9mn5] {
    display: flex;
    justify-content: center;
}

.error-ok-btn[b-un8hny9mn5] {
    min-width: 100px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .organizations-toolbar[b-un8hny9mn5] {
        flex-wrap: wrap;
    }
    
    .organizations-footer[b-un8hny9mn5] {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pager-info[b-un8hny9mn5] {
        flex: 1 1 100%;
        text-align: center;
    }
}
/* /Components/Shared/QlmSelectCustomerControl.razor.rz.scp.css */
/* Select Customer Popup - inherit from DevExpress theme */
.select-customer-popup-body[b-jhttu1pjpj] {
    padding: 20px;
}

.select-customer-content[b-jhttu1pjpj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-section[b-jhttu1pjpj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.search-section .form-label[b-jhttu1pjpj] {
    min-width: 60px;
    font-weight: 500;
}

.search-textbox[b-jhttu1pjpj] {
    flex: 1;
}

.customer-grid-section[b-jhttu1pjpj] {
    min-height: 400px;
    position: relative;
}

.customer-grid[b-jhttu1pjpj] {
    width: 100%;
    min-height: 500px;
}

/* Loading overlay */
.loading-overlay[b-jhttu1pjpj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
    opacity: 0.9;
}

/* Grid styling - inherit theme */
[b-jhttu1pjpj] .customer-grid { 
    overflow-x: auto !important; 
    overflow-y: auto !important; 
    max-height: none !important; 
}

[b-jhttu1pjpj] .customer-grid .dxbs-grid-table { 
    min-width: max-content; 
}

[b-jhttu1pjpj] .customer-grid .dxbs-grid-header { 
    font-weight: 600; 
    white-space: nowrap; 
}

[b-jhttu1pjpj] .customer-grid .dxbs-grid-row { 
    border-bottom: 1px solid rgba(128, 128, 128, 0.3); 
}

[b-jhttu1pjpj] .customer-grid .dxbs-grid-row:hover { 
    opacity: 0.9; 
}

[b-jhttu1pjpj] .customer-grid .dxbs-grid-header-content { 
    white-space: nowrap; 
    overflow: visible; 
    text-overflow: clip; 
}

[b-jhttu1pjpj] .customer-grid .dxbs-grid-content { 
    min-height: 400px; 
}

/* Selected row styling */
[b-jhttu1pjpj] .customer-grid .dxbs-grid-row.dxbs-grid-selected-row {
    opacity: 0.85;
}

[b-jhttu1pjpj] .customer-grid .dxbs-grid-row.dxbs-grid-selected-row:hover {
    opacity: 0.9;
}

.popup-footer[b-jhttu1pjpj] {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.footer-btn[b-jhttu1pjpj] {
    min-width: 100px;
    padding: 0.5rem 1rem;
}

[b-jhttu1pjpj] .footer-btn button {
    min-width: 100px;
}

.select-btn:hover[b-jhttu1pjpj] {
    opacity: 0.9;
}

.cancel-btn:hover[b-jhttu1pjpj] {
    opacity: 0.9;
}
/* /Components/Shared/QlmSendMail.razor.rz.scp.css */
/* Send Mail Popup Styles */
.send-mail-popup-body[b-ocwbb0zpyk] {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.send-mail-content[b-ocwbb0zpyk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Form Header - Fixed at top */
.send-mail-header[b-ocwbb0zpyk] {
    flex-shrink: 0;
    padding: 15px 20px 10px 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.send-mail-form[b-ocwbb0zpyk] {
    margin-bottom: 0;
}

/* Tabs Container - Scrollable */
.send-mail-tabs-container[b-ocwbb0zpyk] {
    flex: 1 1 0;
    padding: 0 20px;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.send-mail-tabs[b-ocwbb0zpyk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.send-mail-tabs[b-ocwbb0zpyk]  .dxbl-tabs-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.send-mail-tabs[b-ocwbb0zpyk]  .dxbl-tab-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tab-page-content[b-ocwbb0zpyk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 15px 0;
}

/* Rich Editor */
.rich-editor[b-ocwbb0zpyk] {
    flex: 1 !important;
    height: 100% !important;
    min-height: 400px;
}

.rich-editor[b-ocwbb0zpyk]  .dxbl-richedit {
    height: 100% !important;
}

/* HTML Memo */
.html-memo[b-ocwbb0zpyk] {
    flex: 1 !important;
    height: 100% !important;
    min-height: 400px;
}

/* Preview Area */
.preview-area[b-ocwbb0zpyk] {
    flex: 1;
    overflow: auto;
    border: 1px solid rgba(128, 128, 128, 0.3);
    padding: 15px;
    background: white;
    min-height: 400px;
}

/* Alert Messages */
.alert[b-ocwbb0zpyk] {
    padding: 12px 16px;
    margin: 10px 20px 0;
    border-radius: 4px;
    font-size: 14px;
}

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

.alert-danger[b-ocwbb0zpyk] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Footer - Fixed at Bottom */
.popup-footer[b-ocwbb0zpyk] {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
}

.footer-btn[b-ocwbb0zpyk] {
    min-width: 100px;
    padding: 6px 20px;
}

.send-btn[b-ocwbb0zpyk] {
    min-width: 100px;
}

.cancel-btn[b-ocwbb0zpyk] {
    min-width: 100px;
}

/* Loading Overlay */
.editor-loading-overlay[b-ocwbb0zpyk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background-color: var(--dxbl-surface-color, #ffffff);
    border-radius: 4px;
    gap: 8px;
}

.loading-spinner[b-ocwbb0zpyk] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--dxbl-border-color, #e0e0e0);
    border-top: 3px solid var(--dxbl-accent-bg, var(--bs-primary, #0d6efd));
    border-radius: 50%;
    animation: spin-b-ocwbb0zpyk 1s linear infinite;
}

.loading-text[b-ocwbb0zpyk] {
    color: var(--dxbl-text-color, #666666);
    font-size: 13px;
}

@keyframes spin-b-ocwbb0zpyk {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.editor-hidden[b-ocwbb0zpyk] {
    display: none;
}

/* Disable tabs while loading or switching - target all possible DevExpress tab elements */
.tabs-disabled[b-ocwbb0zpyk] {
    pointer-events: none !important;
}

.tabs-disabled *[b-ocwbb0zpyk] {
    pointer-events: none !important;
}

.tabs-disabled[b-ocwbb0zpyk]  .dxbl-tabs-header,
.tabs-disabled[b-ocwbb0zpyk]  .dxbl-tabs-list,
.tabs-disabled[b-ocwbb0zpyk]  .dxbl-tab,
.tabs-disabled[b-ocwbb0zpyk]  .dxbl-tabs-tab,
.tabs-disabled[b-ocwbb0zpyk]  [role="tablist"],
.tabs-disabled[b-ocwbb0zpyk]  [role="tab"] {
    pointer-events: none !important;
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .send-mail-header[b-ocwbb0zpyk] {
        padding: 10px 15px;
    }
    
    .send-mail-tabs-container[b-ocwbb0zpyk] {
        padding: 0 15px;
    }
}