/* /Components/Controls/HrEmptyState.razor.rz.scp.css */
/* Bootstrap's .alert-secondary supplies its own light-gray background, and used to be paired
   with --hr-gray-400/300 text/icon colors picked for contrast against a *white* card background
   — nearly invisible against alert-secondary's own gray. Pin the background/border explicitly so
   the text/icon colors here are contrast-checked against a background we actually control. */
.hr-empty-state[b-p1xhp1kgoa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    background: var(--hr-gray-50);
    border-color: var(--hr-gray-200);
    color: var(--hr-gray-500);
    text-align: center;
}

.hr-empty-state-icon[b-p1xhp1kgoa] {
    font-size: 1.5rem;
    color: var(--hr-gray-400);
}

.hr-empty-state-message[b-p1xhp1kgoa] {
    font-size: 0.9rem;
}

html[data-theme="dark"] .hr-empty-state[b-p1xhp1kgoa] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
    color: var(--hr-gray-400);
}

html[data-theme="dark"] .hr-empty-state-icon[b-p1xhp1kgoa] {
    color: var(--hr-gray-500);
}
/* /Components/Controls/HrLoadingIndicator.razor.rz.scp.css */
.hr-loading[b-x8jp9dulzh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    color: var(--hr-gray-500);
}

.hr-loading-label[b-x8jp9dulzh] {
    font-size: 0.9rem;
}
/* /Components/Controls/InternalApplicationBadge.razor.rz.scp.css */
.internal-application-badge[b-4yp1fqlyls] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex: 0 0 auto;
}
/* /Components/Controls/ProfilePhotoAvatar.razor.rz.scp.css */
.hr-profile-avatar[b-px1peckd9l] {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
}

.hr-profile-avatar--initials[b-px1peckd9l] {
    align-items: center;
    justify-content: center;
    background: var(--hr-color-primary);
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.03em;
    user-select: none;
}
/* /Components/Controls/StatusBadge.razor.rz.scp.css */
.status-badge[b-wubooy8vz1] {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--hr-radius-sm);
}

.status-badge--success[b-wubooy8vz1] {
    background-color: rgba(22, 163, 74, 0.12) !important;
    /* Darker than --hr-color-success (#16a34a, ~3:1 on this tint) so the small bold badge
       text clears WCAG AA 4.5:1 — see AccessibilityScanJourneyTests. */
    color: #15653a !important;
}

.status-badge--secondary[b-wubooy8vz1] {
    background-color: var(--hr-gray-100) !important;
    color: var(--hr-gray-500) !important;
}

.status-badge--warning[b-wubooy8vz1] {
    background-color: rgba(249, 115, 22, 0.12) !important;
    /* Darker than --hr-color-warning (#f97316, ~2.9:1 on this tint) for WCAG AA 4.5:1. */
    color: #9a3412 !important;
}

.status-badge--danger[b-wubooy8vz1] {
    background-color: rgba(220, 38, 38, 0.12) !important;
    /* Darker than --hr-color-danger (#dc2626, ~4:1 on this tint) for WCAG AA 4.5:1. */
    color: #b91c1c !important;
}

.status-badge--info[b-wubooy8vz1] {
    background-color: var(--hr-color-primary-subtle) !important;
    color: var(--hr-color-primary) !important;
}

.status-badge--primary[b-wubooy8vz1] {
    background-color: var(--hr-color-primary) !important;
    color: #fff !important;
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-shell[b-ndddayydb9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-loading[b-65jf4aegph] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.app-loading-spinner[b-65jf4aegph] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.app-loading-label[b-65jf4aegph] {
    font-size: 0.9rem;
    color: var(--hr-gray-500);
}

.app-shell[b-65jf4aegph] {
    display: flex;
    min-height: 100vh;
}

.app-sidebar[b-65jf4aegph] {
    border-right: 1px solid var(--hr-gray-200);
}

.sidebar-header[b-65jf4aegph] {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo[b-65jf4aegph] {
    height: 56px;
    width: auto;
    flex-shrink: 0;
}

.sidebar-logo-icon[b-65jf4aegph] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.sidebar-toggle[b-65jf4aegph],
.mobile-menu-button[b-65jf4aegph] {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 22px;
    cursor: pointer;
}

.main-content[b-65jf4aegph] {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
}

.top-bar[b-65jf4aegph] {
    min-height: 56px;
    background: #ffffff;
    border-bottom: 1px solid var(--hr-gray-200);
    box-shadow: var(--hr-shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    position: relative;
    z-index: 10;
}

.page-title[b-65jf4aegph] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

.top-bar-actions[b-65jf4aegph] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
}

.top-bar-user[b-65jf4aegph] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--hr-radius-md);
    padding: 4px 8px;
    transition: background 0.15s;
}

.top-bar-user:hover[b-65jf4aegph] {
    background: var(--hr-gray-100);
}

.top-bar-avatar[b-65jf4aegph] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.top-bar-avatar--initials[b-65jf4aegph] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hr-color-primary);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    user-select: none;
}

.top-bar-user-info[b-65jf4aegph] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 0.875rem;
    font-weight: 500;
}

.top-bar-job-title[b-65jf4aegph] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--hr-gray-500);
}

.theme-toggle[b-65jf4aegph] {
    border: none;
    background: transparent;
    color: var(--hr-gray-500);
    font-size: 18px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: var(--hr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.theme-toggle:hover[b-65jf4aegph] {
    background: var(--hr-gray-100);
    color: var(--hr-gray-900);
}

.topbar-logout[b-65jf4aegph] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--hr-gray-500);
    font-size: 18px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--hr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.topbar-logout:hover[b-65jf4aegph] {
    background: var(--hr-gray-100);
    color: var(--hr-gray-900);
}

.page-title[b-65jf4aegph] {
    font-size: 1.1rem;
    font-weight: 600;
}

.content-area[b-65jf4aegph] {
    padding: 24px;
}

.help-menu[b-65jf4aegph] {
    position: relative;
}

.help-btn[b-65jf4aegph] {
    border: none;
    background: transparent;
    color: var(--hr-gray-500);
    font-size: 18px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: var(--hr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.help-btn:hover[b-65jf4aegph],
.help-open .help-btn[b-65jf4aegph] {
    background: var(--hr-gray-100);
    color: var(--hr-gray-900);
}

.help-dropdown[b-65jf4aegph] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: #fff;
    border: 1px solid var(--hr-gray-200);
    border-radius: var(--hr-radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    overflow: hidden;
    padding: 6px;
}

.help-item[b-65jf4aegph] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--hr-radius-md);
    font-size: 0.875rem;
    color: var(--hr-gray-900);
    text-decoration: none;
    transition: background 0.1s;
}

.help-item:hover[b-65jf4aegph] {
    background: var(--hr-gray-50);
    color: var(--hr-gray-900);
}

.notif-bell[b-65jf4aegph] {
    position: relative;
}

.notif-btn[b-65jf4aegph] {
    position: relative;
    border: none;
    background: transparent;
    color: var(--hr-gray-500);
    font-size: 18px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: var(--hr-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.notif-btn:hover[b-65jf4aegph],
.notif-open .notif-btn[b-65jf4aegph] {
    background: var(--hr-gray-100);
    color: var(--hr-gray-900);
}

.notif-badge[b-65jf4aegph] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--hr-color-danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

.notif-dropdown[b-65jf4aegph] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: #fff;
    border: 1px solid var(--hr-gray-200);
    border-radius: var(--hr-radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    overflow: hidden;
}

.notif-header[b-65jf4aegph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hr-gray-100);
}

.notif-header-title[b-65jf4aegph] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hr-gray-900);
}

.notif-mark-all[b-65jf4aegph] {
    border: none;
    background: none;
    color: var(--hr-color-primary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

.notif-mark-all:hover[b-65jf4aegph] {
    text-decoration: underline;
}

.notif-list[b-65jf4aegph] {
    max-height: 400px;
    overflow-y: auto;
}

.notif-empty[b-65jf4aegph],
.notif-loading[b-65jf4aegph] {
    padding: 32px 16px;
    text-align: center;
    color: var(--hr-gray-400);
    font-size: 0.875rem;
}

.notif-footer[b-65jf4aegph] {
    padding: 10px 16px;
    border-top: 1px solid var(--hr-gray-100);
    text-align: center;
}

.notif-load-more[b-65jf4aegph] {
    border: none;
    background: none;
    color: var(--hr-color-primary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 0;
    width: 100%;
}

.notif-load-more:hover:not(:disabled)[b-65jf4aegph] {
    text-decoration: underline;
}

.notif-load-more:disabled[b-65jf4aegph] {
    color: var(--hr-gray-400);
    cursor: default;
}

.notif-item[b-65jf4aegph] {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--hr-gray-50);
    transition: background 0.1s;
}

.notif-item:last-child[b-65jf4aegph] {
    border-bottom: none;
}

.notif-item:hover[b-65jf4aegph] {
    background: var(--hr-gray-50);
}

.notif-item:focus-visible[b-65jf4aegph] {
    outline: 2px solid var(--hr-color-primary);
    outline-offset: -2px;
    background: var(--hr-gray-50);
}

.notif-unread[b-65jf4aegph] {
    border-left: 3px solid var(--hr-color-primary);
    padding-left: 13px;
    background: #fafafa;
}

.notif-item-title[b-65jf4aegph] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hr-gray-900);
    margin-bottom: 2px;
}

.notif-item-body[b-65jf4aegph] {
    font-size: 0.8rem;
    color: var(--hr-gray-500);
    margin-bottom: 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notif-item-header[b-65jf4aegph] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.notif-type-icon[b-65jf4aegph] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.notif-type-label[b-65jf4aegph] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--hr-radius-sm);
}

.notif-type-label--assigned[b-65jf4aegph] {
    background: #ede9fe;
    color: #6d28d9;
}

.notif-type-label--due-soon[b-65jf4aegph] {
    background: #fef3c7;
    color: #92400e;
}

.notif-type-label--overdue[b-65jf4aegph] {
    background: #fee2e2;
    color: #991b1b;
}

.notif-type--taskduesoon .notif-type-icon[b-65jf4aegph] { color: #d97706; }
.notif-type--taskoverdue .notif-type-icon[b-65jf4aegph] { color: var(--hr-color-danger); }
.notif-type--taskoverdue[b-65jf4aegph]                  { border-left-color: var(--hr-color-danger); }

.notif-item-time[b-65jf4aegph] {
    font-size: 0.75rem;
    color: var(--hr-gray-400);
}

/* SfMenu — transparent background inside sidebar, with a little breathing room below the header */
[b-65jf4aegph] .app-nav-menu.e-menu-wrapper,
[b-65jf4aegph] .app-nav-menu.e-menu-container {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-top: 10px;
}

/* Fix for nested/flyout submenus (e.g. People > Employees) failing to render once the page has
   been scrolled down. Syncfusion's SfSidebar renders as `position: fixed` (pinned to the
   viewport, see the vendor `.e-sidebar` rule) but ALSO sets `overflow: auto` on that same fixed
   box. A fixed-position ancestor becomes the containing block for any `position: absolute`
   descendant rendered inside it — which is exactly how the Menu's flyout submenu popups are
   positioned. SfMenu's positioning math (calculatePosition in sf-menu.min.js) computes a flip-
   above-viewport offset by adding the page's scrollY, a calculation that's only correct when the
   nearest positioned ancestor is the (unscrolled) document itself. Because the actual ancestor
   here is the fixed sidebar, that scrollY addition pushes the flyout below the sidebar's own
   clipped viewport-height box the moment the page is scrolled — so it silently disappears.
   The sidebar's own `overflow: auto` is only ever needed if the top-level nav list itself grows
   taller than the viewport, so it's moved down onto the inner `<ul>` here (scoped to this one
   SfSidebar instance) — the flyout popups are separate sibling elements under the wrapper, not
   nested inside that inner list, so they're no longer clipped by the fixed sidebar box while the
   list itself keeps scrolling correctly if it's ever taller than the screen. */
[b-65jf4aegph] .app-sidebar.e-sidebar {
    overflow: visible;
}

[b-65jf4aegph] .app-sidebar .app-nav-menu.e-menu-wrapper > ul.e-menu {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
}

[b-65jf4aegph] .app-nav-menu .e-menu-popup {
    z-index: 1100;
}


@media (max-width: 767.98px) {
    .content-area[b-65jf4aegph] {
        padding: 12px;
    }

    /* Below the SfSidebar's MediaQuery breakpoint (see MainLayout.razor) the sidebar switches
       from pushing .main-content to overlaying it, so the top bar's own contents are what need to
       shrink to fit a phone-width viewport — trim padding and drop the name/job-title text next
       to the avatar, keeping just the avatar itself as a tap target through to My Profile. */
    .top-bar[b-65jf4aegph] {
        padding: 0 12px;
        gap: 8px;
    }

    .top-bar-actions[b-65jf4aegph] {
        gap: 4px;
    }

}

#blazor-error-ui[b-65jf4aegph] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-65jf4aegph] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.app-shell[b-65jf4aegph],
.main-content[b-65jf4aegph] {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    .app-shell[data-nav-mode="pending"][b-65jf4aegph]  .app-sidebar {
        display: none;
    }

    .content-area[b-65jf4aegph] {
        padding: 16px;
    }

    .top-bar-user-info[b-65jf4aegph] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .page-title[b-65jf4aegph] {
        flex: 1 1 0;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
        font-size: 1rem;
    }

    .top-bar[b-65jf4aegph] {
        padding: 6px 12px;
        gap: 8px;
    }
}

@media (max-width: 991.98px) {
    .dev-persona-switcher[b-65jf4aegph] {
        display: none;
    }
}

.app-shell[data-nav-mode="compact"][b-65jf4aegph]  .app-sidebar,
.app-shell[data-nav-mode="overlay"][b-65jf4aegph]  .app-sidebar {
    z-index: 1200;
}

.top-bar-user[b-65jf4aegph] {
    position: relative;
}

.sidebar-toggle:focus-visible[b-65jf4aegph],
.mobile-menu-button:focus-visible[b-65jf4aegph],
.theme-toggle:focus-visible[b-65jf4aegph],
.topbar-logout:focus-visible[b-65jf4aegph],
.help-btn:focus-visible[b-65jf4aegph] {
    outline: 3px solid #0b5ed7;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #ffffff;
}

.sidebar-toggle:focus-visible[b-65jf4aegph] {
    outline-color: #ffffff;
    box-shadow: 0 0 0 5px #0b5ed7;
}

@media (max-width: 479.98px) {
    .top-bar[b-65jf4aegph] {
        flex-wrap: wrap;
    }

    .top-bar-actions[b-65jf4aegph] {
        flex-shrink: 1;
        flex-wrap: wrap;
        margin-left: 0;
        max-width: 100%;
    }

    .content-area[b-65jf4aegph] {
        min-width: 0;
        overflow-x: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-6idsuhu8sf],
.components-reconnect-repeated-attempt-visible[b-6idsuhu8sf],
.components-reconnect-failed-visible[b-6idsuhu8sf],
.components-pause-visible[b-6idsuhu8sf],
.components-resume-failed-visible[b-6idsuhu8sf],
.components-rejoining-animation[b-6idsuhu8sf] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-retrying[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-failed[b-6idsuhu8sf],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-6idsuhu8sf] {
    display: block;
}


#components-reconnect-modal[b-6idsuhu8sf] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-6idsuhu8sf 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-6idsuhu8sf]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-6idsuhu8sf 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-6idsuhu8sf {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-6idsuhu8sf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-6idsuhu8sf] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-6idsuhu8sf] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-6idsuhu8sf] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-6idsuhu8sf] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-6idsuhu8sf] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-6idsuhu8sf] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-6idsuhu8sf 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-6idsuhu8sf {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AccessDenied.razor.rz.scp.css */
.access-denied-wrap[b-db809bv3oq] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.access-denied-card[b-db809bv3oq] {
    max-width: 32rem;
    width: 100%;
}

.access-denied-icon[b-db809bv3oq] {
    font-size: 2.5rem;
    color: var(--bs-secondary, #6c757d);
}

/* This page centres its heading, so drop the global h1 accent bar/indent. */
.access-denied-card h1[b-db809bv3oq] {
    padding-left: 0;
    border-left: none;
}
/* /Components/Pages/Companies/CompanyBrandingTab.razor.rz.scp.css */
.logo-preview-box[b-gesm7jbosf] {
    height: 120px;
}

.logo-preview-box img[b-gesm7jbosf] {
    max-height: 100px;
    max-width: 100%;
}
/* /Components/Pages/CompanyOnboarding/GettingStarted.razor.rz.scp.css */
.onboarding-progress[b-hdchcj96yr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.onboarding-progress-track[b-hdchcj96yr] {
    flex: 1;
    height: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    overflow: hidden;
}

.onboarding-progress-fill[b-hdchcj96yr] {
    height: 100%;
    background-color: var(--bs-primary, #0d6efd);
    transition: width 0.3s ease;
}

.onboarding-progress-label[b-hdchcj96yr] {
    white-space: nowrap;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}
/* /Components/Pages/Dashboards/RecruitmentDashboard.razor.rz.scp.css */
/* Every descendant that legitimately needs horizontal scrolling already owns its own scoped
   overflow-x: auto container (.vacancy-kanban-board__columns, .dashboard-scroll-x) — nothing on
   this page needs to grow past the viewport itself. clipping at this root level is a deliberate
   circuit-breaker: whatever specific descendant is still reporting an intrinsic/min-content width
   wider than the viewport (the .vacancy-kanban-board min-width: 0 fix addressed one such case but
   left the underlying 375px-viewport overflow unresolved — see DashboardAccessibilityTests.
   Dashboard_NoHorizontalOverflow_AtMobileAndTabletViewports), this stops it from ever widening the
   document's scrollWidth instead of chasing every possible source individually. */
.recruitment-dashboard[b-4kj6afa7yr] {
    max-width: 1400px;
    margin-inline: auto;
    overflow-x: hidden;
}

.recruitment-dashboard-header[b-4kj6afa7yr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.recruitment-dashboard-actions[b-4kj6afa7yr] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.recruitment-dashboard-action-btn[b-4kj6afa7yr] {
    min-width: 160px;
}

/* ── Company-wide summary strip ──────────────────────────────────────────
   Kept visually compact (smaller KPI padding than the default .widget-kpi-row
   used elsewhere) and separated from the Pipeline section below by a clear
   border + heading, so "company-wide" numbers here are never mistaken for the
   card counts on the single-vacancy board beneath it. */

.recruitment-dashboard-summary[b-4kj6afa7yr] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--hr-gray-200);
}

.recruitment-dashboard-summary-title[b-4kj6afa7yr] {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hr-gray-500);
    margin-bottom: 0.5rem;
}

.recruitment-dashboard-summary-row.widget-kpi-row[b-4kj6afa7yr] {
    padding: 8px 16px;
    gap: 6px;
}

.recruitment-dashboard-summary-row .widget-kpi[b-4kj6afa7yr] {
    padding: 8px 8px;
}

/* ── Tabs (Pipeline | Activity | Insights) ─────────────────────────────
   Plain Bootstrap nav-tabs base, but with a heavier active indicator than the
   default app.css teal underline alone (thicker bar + tinted background) since
   the plain underline read as too faint against the summary strip above it. */

.recruitment-dashboard-tabs .nav-link[b-4kj6afa7yr] {
    display: flex;
    align-items: center;
    color: var(--hr-gray-500);
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--hr-radius-sm, 4px) var(--hr-radius-sm, 4px) 0 0;
    background: transparent;
    padding: 0.5rem 0.9rem;
}

.recruitment-dashboard-tabs .nav-link:hover[b-4kj6afa7yr] {
    color: var(--hr-color-primary);
}

.recruitment-dashboard-tabs .nav-link.active[b-4kj6afa7yr] {
    color: var(--hr-color-primary);
    background: var(--hr-color-primary-subtle);
    border-bottom-color: var(--hr-color-primary);
}

/* ── Pipeline toolbar (vacancy picker + search + toggle + view switch) ── */

.recruitment-dashboard-toolbar[b-4kj6afa7yr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Groups the vacancy picker / search / terminal-stage toggle as one cohesive
   cluster distinct from the view toggle (which stays pinned right via ms-auto
   on its own element), so the toolbar reads as two logical groups rather than
   four independent controls scattered across the row. */
.recruitment-dashboard-toolbar-group[b-4kj6afa7yr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.recruitment-dashboard-view-toggle[b-4kj6afa7yr] {
    display: flex;
    gap: 0;
    border: 1px solid var(--hr-gray-200);
    border-radius: 999px;
    padding: 2px;
    background: var(--hr-gray-50);
}

.recruitment-dashboard-view-toggle-btn[b-4kj6afa7yr] {
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--hr-gray-500);
    box-shadow: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.recruitment-dashboard-view-toggle-btn:focus-visible[b-4kj6afa7yr] {
    outline: 2px solid var(--hr-color-primary);
    outline-offset: 2px;
}

.recruitment-dashboard-view-toggle-btn.active[b-4kj6afa7yr] {
    background: var(--hr-color-primary);
    color: #fff;
}

.recruitment-dashboard-vacancy-picker[b-4kj6afa7yr] {
    max-width: 280px;
    min-width: 200px;
    flex: 1;
}

.recruitment-dashboard-search[b-4kj6afa7yr] {
    max-width: 280px;
    min-width: 200px;
    flex: 1;
}

.recruitment-dashboard-terminal-toggle[b-4kj6afa7yr] {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .recruitment-dashboard-toolbar-group[b-4kj6afa7yr] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }

    /* The base rule's min-width: 200px (needed so these controls stay usable when laid out
       side-by-side above 700px) survives into the stacked/column layout below 700px, where each
       control's own max-width: 280px combined with a Syncfusion component's internal padding/icon
       chrome can still render visually wider than a narrow phone viewport (e.g. 375px) even though
       280 < 375 on paper — same class of "container caps the box but content pokes out" overflow
       already fixed on the HR dashboard. Stacked at this width, there's no side-by-side neighbour
       left to preserve a minimum width against, so let them shrink to fill the stacked row exactly. */
    .recruitment-dashboard-vacancy-picker[b-4kj6afa7yr],
    .recruitment-dashboard-search[b-4kj6afa7yr] {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .recruitment-dashboard-view-toggle[b-4kj6afa7yr] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Dashboards/TeamStatusSummary.razor.rz.scp.css */
/* DSH-05: tiles are now <button> elements (keyboard-accessible drill-down triggers).
   Reset native button chrome so they keep the shared .team-status-tile look from app.css. */
.team-status-tile[b-oycaj1if3d] {
    border: 0;
    font: inherit;
    width: 100%;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.12s ease;
}

.team-status-tile:hover[b-oycaj1if3d],
.team-status-tile:focus-visible[b-oycaj1if3d] {
    background: var(--hr-gray-50, #f8fafc);
}

.team-status-tile:focus-visible[b-oycaj1if3d] {
    outline: 2px solid var(--hr-color-primary, #2563eb);
    outline-offset: -2px;
}

.team-status-tile--active[b-oycaj1if3d] {
    background: var(--hr-gray-100, #f1f5f9);
    box-shadow: inset 0 -2px 0 var(--hr-color-primary, #2563eb);
}

.team-status-drilldown[b-oycaj1if3d] {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--hr-gray-100, #f1f5f9);
}

.team-status-drilldown-head[b-oycaj1if3d] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.team-status-drilldown-empty[b-oycaj1if3d] {
    font-size: 0.8rem;
}

.team-status-drilldown-list[b-oycaj1if3d] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-status-drilldown-item[b-oycaj1if3d] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--hr-gray-50, #f8fafc);
}

.team-status-drilldown-item:last-child[b-oycaj1if3d] {
    border-bottom: 0;
}

.team-status-drilldown-role[b-oycaj1if3d] {
    flex-shrink: 0;
    font-size: 0.78rem;
}
/* /Components/Pages/Dashboards/WidgetSourceWarning.razor.rz.scp.css */
.widget-source-warning[b-u63jyojvim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.375rem 0.75rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: #8a5a00;
    background: #fff8e6;
    border: 1px solid #ffe1a6;
    border-radius: 0.375rem;
}

.widget-source-warning > i[b-u63jyojvim] {
    flex: 0 0 auto;
    color: #c07f00;
}

.widget-source-warning-text[b-u63jyojvim] {
    flex: 1 1 auto;
}

.widget-source-warning-retry[b-u63jyojvim] {
    flex: 0 0 auto;
    border: 1px solid #e0b276;
    background: #fff;
    color: #8a5a00;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.widget-source-warning-retry:hover:not(:disabled)[b-u63jyojvim] {
    background: #fff1d6;
}

.widget-source-warning-retry:disabled[b-u63jyojvim] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/DataImport/EmployeeImportWizard.razor.rz.scp.css */
.mapping-select[b-h61yc1x1ah] {
    max-width: 320px;
}
/* /Components/Pages/Documents/SharedCompanyDocumentAcknowledgement.razor.rz.scp.css */
.acknowledgement-container[b-kyz8cy0tre] {
    max-width: 720px;
}
/* /Components/Pages/Documents/SharedDocumentDetail.razor.rz.scp.css */
/* ── Page container ──────────────────────────────────── */

.doc-detail-page[b-0ngnrf9qlf] {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Header ───────────────────────────────────────────── */

.doc-detail-header[b-0ngnrf9qlf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.doc-detail-heading[b-0ngnrf9qlf] {
    min-width: 0;
}

.doc-detail-title[b-0ngnrf9qlf] {
    word-break: break-word;
}

.doc-detail-status-badge[b-0ngnrf9qlf] {
    font-size: 0.75rem;
    vertical-align: middle;
}

.doc-detail-actions[b-0ngnrf9qlf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.doc-detail-actions-group[b-0ngnrf9qlf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Separates the destructive actions (Archive / Mark Expired) from the safe actions so
   they aren't visually clustered next to Publish/Edit/Download and are less likely to be
   clicked by accident. */
.doc-detail-actions-danger[b-0ngnrf9qlf] {
    padding-left: 16px;
    border-left: 1px solid #e5e7eb;
}

@media (max-width: 575.98px) {
    .doc-detail-actions-danger[b-0ngnrf9qlf] {
        padding-left: 0;
        border-left: none;
        padding-top: 8px;
        border-top: 1px solid #e5e7eb;
        width: 100%;
    }
}

/* ── Cards ────────────────────────────────────────────── */

/* Keeps the label column width consistent across the Document Details, Audience, and
   Acknowledgement cards instead of each dl's "auto" label column reflowing independently
   to its own longest label. */
.doc-detail-card[b-0ngnrf9qlf]  .overview-dl {
    grid-template-columns: 140px 1fr;
}

/* Narrower label column for the compact version-detail popup dialog. */
.doc-version-detail-dl[b-0ngnrf9qlf] {
    grid-template-columns: 110px 1fr;
}

/* ── Current document card ───────────────────────────────── */

.doc-current-file[b-0ngnrf9qlf] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.doc-current-file-icon[b-0ngnrf9qlf] {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f3f4f6;
    color: var(--hr-color-primary);
    font-size: 1.35rem;
}

.doc-current-file-info[b-0ngnrf9qlf] {
    flex: 1 1 240px;
    min-width: 0;
}

/* Wraps/truncates long filenames instead of forcing horizontal page overflow. */
.doc-current-file-name[b-0ngnrf9qlf] {
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.doc-current-file-actions[b-0ngnrf9qlf] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.doc-detail-audience-summary[b-0ngnrf9qlf] {
    color: #374151;
}

.doc-detail-note-badge[b-0ngnrf9qlf] {
    font-weight: 500;
    white-space: normal;
    text-align: left;
}

/* ── History tabs ─────────────────────────────────────── */

.doc-detail-history-card[b-0ngnrf9qlf]  .hr-tabs {
    background: transparent;
    box-shadow: none;
}

/* ── History grids ────────────────────────────────────── */

.doc-detail-card[b-0ngnrf9qlf]  .hr-grid {
    min-height: 0;
    height: auto;
}

.doc-detail-empty-state[b-0ngnrf9qlf] {
    padding: 24px 8px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}

html[data-theme="dark"] .doc-detail-actions-danger[b-0ngnrf9qlf] {
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .doc-detail-empty-state[b-0ngnrf9qlf] {
    color: var(--hr-gray-400);
}

html[data-theme="dark"] .doc-current-file-icon[b-0ngnrf9qlf] {
    background: var(--hr-gray-800);
}

html[data-theme="dark"] .doc-detail-audience-summary[b-0ngnrf9qlf] {
    color: var(--hr-gray-300);
}
/* /Components/Pages/Employees/CompensationHistoryGrid.razor.rz.scp.css */
/* Aligns the grid's row content with the input fields in the surrounding card body, which have
   their own left padding/margin that the grid's default cell padding doesn't match. */
[b-c0a87i10lt] .e-grid .e-rowcell,
[b-c0a87i10lt] .e-grid .e-headercell {
    padding-left: 1rem;
}
/* /Components/Pages/Employees/EmployeeAssetsTab.razor.rz.scp.css */
.asset-title-link[b-vdc3qghxhk] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.asset-title-link:hover[b-vdc3qghxhk] {
    color: var(--hr-color-primary);
    text-decoration: underline;
}
/* /Components/Pages/Employees/EmployeeDirectory.razor.rz.scp.css */
.directory-filters[b-xjoj8plb3k] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.directory-search-box[b-xjoj8plb3k] {
    max-width: 320px;
}

.directory-filter[b-xjoj8plb3k] {
    max-width: 220px;
}

/* ── Card grid ───────────────────────────────────────── */

.directory-grid[b-xjoj8plb3k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.directory-card[b-xjoj8plb3k] {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.directory-card:hover[b-xjoj8plb3k],
.directory-card:focus-visible[b-xjoj8plb3k] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    outline: none;
}

.directory-card-avatar[b-xjoj8plb3k] {
    flex-shrink: 0;
}

.directory-card-body[b-xjoj8plb3k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.directory-card-name[b-xjoj8plb3k] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.directory-card-position[b-xjoj8plb3k] {
    font-size: 0.85rem;
    color: #374151;
}

.directory-card-meta[b-xjoj8plb3k] {
    font-size: 0.78rem;
    color: #6b7280;
}

.directory-card-email[b-xjoj8plb3k] {
    font-size: 0.8rem;
    color: var(--hr-color-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-card-email:hover[b-xjoj8plb3k] {
    text-decoration: underline;
}

/* ── Empty state ─────────────────────────────────────── */

.directory-empty[b-xjoj8plb3k] {
    text-align: center;
    padding: 48px 16px;
    color: #6b7280;
}

.directory-empty i[b-xjoj8plb3k] {
    font-size: 2rem;
    margin-bottom: 12px;
}

/* ── Detail dialog ───────────────────────────────────── */

.directory-detail-header[b-xjoj8plb3k] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.directory-detail-name[b-xjoj8plb3k] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.directory-detail-position[b-xjoj8plb3k] {
    font-size: 0.875rem;
    color: #6b7280;
}

.directory-detail-dl[b-xjoj8plb3k] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0;
    align-items: baseline;
}

.directory-detail-dl dt[b-xjoj8plb3k] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.directory-detail-dl dd[b-xjoj8plb3k] {
    font-size: 0.875rem;
    color: #111827;
    margin: 0;
    word-break: break-word;
}

/* ── Dark mode ───────────────────────────────────────── */

html[data-theme="dark"] .directory-card[b-xjoj8plb3k] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .directory-card-name[b-xjoj8plb3k],
html[data-theme="dark"] .directory-detail-name[b-xjoj8plb3k],
html[data-theme="dark"] .directory-detail-dl dd[b-xjoj8plb3k] {
    color: var(--hr-gray-50);
}

html[data-theme="dark"] .directory-card-meta[b-xjoj8plb3k],
html[data-theme="dark"] .directory-detail-dl dt[b-xjoj8plb3k] {
    color: var(--hr-gray-300);
}
/* /Components/Pages/Employees/EmployeeDocumentsTab.razor.rz.scp.css */
/* ── Dark mode ─────────────────────────────────────────
   Bootstrap's .table-light header (used by the Document Requests table) is a
   hard-coded light grey that doesn't respond to data-bs-theme/data-theme, so
   it renders as a white-on-white header in dark mode. Re-point it at the same
   gray-800/gray-200 pairing used by the Syncfusion grid header (.hr-grid
   .e-gridheader) elsewhere in the app. */
html[data-theme="dark"] .table-light[b-dlazxr2re4] {
    background-color: var(--hr-gray-800);
    color: var(--hr-gray-200);
}

html[data-theme="dark"] .table > :not(caption) > * > *[b-dlazxr2re4] {
    color: var(--hr-gray-50);
    border-color: var(--hr-gray-700);
}
/* /Components/Pages/Employees/EmployeeEdit.razor.rz.scp.css */
/* Visually distinguish the inner (sub-section) tab strip from the outer (group) strip so the
   selected group AND the selected sub-section are both clearly readable at a glance. */
.employee-profile-section-wrap[b-ht85p50hw6]  .e-tab-header {
    background-color: var(--bs-tertiary-bg, #f5f5f5);
}

.employee-profile-section-wrap[b-ht85p50hw6]  .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 0.9rem;
}
/* /Components/Pages/Employees/EmployeeLeaveTab.razor.rz.scp.css */
.leave-type-picker[b-nwbdc0qfoo] {
    min-width: 240px;
}
/* /Components/Pages/Employees/EmployeeList.razor.rz.scp.css */
.user-account-cell[b-sm86cu2jfm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.user-account-cell[b-sm86cu2jfm]  .user-account-actions-btn {
    min-width: 0;
    padding: 0.15rem 0.35rem;
    flex: 0 0 auto;
}
/* /Components/Pages/Employees/EmployeeNotesGrid.razor.rz.scp.css */
.note-text-cell[b-ch37rfgza5] {
    white-space: normal;
    line-height: 1.4;
}
/* /Components/Pages/Employees/EmployeeProfilePhotoHeader.razor.rz.scp.css */
.photo-header-alert[b-2v4y4i7duv] {
    max-width: 480px;
}

.pending-photo-thumb[b-2v4y4i7duv] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* /Components/Pages/Employees/EmployeeTimelineTab.razor.rz.scp.css */
.timeline-list[b-019ze1yt5q] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.timeline-entry[b-019ze1yt5q] {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1rem;
}

.timeline-entry:not(:last-child)[b-019ze1yt5q]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background-color: var(--bs-border-color, #dee2e6);
}

.timeline-dot[b-019ze1yt5q] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    z-index: 1;
}

.timeline-card[b-019ze1yt5q] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Pages/Employees/MyProfileContactDetailsTab.razor.rz.scp.css */
/* ── Card ─────────────────────────────────────────────── */

.cd-card[b-ylha2mkuh8] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.cd-card-header[b-ylha2mkuh8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.cd-card-icon[b-ylha2mkuh8] {
    color: var(--hr-color-primary);
    font-size: 0.95rem;
}

.cd-card-title[b-ylha2mkuh8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

/* ── Form body ───────────────────────────────────────── */

.cd-form-body[b-ylha2mkuh8] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Section headings ────────────────────────────────── */

.cd-section-label[b-ylha2mkuh8] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* #9ca3af (Tailwind gray-400) previously used here only reaches ~2.55:1 contrast against the
       white card background, failing WCAG AA's 4.5:1 requirement for small/bold text. #6b7280
       (gray-500, already used elsewhere in this file for .cd-readonly text) reaches ~4.8:1. */
    color: #6b7280;
    padding-bottom: 4px;
    border-bottom: 1px solid #f3f4f6;
}

/* ── Fields ──────────────────────────────────────────── */

.cd-field-group[b-ylha2mkuh8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* allow the group to shrink inside the grid instead of overflowing at narrow widths / 200% zoom */
}

.cd-field-row[b-ylha2mkuh8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* Field-level validation error container. Kept always-present (may be empty) so each input's
   aria-describedby target exists before an error is shown. */
.cd-error:empty[b-ylha2mkuh8] {
    display: none;
}

/* Ensure keyboard focus is always visible even where a component or reset removes outlines. */
.cd-card[b-ylha2mkuh8]  :focus-visible,
.cd-success-dismiss:focus-visible[b-ylha2mkuh8] {
    outline: 2px solid var(--hr-color-primary, #2563eb);
    outline-offset: 2px;
}

.cd-label[b-ylha2mkuh8] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
}

.cd-required[b-ylha2mkuh8] {
    color: #ef4444;
}

.cd-hint[b-ylha2mkuh8] {
    font-size: 0.75rem;
    /* Same WCAG AA contrast fix as .cd-section-label above — #9ca3af only reaches ~2.55:1 on the
       white card background. */
    color: #6b7280;
}

.cd-readonly[b-ylha2mkuh8] {
    font-size: 14px;
    background: #f9fafb;
    color: #6b7280;
}

/* ── Footer ──────────────────────────────────────────── */

.cd-form-footer[b-ylha2mkuh8] {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
}

/* ── Success banner ──────────────────────────────────── */

.cd-success-banner[b-ylha2mkuh8] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 16px;
}

.cd-success-icon[b-ylha2mkuh8] {
    color: #16a34a;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.cd-success-title[b-ylha2mkuh8] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #15803d;
    margin-bottom: 2px;
}

.cd-success-body[b-ylha2mkuh8] {
    font-size: 0.8rem;
    color: #166534;
}

.cd-success-dismiss[b-ylha2mkuh8] {
    margin-left: auto;
    background: none;
    border: none;
    color: #16a34a;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.6;
}

.cd-success-dismiss:hover[b-ylha2mkuh8] { opacity: 1; }

@media (max-width: 576px) {
    .cd-field-row[b-ylha2mkuh8] {
        grid-template-columns: 1fr;
    }
}

/* ── Dark mode ───────────────────────────────────────── */

html[data-theme="dark"] .cd-card[b-ylha2mkuh8] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .cd-card-header[b-ylha2mkuh8],
html[data-theme="dark"] .cd-section-label[b-ylha2mkuh8],
html[data-theme="dark"] .cd-form-footer[b-ylha2mkuh8] {
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .cd-card-title[b-ylha2mkuh8],
html[data-theme="dark"] .cd-label[b-ylha2mkuh8] {
    color: var(--hr-gray-50);
}

html[data-theme="dark"] .cd-readonly[b-ylha2mkuh8] {
    background: var(--hr-gray-900);
    color: var(--hr-gray-400);
}
/* /Components/Pages/Employees/MyProfileEmergencyContactsTab.razor.rz.scp.css */
.ec-card[b-qf9lbd24bt] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.ec-card-header[b-qf9lbd24bt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.ec-card-icon[b-qf9lbd24bt] {
    color: #6b7280;
    font-size: 1.1rem;
}

.ec-card-title[b-qf9lbd24bt] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
}

.ec-form-body[b-qf9lbd24bt] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ec-section-label[b-qf9lbd24bt] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.ec-field-row[b-qf9lbd24bt] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ec-field-group[b-qf9lbd24bt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ec-label[b-qf9lbd24bt] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.ec-required[b-qf9lbd24bt] {
    color: #ef4444;
    margin-left: 2px;
}

.ec-contact-card[b-qf9lbd24bt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fafafa;
    gap: 1rem;
}

.ec-contact-info[b-qf9lbd24bt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.ec-contact-name[b-qf9lbd24bt] {
    font-weight: 600;
    color: #111827;
    font-size: 0.925rem;
}

.ec-contact-meta[b-qf9lbd24bt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.ec-contact-relationship[b-qf9lbd24bt] {
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 500;
}

.ec-contact-actions[b-qf9lbd24bt] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ec-contact-form[b-qf9lbd24bt] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    background: #f9fafb;
}

.ec-form-actions[b-qf9lbd24bt] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ec-empty[b-qf9lbd24bt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: #9ca3af;
    text-align: center;
}

.ec-empty-icon[b-qf9lbd24bt] {
    font-size: 2rem;
    color: #d1d5db;
}

.ec-empty-text[b-qf9lbd24bt] {
    margin: 0;
    font-size: 0.9rem;
}

/* Success banner */
.ec-success-banner[b-qf9lbd24bt] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

.ec-success-icon[b-qf9lbd24bt] {
    color: #16a34a;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.ec-success-title[b-qf9lbd24bt] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #15803d;
}

.ec-success-body[b-qf9lbd24bt] {
    font-size: 0.8125rem;
    color: #166534;
}

.ec-success-dismiss[b-qf9lbd24bt] {
    margin-left: auto;
    background: none;
    border: none;
    color: #16a34a;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}

@media (max-width: 576px) {
    .ec-contact-card[b-qf9lbd24bt] {
        flex-direction: column;
    }
}

/* ── Dark mode ───────────────────────────────────────── */

html[data-theme="dark"] .ec-card[b-qf9lbd24bt] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .ec-card-header[b-qf9lbd24bt] {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .ec-card-title[b-qf9lbd24bt],
html[data-theme="dark"] .ec-contact-name[b-qf9lbd24bt],
html[data-theme="dark"] .ec-label[b-qf9lbd24bt] {
    color: var(--hr-gray-50);
}

html[data-theme="dark"] .ec-contact-card[b-qf9lbd24bt],
html[data-theme="dark"] .ec-contact-form[b-qf9lbd24bt] {
    background: var(--hr-gray-900);
    border-color: var(--hr-gray-700);
}
/* /Components/Pages/Employees/MyProfileEqualityDiversityTab.razor.rz.scp.css */
/* ── Card ─────────────────────────────────────────────── */

.ed-card[b-68ldxya4c6] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.ed-card-header[b-68ldxya4c6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.ed-card-icon[b-68ldxya4c6] {
    color: var(--hr-color-primary);
    font-size: 0.95rem;
}

.ed-card-title[b-68ldxya4c6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

/* ── Intro ───────────────────────────────────────────── */

.ed-intro[b-68ldxya4c6] {
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.82rem;
    color: #4b5563;
}

.ed-intro p[b-68ldxya4c6] {
    margin-bottom: 8px;
}

.ed-intro p:last-child[b-68ldxya4c6] {
    margin-bottom: 0;
}

/* ── Form body ───────────────────────────────────────── */

.ed-form-body[b-68ldxya4c6] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ed-field-group[b-68ldxya4c6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 460px;
}

.ed-label[b-68ldxya4c6] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
}

/* ── Footer ──────────────────────────────────────────── */

.ed-form-footer[b-68ldxya4c6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
}

/* ── Success banner ──────────────────────────────────── */

.ed-success-banner[b-68ldxya4c6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 16px;
}

.ed-success-icon[b-68ldxya4c6] {
    color: #16a34a;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ed-success-title[b-68ldxya4c6] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #15803d;
    margin-bottom: 2px;
}

.ed-success-body[b-68ldxya4c6] {
    font-size: 0.8rem;
    color: #166534;
}

.ed-success-dismiss[b-68ldxya4c6] {
    margin-left: auto;
    background: none;
    border: none;
    color: #16a34a;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.6;
}

.ed-success-dismiss:hover[b-68ldxya4c6] { opacity: 1; }

/* ── Dark mode ───────────────────────────────────────── */

html[data-theme="dark"] .ed-card[b-68ldxya4c6] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .ed-card-header[b-68ldxya4c6],
html[data-theme="dark"] .ed-intro[b-68ldxya4c6],
html[data-theme="dark"] .ed-form-footer[b-68ldxya4c6] {
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .ed-intro[b-68ldxya4c6] {
    background: var(--hr-gray-900);
    color: var(--hr-gray-300);
}

html[data-theme="dark"] .ed-card-title[b-68ldxya4c6],
html[data-theme="dark"] .ed-label[b-68ldxya4c6] {
    color: var(--hr-gray-50);
}
/* /Components/Pages/Employees/MyProfileOverviewTab.razor.rz.scp.css */
/* ── Overview layout (main content + right-hand actions rail) ────── */

.overview-layout[b-59esj3036j] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.overview-main[b-59esj3036j] {
    flex: 1;
    min-width: 0;
}

.overview-sidebar[b-59esj3036j] {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
}

@media (max-width: 900px) {
    .overview-layout[b-59esj3036j] {
        flex-direction: column;
    }

    .overview-sidebar[b-59esj3036j] {
        width: 100%;
        position: static;
        /* .overview-sidebar (holding the quick-action buttons) comes after .overview-main in
           markup order, which is fine for the desktop side-by-side rail but means it lands below
           every card once the layout stacks vertically — pushing the actions the user is most
           likely to want (Leave, Sickness, Documents, Tasks) below the fold on a phone. Move it
           to the front of the stack instead. */
        order: -1;
    }
}

/* ── Grid layout ─────────────────────────────────────── */

.overview-grid[b-59esj3036j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* ── Card ────────────────────────────────────────────── */

.overview-card[b-59esj3036j] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.overview-card-header[b-59esj3036j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}

.overview-card-icon[b-59esj3036j] {
    color: var(--hr-color-primary);
    font-size: 0.95rem;
}

.overview-card-title[b-59esj3036j] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

/* ── Definition list ─────────────────────────────────── */

.overview-dl[b-59esj3036j] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0;
    align-items: baseline;
}

.overview-dl dt[b-59esj3036j] {
    font-size: 0.78rem;
    font-weight: 500;
    /* #9ca3af is only ~2.5:1 on white — fails WCAG AA. #6b7280 is ~4.8:1. */
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.overview-dl dd[b-59esj3036j] {
    font-size: 0.875rem;
    color: #111827;
    margin: 0;
    word-break: break-word;
}

.overview-link[b-59esj3036j] {
    color: var(--hr-color-primary);
    text-decoration: none;
}

.overview-link:hover[b-59esj3036j] {
    text-decoration: underline;
}

/* ── Status badge ────────────────────────────────────── */

.status-badge[b-59esj3036j] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge--active[b-59esj3036j]     { background: #dcfce7; color: #16a34a; }
.status-badge--onleave[b-59esj3036j]    { background: #fef9c3; color: #ca8a04; }
.status-badge--suspended[b-59esj3036j]  { background: #fee2e2; color: #dc2626; }
.status-badge--terminated[b-59esj3036j] { background: #f3f4f6; color: #6b7280; }
.status-badge--draft[b-59esj3036j]      { background: #ede9fe; color: #7c3aed; }

/* ── Quick statistics ────────────────────────────────── */

.stats-row[b-59esj3036j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.stat-card[b-59esj3036j] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.stat-card--clickable[b-59esj3036j] {
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.stat-card--clickable:hover[b-59esj3036j] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.stat-icon[b-59esj3036j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
}

.stat-icon--tasks[b-59esj3036j]   { background: #ede9fe; color: #7c3aed; }
.stat-icon--leave[b-59esj3036j]   { background: #dcfce7; color: #16a34a; }
.stat-icon--pending[b-59esj3036j] { background: #f3f4f6; color: #9ca3af; }
.stat-icon--pending-active[b-59esj3036j] { background: #fef3c7; color: #d97706; }
.stat-icon--sickness[b-59esj3036j] { background: #fee2e2; color: #dc2626; }

.stat-body[b-59esj3036j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value[b-59esj3036j] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.stat-label[b-59esj3036j] {
    font-size: 0.75rem;
    /* WCAG 1.4.3: #9ca3af on the white card is only ~2.5:1 at this 12px size — axe flags it
       serious. #6b7280 (Tailwind gray-500) clears AA at ~4.6:1. */
    color: #6b7280;
}

/* ── Upcoming leave list ─────────────────────────────── */

.upcoming-leave-list[b-59esj3036j] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.upcoming-leave-item[b-59esj3036j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.upcoming-leave-item:last-child[b-59esj3036j] {
    border-bottom: none;
}

.upcoming-leave-type[b-59esj3036j] {
    font-weight: 500;
    color: #111827;
    min-width: 110px;
}

.upcoming-leave-dates[b-59esj3036j] {
    color: #6b7280;
    flex: 1;
}

.upcoming-leave-days[b-59esj3036j] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hr-color-primary);
    white-space: nowrap;
}

/* ── Action buttons ──────────────────────────────────── */

.overview-actions-card[b-59esj3036j] {
    padding: 12px;
}

.overview-actions-card .overview-card-header[b-59esj3036j] {
    padding: 4px 8px 10px;
}

.overview-actions[b-59esj3036j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.action-btn[b-59esj3036j] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.action-btn:hover[b-59esj3036j] {
    background: #f9fafb;
}

.action-btn:focus-visible[b-59esj3036j] {
    outline: 2px solid var(--hr-color-primary);
    outline-offset: -2px;
}

.action-btn-label[b-59esj3036j] {
    flex: 1;
}

.action-btn-chevron[b-59esj3036j] {
    font-size: 0.7rem;
    color: #d1d5db;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.action-btn:hover .action-btn-chevron[b-59esj3036j] {
    opacity: 1;
    transform: translateX(0);
}

.action-btn-icon[b-59esj3036j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.85rem;
    flex-shrink: 0;
    background: var(--hr-color-primary-subtle);
    color: var(--hr-color-primary);
    transition: transform 0.12s ease;
}

.action-btn:hover .action-btn-icon[b-59esj3036j] {
    transform: scale(1.08);
}

.action-btn--leave .action-btn-icon[b-59esj3036j]      { background: #dcfce7; color: #16a34a; }
.action-btn--sickness .action-btn-icon[b-59esj3036j]   { background: #fee2e2; color: #dc2626; }
.action-btn--documents .action-btn-icon[b-59esj3036j]  { background: var(--hr-color-primary-subtle); color: var(--hr-color-primary); }
.action-btn--tasks .action-btn-icon[b-59esj3036j]      { background: #ede9fe; color: #7c3aed; }
.action-btn--directory .action-btn-icon[b-59esj3036j]  { background: #e0f2fe; color: #0284c7; }
.action-btn--vacancies .action-btn-icon[b-59esj3036j]  { background: #fef3c7; color: #d97706; }

@media (max-width: 900px) {
    .overview-actions[b-59esj3036j] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-btn[b-59esj3036j] {
        width: auto;
        border: 1px solid #e5e7eb;
    }
}

@media (max-width: 480px) {
    /* auto-fill's minmax(420px, 1fr) / minmax(280px, 1fr) are both wider than a phone viewport,
       which forces the grid to overflow horizontally instead of stacking — collapse to a single
       column below the width either could ever fit at. */
    .overview-grid[b-59esj3036j],
    .overview-skeleton[b-59esj3036j] {
        grid-template-columns: 1fr;
    }
}

/* ── Loading skeleton ────────────────────────────────── */

.overview-skeleton[b-59esj3036j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.skeleton-card[b-59esj3036j] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

.skeleton-line[b-59esj3036j] {
    height: 12px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer-b-59esj3036j 1.4s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-title[b-59esj3036j] {
    height: 16px;
    width: 50%;
    margin-bottom: 16px;
}

.skeleton-short[b-59esj3036j] {
    width: 40%;
}

@keyframes shimmer-b-59esj3036j {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Dark mode ───────────────────────────────────────── */

html[data-theme="dark"] .overview-card[b-59esj3036j],
html[data-theme="dark"] .stat-card[b-59esj3036j],
html[data-theme="dark"] .skeleton-card[b-59esj3036j] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .overview-card-header[b-59esj3036j],
html[data-theme="dark"] .upcoming-leave-item[b-59esj3036j] {
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .overview-dl dt[b-59esj3036j],
html[data-theme="dark"] .stat-label[b-59esj3036j] {
    /* #6b7280 is ~2.9:1 on the dark card surface; --hr-gray-300 clears AA comfortably. */
    color: var(--hr-gray-300);
}

html[data-theme="dark"] .overview-card-title[b-59esj3036j],
html[data-theme="dark"] .overview-dl dd[b-59esj3036j],
html[data-theme="dark"] .stat-value[b-59esj3036j],
html[data-theme="dark"] .upcoming-leave-type[b-59esj3036j],
html[data-theme="dark"] .action-btn[b-59esj3036j] {
    color: var(--hr-gray-50);
}

html[data-theme="dark"] .action-btn:hover[b-59esj3036j] {
    background: var(--hr-gray-700);
}
/* /Components/Pages/Employees/MyProfilePersonalDetailsTab.razor.rz.scp.css */
/* ── Details card ────────────────────────────────────── */

.pd-card[b-0wtwyhpeug] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}

.pd-card-header[b-0wtwyhpeug] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.pd-card-icon[b-0wtwyhpeug] {
    color: var(--hr-color-primary);
    font-size: 0.95rem;
}

.pd-card-title[b-0wtwyhpeug] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

/* ── Definition list ─────────────────────────────────── */

.pd-dl[b-0wtwyhpeug] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
    margin: 0;
    padding: 8px 0;
}

.pd-dl dt[b-0wtwyhpeug],
.pd-dl dd[b-0wtwyhpeug] {
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #f9fafb;
    display: flex;
    align-items: center;
}

.pd-dl dt:last-of-type[b-0wtwyhpeug],
.pd-dl dd:last-of-type[b-0wtwyhpeug] {
    border-bottom: none;
}

.pd-dl dt[b-0wtwyhpeug] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pd-dl dd[b-0wtwyhpeug] {
    font-size: 0.875rem;
    color: #111827;
}

.pd-empty[b-0wtwyhpeug] {
    color: #d1d5db;
    font-style: italic;
}

/* ── Request change button ───────────────────────────── */

.pd-change-btn[b-0wtwyhpeug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--hr-color-primary);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.pd-change-btn:hover[b-0wtwyhpeug] {
    background: var(--hr-color-primary-subtle);
    border-color: var(--hr-color-primary);
}

/* ── Success banner ──────────────────────────────────── */

.pd-success-banner[b-0wtwyhpeug] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.pd-success-icon[b-0wtwyhpeug] {
    color: #16a34a;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pd-success-title[b-0wtwyhpeug] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #15803d;
    margin-bottom: 2px;
}

.pd-success-body[b-0wtwyhpeug] {
    font-size: 0.8rem;
    color: #166534;
}

.pd-success-dismiss[b-0wtwyhpeug] {
    margin-left: auto;
    background: none;
    border: none;
    color: #16a34a;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.6;
}

.pd-success-dismiss:hover[b-0wtwyhpeug] { opacity: 1; }

/* ── Dialog content ──────────────────────────────────── */

.pd-dialog-hint[b-0wtwyhpeug] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 14px;
}

.pd-label[b-0wtwyhpeug] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.pd-char-count[b-0wtwyhpeug] {
    font-size: 0.72rem;
    color: #9ca3af;
    text-align: right;
    margin-top: 4px;
}

/* ── Dark mode ───────────────────────────────────────── */

html[data-theme="dark"] .pd-card[b-0wtwyhpeug] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .pd-card-header[b-0wtwyhpeug] {
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .pd-card-title[b-0wtwyhpeug],
html[data-theme="dark"] .pd-dl dd[b-0wtwyhpeug] {
    color: var(--hr-gray-50);
}

html[data-theme="dark"] .pd-dl dt[b-0wtwyhpeug],
html[data-theme="dark"] .pd-dl dd[b-0wtwyhpeug] {
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .pd-change-btn[b-0wtwyhpeug] {
    border-color: var(--hr-gray-700);
}
/* /Components/Pages/Employees/MyProfilePhotoHeader.razor.rz.scp.css */
.photo-header-row[b-zc9srgibjs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.photo-alert[b-zc9srgibjs] {
    max-width: 420px;
}

.pending-photo-thumb[b-zc9srgibjs] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* /Components/Pages/Employees/MyTeamWidget.razor.rz.scp.css */
/* Two-button scope toggle (Direct Reports / All Reports), laid out side by side now that it's
   built from plain SfButton elements rather than a Bootstrap btn-group/btn-check pair. */
.team-widget-scope[b-j8mgpfg1wc] {
    display: flex;
    gap: 6px;
    padding: 10px 16px 12px;
}

/* Responsive grid of per-member cards, replacing the single-column stacked-row layout
   task-widget-item/task-widget-content are shared with (HrInboxWidget, LeaveRequestsWidget, …) —
   these classes are scoped to this widget only, so they don't affect anything else.
   Widened the minimum card width (120px -> 150px) so cards have more breathing room. */
.team-card-grid[b-j8mgpfg1wc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    padding: 14px 16px;
}

.team-card[b-j8mgpfg1wc] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 8px;
    border: 1px solid var(--hr-gray-100);
    border-radius: var(--hr-radius-md);
    transition: box-shadow 0.15s, transform 0.15s;
}

.team-widget-body--switching[b-j8mgpfg1wc] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.1s ease-in;
}

.team-card:hover[b-j8mgpfg1wc] {
    box-shadow: var(--hr-shadow-sm);
    transform: translateY(-1px);
}

/* Header row holding the "needs attention" alert badge (left) and the "where they are today"
   status badge (right) — both in normal flow (not position:absolute) inside a shared row so their
   baselines line up across every card regardless of whether a given member has an alert badge. */
.team-card-top-row[b-j8mgpfg1wc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.team-card-status[b-j8mgpfg1wc] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: var(--hr-radius-sm);
}

.team-card-status-group[b-j8mgpfg1wc] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.team-card-leaving-badge[b-j8mgpfg1wc] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: var(--hr-radius-sm);
    background: #fef3c7;
    color: #92400e;
}

html[data-theme="dark"] .team-card-leaving-badge[b-j8mgpfg1wc] {
    background: rgba(202, 138, 4, 0.18);
    color: #fbbf24;
}

.team-card-status--at-work[b-j8mgpfg1wc] {
    background: #dcfce7;
    color: var(--hr-color-success);
}

.team-card-status--sick[b-j8mgpfg1wc] {
    background: #fee2e2;
    color: var(--hr-color-danger);
}

.team-card-status--on-leave[b-j8mgpfg1wc] {
    background: #fef3c7;
    color: #92400e;
}

html[data-theme="dark"] .team-card-status--at-work[b-j8mgpfg1wc] {
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
}

html[data-theme="dark"] .team-card-status--sick[b-j8mgpfg1wc] {
    background: rgba(220, 38, 38, 0.18);
    color: var(--hr-color-danger);
}

html[data-theme="dark"] .team-card-status--on-leave[b-j8mgpfg1wc] {
    background: rgba(202, 138, 4, 0.18);
    color: #fbbf24;
}

.team-card-alert-badge[b-j8mgpfg1wc] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--hr-radius-sm);
    background: #fee2e2;
    color: var(--hr-color-danger);
}

html[data-theme="dark"] .team-card-alert-badge[b-j8mgpfg1wc] {
    background: rgba(220, 38, 38, 0.18);
    color: var(--hr-color-danger);
}

.team-card-actions[b-j8mgpfg1wc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}

.team-card-actions[b-j8mgpfg1wc]  .e-btn {
    flex: 0 1 auto;
    white-space: nowrap;
    margin: 0;
}

.team-card-name[b-j8mgpfg1wc] {
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hr-gray-900);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card-title[b-j8mgpfg1wc] {
    font-size: 0.72rem;
    color: var(--hr-gray-400);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card-contact[b-j8mgpfg1wc] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 6px;
    width: 100%;
}

.team-card-contact-link[b-j8mgpfg1wc] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border-radius: var(--hr-radius-sm);
    color: var(--hr-gray-500);
    font-size: 0.68rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    overflow: hidden;
}

.team-card-contact-link i[b-j8mgpfg1wc] {
    flex: 0 0 auto;
    width: 12px;
    text-align: center;
}

.team-card-contact-text[b-j8mgpfg1wc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card-contact-link:hover[b-j8mgpfg1wc] {
    color: var(--hr-color-primary);
}

html[data-theme="dark"] .team-card[b-j8mgpfg1wc] {
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .team-card-name[b-j8mgpfg1wc] {
    color: var(--hr-gray-50);
}

html[data-theme="dark"] .team-card-title[b-j8mgpfg1wc] {
    color: var(--hr-gray-500);
}

html[data-theme="dark"] .team-card-contact-link[b-j8mgpfg1wc] {
    color: var(--hr-gray-400);
}

.team-card-profile-link[b-j8mgpfg1wc] {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
}

.team-card-profile-link .team-card-name[b-j8mgpfg1wc] {
    margin-top: 0;
    text-align: left;
}

.team-card-title[b-j8mgpfg1wc] {
    align-self: stretch;
    padding-left: 58px;
    margin-top: -14px;
    text-align: left;
}
/* /Components/Pages/Employees/ProfilePhotoReviewPanel.razor.rz.scp.css */
.pending-photo-thumb[b-ii5ozep3fv] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.login-card[b-px2qd95hgg] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 520px;
}

.login-brand[b-px2qd95hgg] {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.login-logo-img[b-px2qd95hgg] {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.login-heading[b-px2qd95hgg] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.login-subheading[b-px2qd95hgg] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 24px;
}

.login-field[b-px2qd95hgg] {
    margin-bottom: 18px;
}

.login-label[b-px2qd95hgg] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.login-validation[b-px2qd95hgg],
[b-px2qd95hgg] .login-validation {
    display: block;
    font-size: 0.8rem;
    color: #dc2626 !important;
    margin-top: 4px;
}

.login-btn[b-px2qd95hgg] {
    width: 100%;
    margin-top: 8px;
}

.login-back-link[b-px2qd95hgg] {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.875rem;
    color: #6b7280;
}

/* This page is deliberately light-only (the card above is hardcoded to a white background,
   never adapting to dark mode) — but the SfTextBox input doesn't know that: App.razor's
   theme-detection script runs on every page including this one and defaults to dark based on
   the OS/browser's prefers-color-scheme when the visitor has never explicitly toggled a
   preference, enabling Syncfusion's separate dark-theme stylesheet and Bootstrap's
   data-bs-theme="dark" globally. Without this override the input renders with a dark
   background inside the always-white card. !important is needed to beat the dark Syncfusion
   stylesheet's own specificity; ::deep reaches into SfTextBox's own generated markup, which
   Blazor's CSS isolation wouldn't otherwise scope to this component. */
[b-px2qd95hgg] .e-input-group,
[b-px2qd95hgg] .e-input-group.e-control-wrapper,
[b-px2qd95hgg] .e-float-input.e-control-wrapper {
    background: #fff !important;
    border-color: #d1d5db !important;
}

[b-px2qd95hgg] .e-input-group input.e-input,
[b-px2qd95hgg] .e-float-input input {
    background: #fff !important;
    color: #111827 !important;
}

/* See Login.razor.css's matching rule for the full rationale — a password manager/passkey
   autofill uses the browser's own ":-webkit-autofill" styling, not the plain background/color
   rules above, and can leave text unreadable against its own light autofill background in this
   dark-theme-detected context. */
[b-px2qd95hgg] .e-input-group input.e-input:-webkit-autofill,
[b-px2qd95hgg] .e-float-input input:-webkit-autofill,
[b-px2qd95hgg] .e-input-group input.e-input:-webkit-autofill:focus,
[b-px2qd95hgg] .e-float-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: inset 0 0 0px 1000px #fff !important;
    box-shadow: inset 0 0 0px 1000px #fff !important;
    caret-color: #111827;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.dashboard-greeting[b-gjbo1na0bk] {
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.dashboard-heading[b-gjbo1na0bk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.dashboard-section + .dashboard-section[b-gjbo1na0bk] {
    margin-top: 2rem;
}

.dashboard-section-title[b-gjbo1na0bk] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* gray-600 (not gray-400) — small bold uppercase label must clear WCAG AA 4.5:1. */
    color: var(--hr-gray-600);
    margin-bottom: 1rem;
}
/* /Components/Pages/Hr/HrSettingsPage.razor.rz.scp.css */
/* Scrollable tab strip: keeps the tab headers on one horizontally-scrollable row instead of
   wrapping/overflowing the page at narrow (tablet/mobile) widths. */
[b-fuybuhas35] .hr-settings-tabs .e-tab-header {
    overflow-x: auto;
    flex-wrap: nowrap;
}

[b-fuybuhas35] .hr-settings-tab-error-icon {
    color: var(--bs-danger, #dc3545);
    margin-inline-end: 0.35rem;
}

/* Sticky footer: Save/Cancel stay visible without scrolling the whole page. */
.hr-settings-footer[b-fuybuhas35] {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-block: 0.75rem;
    border-top: 1px solid var(--hr-gray-200, #e5e7eb);
    z-index: 5;
}
/* /Components/Pages/Identity/AcceptInvite.razor.rz.scp.css */
/* Mirrors Login.razor.css/ForgotPassword.razor.css's own copies of these rules — Blazor's CSS
   isolation scopes each .razor.css to its own component, so the shared "login-*" class names
   across these auth pages each need their own copy rather than a single shared stylesheet. */

.login-card[b-n9anemyjtr] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 520px;
}

.login-brand[b-n9anemyjtr] {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.login-logo-img[b-n9anemyjtr] {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.login-heading[b-n9anemyjtr] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.login-subheading[b-n9anemyjtr] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 24px;
}

.login-error[b-n9anemyjtr] {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-field[b-n9anemyjtr] {
    margin-bottom: 18px;
}

.login-label[b-n9anemyjtr] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.login-validation[b-n9anemyjtr],
[b-n9anemyjtr] .login-validation {
    display: block;
    font-size: 0.8rem;
    color: #dc2626 !important;
    margin-top: 4px;
}

.login-password-field[b-n9anemyjtr] {
    position: relative;
}

.login-password-toggle[b-n9anemyjtr] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #00806a;
    cursor: pointer;
}

.login-password-toggle:hover[b-n9anemyjtr] {
    text-decoration: underline;
}

.login-btn[b-n9anemyjtr] {
    width: 100%;
    margin-top: 8px;
}

.login-back-link[b-n9anemyjtr] {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.875rem;
    color: #6b7280;
}

/* This page is deliberately light-only (the card above is hardcoded to a white background,
   never adapting to dark mode) — but the SfTextBox inputs don't know that: App.razor's
   theme-detection script runs on every page including this one and defaults to dark based on
   the OS/browser's prefers-color-scheme when the visitor has never explicitly toggled a
   preference, enabling Syncfusion's separate dark-theme stylesheet and Bootstrap's
   data-bs-theme="dark" globally. Without this override the inputs render with a dark
   background inside the always-white card. !important is needed to beat the dark Syncfusion
   stylesheet's own specificity; ::deep reaches into SfTextBox's own generated markup, which
   Blazor's CSS isolation wouldn't otherwise scope to this component. */
[b-n9anemyjtr] .e-input-group,
[b-n9anemyjtr] .e-input-group.e-control-wrapper,
[b-n9anemyjtr] .e-float-input.e-control-wrapper {
    background: #fff !important;
    border-color: #d1d5db !important;
}

[b-n9anemyjtr] .e-input-group input.e-input,
[b-n9anemyjtr] .e-float-input input {
    background: #fff !important;
    color: #111827 !important;
}

/* A password manager/passkey autofill applies the browser's own ":-webkit-autofill" styling —
   see Login.razor.css's identical rule for the full rationale. */
[b-n9anemyjtr] .e-input-group input.e-input:-webkit-autofill,
[b-n9anemyjtr] .e-float-input input:-webkit-autofill,
[b-n9anemyjtr] .e-input-group input.e-input:-webkit-autofill:focus,
[b-n9anemyjtr] .e-float-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: inset 0 0 0px 1000px #fff !important;
    box-shadow: inset 0 0 0px 1000px #fff !important;
    caret-color: #111827;
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-card[b-sjpes74eda] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 520px;
}

.login-brand[b-sjpes74eda] {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.login-logo-img[b-sjpes74eda] {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.login-heading[b-sjpes74eda] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.login-subheading[b-sjpes74eda] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 24px;
}

.login-error[b-sjpes74eda] {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-success[b-sjpes74eda] {
    background: #dcfce7;
    color: #166534;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-field[b-sjpes74eda] {
    margin-bottom: 18px;
}

.login-label[b-sjpes74eda] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.login-password-row[b-sjpes74eda] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.login-forgot-link[b-sjpes74eda] {
    font-size: 0.8rem;
    /* DESIGN.md's accent-strong — the documented, contrast-verified color for links/accented text. */
    color: #00806a;
}

.login-validation[b-sjpes74eda],
[b-sjpes74eda] .login-validation {
    display: block;
    font-size: 0.8rem;
    color: #dc2626 !important;
    margin-top: 4px;
}

.login-password-field[b-sjpes74eda] {
    position: relative;
}

.login-password-toggle[b-sjpes74eda] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #00806a;
    cursor: pointer;
}

.login-password-toggle:hover[b-sjpes74eda] {
    text-decoration: underline;
}

.login-btn[b-sjpes74eda] {
    width: 100%;
    margin-top: 8px;
}

.login-legal[b-sjpes74eda] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.78rem;
    line-height: 1.4;
}

.login-legal a[b-sjpes74eda] {
    color: #6b7280;
    text-decoration: none;
}

.login-legal a:hover[b-sjpes74eda] {
    text-decoration: underline;
}

.login-legal a:focus-visible[b-sjpes74eda] {
    outline: 2px solid #00806a;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 480px) {
    .login-legal[b-sjpes74eda] {
        font-size: 0.75rem;
        gap: 6px 10px;
    }
}

/* This page is deliberately light-only (the card above is hardcoded to a white background,
   never adapting to dark mode) — but the SfTextBox inputs don't know that: App.razor's
   theme-detection script runs on every page including this one and defaults to dark based on
   the OS/browser's prefers-color-scheme when the visitor has never explicitly toggled a
   preference, enabling Syncfusion's separate dark-theme stylesheet and Bootstrap's
   data-bs-theme="dark" globally. Without this override the inputs render with a dark
   background inside the always-white card. !important is needed to beat the dark Syncfusion
   stylesheet's own specificity; ::deep reaches into SfTextBox's own generated markup, which
   Blazor's CSS isolation wouldn't otherwise scope to this component. */
[b-sjpes74eda] .e-input-group,
[b-sjpes74eda] .e-input-group.e-control-wrapper,
[b-sjpes74eda] .e-float-input.e-control-wrapper {
    background: #fff !important;
    border-color: #d1d5db !important;
}

[b-sjpes74eda] .e-input-group input.e-input,
[b-sjpes74eda] .e-float-input input {
    background: #fff !important;
    color: #111827 !important;
}

/* A password manager/passkey autofill (e.g. filling email+password after a passkey prompt)
   applies the browser's own ":-webkit-autofill" styling, which is a separate mechanism from the
   plain background/color rules above — Chromium in particular renders it with a light
   (yellow/gray) background of its own and, in this dark-theme-detected context, can leave the
   text at whatever color the surrounding dark theme set (white), which then renders unreadable
   on that light autofill background. A plain "background" override doesn't beat it; the
   inset box-shadow trick (filling the input with the intended background color) plus an explicit
   -webkit-text-fill-color are the only overrides that actually take effect on autofilled fields. */
[b-sjpes74eda] .e-input-group input.e-input:-webkit-autofill,
[b-sjpes74eda] .e-float-input input:-webkit-autofill,
[b-sjpes74eda] .e-input-group input.e-input:-webkit-autofill:focus,
[b-sjpes74eda] .e-float-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: inset 0 0 0px 1000px #fff !important;
    box-shadow: inset 0 0 0px 1000px #fff !important;
    caret-color: #111827;
}
/* /Components/Pages/OnboardingTemplates/OnboardingTemplateEdit.razor.rz.scp.css */
/* Checklist tasks: compact accordion rows. Each row shows a summary (title + due timing +
   assignee + priority) that toggles an editable panel, plus explicit reorder controls. */

.task-list[b-80ia6ae831] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-item[b-80ia6ae831] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
}

.task-item.expanded[b-80ia6ae831] {
    border-color: var(--bs-primary, #0d6efd);
}

.task-summary[b-80ia6ae831] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.task-disclosure[b-80ia6ae831] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.5rem;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.task-disclosure:focus-visible[b-80ia6ae831] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
    border-radius: 0.25rem;
}

.task-chevron[b-80ia6ae831] {
    flex: 0 0 auto;
    transition: transform 0.15s ease-in-out;
    color: var(--bs-secondary, #6c757d);
}

.task-item.expanded .task-chevron[b-80ia6ae831] {
    transform: rotate(90deg);
}

.task-title-text[b-80ia6ae831] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-meta[b-80ia6ae831] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--bs-secondary, #6c757d);
    white-space: nowrap;
}

.task-priority[b-80ia6ae831] {
    margin-left: auto;
}

.task-move-controls[b-80ia6ae831] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.task-icon-btn[b-80ia6ae831] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.25rem;
    color: var(--bs-body-color, #212529);
    cursor: pointer;
}

.task-icon-btn:hover:not(:disabled)[b-80ia6ae831] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.task-icon-btn:disabled[b-80ia6ae831] {
    opacity: 0.4;
    cursor: not-allowed;
}

.task-icon-btn:focus-visible[b-80ia6ae831] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

.task-icon-btn-danger[b-80ia6ae831] {
    color: var(--bs-danger, #dc3545);
}

.task-position[b-80ia6ae831] {
    display: flex;
    margin: 0;
}

.task-position-input[b-80ia6ae831] {
    width: 3.25rem;
    text-align: center;
}

.task-position-of[b-80ia6ae831] {
    font-size: 0.8125rem;
    color: var(--bs-secondary, #6c757d);
}

.task-panel[b-80ia6ae831] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
/* /Components/Pages/Organisation/OrganisationChart.razor.rz.scp.css */
.org-chart-card[b-h5q0rz5pn7] {
    position: absolute;
    width: 220px;
    height: 76px;
    border: 1px solid #D5D5D5;
    border-radius: 6px;
    background: var(--bs-body-bg, #FFFFFF);
    box-sizing: border-box;
    padding: 8px 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.org-chart-card.org-chart-card-highlighted[b-h5q0rz5pn7] {
    border-color: var(--hr-color-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--hr-color-primary-subtle);
}

.org-chart-avatar[b-h5q0rz5pn7] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}

.org-chart-avatar img[b-h5q0rz5pn7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-chart-details[b-h5q0rz5pn7] {
    min-width: 0;
    flex: 1 1 auto;
}

.org-chart-card .org-chart-name[b-h5q0rz5pn7] {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-chart-card .org-chart-title[b-h5q0rz5pn7],
.org-chart-card .org-chart-department[b-h5q0rz5pn7] {
    font-size: 11px;
    color: var(--bs-secondary-color, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-chart-canvas[b-h5q0rz5pn7] {
    position: relative;
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 420px;
}

.org-chart-zoom-toolbar[b-h5q0rz5pn7] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bs-body-bg, #FFFFFF);
    border: 1px solid #D5D5D5;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.org-chart-zoom-level[b-h5q0rz5pn7] {
    min-width: 42px;
    text-align: center;
    font-size: 12px;
    color: var(--bs-secondary-color, #6b7280);
}
/* /Components/Pages/Recruitment/CandidateDetail.razor.rz.scp.css */
/* Malware-scan gate: file name shown without a link while the document is not downloadable. */
.candidate-document__file--disabled[b-zpanc314j6] {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    cursor: not-allowed;
}

/* Subtle "Checked" badge for documents that passed the malware scan. */
.candidate-document__scan--clean[b-zpanc314j6] {
    color: var(--bs-secondary-color, #6c757d);
    background-color: transparent;
    border: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 500;
}

/* Application history card (internal recruitment Ticket 6): vacancy title + badges on one line. */
.candidate-application__header[b-zpanc314j6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.candidate-application__vacancy[b-zpanc314j6] {
    font-weight: 600;
}

.add-candidate-cv-selected[b-zpanc314j6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/Recruitment/HireCandidateDialog.razor.rz.scp.css */
.hire-form[b-a95uirwutr] {
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
    padding: 0.125rem 0.5rem 0.5rem 0.125rem;
}

.hire-error[b-a95uirwutr] {
    margin-bottom: 1rem;
}

.hire-section[b-a95uirwutr] {
    margin: 0 0 1rem;
}

.hire-section:last-child[b-a95uirwutr] {
    margin-bottom: 0;
}

.hire-section-description[b-a95uirwutr] {
    margin: 0 0 1rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8125rem;
}

.hire-section--address[b-a95uirwutr] {
    border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 24%, var(--bs-border-color, #dee2e6));
}

.hire-derived-value[b-a95uirwutr] {
    min-height: 2.375rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-weight: 500;
}

.hire-derived-value--warning[b-a95uirwutr] {
    border-color: var(--bs-warning, #ffc107);
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 12%, var(--bs-body-bg, #fff));
}

@media (max-width: 767.98px) {
    .hire-form[b-a95uirwutr] {
        max-height: calc(100vh - 11rem);
        padding-right: 0.25rem;
    }

    .hire-section .card-body[b-a95uirwutr] {
        padding: 0.875rem;
    }
}
/* /Components/Pages/Recruitment/HiringPipelineChart.razor.rz.scp.css */
.pipeline-legend[b-q57q3vlz1w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.pipeline-legend-item[b-q57q3vlz1w] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--hr-gray-200);
    border-radius: 999px;
    background: transparent;
    color: var(--hr-gray-900);
    font-size: 0.8rem;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pipeline-legend-item.is-hidden[b-q57q3vlz1w] {
    color: var(--hr-gray-500);
    text-decoration: line-through;
}

.pipeline-legend-item.is-hidden .pipeline-legend-swatch[b-q57q3vlz1w] {
    opacity: 0.35;
}

.pipeline-legend-item:focus-visible[b-q57q3vlz1w] {
    outline: 2px solid var(--hr-color-primary);
    outline-offset: 2px;
}

.pipeline-legend-swatch[b-q57q3vlz1w] {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 2px;
}
/* /Components/Pages/Recruitment/InternalVacancies.razor.rz.scp.css */
.vacancy-filters[b-baadnh4znh] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.vacancy-search-box[b-baadnh4znh] {
    max-width: 320px;
}

/* ── Card grid ───────────────────────────────────────── */

.vacancy-grid[b-baadnh4znh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.vacancy-card[b-baadnh4znh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.vacancy-card:hover[b-baadnh4znh],
.vacancy-card:focus-visible[b-baadnh4znh] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    border-color: var(--hr-color-primary);
    outline: none;
}

.vacancy-card:focus-visible[b-baadnh4znh] {
    outline: 2px solid var(--hr-color-primary);
    outline-offset: 2px;
}

.vacancy-card-title[b-baadnh4znh] {
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: #111827;
}

.vacancy-card-meta[b-baadnh4znh] {
    font-size: 0.82rem;
    color: #6b7280;
}

.vacancy-card-salary[b-baadnh4znh] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
}

.vacancy-card-closing[b-baadnh4znh] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-color-primary);
}

/* ── Empty state ─────────────────────────────────────── */

.vacancy-empty[b-baadnh4znh] {
    text-align: center;
    padding: 48px 16px;
    color: #6b7280;
}

.vacancy-empty i[b-baadnh4znh] {
    font-size: 2rem;
    margin-bottom: 12px;
}

/* ── Detail dialog ───────────────────────────────────── */

.vacancy-detail-title[b-baadnh4znh] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
}

.vacancy-detail-dl[b-baadnh4znh] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0 0 16px;
    align-items: baseline;
}

.vacancy-detail-dl dt[b-baadnh4znh] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.vacancy-detail-dl dd[b-baadnh4znh] {
    font-size: 0.875rem;
    color: #111827;
    margin: 0;
    word-break: break-word;
}

.vacancy-detail-meta[b-baadnh4znh] {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.vacancy-detail-description-label[b-baadnh4znh] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px;
}

.vacancy-detail-description[b-baadnh4znh] {
    font-size: 0.925rem;
    line-height: 1.6;
    color: #111827;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ── Applied state ───────────────────────────────────── */

.vacancy-card-applied-badge[b-baadnh4znh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 600;
}

.vacancy-applied-status[b-baadnh4znh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -8px 0 16px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.8rem;
    font-weight: 600;
}

.vacancy-apply-success[b-baadnh4znh] {
    border: 1px solid #86efac;
    border-left-width: 4px;
    border-left-color: #16a34a;
    background: #f0fdf4;
    color: #14532d;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.vacancy-apply-success-heading[b-baadnh4znh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 4px;
}

.vacancy-apply-success:focus[b-baadnh4znh],
.vacancy-apply-server-error:focus[b-baadnh4znh] {
    outline: 2px solid var(--hr-color-primary);
    outline-offset: 2px;
}

.vacancy-apply-unavailable[b-baadnh4znh] {
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: #4b5563;
}

/* ── Apply form ──────────────────────────────────────── */

.vacancy-apply-intro[b-baadnh4znh] {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 16px;
}

.vacancy-apply-identity[b-baadnh4znh] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.vacancy-apply-identity .vacancy-detail-dl[b-baadnh4znh] {
    margin-bottom: 8px;
}

.vacancy-apply-identity-note[b-baadnh4znh] {
    margin: 0;
    font-size: 0.78rem;
    color: #4b5563;
}

.vacancy-apply-cv[b-baadnh4znh] {
    margin-bottom: 12px;
}

.vacancy-apply-cv-selected[b-baadnh4znh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.875rem;
    color: #111827;
}

.vacancy-apply-cv-file-name[b-baadnh4znh] {
    font-weight: 600;
    word-break: break-all;
}

.vacancy-apply-cv-file-size[b-baadnh4znh] {
    font-size: 0.8rem;
    color: #4b5563;
}

.vacancy-dialog-actions[b-baadnh4znh] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Dark mode ───────────────────────────────────────── */

html[data-theme="dark"] .vacancy-card[b-baadnh4znh] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}

html[data-theme="dark"] .vacancy-card-title[b-baadnh4znh],
html[data-theme="dark"] .vacancy-card-salary[b-baadnh4znh],
html[data-theme="dark"] .vacancy-detail-description-label[b-baadnh4znh],
html[data-theme="dark"] .vacancy-detail-title[b-baadnh4znh],
html[data-theme="dark"] .vacancy-detail-dl dd[b-baadnh4znh],
html[data-theme="dark"] .vacancy-detail-description[b-baadnh4znh],
html[data-theme="dark"] .vacancy-apply-cv-selected[b-baadnh4znh] {
    color: var(--hr-gray-50);
}

html[data-theme="dark"] .vacancy-card-meta[b-baadnh4znh],
html[data-theme="dark"] .vacancy-detail-dl dt[b-baadnh4znh],
html[data-theme="dark"] .vacancy-detail-description-label[b-baadnh4znh],
html[data-theme="dark"] .vacancy-apply-intro[b-baadnh4znh],
html[data-theme="dark"] .vacancy-apply-identity-note[b-baadnh4znh],
html[data-theme="dark"] .vacancy-apply-cv-file-size[b-baadnh4znh],
html[data-theme="dark"] .vacancy-apply-unavailable[b-baadnh4znh] {
    color: var(--hr-gray-300);
}

html[data-theme="dark"] .vacancy-card-applied-badge[b-baadnh4znh],
html[data-theme="dark"] .vacancy-applied-status[b-baadnh4znh] {
    background: #14532d;
    color: #bbf7d0;
}

html[data-theme="dark"] .vacancy-apply-success[b-baadnh4znh] {
    background: #052e16;
    border-color: #166534;
    border-left-color: #22c55e;
    color: #bbf7d0;
}

html[data-theme="dark"] .vacancy-detail-meta[b-baadnh4znh] {
    border-bottom-color: var(--hr-gray-700);
}

html[data-theme="dark"] .vacancy-apply-identity[b-baadnh4znh] {
    background: var(--hr-gray-800);
    border-color: var(--hr-gray-700);
}
/* /Components/Pages/Recruitment/KanbanCandidateCard.razor.rz.scp.css */
.kanban-candidate-card[b-m0ym6znoaa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--hr-radius-md);
    background: #fff;
    border: 1px solid var(--hr-gray-200);
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.kanban-candidate-card:hover[b-m0ym6znoaa] {
    border-color: var(--hr-color-primary);
    box-shadow: var(--hr-shadow-sm);
}

.kanban-candidate-card--danger[b-m0ym6znoaa] {
    border-left: 3px solid var(--hr-color-danger);
}

.kanban-candidate-card--success[b-m0ym6znoaa] {
    border-left: 3px solid var(--hr-color-success);
}

.kanban-candidate-card__top[b-m0ym6znoaa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kanban-candidate-card__name-block[b-m0ym6znoaa] {
    flex: 1 1 auto;
    min-width: 0;
}

.kanban-candidate-card__name[b-m0ym6znoaa] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--hr-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-candidate-card__name:focus-visible[b-m0ym6znoaa],
.kanban-candidate-card__move-btn:focus-visible[b-m0ym6znoaa],
.kanban-candidate-card__move-menu button:focus-visible[b-m0ym6znoaa] {
    outline: 2px solid var(--hr-color-primary);
    outline-offset: 2px;
}

.kanban-candidate-card__internal[b-m0ym6znoaa] {
    margin-top: 0.2rem;
    line-height: 1;
}

.kanban-candidate-card__vacancy[b-m0ym6znoaa] {
    font-size: 0.75rem;
    color: var(--hr-gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-candidate-card__meta[b-m0ym6znoaa] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--hr-gray-500);
}

.kanban-candidate-card__meta span[b-m0ym6znoaa] {
    display: flex;
    align-items: center;
}

.kanban-candidate-card__withdrawn[b-m0ym6znoaa] {
    font-weight: 600;
    color: var(--hr-gray-500);
}

.kanban-candidate-card__actions[b-m0ym6znoaa] {
    position: relative;
    flex: 0 0 auto;
}

.kanban-candidate-card__move-btn[b-m0ym6znoaa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--hr-radius-sm, 4px);
    background: transparent;
    color: var(--hr-gray-500);
    cursor: pointer;
}

.kanban-candidate-card__move-btn:hover[b-m0ym6znoaa],
.kanban-candidate-card__move-btn:focus-visible[b-m0ym6znoaa] {
    background: var(--hr-gray-100);
    color: var(--hr-gray-900);
}

.kanban-candidate-card__move-menu[b-m0ym6znoaa] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hr-gray-200);
    border-radius: var(--hr-radius-md);
    box-shadow: var(--hr-shadow-sm);
    padding: 0.25rem;
}

.kanban-candidate-card__move-menu button[b-m0ym6znoaa],
.kanban-candidate-card__move-menu a[b-m0ym6znoaa] {
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: var(--hr-radius-sm, 4px);
    font-size: 0.8rem;
    color: var(--hr-gray-900);
    cursor: pointer;
    text-decoration: none;
}

.kanban-candidate-card__move-menu button:hover[b-m0ym6znoaa],
.kanban-candidate-card__move-menu a:hover[b-m0ym6znoaa],
.kanban-candidate-card__move-menu a:focus-visible[b-m0ym6znoaa],
.kanban-candidate-card__move-menu button:focus-visible[b-m0ym6znoaa] {
    background: var(--hr-gray-100);
}

.kanban-candidate-card__move-menu-empty[b-m0ym6znoaa] {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    color: var(--hr-gray-500);
}

.kanban-candidate-card__move-menu-divider[b-m0ym6znoaa] {
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px solid var(--hr-gray-200);
    opacity: 1;
}
/* /Components/Pages/Recruitment/RecruitmentSummaryTile.razor.rz.scp.css */
.recruitment-summary-tile[b-txsp7mh3sh] {
    flex: 1;
    display: flex;
    min-width: 0;
}

.recruitment-summary-tile .widget-kpi[b-txsp7mh3sh] {
    width: 100%;
}

button.widget-kpi[b-txsp7mh3sh] {
    border: 0;
    font: inherit;
    color: inherit;
}

button.widget-kpi:not(:hover)[b-txsp7mh3sh] {
    background: transparent;
}
/* /Components/Pages/Recruitment/RecruitmentSummaryWidget.razor.rz.scp.css */
button.widget-kpi[b-nomzec8nqm] {
    border: 0;
    font: inherit;
    color: inherit;
}

button.widget-kpi:not(:hover)[b-nomzec8nqm] {
    background: transparent;
}
/* /Components/Pages/Recruitment/ReviewCv.razor.rz.scp.css */
.review-cv__viewer[b-96o2l4d8kj] {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
}

/* Candidate name + Internal badge (internal recruitment Ticket 6). */
.review-cv__candidate-name[b-96o2l4d8kj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
/* /Components/Pages/Recruitment/VacancyApplicationsTab.razor.rz.scp.css */
/* Add Candidate dialog: "Select existing" / "Create new" segmented choice (internal recruitment Ticket 3). */
.add-candidate-mode[b-56jo0kugqv] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.add-candidate-mode[b-56jo0kugqv]  .e-btn {
    flex: 1 1 0;
}

/* Selected CV file summary under the new-candidate CV input. */
.add-candidate-cv-selected[b-56jo0kugqv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Internal recruitment Ticket 6: "Application type" filter above the applications grid. */
.application-type-filter[b-56jo0kugqv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Candidate name + Internal badge inside the grid's Candidate cell. */
.application-candidate-cell[b-56jo0kugqv] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* Internal recruitment Ticket 7: "Internal appointment completed" banner with the profile link. */
.appoint-success[b-56jo0kugqv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Pages/Recruitment/VacancyDetail.razor.rz.scp.css */
.vacancy-header-actions[b-yxmrik4ym4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.vacancy-header-actions[b-yxmrik4ym4]  .close-vacancy-btn {
    margin-left: 1.5rem;
}
/* /Components/Pages/Recruitment/VacancyKanbanBoard.razor.rz.scp.css */
.vacancy-kanban-board__toolbar[b-p5u7ce5cl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vacancy-kanban-board__search[b-p5u7ce5cl0] {
    max-width: 320px;
}

.vacancy-kanban-board__vacancy-link[b-p5u7ce5cl0] {
    font-weight: 600;
    text-decoration: none;
}

/* ── Plain HTML5 drag-and-drop columns ──────────────────────────────────
   Reuses the same gray-50 header / gray-200 border language as .hr-grid's
   header (app.css) so the Kanban board reads as part of the same design
   system. Replaces an earlier Syncfusion SfKanban-based layout. */

/* The board's own root .vacancy-kanban-board is an ordinary block div with no width/overflow of
   its own, so its "automatic minimum size" for layout purposes is the max-content width of
   everything inside it (per the flex/grid sizing spec, overflow: visible — the default — keeps
   the intrinsic content size as the box's floor). Embedded inside RecruitmentDashboard's page
   shell (a flex/grid layout ancestor further up the tree), that intrinsic width — six 300px-wide
   Kanban columns, ~1800px+ — gets reported upward as this box's own minimum width and forces the
   shell's content column wider than the viewport, which is what actually overflows the document
   at 375px (not the toolbar controls fixed in an earlier pass, nor .vacancy-kanban-board__columns
   below, which already has its own overflow-x: auto and — being non-visible overflow — is already
   exempt from this same intrinsic-sizing rule). min-width: 0 stops that propagation so only this
   inner scroller, not the whole page, ends up wider than the viewport. */
.vacancy-kanban-board[b-p5u7ce5cl0] {
    min-width: 0;
    max-width: 100%;
}

.vacancy-kanban-board__columns[b-p5u7ce5cl0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.vacancy-kanban-board__column[b-p5u7ce5cl0] {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    background: var(--hr-gray-50);
    border: 1px solid var(--hr-gray-200);
    border-radius: var(--hr-radius-md);
    min-height: 200px;
    max-height: 640px;
}

.vacancy-kanban-board__column-header[b-p5u7ce5cl0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--hr-gray-50);
    border-bottom: 1px solid var(--hr-gray-200);
    border-radius: var(--hr-radius-md) var(--hr-radius-md) 0 0;
}

.vacancy-kanban-board__column-title[b-p5u7ce5cl0] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--hr-gray-700);
}

.vacancy-kanban-board__column-count[b-p5u7ce5cl0] {
    background: var(--hr-color-primary-subtle);
    color: var(--hr-color-primary);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.vacancy-kanban-board__column-content[b-p5u7ce5cl0] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
}

.vacancy-kanban-board__column-empty[b-p5u7ce5cl0] {
    text-align: center;
    color: var(--hr-gray-500, #6b7280);
    padding: 1.5rem 0.5rem;
    font-size: 0.85rem;
}

.vacancy-kanban-board__draggable[b-p5u7ce5cl0] {
    cursor: grab;
    margin-bottom: 0.6rem;
}

.vacancy-kanban-board__draggable:active[b-p5u7ce5cl0] {
    cursor: grabbing;
}

/* Drop-target highlighting — CSS-only, no dragenter/dragleave/dragover .NET handlers involved.
   ".dragging" is toggled once per drag session (see the razor markup/OnDragStart/OnDragEnd
   comments); the actual "which column is under the pointer" highlight below is pure native
   :hover, so this never triggers a Blazor Server round trip mid-drag. */
.vacancy-kanban-board__columns.dragging .vacancy-kanban-board__column:hover[b-p5u7ce5cl0] {
    background: var(--hr-color-primary-subtle);
    border-color: var(--hr-color-primary);
}
/* /Components/Pages/Recruitment/VacancyKanbanPage.razor.rz.scp.css */
.kanban-back-link[b-urb07uilrc] {
    display: inline-block;
    padding-bottom: 0.5rem;
}
/* /Components/Pages/Reporting/ReportCatalogPage.razor.rz.scp.css */
.report-catalog-card--clickable[b-go66g79g2c] {
    cursor: pointer;
    transition: box-shadow 0.15s ease-in-out;
}

.report-catalog-card--clickable:hover[b-go66g79g2c] {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.report-catalog-favourite[b-go66g79g2c] {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
}

.report-catalog-favourite--active[b-go66g79g2c] {
    color: #ffc107;
}

.report-catalog-link[b-go66g79g2c] {
    color: inherit;
    text-decoration: none;
}

.report-catalog-link:hover[b-go66g79g2c] {
    text-decoration: underline;
}

.report-catalog-link:focus-visible[b-go66g79g2c] {
    outline: none;
}

.report-catalog-card--clickable:has(.report-catalog-link:focus-visible)[b-go66g79g2c] {
    outline: 3px solid #0b5ed7;
    outline-offset: 2px;
}

.report-catalog-favourite[b-go66g79g2c] {
    position: relative;
    z-index: 2;
}

.report-catalog-favourite:focus-visible[b-go66g79g2c] {
    outline: 3px solid #0b5ed7;
    outline-offset: 2px;
    border-radius: 0.25rem;
}
/* /Components/Pages/ResetPasswordComplete.razor.rz.scp.css */
.login-card[b-gks0wdgg8r] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 520px;
}

.login-brand[b-gks0wdgg8r] {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.login-logo-img[b-gks0wdgg8r] {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.login-heading[b-gks0wdgg8r] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.login-subheading[b-gks0wdgg8r] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 24px;
}

.login-error[b-gks0wdgg8r] {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-field[b-gks0wdgg8r] {
    margin-bottom: 18px;
}

.login-label[b-gks0wdgg8r] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.login-validation[b-gks0wdgg8r],
[b-gks0wdgg8r] .login-validation {
    display: block;
    font-size: 0.8rem;
    color: #dc2626 !important;
    margin-top: 4px;
}

.login-btn[b-gks0wdgg8r] {
    width: 100%;
    margin-top: 8px;
}

.login-back-link[b-gks0wdgg8r] {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.875rem;
    color: #6b7280;
}

/* See Login.razor.css's matching rule for the full rationale — a password manager/passkey
   autofill uses the browser's own ":-webkit-autofill" styling, not the plain background/color
   rules above, and can leave text unreadable against its own light autofill background in this
   dark-theme-detected context. */
[b-gks0wdgg8r] .e-input-group,
[b-gks0wdgg8r] .e-input-group.e-control-wrapper,
[b-gks0wdgg8r] .e-float-input.e-control-wrapper {
    background: #fff !important;
    border-color: #d1d5db !important;
}

[b-gks0wdgg8r] .e-input-group input.e-input,
[b-gks0wdgg8r] .e-float-input input {
    background: #fff !important;
    color: #111827 !important;
}

[b-gks0wdgg8r] .e-input-group input.e-input:-webkit-autofill,
[b-gks0wdgg8r] .e-float-input input:-webkit-autofill,
[b-gks0wdgg8r] .e-input-group input.e-input:-webkit-autofill:focus,
[b-gks0wdgg8r] .e-float-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: inset 0 0 0px 1000px #fff !important;
    box-shadow: inset 0 0 0px 1000px #fff !important;
    caret-color: #111827;
}
/* /Components/Pages/Support/HelpFeedback.razor.rz.scp.css */
.support-description[b-ofewu8nj4l]  textarea {
    min-height: 120px;
}

.support-dropzone[b-ofewu8nj4l] {
    position: relative;
    border: 2px dashed var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
}

.support-dropzone-input[b-ofewu8nj4l] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.support-dropzone-label[b-ofewu8nj4l] {
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
}

.support-file-preview-list[b-ofewu8nj4l] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.support-file-preview-item[b-ofewu8nj4l] {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
}

.support-file-preview-name[b-ofewu8nj4l] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-status-filter[b-ofewu8nj4l] {
    width: 220px;
}
/* /Components/Pages/Support/SupportRequestDetail.razor.rz.scp.css */
.support-description-text[b-8yztugsqis] {
    white-space: pre-wrap;
}

.support-diagnostics-json[b-8yztugsqis] {
    white-space: pre-wrap;
    font-size: 0.8125rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.support-thread[b-8yztugsqis] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.support-thread-item[b-8yztugsqis] {
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.support-thread-item--staff[b-8yztugsqis] {
    background: var(--bs-primary-bg-subtle, #e7f1ff);
}

.support-thread-body[b-8yztugsqis] {
    white-space: pre-wrap;
    margin-top: 0.375rem;
}

.support-reply-box[b-8yztugsqis]  textarea {
    min-height: 100px;
}
/* /Components/Pages/Support/SupportRequestQueue.razor.rz.scp.css */
.support-status-filter[b-idkemkribk] {
    max-width: 280px;
}
/* /Components/Pages/Tasks/HrInbox.razor.rz.scp.css */
/* ── Page header ─────────────────────────────────────── */

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

.inbox-count-badge[b-ywlbb9tz5h] {
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--hr-color-primary);
    color: #fff;
    border-radius: 12px;
    padding: 2px 10px;
    min-width: 24px;
    text-align: center;
}

/* ── Empty state ─────────────────────────────────────── */

.inbox-empty[b-ywlbb9tz5h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    color: #374151;
}

.inbox-empty-icon[b-ywlbb9tz5h] {
    color: #d1d5db;
}

/* ── Task cards ──────────────────────────────────────── */

.inbox-list[b-ywlbb9tz5h] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inbox-card[b-ywlbb9tz5h] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.15s;
}

.inbox-card:hover[b-ywlbb9tz5h] {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.inbox-card--claiming[b-ywlbb9tz5h] {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Priority pip ────────────────────────────────────── */

.priority-pip[b-ywlbb9tz5h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.priority-pip--critical[b-ywlbb9tz5h] { background: #dc2626; }
.priority-pip--high[b-ywlbb9tz5h]     { background: #f97316; }
.priority-pip--medium[b-ywlbb9tz5h]   { background: #eab308; }
.priority-pip--low[b-ywlbb9tz5h]      { background: #d1d5db; }

/* ── Card body ───────────────────────────────────────── */

.inbox-card-body[b-ywlbb9tz5h] {
    flex: 1;
    min-width: 0;
}

.inbox-card-top[b-ywlbb9tz5h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.inbox-card-title[b-ywlbb9tz5h] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

.inbox-card-desc[b-ywlbb9tz5h] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inbox-card-meta[b-ywlbb9tz5h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-card-age[b-ywlbb9tz5h] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ── Source badge ────────────────────────────────────── */

.inbox-source-badge[b-ywlbb9tz5h] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f3f4f6;
    color: #6b7280;
}

.inbox-source-badge--leave[b-ywlbb9tz5h]      { background: #dbeafe; color: #1d4ed8; }
.inbox-source-badge--manual[b-ywlbb9tz5h]     { background: #f3f4f6; color: #6b7280; }
.inbox-source-badge--onboarding[b-ywlbb9tz5h] { background: #d1fae5; color: #065f46; }
.inbox-source-badge--offboarding[b-ywlbb9tz5h]{ background: #fee2e2; color: #991b1b; }
.inbox-source-badge--document[b-ywlbb9tz5h]   { background: #fef3c7; color: #92400e; }
.inbox-source-badge--compliance[b-ywlbb9tz5h] { background: #ede9fe; color: #5b21b6; }
.inbox-source-badge--probation[b-ywlbb9tz5h]  { background: #ffedd5; color: #9a3412; }
.inbox-source-badge--sickness[b-ywlbb9tz5h]   { background: #fce7f3; color: #9d174d; }

/* ── Actions ─────────────────────────────────────────── */

.inbox-card-actions[b-ywlbb9tz5h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Due badge (reused from widget) ─────────────────── */

.due-badge[b-ywlbb9tz5h] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.due-badge--overdue[b-ywlbb9tz5h] { background: #fee2e2; color: #dc2626; }
.due-badge--today[b-ywlbb9tz5h]   { background: #ffedd5; color: #ea580c; }
.due-badge--soon[b-ywlbb9tz5h]    { background: #fef3c7; color: #ca8a04; }
.due-badge--normal[b-ywlbb9tz5h]  { background: #f3f4f6; color: #6b7280; }

.inbox-owner-badge[b-ywlbb9tz5h] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e0e7ff;
    color: #3730a3;
}
/* /Components/Pages/Tasks/LeaveReviewDialog.razor.rz.scp.css */
[b-in1mosrnca] .e-dlg-content {
    padding-top: 1rem;
}

[b-in1mosrnca] .e-footer-content {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}
/* /Components/Pages/Tasks/TaskList.razor.rz.scp.css */
.task-cell[b-8s4y8kxyb5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-title[b-8s4y8kxyb5] {
    font-weight: 500;
    line-height: 1.3;
}

.task-title-link[b-8s4y8kxyb5] {
    color: inherit;
    text-decoration: none;
}

.task-title-link:hover[b-8s4y8kxyb5] {
    color: var(--hr-color-primary);
    text-decoration: underline;
}

.task-description[b-8s4y8kxyb5] {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
    white-space: normal;
}

.task-status-badge[b-8s4y8kxyb5] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.task-status-badge--open[b-8s4y8kxyb5] {
    background: #f3f4f6;
    color: #374151;
}

.task-status-badge--inprogress[b-8s4y8kxyb5] {
    background: #dbeafe;
    color: #1d4ed8;
}

.task-status-badge--completed[b-8s4y8kxyb5] {
    background: #dcfce7;
    color: #15803d;
}

.task-status-badge--cancelled[b-8s4y8kxyb5] {
    background: #fee2e2;
    color: #b91c1c;
}

.task-due--overdue[b-8s4y8kxyb5] {
    color: #b91c1c;
    font-weight: 600;
}

.task-due--today[b-8s4y8kxyb5] {
    color: #b45309;
    font-weight: 600;
}

.task-due-flag[b-8s4y8kxyb5] {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* /Components/Pages/Users/InviteUserWizard.razor.rz.scp.css */
.wizard-role-check[b-a6hjumiiv3] {
    width: 2.5rem;
}
/* /Components/Pages/VerifyEmailError.razor.rz.scp.css */
.login-card[b-ytrcn0f5wl] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 40px 36px;
    width: 100%;
    max-width: 520px;
}

.login-brand[b-ytrcn0f5wl] {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.login-logo-img[b-ytrcn0f5wl] {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.login-heading[b-ytrcn0f5wl] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.login-subheading[b-ytrcn0f5wl] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 24px;
}

.login-field[b-ytrcn0f5wl] {
    margin-bottom: 18px;
}

.login-label[b-ytrcn0f5wl] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.login-validation[b-ytrcn0f5wl],
[b-ytrcn0f5wl] .login-validation {
    display: block;
    font-size: 0.8rem;
    color: #dc2626 !important;
    margin-top: 4px;
}

.login-btn[b-ytrcn0f5wl] {
    width: 100%;
    margin-top: 8px;
}

/* This page is deliberately light-only (the card above is hardcoded to a white background,
   never adapting to dark mode) — but the SfTextBox input doesn't know that: App.razor's
   theme-detection script runs on every page including this one and defaults to dark based on
   the OS/browser's prefers-color-scheme when the visitor has never explicitly toggled a
   preference, enabling Syncfusion's separate dark-theme stylesheet and Bootstrap's
   data-bs-theme="dark" globally. Without this override the input renders with a dark
   background inside the always-white card. !important is needed to beat the dark Syncfusion
   stylesheet's own specificity; ::deep reaches into SfTextBox's own generated markup, which
   Blazor's CSS isolation wouldn't otherwise scope to this component. */
[b-ytrcn0f5wl] .e-input-group,
[b-ytrcn0f5wl] .e-input-group.e-control-wrapper,
[b-ytrcn0f5wl] .e-float-input.e-control-wrapper {
    background: #fff !important;
    border-color: #d1d5db !important;
}

[b-ytrcn0f5wl] .e-input-group input.e-input,
[b-ytrcn0f5wl] .e-float-input input {
    background: #fff !important;
    color: #111827 !important;
}
/* /Components/Routes.razor.rz.scp.css */
.dev-error-boundary[b-0vrczmm6kx] {
    padding: 2rem;
    font-family: monospace;
    background: #fee;
    border: 2px solid red;
    margin: 1rem;
}

.dev-error-message[b-0vrczmm6kx],
.dev-error-stacktrace[b-0vrczmm6kx] {
    white-space: pre-wrap;
}

.dev-error-stacktrace[b-0vrczmm6kx] {
    font-size: .8em;
    color: #666;
}
/* /Components/Shared/AdminQuickNav.razor.rz.scp.css */
.quick-nav-trigger[b-7hr402h68i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 0.5rem;
    cursor: pointer;
}

.quick-nav-trigger:hover[b-7hr402h68i] {
    background: rgba(0, 0, 0, 0.06);
}

.quick-nav-overlay[b-7hr402h68i] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 1rem;
}

.quick-nav-panel[b-7hr402h68i] {
    width: 560px;
    max-width: 100%;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e293b);
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.quick-nav-input-row[b-7hr402h68i] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.quick-nav-input-icon[b-7hr402h68i] {
    opacity: 0.55;
}

.quick-nav-input[b-7hr402h68i] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
}

.quick-nav-leavers-toggle[b-7hr402h68i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.quick-nav-results[b-7hr402h68i] {
    list-style: none;
    margin: 0;
    padding: 0.375rem 0;
    overflow-y: auto;
}

.quick-nav-option[b-7hr402h68i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.quick-nav-option.is-active[b-7hr402h68i] {
    background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.12));
}

.quick-nav-option-icon[b-7hr402h68i] {
    width: 1.25rem;
    text-align: center;
    opacity: 0.75;
}

.quick-nav-option-text[b-7hr402h68i] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.quick-nav-option-title[b-7hr402h68i] {
    font-weight: 500;
}

.quick-nav-option-group[b-7hr402h68i] {
    font-size: 0.75rem;
    opacity: 0.55;
}

.quick-nav-empty[b-7hr402h68i] {
    padding: 1.25rem 1rem;
    text-align: center;
    opacity: 0.6;
}

@media (max-width: 575.98px) {
    .quick-nav-overlay[b-7hr402h68i] {
        padding: 0;
    }

    .quick-nav-panel[b-7hr402h68i] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}
/* /Components/Shared/BackButton.razor.rz.scp.css */
.back-button[b-8kan7g5nh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.9rem;
    cursor: pointer;
}

.back-button:hover[b-8kan7g5nh1] {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
}
/* /Components/Shared/EmployeeCompletionDialog.razor.rz.scp.css */
.ecd-heading[b-qbpok2wild] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.ecd-why[b-qbpok2wild] {
    font-size: 0.875rem;
}

.ecd-section[b-qbpok2wild] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.ecd-section:first-of-type[b-qbpok2wild] {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
}

.ecd-section-heading[b-qbpok2wild] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.ecd-readonly[b-qbpok2wild] {
    padding: 0.375rem 0;
    font-weight: 500;
}

.ecd-note[b-qbpok2wild] {
    font-size: 0.8125rem;
}
/* /Components/Shared/HrStepper.razor.rz.scp.css */
.hr-stepper[b-ejl4iycqp0] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    gap: 0.5rem;
}

.hr-stepper-item[b-ejl4iycqp0] {
    flex: 1 1 0;
}

.hr-stepper-button[b-ejl4iycqp0],
.hr-stepper-static[b-ejl4iycqp0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: none;
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    text-align: left;
}

.hr-stepper-button[b-ejl4iycqp0] {
    cursor: pointer;
}

.hr-stepper-button:hover[b-ejl4iycqp0] {
    background-color: var(--hr-color-primary-subtle);
    color: var(--hr-color-primary);
}

.hr-stepper-button:focus-visible[b-ejl4iycqp0] {
    outline: var(--hr-focus-ring-width, 4px) solid var(--hr-focus-ring-color);
    outline-offset: 1px;
}

.hr-stepper-item--current .hr-stepper-button[b-ejl4iycqp0],
.hr-stepper-item--current .hr-stepper-static[b-ejl4iycqp0] {
    background-color: var(--hr-color-primary);
    color: #fff;
}

.hr-stepper-item--completed .hr-stepper-button[b-ejl4iycqp0],
.hr-stepper-item--completed .hr-stepper-static[b-ejl4iycqp0] {
    background-color: var(--hr-color-primary-subtle);
    color: var(--hr-color-primary-active, var(--hr-color-primary));
}

.hr-stepper-node[b-ejl4iycqp0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.hr-stepper-label[b-ejl4iycqp0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Shared/SaveConflictBanner.razor.rz.scp.css */
.save-conflict-banner[b-f75uwjubfn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.save-conflict-banner__message[b-f75uwjubfn] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
/* /Components/Shared/SubscriptionStatusAlert.razor.rz.scp.css */
.subscription-alert[b-pg3nxsxzcw] {
    --alert-bg: #fdecea;
    --alert-fg: #7a2118;
    --alert-accent: #b42318;
    --alert-accent-fg: #ffffff;
    --alert-icon-bg: rgba(180, 35, 24, 0.14);

    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--alert-bg);
    color: var(--alert-fg);
    border-bottom: 1px solid var(--alert-accent);
    border-left: 6px solid var(--alert-accent);
}

.subscription-alert--trial-ending[b-pg3nxsxzcw] {
    --alert-bg: #fff8e1;
    --alert-fg: #5c4200;
    --alert-accent: #92400e;
    --alert-icon-bg: rgba(146, 64, 14, 0.16);
}

.subscription-alert--paused[b-pg3nxsxzcw] {
    --alert-bg: #fff1e6;
    --alert-fg: #7c2d12;
    --alert-accent: #c2410c;
    --alert-icon-bg: rgba(194, 65, 12, 0.16);
}

.subscription-alert--read-only[b-pg3nxsxzcw] {
    --alert-bg: #eef2f7;
    --alert-fg: #1f2937;
    --alert-accent: #334155;
    --alert-icon-bg: rgba(51, 65, 85, 0.16);
}

html[data-theme="dark"] .subscription-alert[b-pg3nxsxzcw] {
    --alert-bg: #3b1512;
    --alert-fg: #fecaca;
    --alert-accent: #f87171;
    --alert-accent-fg: #1a0a09;
    --alert-icon-bg: rgba(248, 113, 113, 0.22);
}

html[data-theme="dark"] .subscription-alert--trial-ending[b-pg3nxsxzcw] {
    --alert-bg: #3a2a05;
    --alert-fg: #fde68a;
    --alert-accent: #fbbf24;
    --alert-accent-fg: #1c1300;
    --alert-icon-bg: rgba(251, 191, 36, 0.22);
}

html[data-theme="dark"] .subscription-alert--paused[b-pg3nxsxzcw] {
    --alert-bg: #3a1c0a;
    --alert-fg: #fed7aa;
    --alert-accent: #fb923c;
    --alert-accent-fg: #1c0d03;
    --alert-icon-bg: rgba(251, 146, 60, 0.22);
}

html[data-theme="dark"] .subscription-alert--read-only[b-pg3nxsxzcw] {
    --alert-bg: #1f2937;
    --alert-fg: #e5e7eb;
    --alert-accent: #94a3b8;
    --alert-accent-fg: #0f172a;
    --alert-icon-bg: rgba(148, 163, 184, 0.22);
}

.subscription-alert__icon[b-pg3nxsxzcw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--alert-icon-bg);
    color: var(--alert-fg);
    font-size: 1.25rem;
}

.subscription-alert__body[b-pg3nxsxzcw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.subscription-alert__heading[b-pg3nxsxzcw] {
    margin: 0 0 2px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.subscription-alert__text[b-pg3nxsxzcw],
.subscription-alert__guidance[b-pg3nxsxzcw] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.subscription-alert__guidance[b-pg3nxsxzcw] {
    margin-top: 4px;
    font-weight: 600;
}

.subscription-alert__action[b-pg3nxsxzcw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 20px;
    border-radius: var(--hr-radius-md);
    background: var(--alert-accent);
    color: var(--alert-accent-fg);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.subscription-alert__action:hover[b-pg3nxsxzcw] {
    color: var(--alert-accent-fg);
    filter: brightness(0.92);
}

.subscription-alert__action:focus-visible[b-pg3nxsxzcw] {
    outline: 3px solid var(--alert-fg);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .subscription-alert[b-pg3nxsxzcw] {
        flex-wrap: wrap;
        padding: 12px 16px;
    }

    .subscription-alert__body[b-pg3nxsxzcw] {
        flex-basis: calc(100% - 60px);
    }

    .subscription-alert__action[b-pg3nxsxzcw] {
        flex: 1 1 100%;
        white-space: normal;
        text-align: center;
    }
}
/* /Components/Shared/SupportSessionBanner.razor.rz.scp.css */
.support-session-banner[b-pprme6sf0c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.875rem;
    background: #f0fdfa;
    color: #0f766e;
    border-bottom: 1px solid #0f766e;
}

.support-session-banner-end[b-pprme6sf0c] {
    margin: 0 0 0 auto;
}

.support-session-banner-end-button[b-pprme6sf0c] {
    padding: 4px 12px;
    font-size: 0.875rem;
    color: #0f766e;
    background: #ffffff;
    border: 1px solid #0f766e;
    border-radius: 4px;
    cursor: pointer;
}