/* /Components/Features/Auth/Components/ChangePasswordModal.razor.rz.scp.css */
/* The password field styles (.password-wrapper / .password-toggle) do NOT belong here.
   They live in PasswordField.razor.css, next to the markup they target. Declaring them in this
   file has no effect: Blazor CSS isolation only stamps its scope attribute on this component's own
   elements, and the wrapper and eye button are rendered by PasswordField. That mismatch is what
   pushed the eye out of the box and onto a line of its own (QA #239). */
/* /Components/Features/Auth/Components/ForcePasswordChangeModal.razor.rz.scp.css */
/* The password field styles (.password-wrapper / .password-toggle) do NOT belong here.
   They live in PasswordField.razor.css, next to the markup they target. Declaring them in this
   file has no effect: Blazor CSS isolation only stamps its scope attribute on this component's own
   elements, and the wrapper and eye button are rendered by PasswordField. That mismatch is what
   pushed the eye out of the box and onto a line of its own (QA #239). */

.force-password-modal[b-r8ogqyl5ul] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.force-password-modal .modal-content[b-r8ogqyl5ul] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn-b-r8ogqyl5ul 0.3s ease-out;
}

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

.force-password-modal .modal-header[b-r8ogqyl5ul] {
    margin-bottom: 24px;
    text-align: center;
}

.force-password-modal .modal-title[b-r8ogqyl5ul] {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.force-password-modal .modal-subtitle[b-r8ogqyl5ul] {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.force-password-modal .modal-body[b-r8ogqyl5ul] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.force-password-modal .form-field[b-r8ogqyl5ul] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.force-password-modal .password-requirements[b-r8ogqyl5ul] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
}

.force-password-modal .requirements-title[b-r8ogqyl5ul] {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.force-password-modal .requirements-list[b-r8ogqyl5ul] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.force-password-modal .requirements-list li[b-r8ogqyl5ul] {
    font-size: 12px;
    color: #666;
    padding-left: 20px;
    position: relative;
}

.force-password-modal .requirements-list li[b-r8ogqyl5ul]::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: #007bff;
    font-weight: bold;
}

.force-password-modal .message[b-r8ogqyl5ul] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
}

.force-password-modal .message.success[b-r8ogqyl5ul] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.force-password-modal .message.error[b-r8ogqyl5ul] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.force-password-modal .modal-actions[b-r8ogqyl5ul] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.force-password-modal .dx-button-fullwidth[b-r8ogqyl5ul] {
    width: 100%;
}
/* /Components/Features/Auth/Components/PasswordField.razor.rz.scp.css */
/* Show/hide eye, anchored INSIDE the text box.
   These rules MUST live here, next to the markup they target. Copies of them used to sit in the
   scoped CSS of ChangePasswordModal / ForcePasswordChangeModal, where they stopped matching the
   moment the 0.9.173 dedup moved this markup into a component of its own: Blazor CSS isolation
   only stamps its scope attribute on a component's OWN elements. Measured in dev before the fix
   (QA #239): computed position was `static`, colour rgb(22,22,22) instead of the intended grey,
   and the wrapper was 59px tall against a 36px input — the button was taking a whole extra line
   under every field. No ::deep needed here: the wrapper and the button are this component's own
   markup. */
.password-wrapper[b-y4dhldq7pk] {
    position: relative;
    /* Fill the container. Without this the component silently narrows wherever its parent is a flex
       row: the wrapper becomes the flex item and sizes to content, so the editor inside it ends up
       shorter than the sibling fields. Measured on the sign-in form (.input-group is display:flex):
       the e-mail editor was 272px and this one 195.7px. Passing w-100 to the inner editor does not
       help — that is 100% OF THE WRAPPER. */
    width: 100%;
}

.password-toggle[b-y4dhldq7pk] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--input-radius, 6px);
    cursor: pointer;
    /* Design-system tokens instead of the hardcoded Bootstrap greys this used to carry, so the
       eye follows the theme like every other muted glyph in the app. */
    color: var(--dxds-neutral-110);
    padding: 4px 6px;
    font-size: 1rem;
    line-height: 1;
    z-index: 1;
    transition: color 0.2s;
}

.password-toggle:hover[b-y4dhldq7pk] {
    color: var(--dxds-neutral-130);
}

/* The toggle used to carry tabindex="-1", which made it mouse-only. It is now part of the tab
   sequence, so it needs a focus ring — reuse the editor's own token rather than the browser
   default outline. */
.password-toggle:focus-visible[b-y4dhldq7pk] {
    outline: none;
    box-shadow: 0 0 0 2px var(--input-ring-focus);
}

/* Hide browser-native password reveal/clear controls (Edge, Chrome). The custom .password-toggle
   eye is the only intended affordance; the native control otherwise draws an extra glyph (an "X"
   in text mode) on top of it, inside the field.

   ::deep GOES AFTER .password-wrapper, NOT BEFORE IT — this is the whole point, and getting it
   wrong is invisible. `::deep X` compiles to `[scope] X`, i.e. "X inside a descendant of my scoped
   root", but .password-wrapper IS this component's root, so it is never its own descendant and the
   rule matches nothing. `.password-wrapper ::deep X` compiles to `.password-wrapper[scope] X`,
   which does match. Measured live in dev (QA #239 / #209): the `[scope] .password-wrapper input`
   form matched 0 elements while `.password-wrapper[scope] input` matched 3.

   That mistake is why the browser's X was still being drawn over the eye long after QA #209 was
   closed: the rule below existed but had never applied. There is no compile error and no failing
   test for this — only the glyph on screen. */
.password-wrapper[b-y4dhldq7pk]  input::-ms-reveal,
.password-wrapper[b-y4dhldq7pk]  input::-ms-clear,
.password-wrapper[b-y4dhldq7pk]  input::-webkit-credentials-auto-fill-button {
    display: none;
}

/* No padding-right is reserved for the eye on purpose. Measured in dev: the DevExpress editor
   already keeps its right strip free — the <input> ends at the editor's inner edge and the button
   sits in that strip (input right 810px, button 810.7-838.7px, bordered box to 846.7px), so the
   text cannot run underneath the icon. An earlier attempt added `padding-right: 36px` here; it was
   both unnecessary and written with the broken ::deep form above. */
/* /Components/Features/Auth/Components/UserProfile.razor.rz.scp.css */
/* ========== TRIGGER (header area) ========== */
.user-profile[b-grjrkkvcy5] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background-color 0.15s;
}

.user-profile:hover[b-grjrkkvcy5] {
    background-color: rgba(0,0,0,0.03);
}

.user-info[b-grjrkkvcy5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.user-firstname[b-grjrkkvcy5] {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}

.user-lastname[b-grjrkkvcy5] {
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}

.user-avatar[b-grjrkkvcy5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003a7a 0%, #004d99 50%, #0060b8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,61,153,0.35);
    animation: avatarGlow-b-grjrkkvcy5 3s ease-in-out infinite;
}

.user-avatar[b-grjrkkvcy5]::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,77,179,0.35);
    animation: avatarRing-b-grjrkkvcy5 3s ease-in-out infinite;
}

@keyframes avatarGlow-b-grjrkkvcy5 {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,61,153,0.35), 0 0 8px rgba(0,77,179,0.15); }
    50% { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,61,153,0.5), 0 0 16px rgba(0,77,179,0.25); }
}

@keyframes avatarRing-b-grjrkkvcy5 {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.06); }
}

.user-initials[b-grjrkkvcy5] {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    user-select: none;
    letter-spacing: 0.5px;
}

/* ========== DROPDOWN ========== */
.user-profile-dropdown[b-grjrkkvcy5] {
    position: relative;
}

.user-profile-dropdown .dropdown-menu[b-grjrkkvcy5] {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    margin-top: 8px;
    padding: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
    z-index: 1000;
    overflow: hidden;
    display: none;
}

.user-profile-dropdown .dropdown-menu.show[b-grjrkkvcy5] {
    display: block;
    animation: dropdownFadeIn-b-grjrkkvcy5 0.15s ease-out;
}

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

/* Header inside dropdown */
.user-profile-dropdown .dropdown-header[b-grjrkkvcy5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.dropdown-user-avatar[b-grjrkkvcy5] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003a7a 0%, #004d99 50%, #0060b8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-user-initials[b-grjrkkvcy5] {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    user-select: none;
}

.dropdown-user-details[b-grjrkkvcy5] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dropdown-user-name[b-grjrkkvcy5] {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-user-email[b-grjrkkvcy5] {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.user-profile-dropdown .dropdown-divider[b-grjrkkvcy5] {
    height: 1px;
    background: #f1f5f9;
    margin: 0;
    border: none;
}

/* Menu items */
.user-profile-dropdown .dropdown-item[b-grjrkkvcy5] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background-color 0.1s;
    text-align: left;
}

.user-profile-dropdown .dropdown-item:hover[b-grjrkkvcy5] {
    background: #f8fafc;
    color: #0f172a;
}

.user-profile-dropdown .dropdown-item svg[b-grjrkkvcy5] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #94a3b8;
}

.user-profile-dropdown .dropdown-item:hover svg[b-grjrkkvcy5] {
    color: #64748b;
}

/* Danger item (sign out) */
.user-profile-dropdown .dropdown-item-danger[b-grjrkkvcy5] {
    color: #dc2626;
}

.user-profile-dropdown .dropdown-item-danger:hover[b-grjrkkvcy5] {
    background: #fef2f2;
    color: #dc2626;
}

.user-profile-dropdown .dropdown-item-danger svg[b-grjrkkvcy5] {
    color: #dc2626;
}

/* Backdrop */
.dropdown-backdrop[b-grjrkkvcy5] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* ========== PROFILE MODAL ========== */
.modal-overlay[b-grjrkkvcy5] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modalFadeIn-b-grjrkkvcy5 0.2s ease-out;
}

@keyframes modalFadeIn-b-grjrkkvcy5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-grjrkkvcy5] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 380px;
    margin: 1rem;
    animation: modalSlideIn-b-grjrkkvcy5 0.2s ease-out;
}

@keyframes modalSlideIn-b-grjrkkvcy5 {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-grjrkkvcy5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.modal-logo[b-grjrkkvcy5] { height: 20px; width: auto; }

.modal-close[b-grjrkkvcy5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.15s;
}

.modal-close:hover[b-grjrkkvcy5] { background: #f1f5f9; color: #0f172a; }

.modal-body[b-grjrkkvcy5] { padding: 20px; }

.profile-hero[b-grjrkkvcy5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 16px;
}

.profile-avatar-large[b-grjrkkvcy5] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003a7a 0%, #004d99 50%, #0060b8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,61,153,0.25);
}

.profile-initials-large[b-grjrkkvcy5] {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    user-select: none;
}

.profile-name[b-grjrkkvcy5] {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px 0;
}

.profile-email[b-grjrkkvcy5] {
    font-size: 12px;
    color: #94a3b8;
}

.profile-details[b-grjrkkvcy5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.profile-card[b-grjrkkvcy5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

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

.profile-value[b-grjrkkvcy5] {
    font-size: 12px;
    font-weight: 500;
    color: #0f172a;
}

.profile-provider[b-grjrkkvcy5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-provider span[b-grjrkkvcy5] {
    font-size: 12px;
    font-weight: 500;
    color: #0f172a;
}

.icon-microsoft-small[b-grjrkkvcy5] { flex-shrink: 0; }

.modal-footer[b-grjrkkvcy5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #f1f5f9;
    gap: 12px;
}

.modal-logo-footer[b-grjrkkvcy5] { height: 18px; width: auto; max-width: 100%; opacity: 0.5; object-fit: contain; object-position: left; }

.modal-button[b-grjrkkvcy5] {
    padding: 6px 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.modal-button:hover[b-grjrkkvcy5] { background: #f8fafc; border-color: #cbd5e1; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .user-info[b-grjrkkvcy5] { display: none; }
    .user-profile-dropdown .dropdown-menu[b-grjrkkvcy5] { min-width: 200px; }
}
/* /Components/Features/Auth/Pages/Profile.razor.rz.scp.css */
/* Content Container */
.content[b-z9bo6qts3j] {
    width: 100%;
    max-width: 400px;
    position: relative;
    flex-shrink: 0;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: rgb(var(--back-200));
    border-radius: 8px;
}

/* Loading Overlay */
.overlay[b-z9bo6qts3j] {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 8px;
}

/* Header Section */
.header[b-z9bo6qts3j] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.title[b-z9bo6qts3j] {
    font-family: var(--font-family-primary);
    font-size: 1.375rem;
    font-weight: 600;
    color: rgb(var(--text-50));
    margin: 0 0 0.375rem 0;
}

.subtitle[b-z9bo6qts3j] {
    font-family: var(--font-family-primary);
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgb(var(--text-400));
    margin: 0;
    line-height: 1.4;
}

/* Form Section */
.form[b-z9bo6qts3j] {
    display: flex;
    flex-direction: column;
}

/* Field Article */
.field[b-z9bo6qts3j] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}

/* Profile Info */
.profile-info[b-z9bo6qts3j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: rgb(var(--back-300));
    border-radius: 6px;
}

.info-row[b-z9bo6qts3j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgb(var(--neutral-200));
}

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

.info-row .label[b-z9bo6qts3j] {
    font-family: var(--font-family-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--text-400));
}

.info-row .value[b-z9bo6qts3j] {
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    font-weight: 400;
    color: rgb(var(--text-50));
}

/* Message Article */
.message[b-z9bo6qts3j] {
    min-height: 2rem;
    margin-bottom: 1rem;
}

.error[b-z9bo6qts3j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background-color: rgba(var(--danger-50), 0.5);
    border: 1px solid rgb(var(--danger-200));
    border-radius: 6px;
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    color: rgb(var(--danger-700));
}

.success[b-z9bo6qts3j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background-color: rgba(var(--success-50), 0.5);
    border: 1px solid rgb(var(--success-200));
    border-radius: 6px;
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    color: rgb(var(--success-700));
}

.error .icon[b-z9bo6qts3j],
.success .icon[b-z9bo6qts3j] {
    flex-shrink: 0;
}

/* Actions Article */
.actions[b-z9bo6qts3j] {
    margin-bottom: 0.875rem;
}
/* /Components/Features/Auth/Pages/SignIn.razor.rz.scp.css */
/* === LOGIN FORM === */

.login-form[b-wp5skpkw0u] { width: 100%; max-width: 320px; padding: 0 24px; }

/* Greeting area */
.login-form .form-greeting[b-wp5skpkw0u] {
    margin-bottom: 32px; text-align: center;
}
.login-form .form-greeting .greeting-icon[b-wp5skpkw0u] {
    width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(0,107,214,0.08), rgba(88,140,245,0.12));
    display: flex; align-items: center; justify-content: center;
}
.login-form .form-greeting h2[b-wp5skpkw0u] {
    font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.login-form .form-greeting p[b-wp5skpkw0u] {
    font-size: 13px; color: #94a3b8; line-height: 1.5;
}

/* Input groups */
[b-wp5skpkw0u] .login-form .input-group { margin-bottom: 18px; }
[b-wp5skpkw0u] .login-form .input-group label {
    display: block; font-size: 11px; font-weight: 600; color: #475569; margin-bottom: 7px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
[b-wp5skpkw0u] .input-group .dxbl-textbox { height: 44px; border-radius: 10px; border: 1.5px solid #dfe3e8; }
[b-wp5skpkw0u] .input-group .dxbl-textbox input { font-size: 14px; background: #f8f9fb; }
[b-wp5skpkw0u] .input-group .dxbl-textbox:focus-within { border-color: #006bd6; box-shadow: 0 0 0 3px rgba(0,107,214,0.08); }

/* The password field styles are NOT here anymore: this form uses the shared PasswordField
   component, whose own scoped CSS positions the show/hide eye and hides the browser-native
   reveal/clear controls. Two reasons not to put them back here:
   1. They would not apply — Blazor CSS isolation only reaches this page's own markup, not the
      child component's (the mistake behind QA #239).
   2. The rules that used to live here carried that same broken form (`::deep .signInPwd input...`
      compiles to `[scope] .signInPwd input`, and .signInPwd was on the editor itself), so they had
      never hidden anything either. */

/* Primary button */
.login-form .btn-primary[b-wp5skpkw0u] {
    width: 100%; height: 46px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #006bd6 0%, #0060c0 100%);
    color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    margin-top: 24px; transition: all 0.25s; font-family: inherit;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(0,107,214,0.2);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-form .btn-primary:hover[b-wp5skpkw0u] {
    box-shadow: 0 6px 20px rgba(0,107,214,0.3);
    transform: translateY(-1px);
}
.login-form .btn-primary:disabled[b-wp5skpkw0u] {
    opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Divider */
.login-form .divider[b-wp5skpkw0u] {
    display: flex; align-items: center; gap: 14px; margin: 22px 0; color: #c0c6ce; font-size: 11px;
    letter-spacing: 0.3px;
}
.login-form .divider[b-wp5skpkw0u]::before, .login-form .divider[b-wp5skpkw0u]::after { content: ''; flex: 1; height: 1px; background: #ebeef2; }

/* Microsoft button */
.login-form .btn-ms[b-wp5skpkw0u] {
    width: 100%; height: 46px; background: #fff; border: 1.5px solid #dfe3e8; border-radius: 10px;
    font-size: 13px; color: #0f172a; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s; font-family: inherit; font-weight: 500;
}
.login-form .btn-ms:hover[b-wp5skpkw0u] { background: #f6f8fa; border-color: #c8cdd4; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.login-form .btn-ms:disabled[b-wp5skpkw0u] { opacity: 0.6; cursor: not-allowed; }

/* Footer GFT logo */
.login-form .form-footer[b-wp5skpkw0u] {
    text-align: center; margin-top: 48px;
}
.login-form .form-footer img[b-wp5skpkw0u] { height: 28px; width: auto; display: block; margin: 0 auto; }

/* SSO variant removed — both modes now use .login-form + .form-greeting */
/* /Components/Features/Integrations/Pages/IntegrationLogs.razor.rz.scp.css */
/* Grid styles handled by fluent-overrides.css (monitoring-grid, grid-header, id-badge, progress-sm) */
/* /Components/Features/Integrations/Pages/Integrations.razor.rz.scp.css */
/* Dashboard and grid styles handled by fluent-overrides.css */
/* /Components/Features/Monitoring/Components/Monitoring/MonitoringForm.razor.rz.scp.css */
/* Detail label/value styles handled by fluent-overrides.css */
/* /Components/Features/Monitoring/Components/Monitoring/MonitoringOrderForm.razor.rz.scp.css */
/* Detail label/value styles handled by fluent-overrides.css */
/* /Components/Features/Monitoring/Components/Monitoring/MonitoringTransactionForm.razor.rz.scp.css */
/* ============================================================
   MonitoringTransactionForm — Scoped CSS
   Comprobante SPEI style
   ============================================================ */

.comprobante-body[b-3q83vwzk6z] {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 180px);
    padding: 0.25rem;
}

/* =============================
   1) Header (Comprobante SPEI)
   ============================= */
.comprobante-header[b-3q83vwzk6z] {
    background: #13254B;
    color: #ffffff;
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.header-left[b-3q83vwzk6z] { flex: 1; min-width: 0; }

.header-eyebrow[b-3q83vwzk6z] {
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.header-title[b-3q83vwzk6z] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.6rem 0;
    line-height: 1.15;
}

.header-amount[b-3q83vwzk6z] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.85rem;
    line-height: 1.1;
}

.header-currency[b-3q83vwzk6z] {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.75;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.header-meta[b-3q83vwzk6z] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: #e0e7ff;
}

.meta-label[b-3q83vwzk6z] {
    color: #93c5fd;
    font-weight: 500;
}

.meta-value[b-3q83vwzk6z] {
    color: #ffffff;
    font-weight: 600;
}

/* Status pill (top-right inside header) */
.status-pill[b-3q83vwzk6z] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-dot[b-3q83vwzk6z] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
}

.status-pill.pill-success[b-3q83vwzk6z] { color: #15803d; }
.status-pill.pill-warning[b-3q83vwzk6z] { color: #b45309; }
.status-pill.pill-danger[b-3q83vwzk6z]  { color: #b91c1c; }
.status-pill.pill-secondary[b-3q83vwzk6z] { color: #6b7280; }

/* =============================
   Section titles
   ============================= */
.section-title[b-3q83vwzk6z] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
    margin: 1.25rem 0 0.6rem 0;
}

.section-title:first-child[b-3q83vwzk6z] { margin-top: 0; }

/* =============================
   2) Parties cards
   ============================= */
.parties-row[b-3q83vwzk6z] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}

.party-card[b-3q83vwzk6z] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.9rem 1rem 1rem 1rem;
    position: relative;
    overflow: hidden;
}

.party-label[b-3q83vwzk6z] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
}

.party-label-ordenante[b-3q83vwzk6z] {
    color: #1d4ed8;
    background: #dbeafe;
}

.party-label-beneficiario[b-3q83vwzk6z] {
    color: #15803d;
    background: #dcfce7;
}

.party-name[b-3q83vwzk6z] {
    font-weight: 600;
    font-size: 0.92rem;
    color: #0f172a;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    word-break: break-word;
}

.party-detail[b-3q83vwzk6z] {
    font-size: 0.82rem;
    color: #334155;
    margin-bottom: 0.2rem;
}

.party-field-label[b-3q83vwzk6z] {
    color: #64748b;
    font-weight: 500;
}

/* =============================
   3) Trazabilidad
   ============================= */
.trazabilidad-card[b-3q83vwzk6z] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.5rem;
}

.trazabilidad-grid[b-3q83vwzk6z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}

.trazabilidad-item[b-3q83vwzk6z] { min-width: 0; }

.trazabilidad-label[b-3q83vwzk6z] {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.trazabilidad-value[b-3q83vwzk6z] {
    font-family: 'Consolas', 'Menlo', 'SF Mono', monospace;
    font-size: 0.85rem;
    color: #0f172a;
    font-weight: 600;
    word-break: break-all;
}

/* =============================
   4) Events table
   ============================= */
.events-table[b-3q83vwzk6z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.events-table thead th[b-3q83vwzk6z] {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.events-table tbody td[b-3q83vwzk6z] {
    padding: 0.5rem 0.75rem;
    color: #0f172a;
    vertical-align: middle;
}

.event-row td[b-3q83vwzk6z] { border-bottom: none; }

.event-row:not(:first-child) td[b-3q83vwzk6z] { border-top: 1px solid #f1f5f9; }

.event-message-row td[b-3q83vwzk6z] {
    padding: 0 0.75rem 0.6rem 0.75rem !important;
    color: #64748b;
    font-size: 0.78rem;
    word-break: break-word;
    line-height: 1.4;
}

.event-detail-flex[b-3q83vwzk6z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    align-items: center;
}

.event-msg-text[b-3q83vwzk6z] {
    font-style: italic;
    flex: 1 1 100%;
}

.event-log-ref[b-3q83vwzk6z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}

.event-log-label[b-3q83vwzk6z] {
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
}

/* Result badge */
.result-badge[b-3q83vwzk6z] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.result-badge.success[b-3q83vwzk6z] { background: #dcfce7; color: #15803d; }
.result-badge.failed[b-3q83vwzk6z]  { background: #fee2e2; color: #b91c1c; }
.result-badge.pending[b-3q83vwzk6z] { background: #f1f5f9; color: #64748b; }

/* Skeleton shimmer */
@keyframes shimmer-b-3q83vwzk6z {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.skeleton-row .sk[b-3q83vwzk6z] {
    display: block;
    height: 0.8rem;
    width: 100%;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer-b-3q83vwzk6z 1.5s infinite;
    border-radius: 4px;
}

.skeleton-row .sk.sk-sm[b-3q83vwzk6z] { width: 60%; }
.skeleton-row .sk.sk-xs[b-3q83vwzk6z] { width: 30%; margin: 0 auto; }

/* Warning alert */
.events-alert-warning[b-3q83vwzk6z] {
    padding: 0.6rem 0.9rem;
    background: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
    font-size: 0.85rem;
    border-radius: 0 6px 6px 0;
}

/* =============================
   Responsive
   ============================= */
@media (max-width: 640px) {
    .parties-row[b-3q83vwzk6z] { grid-template-columns: 1fr; }
    .trazabilidad-grid[b-3q83vwzk6z] { grid-template-columns: 1fr; }
    .comprobante-header[b-3q83vwzk6z] { flex-direction: column; }
    .status-pill[b-3q83vwzk6z] { align-self: flex-start; margin-top: 0.5rem; }
}
/* /Components/Features/Monitoring/Components/Monitoring/TransactionMonitorFilter.razor.rz.scp.css */
/* Date range picker inputs — match height and font size to other filter fields */
[b-ybe14tvg59] .filter-date-input {
    min-height: 36px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 14px !important;
}
/* /Components/Features/Monitoring/Pages/TransactionMonitor.razor.rz.scp.css */
/* SSE connection indicator */
.sse-status[b-nszbvlk73h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--dxbl-surface-color, #f8f9fa);
    border: 1px solid var(--dxbl-border-color, #dee2e6);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    user-select: none;
}

.sse-dot[b-nszbvlk73h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sse-dot-live[b-nszbvlk73h] {
    background-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    animation: sse-pulse-b-nszbvlk73h 2s ease-in-out infinite;
}

.sse-dot-off[b-nszbvlk73h] {
    background-color: #94a3b8;
    box-shadow: none;
}

.sse-label[b-nszbvlk73h] {
    color: var(--dxbl-text-secondary-color, #6c757d);
    line-height: 1;
}

@keyframes sse-pulse-b-nszbvlk73h {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1); }
}
/* /Components/Features/Operations/Pages/Operations.razor.rz.scp.css */
/* Dashboard, KPI, widget, status, and metric styles handled by fluent-overrides.css */
/* /Components/Features/Settings/Components/AuditLog/AuditLogDetailModal.razor.rz.scp.css */
[b-9i72eufhma] .dx-grid-data {
    height: 500px !important;
}
/* /Components/Features/Settings/Components/BusinessHours/BusinessHoursForm.razor.rz.scp.css */
/* Styles managed by global fluent-overrides.css */
/* /Components/Features/Settings/Components/Catalogs/CatalogsDesign.razor.rz.scp.css */
.h-100.d-flex.flex-column[b-2xo709ihlj] {
    height: calc(100vh - 90px) !important;
    overflow: hidden;
}
/* /Components/Features/Settings/Components/Filters/FiltersForm.razor.rz.scp.css */
/* /Components/Features/Settings/Components/Filters/FilterTreeList.razor.rz.scp.css */
.filter-treelist[b-ouzw3v0cvi] {
    height: 300px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
}

[b-ouzw3v0cvi] .dxbl-treelist-header-row th {
    background-color: var(--header-bg, #f8f9fa);
    font-weight: 600;
}

[b-ouzw3v0cvi] .dxbl-treelist-data-row:hover {
    background-color: var(--hover-bg, #f8f9fa);
}
/* Estilos ultra-compactos para la lógica de negocio */
.filter-design-container[b-ouzw3v0cvi]  .dxbl-grid {
    border-radius: 6px;
}

/* Moved here from an inline <style> block in FilterTreeList.razor. ::deep is a Blazor CSS-isolation
   construct that only the .razor.css compiler understands: inside a raw <style> tag it reached the
   browser verbatim, which dropped both rules as an unknown pseudo-element. They never applied. */
.filter-design-container[b-ouzw3v0cvi]  .dxbl-grid-detail-row > td {
    padding: 0 !important;
    background-color: var(--dxds-neutral-10) !important;
}

.filter-design-container[b-ouzw3v0cvi]  .dxbl-grid-detail-row {
    border-top: none !important;
}

/* Reducir el padding de la fila de detalle nativa de DevExpress */
.filter-design-container[b-ouzw3v0cvi]  .dxbl-grid-detail-row > td {
    padding: 0 !important;
    background-color: transparent !important;
}

.shadow-inner[b-ouzw3v0cvi] {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

/* Estilo de grupos */
.filter-design-container[b-ouzw3v0cvi]  .dxbl-grid-group-row {
    background-color: #f1f3f5 !important;
    font-size: 0.85rem !important;
}

.filter-design-container[b-ouzw3v0cvi]  .dxbl-grid-group-row-cell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    color: #495057 !important;
}

/* Evitar que el detalle añada lineas horizontales innecesarias */
.filter-design-container[b-ouzw3v0cvi]  .dxbl-grid-detail-row {
    border-top: none !important;
}
/* /Components/Features/Settings/Components/Process/ProcessTaskForm.razor.rz.scp.css */
.hint-text[b-m7fa74q0r4] {
    font-size: 0.75rem;
}
/* /Components/Features/Settings/Components/Roles/RoleTreeList.razor.rz.scp.css */
.role-tree-list[b-nxmzuzjzv8] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    padding: 0.5rem;
}

.role-list[b-nxmzuzjzv8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-item[b-nxmzuzjzv8] {
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.role-item:hover[b-nxmzuzjzv8] {
    background-color: var(--hover-bg, #f8f9fa);
}

.role-name[b-nxmzuzjzv8] {
    margin-left: 0.5rem;
    font-weight: 500;
}
/* /Components/Features/Settings/Components/Sequences/SequencesForm.razor.rz.scp.css */
/* Styles moved to fluent-overrides.css as global overrides */
/* /Components/Features/Settings/Components/Users/UserEdit.razor.rz.scp.css */
/* Scoped Layout classes for UserEdit modal */

/* Compact modal body padding */
[b-xodxspou4w] .user-edit-body {
    padding: 0.5rem 0.75rem !important;
}

/* General tab panel padding */
[b-xodxspou4w] .tab-panel {
    padding: 0.75rem 0.25rem;
}

/* TreeList/Grid inside tabs — fill popup body without exceeding it.
   80vh popup - header(56px) - footer(56px) - body-padding(16px) - tabs-bar(42px) - tab-padding(8px) - border(2px) = 80vh - 180px
   DxTreeList/DxGrid with VirtualScrollingEnabled handle their own scrollbar. */
[b-xodxspou4w] .user-edit-treelist,
[b-xodxspou4w] .user-edit-grid {
    height: calc(80vh - 238px);
}
/* /Components/Features/Settings/Pages/BusinessCalendar.razor.rz.scp.css */
/* Toolbar filters — inline with title, stretch to same height */
.calendar-toolbar[b-g9gqp7dlmo] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* Make wrapper divs propagate stretch to DX editors inside */
.calendar-toolbar > div[b-g9gqp7dlmo] {
    display: flex;
    align-items: stretch;
}

/* DX editors fill their wrapper */
[b-g9gqp7dlmo] .calendar-toolbar .dxbl-edit,
[b-g9gqp7dlmo] .calendar-toolbar .dxbl-input-group {
    height: 100%;
}

/* Weekend toggle panel — stretch fills height from toolbar */
.weekend-panel[b-g9gqp7dlmo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    background-color: var(--dxds-neutral-10, #fafbfc);
    border: 1px solid var(--input-border, var(--dxds-neutral-70));
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.75rem;
}

/* Force same font on ALL checkbox labels inside the panel */
[b-g9gqp7dlmo] .weekend-panel label,
[b-g9gqp7dlmo] .weekend-panel .dxbl-text,
[b-g9gqp7dlmo] .weekend-panel .dxbl-checkbox-content,
[b-g9gqp7dlmo] .weekend-panel span {
    font-size: 0.75rem !important;
}

.weekend-pills[b-g9gqp7dlmo] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.weekend-pill[b-g9gqp7dlmo] {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    border: 1px solid var(--dxds-neutral-50, #d3d3d2);
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.15s ease;
}

.weekend-pill.active[b-g9gqp7dlmo] {
    background-color: var(--dxds-primary-10, #e3f0fb);
    border-color: var(--dxds-primary-30, #bcd7f0);
}

.calendar-stats[b-g9gqp7dlmo] {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    font-size: 0.8125rem;
    color: var(--dxds-neutral-130);
    padding: 0.25rem 0;
    flex-shrink: 0;
}

.calendar-stats i[b-g9gqp7dlmo] {
    margin-right: 0.25rem;
}

/* Scrollable container for the calendar grid */
.calendar-scroll-container[b-g9gqp7dlmo] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Year calendar grid - 4 columns x 3 rows */
.year-calendar-grid[b-g9gqp7dlmo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.month-cell[b-g9gqp7dlmo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* Month label above each calendar */
.month-label[b-g9gqp7dlmo] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
    padding: 0.25rem 0;
    color: var(--dxds-neutral-160);
}

/* Compact month calendars — fit within cell */
[b-g9gqp7dlmo] .month-calendar {
    width: 100%;
    max-width: 100%;
}

/* Hide calendar header (navigation arrows + month title) */
[b-g9gqp7dlmo] .month-calendar .dxbl-calendar-header {
    display: none !important;
}

/* Hide calendar footer (Ahora / Limpiar buttons) */
[b-g9gqp7dlmo] .month-calendar .dxbl-calendar-footer {
    display: none !important;
}

/* Week number column — visible but discrete */
[b-g9gqp7dlmo] .month-calendar .dxbl-calendar-week-number {
    font-size: 0.65rem;
    color: var(--dxds-neutral-90, #999);
    opacity: 0.6;
}

/* Other-month day cells — invisible but keep grid spacing */
[b-g9gqp7dlmo] .other-month-day {
    visibility: hidden;
}

/* Collapse rows that only contain other-month days (no current-month <a> tags) */
[b-g9gqp7dlmo] .month-calendar tr:has(.other-month-day):not(:has(a)) {
    display: none;
}

/* Non-working day — soft fill + subtle border */
[b-g9gqp7dlmo] .dxbl-calendar-day > a.non-working-day {
    background-color: var(--dxds-primary-10, #e3f0fb);
    color: var(--dxds-primary-90, #006bd6);
    border: 1px solid var(--dxds-primary-30, #bcd7f0);
    font-weight: 600;
    text-decoration: none;
}

/* Non-working day hover — bg matches the border color for a deeper unified look */
[b-g9gqp7dlmo] .dxbl-calendar-day > a.non-working-day:hover {
    background-color: var(--dxds-primary-30, #bcd7f0) !important;
    color: var(--dxds-primary-120, #003971) !important;
}

[b-g9gqp7dlmo] .dxbl-calendar-day > a {
    text-decoration: none;
    position: relative;
}

/* Tooltip bubble via data attribute — light style */
[b-g9gqp7dlmo] .dxbl-calendar-day > a[data-tooltip]:not([data-tooltip=""])::before {
    content: attr(data-tooltip);
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: var(--dxds-neutral-160, #333);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--dxds-neutral-50, #e0e0e0);
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Tooltip arrow */
[b-g9gqp7dlmo] .dxbl-calendar-day > a[data-tooltip]:not([data-tooltip=""])::after {
    content: "";
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}

/* Show tooltip on hover */
[b-g9gqp7dlmo] .dxbl-calendar-day > a[data-tooltip]:not([data-tooltip=""]):hover::before,
[b-g9gqp7dlmo] .dxbl-calendar-day > a[data-tooltip]:not([data-tooltip=""]):hover::after {
    visibility: visible;
    opacity: 1;
}

/* Day cells — pointer cursor for double-click affordance */
[b-g9gqp7dlmo] .dxbl-calendar-day > a {
    cursor: pointer;
}

/* Day popup layout */
.day-popup-body[b-g9gqp7dlmo] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Textarea fills full width */
[b-g9gqp7dlmo] .day-popup-body .dxbl-memo {
    width: 100%;
}

.day-popup-label[b-g9gqp7dlmo] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dxds-neutral-130);
}

.day-popup-footer[b-g9gqp7dlmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.day-popup-footer-left[b-g9gqp7dlmo] {
    flex-shrink: 0;
}

.day-popup-footer-right[b-g9gqp7dlmo] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Outline danger style for Desmarcar button */
[b-g9gqp7dlmo] .btn-outline-danger {
    color: var(--dxds-danger-80, #dc3545) !important;
    border: 1px solid var(--dxds-danger-80, #dc3545) !important;
    background-color: transparent !important;
}

[b-g9gqp7dlmo] .btn-outline-danger:hover {
    color: #fff !important;
    background-color: var(--dxds-danger-80, #dc3545) !important;
}

/* Responsive: 3 columns on medium, 2 on small */
@media (max-width: 1200px) {
    .year-calendar-grid[b-g9gqp7dlmo] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .year-calendar-grid[b-g9gqp7dlmo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-stats[b-g9gqp7dlmo] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Features/Settings/Pages/Filters.razor.rz.scp.css */
/* ::deep required: .dxbl-grid is rendered by the DevExpress child component, so a plain
   descendant selector never carries this page's scope attribute and the rule cannot match.
   Sibling rules in this same file already use ::deep — this one was missed. */
.filter-design-container[b-99t73h1gjn]  .dxbl-grid {
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.filter-design-container[b-99t73h1gjn]  .dxbl-grid-detail-row > td {
    padding: 0 !important;
    background-color: transparent !important;
}

.filter-callout[b-99t73h1gjn] {
    display: flex;
    margin: 0 16px 4px 32px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

.filter-callout-border[b-99t73h1gjn] {
    width: 4px;
    flex-shrink: 0;
    background: #3b82f6;
}

.filter-callout-body[b-99t73h1gjn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    flex: 1;
    min-width: 0;
}

.filter-callout-icon[b-99t73h1gjn] {
    font-size: 15px;
    color: #3b82f6;
    flex-shrink: 0;
}

.filter-callout-expr[b-99t73h1gjn] {
    font-size: 13px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
}

.filter-design-container[b-99t73h1gjn]  .dxbl-grid-detail-row {
    border-top: none !important;
}

.filter-design-container[b-99t73h1gjn]  .dxbl-grid-row:hover {
    background-color: rgba(0, 120, 212, 0.03) !important;
}

.filter-design-container[b-99t73h1gjn]  .dxbl-grid-filter-row {
    background-color: #f8f9fa;
}
/* /Components/Features/Settings/Pages/Roles.razor.rz.scp.css */
.page-layout[b-1zco880ffm] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);    
    overflow: hidden;
}

.page-header[b-1zco880ffm] {
    flex: 0 0 auto;
    margin-bottom: 1rem;
}

.header-actions[b-1zco880ffm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-hover:hover[b-1zco880ffm] {
    background-color: #e7f1ff;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.grid-container[b-1zco880ffm] {
    flex: 1;
    min-height: 0;    
    width: 0;
    min-width: 100%;
    position: relative;
    overflow: hidden;
}

[b-1zco880ffm] .permission-treelist {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

[b-1zco880ffm] .permission-treelist td {
    vertical-align: middle;
}

/* The role name truncates against its header cell, never against a fixed pixel cap.
   The column is user-resizable (ColumnResizeMode.ColumnsContainer), so a px max-width kept the
   name clipped no matter how wide the user made the column (QA #237).
   min-width: 0 is required because this span is a flex item: without it a flex item refuses to
   shrink below its content width, so a long name would overflow the cell instead of ellipsizing. */
.role-action-cell[b-1zco880ffm] {
    max-width: 100%;
    min-width: 0;
}

/* The kebab keeps its size while the name shrinks — otherwise a long role name squashes it. */
.role-label-sm[b-1zco880ffm] {
    font-size: 0.8em;
    flex-shrink: 0;
}
/* /Components/Features/Settings/Pages/Sequences.razor.rz.scp.css */
/* Grid styles handled by fluent-overrides.css (monitoring-grid, grid-header, id-badge) */
/* /Components/Features/Settings/Pages/Settings.razor.rz.scp.css */
/* Base dashboard, KPI, widget, status, metric styles → fluent-overrides.css */

/* ========== OPERATIONAL STATUS (Settings-specific) ========== */

.ops-status[b-qnfswmtgj0] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.ops-card[b-qnfswmtgj0] {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ops-indicator[b-qnfswmtgj0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.ops-indicator.green[b-qnfswmtgj0] {
    background: rgb(var(--success-600));
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.4);
}

.ops-indicator.blue[b-qnfswmtgj0] {
    background: rgb(var(--primary-600));
}

.ops-indicator.red[b-qnfswmtgj0] {
    background: rgb(var(--danger-600));
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.4);
}

.ops-info[b-qnfswmtgj0] { flex: 1; }
.ops-label[b-qnfswmtgj0] { font-size: 12px; font-weight: 600; color: rgb(var(--text-500)); margin-bottom: 3px; }
.ops-detail[b-qnfswmtgj0] { font-size: 11.5px; color: rgb(var(--neutral-600)); line-height: 1.5; }

/* ========== ALERTS (Settings-specific) ========== */

.alert-list[b-qnfswmtgj0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alert-item[b-qnfswmtgj0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    color: rgb(var(--neutral-600));
}

.alert-item.warning[b-qnfswmtgj0] { background: rgba(217, 119, 6, 0.06); }
.alert-item.warning .alert-icon[b-qnfswmtgj0] { color: #d97706; font-size: 14px; }
.alert-item.success[b-qnfswmtgj0] { background: rgba(22, 163, 74, 0.05); }
.alert-item.success .alert-icon[b-qnfswmtgj0] { color: rgb(var(--success-600)); font-size: 14px; }
.alert-text strong[b-qnfswmtgj0] { color: rgb(var(--text-500)); }

/* ========== AUDIT TABLE (Settings-specific) ========== */

.audit-table[b-qnfswmtgj0] { display: flex; flex-direction: column; }

.audit-row[b-qnfswmtgj0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(var(--neutral-100));
    font-size: 12.5px;
}

.audit-row:last-child[b-qnfswmtgj0] { border-bottom: none; }
.audit-who[b-qnfswmtgj0] { display: flex; align-items: center; gap: 8px; min-width: 150px; color: rgb(var(--neutral-600)); }

.audit-avatar[b-qnfswmtgj0] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    background: linear-gradient(135deg, rgb(var(--primary-800)), rgb(var(--primary-600)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-what[b-qnfswmtgj0] { flex: 1; color: rgb(var(--neutral-600)); }
.audit-what strong[b-qnfswmtgj0] { color: rgb(var(--text-500)); }
.audit-when[b-qnfswmtgj0] { font-size: 11px; color: rgb(var(--neutral-400)); white-space: nowrap; }
.audit-empty[b-qnfswmtgj0] { padding: 20px 0; text-align: center; color: rgb(var(--neutral-400)); font-size: 12.5px; }

/* ========== COUNTERS (Settings-specific) ========== */

.counters-row[b-qnfswmtgj0] { display: flex; gap: 12px; margin-bottom: 20px; }

.counter-item[b-qnfswmtgj0] {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 14px 12px;
    text-align: center;
}

.counter-value[b-qnfswmtgj0] { font-size: 22px; font-weight: 700; color: rgb(var(--text-500)); font-variant-numeric: tabular-nums; }
.counter-label[b-qnfswmtgj0] { font-size: 11px; color: rgb(var(--neutral-400)); margin-top: 2px; }
/* /Components/Features/Settings/Pages/Users.razor.rz.scp.css */
/* Header actions */
.header-actions[b-8pxh8gf8y5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

[b-8pxh8gf8y5] .search-input {
    width: 300px;
}

/* Grid de usuarios */
[b-8pxh8gf8y5] .users-grid {
    height: 100%;
    border-radius: 8px;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */

/* Fix: override browser autofill blue background */
[b-0bqx9jtzze] input:-webkit-autofill,
[b-0bqx9jtzze] input:-webkit-autofill:hover,
[b-0bqx9jtzze] input:-webkit-autofill:focus,
[b-0bqx9jtzze] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    border: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

[b-0bqx9jtzze] .dxbl-textbox input:-webkit-autofill,
[b-0bqx9jtzze] .dxbl-textbox input:-webkit-autofill:hover,
[b-0bqx9jtzze] .dxbl-textbox input:-webkit-autofill:focus,
[b-0bqx9jtzze] .dxbl-textbox input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    border: none !important;
    caret-color: #000 !important;
}

/* === AUTH LAYOUT === */
.auth-layout[b-0bqx9jtzze] {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* LEFT PANEL */
.auth-branding[b-0bqx9jtzze] {
    width: 65%; position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    background:
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(0,57,113,0.4) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(0,86,172,0.25) 0%, transparent 50%),
        linear-gradient(160deg, #060d1a 0%, #0a1628 40%, #0e1f3c 70%, #081222 100%);
    color: white;
}

/* Wave animation - 5 fins at bottom */
[b-0bqx9jtzze] .wave-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
[b-0bqx9jtzze] .fin-wave { position: absolute; width: 200%; left: -50%; border-radius: 45%; }
[b-0bqx9jtzze] .fw-1 { height: 800px; bottom: -400px; background: linear-gradient(180deg, rgba(0,107,214,0.25), transparent 70%); opacity: 0.7; animation: wr-b-0bqx9jtzze 55s linear infinite; }
[b-0bqx9jtzze] .fw-2 { height: 650px; bottom: -320px; background: linear-gradient(180deg, rgba(88,140,245,0.2), transparent 65%); opacity: 0.5; animation: wr-b-0bqx9jtzze 70s linear infinite reverse; }
[b-0bqx9jtzze] .fw-3 { height: 550px; bottom: -280px; background: linear-gradient(180deg, rgba(0,57,113,0.25), transparent 60%); opacity: 0.4; animation: wr-b-0bqx9jtzze 45s linear infinite; animation-delay: -12s; }
[b-0bqx9jtzze] .fw-4 { height: 500px; top: -300px; background: linear-gradient(0deg, rgba(0,107,214,0.12), transparent 55%); opacity: 0.35; animation: wr-b-0bqx9jtzze 80s linear infinite reverse; }
[b-0bqx9jtzze] .fw-5 { height: 450px; bottom: -250px; background: linear-gradient(180deg, rgba(22,163,74,0.08), transparent 50%); opacity: 0.3; animation: wr-b-0bqx9jtzze 60s linear infinite; animation-delay: -20s; }
@keyframes wr-b-0bqx9jtzze { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Particle network canvas */
[b-0bqx9jtzze] .network-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Content layers */
.branding-content[b-0bqx9jtzze] { position: relative; z-index: 3; display: flex; flex-direction: column; height: 100%; }

.login-left-top[b-0bqx9jtzze] { padding: 32px; }
.login-left-center[b-0bqx9jtzze] { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 64px; }
.login-left-bottom[b-0bqx9jtzze] { padding: 32px; }

/* GFT badge */
[b-0bqx9jtzze] .gft-badge-light { display: flex; align-items: center; gap: 6px; }
[b-0bqx9jtzze] .gft-badge-light svg { height: 18px; width: auto; }

/* Brand block */
[b-0bqx9jtzze] .brand-block .brand-icon { margin-bottom: 16px; }
[b-0bqx9jtzze] .brand-block .brand-text { font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; }
[b-0bqx9jtzze] .brand-block .brand-text .w { color: #fff; }
[b-0bqx9jtzze] .brand-block .brand-text .a { color: #588cf5; }

/* Value props rotation */
[b-0bqx9jtzze] .value-props { margin-top: 40px; height: 72px; position: relative; }
[b-0bqx9jtzze] .value-prop { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 1s ease; }
[b-0bqx9jtzze] .value-prop.active { opacity: 1; }
[b-0bqx9jtzze] .value-prop .main { font-size: 18px; color: #fff; font-weight: 600; line-height: 1.3; }
[b-0bqx9jtzze] .value-prop .sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 8px; line-height: 1.5; max-width: 440px; }

.login-footer[b-0bqx9jtzze] { font-size: 10px; color: rgba(255,255,255,0.15); }

/* RIGHT PANEL */
.auth-form-container[b-0bqx9jtzze] {
    width: 35%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}

/* Ensure DxLoadingPanel doesn't break centering */
[b-0bqx9jtzze] .auth-form-container .dxbl-loading-panel {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}

[b-0bqx9jtzze] .auth-form-container .dxbl-loading-panel-target-content {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .auth-layout[b-0bqx9jtzze] {
        flex-direction: column;
    }

    .auth-branding[b-0bqx9jtzze] {
        display: none;
    }

    .auth-form-container[b-0bqx9jtzze] {
        width: 100%;
        min-height: 100vh;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-196vsrcciu] {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    width: 100vw;
}

.rail-area[b-196vsrcciu] {
    grid-row: 1 / -1;
}

.right-panel[b-196vsrcciu] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header-area[b-196vsrcciu] {
    flex-shrink: 0;
}

.bracket-area[b-196vsrcciu] {
    flex-shrink: 0;
}

.content-area[b-196vsrcciu] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #f5f7fa;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Mirrors NotFound.razor.css so the two failure screens read as one family. Kept as a separate
   scoped file rather than shared classes because the error page must stay renderable with the
   fewest possible dependencies — it is shown when something has already gone wrong. */

.error-container[b-a1kmtjitqg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, rgb(var(--back-50)) 0%, rgb(var(--back-100)) 100%);
    padding: 1.5rem;
}

.error-content[b-a1kmtjitqg] {
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.error-code[b-a1kmtjitqg] {
    font-family: var(--font-family-primary);
    font-size: 5rem;
    font-weight: 800;
    color: rgb(var(--neutral-200));
    line-height: 1;
    margin-bottom: 0.25rem;
    letter-spacing: -0.05em;
}

.error-title[b-a1kmtjitqg] {
    font-family: var(--font-family-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--text-50));
    margin: 0 0 0.5rem 0;
}

.error-description[b-a1kmtjitqg] {
    font-family: var(--font-family-primary);
    font-size: 0.9375rem;
    font-weight: 400;
    color: rgb(var(--text-300));
    line-height: 1.5;
    margin: 0 0 1.25rem 0;
}

.error-trace[b-a1kmtjitqg] {
    font-family: var(--font-family-primary);
    font-size: 0.8125rem;
    color: rgb(var(--text-300));
    margin: 0 0 1.5rem 0;
}

.error-trace-label[b-a1kmtjitqg] {
    margin-right: 0.5rem;
}

/* The TraceId is meant to be read aloud or copied into a support ticket, so it gets a monospace
   face and room to break on narrow screens rather than overflowing the card. */
.error-trace-value[b-a1kmtjitqg] {
    font-family: var(--font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8125rem;
    color: rgb(var(--text-100));
    background-color: rgb(var(--back-100));
    border: 1px solid rgb(var(--neutral-300));
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    overflow-wrap: anywhere;
}

.error-actions[b-a1kmtjitqg] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.error-btn[b-a1kmtjitqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.error-btn-primary[b-a1kmtjitqg] {
    background-color: rgb(var(--text-50));
    color: white;
}

.error-btn-primary:hover[b-a1kmtjitqg] {
    background-color: rgb(var(--text-100));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
    .error-code[b-a1kmtjitqg] {
        font-size: 4rem;
    }

    .error-title[b-a1kmtjitqg] {
        font-size: 1.25rem;
    }

    .error-actions[b-a1kmtjitqg] {
        flex-direction: column;
    }

    .error-btn[b-a1kmtjitqg] {
        width: 100%;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home Page Styles */

.home-wrapper[b-yjow4hfary] {
    grid-column: 1 / -1; /* Occupy full width including sidebar area */
    background-color: rgb(var(--back-50));
    min-height: 100vh;
}

/* Main Content */
.home-content[b-yjow4hfary] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 3rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Welcome Section */
.welcome-section[b-yjow4hfary] {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 900px;
}

.welcome-title[b-yjow4hfary] {
    font-family: var(--font-family-primary);
    font-size: 2.5rem;
    font-weight: 700;
    color: rgb(var(--text-50));
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.payments-logo-inline[b-yjow4hfary] {
    height: 2.75rem;
    width: auto;
    vertical-align: middle;
}

.welcome-description[b-yjow4hfary] {
    font-family: var(--font-family-primary);
    font-size: 1.0625rem;
    font-weight: 400;
    color: rgb(var(--text-300));
    line-height: 1.7;
    margin: 0;
}

/* Modules Grid */
.modules-grid[b-yjow4hfary] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 1000px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .modules-grid[b-yjow4hfary] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
        max-width: 600px;
    }

    .home-content[b-yjow4hfary] {
        padding: 2rem 2rem;
        padding-top: calc(64px + 1rem);
    }
}

@media (max-width: 768px) {
    .home-content[b-yjow4hfary] {
        padding: 2rem 1.5rem;
        padding-top: calc(56px + 1rem);
    }

    .welcome-section[b-yjow4hfary] {
        margin-bottom: 2.5rem;
    }

    .welcome-title[b-yjow4hfary] {
        font-size: 1.875rem;
    }

    .payments-logo-inline[b-yjow4hfary] {
        height: 2.25rem;
    }

    .welcome-description[b-yjow4hfary] {
        font-size: 0.9375rem;
    }

    .modules-grid[b-yjow4hfary] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .home-content[b-yjow4hfary] {
        padding: 1.5rem 1rem;
        padding-top: calc(52px + 0.75rem);
    }

    .welcome-section[b-yjow4hfary] {
        margin-bottom: 2rem;
    }

    .welcome-title[b-yjow4hfary] {
        font-size: 1.5rem;
    }

    .payments-logo-inline[b-yjow4hfary] {
        height: 1.875rem;
    }

    .welcome-description[b-yjow4hfary] {
        font-size: 0.875rem;
    }

    .modules-grid[b-yjow4hfary] {
        gap: 0.625rem;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound-container[b-952xyqx2kb] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, rgb(var(--back-50)) 0%, rgb(var(--back-100)) 100%);
    padding: 1.5rem;
}

.notfound-content[b-952xyqx2kb] {
    text-align: center;
    max-width: 400px;
    width: 100%;
}


.notfound-code[b-952xyqx2kb] {
    font-family: var(--font-family-primary);
    font-size: 5rem;
    font-weight: 800;
    color: rgb(var(--neutral-200));
    line-height: 1;
    margin-bottom: 0.25rem;
    letter-spacing: -0.05em;
}

.notfound-title[b-952xyqx2kb] {
    font-family: var(--font-family-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--text-50));
    margin: 0 0 0.5rem 0;
}

.notfound-description[b-952xyqx2kb] {
    font-family: var(--font-family-primary);
    font-size: 0.9375rem;
    font-weight: 400;
    color: rgb(var(--text-300));
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
}

.notfound-actions[b-952xyqx2kb] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.notfound-btn[b-952xyqx2kb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.notfound-btn-primary[b-952xyqx2kb] {
    background-color: rgb(var(--text-50));
    color: white;
}

.notfound-btn-primary:hover[b-952xyqx2kb] {
    background-color: rgb(var(--text-100));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notfound-btn-secondary[b-952xyqx2kb] {
    background-color: white;
    color: rgb(var(--text-100));
    border: 1px solid rgb(var(--neutral-300));
}

.notfound-btn-secondary:hover[b-952xyqx2kb] {
    background-color: rgb(var(--back-50));
    border-color: rgb(var(--neutral-400));
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .notfound-code[b-952xyqx2kb] {
        font-size: 4rem;
    }

    .notfound-title[b-952xyqx2kb] {
        font-size: 1.25rem;
    }

    .notfound-actions[b-952xyqx2kb] {
        flex-direction: column;
    }

    .notfound-btn[b-952xyqx2kb] {
        width: 100%;
    }
}
/* /Components/Shared/CategoryCard.razor.rz.scp.css */
.module-card[b-ifrweacgyk] {
    background-color: white;
    border-radius: 8px;
    padding: 1rem 0.875rem;
    box-shadow: var(--shadow-low);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.module-card:hover[b-ifrweacgyk] {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.module-header[b-ifrweacgyk] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    width: 100%;
}

.module-icon[b-ifrweacgyk] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.375rem;
    color: white;
    background-color: #6c757d; /* Default fallback color */
}

.module-tags[b-ifrweacgyk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.module-tag[b-ifrweacgyk] {
    font-family: var(--font-family-primary);
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgb(var(--text-300));
    line-height: 1.2;
}

.module-title[b-ifrweacgyk] {
    font-family: var(--font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(var(--text-50));
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.module-description[b-ifrweacgyk] {
    font-family: var(--font-family-primary);
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgb(var(--text-400));
    line-height: 1.45;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .module-card[b-ifrweacgyk] {
        padding: 0.875rem 0.75rem;
    }

    .module-header[b-ifrweacgyk] {
        gap: 0.625rem;
        margin-bottom: 0.75rem;
    }

    .module-icon[b-ifrweacgyk] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .module-tags[b-ifrweacgyk] {
        gap: 0.3125rem;
    }

    .module-tag[b-ifrweacgyk] {
        font-size: 0.625rem;
    }

    .module-title[b-ifrweacgyk] {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
    }

    .module-description[b-ifrweacgyk] {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    .module-card[b-ifrweacgyk] {
        padding: 0.75rem 0.625rem;
    }

    .module-header[b-ifrweacgyk] {
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .module-icon[b-ifrweacgyk] {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    .module-tags[b-ifrweacgyk] {
        gap: 0.25rem;
    }

    .module-tag[b-ifrweacgyk] {
        font-size: 0.5625rem;
    }

    .module-title[b-ifrweacgyk] {
        font-size: 0.8125rem;
        margin-bottom: 0.25rem;
    }

    .module-description[b-ifrweacgyk] {
        font-size: 0.6875rem;
        line-height: 1.35;
    }
}
/* /Components/Shared/DashboardRefresh.razor.rz.scp.css */
.dashboard-refresh[b-0orb2f2ots] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.refresh-timestamp[b-0orb2f2ots] {
    font-size: 11px;
    color: #94a3b8;
    user-select: none;
}

.refresh-btn[b-0orb2f2ots] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}

.refresh-btn:hover[b-0orb2f2ots] {
    border-color: #cbd5e1;
    color: #0f172a;
    background: #f8fafc;
}

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

.refresh-btn.refreshing i[b-0orb2f2ots] {
    animation: spin-refresh-b-0orb2f2ots 0.8s linear infinite;
}

@keyframes spin-refresh-b-0orb2f2ots {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/ErrorBoundary/ComponentError.razor.rz.scp.css */
.component-error[b-kik5ltlfwb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 1rem;
    background-color: var(--color-error-bg, #fef2f2);
    border: 1px solid var(--color-error-border, #fecaca);
    border-radius: 0.5rem;
    text-align: center;
}

.component-error-icon[b-kik5ltlfwb] {
    color: var(--color-error, #dc2626);
    margin-bottom: 1rem;
}

.component-error-content[b-kik5ltlfwb] {
    max-width: 500px;
}

.component-error-title[b-kik5ltlfwb] {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-error-title, #991b1b);
}

.component-error-message[b-kik5ltlfwb] {
    margin: 0 0 0.75rem;
    color: var(--color-error-text, #7f1d1d);
    font-size: 0.9375rem;
}

.component-error-correlation[b-kik5ltlfwb] {
    margin: 0 0 1rem;
    color: var(--color-text-muted, #6b7280);
}

.component-error-correlation code[b-kik5ltlfwb] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
    font-size: 0.8125rem;
    background-color: var(--color-code-bg, #f3f4f6);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.component-error-details[b-kik5ltlfwb] {
    margin-top: 1rem;
    text-align: left;
    width: 100%;
}

.component-error-details summary[b-kik5ltlfwb] {
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.component-error-details pre[b-kik5ltlfwb] {
    background-color: var(--color-code-bg, #1f2937);
    color: var(--color-code-text, #f9fafb);
    padding: 1rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    overflow-x: auto;
    margin: 0.5rem 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.component-error-stack[b-kik5ltlfwb] {
    max-height: 200px;
    overflow-y: auto;
}

.component-error-actions[b-kik5ltlfwb] {
    margin-top: 1rem;
}

.btn-recover[b-kik5ltlfwb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: white;
    background-color: var(--color-primary, #2563eb);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-recover:hover[b-kik5ltlfwb] {
    background-color: var(--color-primary-hover, #1d4ed8);
}

.btn-recover:focus[b-kik5ltlfwb] {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

.btn-recover svg[b-kik5ltlfwb] {
    flex-shrink: 0;
}
/* /Components/Shared/ErrorBoundary/CustomErrorBoundary.razor.rz.scp.css */
/* Styles handled by ComponentError.razor.css */
/* /Components/Shared/Main/BracketNav.razor.rz.scp.css */
/* BracketNav — scoped, no styles needed. Global overrides in fluent-overrides.css */
/* /Components/Shared/Main/IconRailSidebar.razor.rz.scp.css */
.icon-rail[b-n3lzju0n8n] {
    background: #1a2332;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    position: relative;
    z-index: 1100;
    width: 56px;
    height: 100%;
}

.icon-rail .rail-logo[b-n3lzju0n8n] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.rail-nav[b-n3lzju0n8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding-top: 8px;
}

.rail-item[b-n3lzju0n8n] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    position: relative;
}

.rail-item:hover[b-n3lzju0n8n] {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
}

.rail-item.active[b-n3lzju0n8n] {
    background: rgba(255,255,255,0.08);
    color: var(--rail-color, #588cf5);
}

[b-n3lzju0n8n] .rail-item svg {
    width: 20px;
    height: 20px;
}

.rail-item .tooltip[b-n3lzju0n8n] {
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10000;
}

.rail-item:hover .tooltip[b-n3lzju0n8n] {
    opacity: 1;
}

.rail-bottom[b-n3lzju0n8n] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}

.rail-version[b-n3lzju0n8n] {
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.35);
    text-align: center;
}

.rail-gft-logo[b-n3lzju0n8n] {
    width: 36px;
}

[b-n3lzju0n8n] .rail-gft-logo svg {
    width: 100%;
    height: auto;
    display: block;
}
/* /Components/Shared/Main/MainHeader.razor.rz.scp.css */
.header-bar[b-mk9qh5r5c9] {
    height: 52px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

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

/* Chevron Breadcrumb */
.breadcrumb[b-mk9qh5r5c9] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}

.bc-step[b-mk9qh5r5c9] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 16px 0 20px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    background: #eef1f6;
    position: relative;
    white-space: nowrap;
}

[b-mk9qh5r5c9] .bc-step i {
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.7;
}

[b-mk9qh5r5c9] .bc-step.active i {
    opacity: 1;
}

.bc-step:first-child[b-mk9qh5r5c9] {
    border-radius: 6px 0 0 6px;
    padding-left: 14px;
}

.bc-step:last-child[b-mk9qh5r5c9] {
    border-radius: 0 6px 6px 0;
}

.bc-step:only-child[b-mk9qh5r5c9] {
    border-radius: 6px;
}

/* Arrow connector */
.bc-step[b-mk9qh5r5c9]::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid #eef1f6;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    z-index: 1;
}

.bc-step:last-child[b-mk9qh5r5c9]::after {
    display: none;
}

.bc-step + .bc-step[b-mk9qh5r5c9] {
    padding-left: 22px;
}

/* Active step */
.bc-step.active[b-mk9qh5r5c9] {
    background: #243347;
    color: #fff;
    font-weight: 600;
}

.bc-step.active[b-mk9qh5r5c9]::after {
    border-left-color: #243347;
}

.header-right[b-mk9qh5r5c9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Dashboard Refresh — Unified Toolbar */
.header-refresh[b-mk9qh5r5c9] {
    display: flex;
    align-items: center;
    height: 30px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    user-select: none;
}

.refresh-auto[b-mk9qh5r5c9] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 28px;
    border-right: 1px solid #e2e8f0;
    cursor: default;
}

.refresh-dot[b-mk9qh5r5c9] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    animation: pulse-dot-b-mk9qh5r5c9 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse-dot-b-mk9qh5r5c9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.refresh-timestamp[b-mk9qh5r5c9] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    border-right: 1px solid #e2e8f0;
}

[b-mk9qh5r5c9] .refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    padding: 0;
}

[b-mk9qh5r5c9] .refresh-btn:hover {
    color: #0f172a;
    background: #e2e8f0;
}

[b-mk9qh5r5c9] .refresh-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

[b-mk9qh5r5c9] .refresh-btn.refreshing i {
    animation: spin-refresh-b-mk9qh5r5c9 0.8s linear infinite;
}

@keyframes spin-refresh-b-mk9qh5r5c9 {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/Main/MainSidebar.razor.rz.scp.css */
.sidebar[b-oxggfia1qc] {
    align-items: stretch;
    background-color: rgb(var(--neutral-700));
    border-radius: 9px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0px 6px 6px 6px;
    min-height: 0;
    overflow: hidden; /* Normal cuando está grande */
    height: calc(100vh - 71px);
    width: auto;
    transition: all .6s cubic-bezier(.694, .0482, .335, 1);
    position: relative;
    z-index: 1050;
}

    .sidebar .header[b-oxggfia1qc] {
        align-items: flex-end;
        box-sizing: border-box;
        color: rgba(var(--foreground-color-secondary), .9);
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        height: 48px;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
    }

    .sidebar .toggle[b-oxggfia1qc] {
        background-color: transparent;
        height: 48px;
        margin: 0;
        padding: 0px 11px;
        transition: transform .6s cubic-bezier(.694, .0482, .335, 1);
        z-index: 2;
    }

        .sidebar .toggle i[b-oxggfia1qc] {
            color: rgba(var(--neutral-50), .9);
            font-size: 32px;
        }

        .sidebar .toggle.open[b-oxggfia1qc] {
            transform: rotate(180deg);
        }

        .sidebar .toggle.closed[b-oxggfia1qc] {
            transform: rotate(0deg);
        }

    .sidebar.large[b-oxggfia1qc] {
        min-width: 200px;
        width: 220px;
    }

    .sidebar.small[b-oxggfia1qc] {
        min-width: 56px;
        width: 56px;
    }

    .sidebar .content[b-oxggfia1qc] {
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0px;
        padding: 0 6px;
        height: calc(100vh - 132px);
    }

        .sidebar .content[b-oxggfia1qc]::-webkit-scrollbar {
            display: none;
        }

    /* ============================================
   FLYOUT OVERFLOW — delayed until after collapse transition
   so content stays clipped during the .6s width animation.
   ============================================ */
    .sidebar.small[b-oxggfia1qc] {
        animation: enable-flyout-overflow-b-oxggfia1qc 0s .65s forwards;
    }

    .sidebar.small .content[b-oxggfia1qc] {
        animation: enable-flyout-overflow-b-oxggfia1qc 0s .65s forwards;
    }

@keyframes enable-flyout-overflow-b-oxggfia1qc {
    to {
        overflow: visible;
    }
}


/* ============================================
   Scroll Chevrons - CSS Scroll-Driven
   ============================================ */
@keyframes detect-scroll-b-oxggfia1qc {
    from, to {
        --can-scroll:;
    }
}

.sidebar .content[b-oxggfia1qc] {
    scroll-timeline: --sidebar-scroll y;
    animation: detect-scroll-b-oxggfia1qc linear;
    animation-timeline: --sidebar-scroll;
    animation-fill-mode: none;
}

.scroll-chevron[b-oxggfia1qc] {
    position: sticky;
    left: 0;
    right: 0;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
    --visibility-if-can-scroll: var(--can-scroll) visible;
    --visibility-if-cant-scroll: hidden;
    visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
    animation-fill-mode: both;
    animation-timeline: --sidebar-scroll;
}

    .scroll-chevron i[b-oxggfia1qc] {
        color: rgba(var(--neutral-50), 0.6);
        font-size: 16px;
    }

.scroll-chevron-top[b-oxggfia1qc] {
    top: 0;
    background: linear-gradient(to bottom, rgb(var(--neutral-700)) 50%, transparent);
    animation-name: reveal-top-b-oxggfia1qc;
    animation-range: 1em 2em;
}

.scroll-chevron-bottom[b-oxggfia1qc] {
    bottom: 0;
    background: linear-gradient(to top, rgb(var(--neutral-700)) 50%, transparent);
    animation-name: reveal-bottom-b-oxggfia1qc;
    animation-direction: reverse;
    animation-range: calc(100% - 2em) calc(100% - 1em);
}

@keyframes reveal-top-b-oxggfia1qc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes reveal-bottom-b-oxggfia1qc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.scroll-chevron-top i[b-oxggfia1qc], .scroll-chevron-bottom i[b-oxggfia1qc] {
    animation: bounce-b-oxggfia1qc 1.5s ease-in-out infinite;
}

@keyframes bounce-b-oxggfia1qc {
    0%, 100% {
        transform: translateY(0);
    }

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

@supports not (animation-timeline: scroll()) {
    .scroll-chevron[b-oxggfia1qc] {
        display: none;
    }
}


.nav-item > a[b-oxggfia1qc],
.nav-item > .nav-link[b-oxggfia1qc],
.nav-item[b-oxggfia1qc]  > a,
.nav-item[b-oxggfia1qc]  .nav-link {
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: row;
    margin: 1px 0 !important;
    padding: 6px 10px !important;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

    .nav-item[b-oxggfia1qc]  > a:hover {
        background-color: rgba(8, 145, 178, 0.3);
        color: rgba(255, 255, 255, 1);
    }

.nav-item i.nav-icon[b-oxggfia1qc],
.nav-item[b-oxggfia1qc]  i.nav-icon {
    font-size: 18px;
    width: 22px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
    padding-left: 2px;
}

.nav-item .nav-text[b-oxggfia1qc],
.nav-item[b-oxggfia1qc]  .nav-text {
    font-size: 13px;
    margin-left: 12px;
    white-space: nowrap;
    opacity: 1;
    max-width: 200px;
    overflow: hidden;
    /* Expanding: max-width/margin instant, opacity fades in after sidebar expands */
    transition: opacity .3s ease .4s, margin-left 0s linear, max-width 0s linear;
}

/* Ocultar texto al colapsar */
.nav-item.collapsed .nav-text[b-oxggfia1qc] {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    /* Collapsing: opacity fades fast, max-width/margin collapse after sidebar shrinks */
    transition: opacity .15s ease, max-width 0s linear .6s, margin-left 0s linear .6s;
}
/* /Components/Shared/Main/MainSidebarItem.razor.rz.scp.css */
/* --- CATEGORY LABELS --- */
.category-label[b-h2iy2r0a2b] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    list-style: none;
    margin: 0;
    padding: 16px 10px 6px 10px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

    .category-label i[b-h2iy2r0a2b] {
        font-size: 18px;
        width: 24px;
        min-width: 24px;
        text-align: center;
        flex-shrink: 0;
        text-transform: none;
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        transition: opacity .3s ease .3s, max-width 0s linear;
    }

    .category-label .label-text[b-h2iy2r0a2b] {
        white-space: nowrap;
        opacity: 1;
        max-width: 200px;
        overflow: hidden;
        transition: opacity .3s ease .4s, max-width 0s linear;
    }

    .category-label.collapsed i[b-h2iy2r0a2b] {
        opacity: 1;
        max-width: 24px;
        transition: opacity .3s ease .6s, max-width 0s linear .6s;
    }

    .category-label.collapsed .label-text[b-h2iy2r0a2b] {
        opacity: 0;
        max-width: 0;
        transition: opacity .15s ease, max-width 0s linear .6s;
    }

/* --- NAV ITEM (CONTENEDOR) --- */
.nav-item[b-h2iy2r0a2b] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative; /* CRUCIAL: Para anclar el flyout a su lado */
}

    .nav-item[b-h2iy2r0a2b]  > a,
    .nav-item[b-h2iy2r0a2b]  .nav-link {
        align-items: center;
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: row;
        margin: 1px 0;
        padding: 6px 10px;
        text-decoration: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        white-space: nowrap;
    }

        .nav-item[b-h2iy2r0a2b]  > a:hover {
            background-color: rgba(8, 145, 178, 0.3);
            color: rgba(255, 255, 255, 1);
        }

    .nav-item.active[b-h2iy2r0a2b]  > a {
        background-color: rgb(8, 145, 178);
        color: rgba(255, 255, 255, 1);
    }

    .nav-item i.nav-icon[b-h2iy2r0a2b] {
        font-size: 18px;
        width: 22px;
        min-width: 22px;
        text-align: center;
        flex-shrink: 0;
        padding-left: 2px;
    }

    .nav-item .nav-text[b-h2iy2r0a2b] {
        font-size: 13px;
        margin-left: 12px;
        white-space: nowrap;
        opacity: 1;
        max-width: 200px;
        overflow: hidden;
        /* Expanding: max-width/margin instant, opacity fades in after sidebar expands */
        transition: opacity .3s ease .4s, margin-left 0s linear, max-width 0s linear;
    }

    .nav-item .toggle-icon[b-h2iy2r0a2b] {
        opacity: 1;
        max-width: 30px;
        overflow: hidden;
        transition: opacity .3s ease .4s, max-width 0s linear;
    }

    /* Ocultar texto y flechas al colapsar */
    .nav-item.collapsed .nav-text[b-h2iy2r0a2b] {
        opacity: 0;
        max-width: 0;
        margin-left: 0;
        /* Collapsing: opacity fades fast, max-width/margin collapse after sidebar shrinks */
        transition: opacity .15s ease, max-width 0s linear .6s, margin-left 0s linear .6s;
    }

    .nav-item.collapsed .toggle-icon[b-h2iy2r0a2b] {
        opacity: 0;
        max-width: 0;
        transition: opacity .15s ease, max-width 0s linear .6s;
    }

/* ============================================
   ESTILOS DE MENÚ NORMAL
   ============================================ */
.standard-menu[b-h2iy2r0a2b] {
    padding-left: 1rem;
    list-style: none;
    display: block;
}

/* ============================================
   FLYOUT MENU (Menú flotante al colapsar)
   ============================================ */

/* 1. Ocultar el menú por defecto en estado colapsado */
.nav-item.collapsed .flyout-menu[b-h2iy2r0a2b] {
    display: none;
    position: absolute;
    left: 50px; /* Ancho del sidebar pequeño aprox, para que nazca pegado */
    top: 0;
    width: 250px;
    background-color: rgb(var(--neutral-700));
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.6);
    padding: 10px;
    margin: 0;
    list-style: none;
    z-index: 9999; /* Máxima prioridad para que pase por encima de la pantalla */
}

/* 2. Mostrar el menú flotante al hacer hover SOBRE EL PADRE */
.nav-item.has-treeview.collapsed:hover > .flyout-menu[b-h2iy2r0a2b] {
    display: block;
}

/* 3. Estilos de los items HIJOS dentro del flyout */
[b-h2iy2r0a2b] .flyout-menu .nav-item {
    width: 100%;
}

/* Override: parent's .nav-item.collapsed .nav-text cascades into flyout children,
   hiding their text. Force it visible here. */
.nav-item.collapsed .flyout-menu .nav-text[b-h2iy2r0a2b] {
    opacity: 1 !important;
    max-width: 200px !important;
    margin-left: 10px !important;
}

/* Override: parent's .nav-item.collapsed ::deep .nav-link centers all descendant links.
   Flyout children must be left-aligned. */
.nav-item.collapsed .flyout-menu[b-h2iy2r0a2b]  .nav-link {
    justify-content: flex-start !important;
    padding: 8px 15px !important;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
    .nav-item[b-h2iy2r0a2b]  > a {
        padding: 6px 8px;
    }

    .nav-item i[b-h2iy2r0a2b] {
        font-size: 18px;
    }

    .nav-item .nav-text[b-h2iy2r0a2b] {
        font-size: 14px;
        margin-left: 12px;
    }

    .category-label[b-h2iy2r0a2b] {
        font-size: 10px;
        padding: 14px 8px 5px 8px;
    }
}

@media (max-width: 480px) {
    .nav-item[b-h2iy2r0a2b]  > a {
        padding: 5px 6px;
    }

    .nav-item i[b-h2iy2r0a2b] {
        font-size: 16px;
    }

    .nav-item .nav-text[b-h2iy2r0a2b] {
        font-size: 13px;
        margin-left: 10px;
    }

    .category-label[b-h2iy2r0a2b] {
        font-size: 9px;
        padding: 12px 6px 4px 6px;
    }
}
/* /Components/Shared/Modals/ReconnectModal.razor.rz.scp.css */
/* Hide all state-specific elements by default */
.components-reconnect-first-attempt-visible[b-6trxicbya5],
.components-reconnect-repeated-attempt-visible[b-6trxicbya5],
.components-reconnect-failed-visible[b-6trxicbya5],
.components-pause-visible[b-6trxicbya5],
.components-resume-failed-visible[b-6trxicbya5],
.components-rejoining-animation[b-6trxicbya5] {
    display: none;
}

/* Show elements based on state */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-6trxicbya5],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-6trxicbya5],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-6trxicbya5],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-6trxicbya5],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-6trxicbya5],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-6trxicbya5],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-6trxicbya5] {
    display: block;
}

/* Modal base styles */
#components-reconnect-modal[b-6trxicbya5] {
    background-color: white;
    width: 30rem;
    max-width: 90vw;
    margin: auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-6trxicbya5 0.5s both;
}

#components-reconnect-modal[open][b-6trxicbya5] {
    animation: components-reconnect-modal-slideUp-b-6trxicbya5 0.5s cubic-bezier(.05, .89, .25, 1.02),
               components-reconnect-modal-fadeInOpacity-b-6trxicbya5 0.3s ease-in-out;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-6trxicbya5]::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    animation: components-reconnect-modal-fadeInOpacity-b-6trxicbya5 0.3s ease-in-out;
    opacity: 1;
    backdrop-filter: blur(2px);
}

/* Container layout */
.components-reconnect-container[b-6trxicbya5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

/* Icon styles */
.components-reconnect-icon[b-6trxicbya5] {
    color: rgb(var(--warning-500, 245, 158, 11));
    margin-bottom: 0.5rem;
}

.components-reconnect-icon-wifi[b-6trxicbya5] {
    animation: components-reconnect-pulse-b-6trxicbya5 2s ease-in-out infinite;
}

/* Title and message styles */
.components-reconnect-title[b-6trxicbya5] {
    font-family: var(--font-family-primary, system-ui, -apple-system, sans-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(var(--text-50, 31, 41, 55));
    margin: 0;
}

.components-reconnect-message[b-6trxicbya5] {
    font-family: var(--font-family-primary, system-ui, -apple-system, sans-serif);
    font-size: 0.9375rem;
    color: rgb(var(--text-300, 107, 114, 128));
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

/* Button styles */
.components-reconnect-btn[b-6trxicbya5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    border-radius: 6px;
    font-family: var(--font-family-primary, system-ui, -apple-system, sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    margin-top: 0.5rem;
}

.components-reconnect-btn-primary[b-6trxicbya5] {
    background-color: rgb(var(--text-50, 31, 41, 55));
    color: white;
}

.components-reconnect-btn-primary:hover[b-6trxicbya5] {
    background-color: rgb(var(--text-100, 55, 65, 81));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.components-reconnect-btn-secondary[b-6trxicbya5] {
    background-color: white;
    color: rgb(var(--text-100, 55, 65, 81));
    border: 1px solid rgb(var(--neutral-300, 209, 213, 219));
}

.components-reconnect-btn-secondary:hover[b-6trxicbya5] {
    background-color: rgb(var(--back-50, 249, 250, 251));
    border-color: rgb(var(--neutral-400, 156, 163, 175));
    transform: translateY(-1px);
}

/* Animation for rejoining */
.components-rejoining-animation[b-6trxicbya5] {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0.5rem 0;
}

.components-rejoining-animation div[b-6trxicbya5] {
    position: absolute;
    border: 3px solid rgb(var(--primary-500, 59, 130, 246));
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-6trxicbya5 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-6trxicbya5] {
    animation-delay: -0.5s;
}

/* Keyframes */
@keyframes components-reconnect-modal-slideUp-b-6trxicbya5 {
    0% {
        transform: translateY(20px) scale(0.98);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-6trxicbya5 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-6trxicbya5 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes components-rejoining-animation-b-6trxicbya5 {
    0% {
        top: 30px;
        left: 30px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 30px;
        left: 30px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}

@keyframes components-reconnect-pulse-b-6trxicbya5 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    #components-reconnect-modal[b-6trxicbya5] {
        width: 90vw;
        padding: 1.5rem;
        margin: auto;
    }

    .components-reconnect-title[b-6trxicbya5] {
        font-size: 1rem;
    }

    .components-reconnect-message[b-6trxicbya5] {
        font-size: 0.875rem;
    }
}
/* /Components/Shared/Modals/SessionExpiredModal.razor.rz.scp.css */
/* Session Expired Modal Overlay */
.session-modal-overlay[b-lqu4c7khoq] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: sessionModalFadeIn-b-lqu4c7khoq 0.2s ease-out;
}

@keyframes sessionModalFadeIn-b-lqu4c7khoq {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Content */
.session-modal-content[b-lqu4c7khoq] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    margin: 1rem;
    padding: 2rem;
    text-align: center;
    animation: sessionModalSlideIn-b-lqu4c7khoq 0.25s ease-out;
}

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

/* Modal Icon */
.session-modal-icon[b-lqu4c7khoq] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    background-color: rgb(var(--warning-50));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--warning-600));
}

/* Modal Title */
.session-modal-title[b-lqu4c7khoq] {
    font-family: var(--font-family-primary);
    font-size: 1.375rem;
    font-weight: 600;
    color: rgb(var(--text-50));
    margin: 0 0 0.75rem 0;
}

/* Modal Message */
.session-modal-message[b-lqu4c7khoq] {
    font-family: var(--font-family-primary);
    font-size: 0.9375rem;
    font-weight: 400;
    color: rgb(var(--text-300));
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

/* Error Message */
.session-modal-error[b-lqu4c7khoq] {
    background-color: rgb(var(--danger-50));
    border: 1px solid rgb(var(--danger-200));
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    color: rgb(var(--danger-700));
}

/* Form Styles */
.session-modal-form[b-lqu4c7khoq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.session-form-field[b-lqu4c7khoq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.session-form-label[b-lqu4c7khoq] {
    font-family: var(--font-family-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--text-200));
}

.session-form-input[b-lqu4c7khoq] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(var(--neutral-300));
    border-radius: 8px;
    font-family: var(--font-family-primary);
    font-size: 0.9375rem;
    color: rgb(var(--text-100));
    background-color: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.session-form-input:focus[b-lqu4c7khoq] {
    outline: none;
    border-color: rgb(var(--primary-500));
    box-shadow: 0 0 0 3px rgba(var(--primary-500), 0.15);
}

.session-form-input:disabled[b-lqu4c7khoq] {
    background-color: rgb(var(--back-100));
    color: rgb(var(--text-400));
    cursor: not-allowed;
}

.session-form-input[b-lqu4c7khoq]::placeholder {
    color: rgb(var(--text-400));
}

/* Modal Actions */
.session-modal-actions[b-lqu4c7khoq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Button Base */
.session-btn[b-lqu4c7khoq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

/* Primary Button */
.session-btn-primary[b-lqu4c7khoq] {
    background-color: rgb(var(--primary-600));
    color: white;
}

.session-btn-primary:hover:not(:disabled)[b-lqu4c7khoq] {
    background-color: rgb(var(--primary-700));
}

.session-btn-primary:focus[b-lqu4c7khoq] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-500), 0.3);
}

/* Microsoft Button */
.session-btn-microsoft[b-lqu4c7khoq] {
    background-color: white;
    color: rgb(var(--text-100));
    border: 1px solid rgb(var(--neutral-300));
}

.session-btn-microsoft:hover:not(:disabled)[b-lqu4c7khoq] {
    background-color: rgb(var(--back-50));
    border-color: rgb(var(--neutral-400));
}

.session-btn-microsoft:focus[b-lqu4c7khoq] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--neutral-400), 0.3);
}

.session-btn-microsoft .icon-microsoft[b-lqu4c7khoq] {
    flex-shrink: 0;
}

/* Spinner */
.session-btn-spinner[b-lqu4c7khoq] {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sessionSpinner-b-lqu4c7khoq 0.75s linear infinite;
}

@keyframes sessionSpinner-b-lqu4c7khoq {
    to {
        transform: rotate(360deg);
    }
}

/* Modal Footer */
.session-modal-footer[b-lqu4c7khoq] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(var(--neutral-200));
}

.session-btn-link[b-lqu4c7khoq] {
    background: none;
    border: none;
    padding: 0.5rem;
    font-family: var(--font-family-primary);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--primary-600));
    cursor: pointer;
    transition: color 0.15s ease;
}

.session-btn-link:hover[b-lqu4c7khoq] {
    color: rgb(var(--primary-700));
    text-decoration: underline;
}

/* Switch Account Link */
.session-switch-account[b-lqu4c7khoq] {
    text-align: center;
    margin-top: 0.75rem;
}

.session-switch-account a[b-lqu4c7khoq] {
    font-family: var(--font-family-primary);
    font-size: 0.8125rem;
    color: rgb(var(--primary-600));
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.session-switch-account a:hover[b-lqu4c7khoq] {
    color: rgb(var(--primary-700));
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 480px) {
    .session-modal-content[b-lqu4c7khoq] {
        padding: 1.5rem;
        margin: 0.75rem;
        max-width: 100%;
    }

    .session-modal-icon[b-lqu4c7khoq] {
        width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
    }

    .session-modal-icon svg[b-lqu4c7khoq] {
        width: 40px;
        height: 40px;
    }

    .session-modal-title[b-lqu4c7khoq] {
        font-size: 1.25rem;
    }

    .session-modal-message[b-lqu4c7khoq] {
        font-size: 0.875rem;
    }

    .session-btn[b-lqu4c7khoq] {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
/* ===========================================
   STATUS PILLS — soft tonal chips for payment/order status and enabled state.

   Colours come from the project palette in wwwroot/css/variables.css, NOT from
   Bootstrap's bg-*/text-*/bg-opacity-10 utilities that this component used before.
   Two concrete defects came out of borrowing Bootstrap's palette:

     - CANCELADO was unreadable: text-secondary (#6c757d) on a 10%-opacity grey
       measures 2.3:1[b-ckyk89xy7s], well under the 4.5:1 WCAG AA needs for normal text.
     - FALLIDO painted itself in Bootstrap's #dc3545, which is not the red this
       project defines for danger.

   Every pair below is annotated with its measured contrast ratio against its own
   background. Keep them at or above 4.5:1 when changing a tone.
   =========================================== */

.status-pill[b-ckyk89xy7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* 5.07:1 */
.status-pill-success[b-ckyk89xy7s] {
    background-color: rgb(var(--success-50));
    color: rgb(var(--success-700));
    border-color: rgb(var(--success-200));
}

/* 6.74:1 */
.status-pill-danger[b-ckyk89xy7s] {
    background-color: rgb(var(--danger-50));
    color: rgb(var(--danger-600));
    border-color: rgb(var(--danger-200));
}

/* 6.14:1 */
.status-pill-active[b-ckyk89xy7s] {
    background-color: rgb(var(--primary-50));
    color: rgb(var(--primary-600));
    border-color: rgb(var(--primary-200));
}

/* The amber family needs -800, not -600/-700. warning-700 on warning-50 measures
   3.21:1 and fails AA — amber text on an amber tint is the hardest pair here.
   4.95:1 */
.status-pill-warning[b-ckyk89xy7s] {
    background-color: rgb(var(--warning-50));
    color: rgb(var(--warning-800));
    border-color: rgb(var(--warning-200));
}

/* 7.17:1 — this is the pair that was unreadable before. */
.status-pill-muted[b-ckyk89xy7s] {
    background-color: rgb(var(--neutral-100));
    color: rgb(var(--neutral-500));
    border-color: rgb(var(--neutral-300));
}

/* Scheduled has no home in this palette: the docs asked for "celeste (info)" and
   there is no info hue here — only primary, success, danger, warning and neutral.
   Reusing the filled blue would make a payment waiting for its date look identical
   to one executing right now, and those are very different things to an operator.
   An unfilled pill in the same blue family reads as "on the blue track, not started
   yet" and stays distinguishable from Processing at a glance.
   7.18:1 against the white grid row. */
.status-pill-planned[b-ckyk89xy7s] {
    background-color: transparent;
    color: rgb(var(--primary-600));
    border-color: rgb(var(--primary-300));
}