/* /Components/Layout/BlankLayout.razor.rz.scp.css */
.page[b-73kki3dfo4] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.main[b-73kki3dfo4] {
    flex: 1;
}
/* /Components/Layout/CandidateApplicationLayout.razor.rz.scp.css */
.candidate-portal-shell[b-fz9gd6oodo] {
    background:
        radial-gradient(circle at 12% 8%, rgba(254, 193, 15, 0.14), transparent 28rem),
        linear-gradient(150deg, #f8f4f1 0%, #f7f8fb 55%, #f3e9ea 100%);
    color: #2f292b;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.candidate-portal-header[b-fz9gd6oodo] {
    align-items: center;
    background: #98171b;
    box-shadow: 0 0.2rem 0.9rem rgba(66, 11, 13, 0.18);
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 3.75rem;
    padding: 0 1.5rem;
}

.candidate-portal-brand[b-fz9gd6oodo] {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-family: var(--clarion-font, "Segoe Script", "Brush Script MT", cursive);
    font-size: 1.8rem;
    gap: 0.55rem;
    line-height: 1;
    text-decoration: none;
}

.candidate-portal-brand i[b-fz9gd6oodo] {
    color: #fec10f;
    font-family: IcoFont;
    font-size: 2rem;
}

.candidate-portal-header-title[b-fz9gd6oodo] {
    font-size: 1rem;
    font-weight: 700;
}

.candidate-portal-content[b-fz9gd6oodo] {
    align-items: flex-start;
    display: flex;
    flex: 1;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem) 1rem;
}

.candidate-portal-footer[b-fz9gd6oodo] {
    color: #756c6e;
    font-size: 0.78rem;
    padding: 0 1rem 1.25rem;
    text-align: center;
}

@media (max-width: 34rem) {
    .candidate-portal-header[b-fz9gd6oodo] {
        padding: 0 1rem;
    }

    .candidate-portal-brand[b-fz9gd6oodo] {
        font-size: 1.5rem;
    }

    .candidate-portal-header-title[b-fz9gd6oodo] {
        font-size: 0.86rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-q4he51lxaz] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-q4he51lxaz] {
    flex: 1;
}

.sidebar[b-q4he51lxaz] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-q4he51lxaz] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-q4he51lxaz]  a, .top-row[b-q4he51lxaz]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-q4he51lxaz]  a:hover, .top-row[b-q4he51lxaz]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-q4he51lxaz]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row[b-q4he51lxaz] {
        justify-content: space-between;
    }

    .top-row[b-q4he51lxaz]  a, .top-row[b-q4he51lxaz]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-q4he51lxaz] {
        flex-direction: row;
    }

    .sidebar[b-q4he51lxaz] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-q4he51lxaz] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-q4he51lxaz]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-q4he51lxaz], article[b-q4he51lxaz] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Issue #659: the #blazor-error-ui rules moved to wwwroot/app.css with the markup they style.
   They could not stay here: this is a SCOPED stylesheet, so CSS isolation rewrites every selector in it to
   carry MainLayout's generated b-xxxxxxxxxx attribute. The banner now renders from App.razor, outside every
   layout, and would never carry that attribute - the rules would have matched nothing, leaving the div with
   no display:none and therefore permanently visible on every page. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-snjzj7vkbx] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-snjzj7vkbx] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-snjzj7vkbx] {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.navbar-brand[b-snjzj7vkbx] {
    font-size: 1.1rem;
}

.bi[b-snjzj7vkbx] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-snjzj7vkbx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-snjzj7vkbx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-snjzj7vkbx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-snjzj7vkbx] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type[b-snjzj7vkbx] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-snjzj7vkbx] {
    padding-bottom: 1rem;
}

.nav-item[b-snjzj7vkbx]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
}

.nav-item[b-snjzj7vkbx]  a.active {
    background-color: rgba(255, 255, 255, 0.37);
    color: white;
}

.nav-item[b-snjzj7vkbx]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-scrollable[b-snjzj7vkbx] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-snjzj7vkbx] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-snjzj7vkbx] {
        display: none;
    }

    .nav-scrollable[b-snjzj7vkbx] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PasskeyLabLayout.razor.rz.scp.css */
.passkey-lab-layout[b-hwp9l2idsv] {
    min-height: 100vh;
}
/* /Components/Layout/SubscriptionLayout.razor.rz.scp.css */
/*
    Copyright:           Titan-Techs.
    Location:            Newtown, PA, USA
    Solution:            Subscription
    Project:             Subscription.Server
    File Name:           SubscriptionLayout.razor.css
    Created By:          Narendra Kumaran Kadhirvelu, Jolly Joseph Paily, DonBosco Paily, Mariappan Raja, Gowtham Selvaraj, Pankaj Sahu, Brijesh Dubey
    Created On:          10-09-2025
    Last Updated On:     10-09-2025

    Summary:
        Isolated CSS styles for SubscriptionLayout component.
        Simplified fixed layout with AppBar at top, sidebar and content below.
        No dock mode - simple show/hide sidebar navigation.
*/

/* ========================================
   Content Area (Main Page Body)
   ======================================== */

/* MODIFIED: Content area starts below AppBar (2025-10-09) */
/* MODIFIED: Removed margin-left shifting - sidebar now overlays instead of pushing (2025-10-10) */
[b-iojaa3eux0] .content-area {
    position: relative;
    margin-top: 55px; /* AppBar height - always present */
    padding: 10px;
    min-height: calc(100vh - 55px);
    background-color: #fafafa;
}

/* ========================================
   Mobile Responsive Design
   ======================================== */

@media (max-width: 768px) {
    /* MODIFIED: Removed sidebar-open reference - no longer needed (2025-10-10) */
    [b-iojaa3eux0] .content-area {
        padding: 8px;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    [b-iojaa3eux0] .content-area {
        margin-left: 0;
        margin-top: 0;
        padding: 0;
        min-height: auto;
    }
}

/* ========================================
   Smooth Scroll Behavior
   ======================================== */

[b-iojaa3eux0] .content-area {
    scroll-behavior: smooth;
}

/* Disable smooth scroll when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    [b-iojaa3eux0] .content-area {
        scroll-behavior: auto;
        transition: none;
    }
}
/* /Components/Layout/SubscriptionLayoutAdmin.razor.rz.scp.css */
.page[b-xg45tk9jog] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.main[b-xg45tk9jog] {
    flex: 1;
}
/* /Components/Pages/Admin/OwnershipTransfer.razor.rz.scp.css */
.ownership-transfer-page[b-ol08urriv0] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 55px);
    padding: 20px;
}

/* 2026 refresh: this standalone card reads like the app's dialogs — soft corners, big soft shadow,
   3px brand accent on the top edge. */
.ownership-transfer-box[b-ol08urriv0] {
    width: 500px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 14px;
    border-top: 3px solid rgb(var(--color-sf-primary));
    box-shadow: 0 18px 50px rgba(20, 26, 36, 0.18), 0 4px 12px rgba(20, 26, 36, 0.08);
    overflow: hidden;
    position: relative;
}

[b-ol08urriv0] .ownership-transfer-box fieldset {
    padding: 16px 16px 0 16px;
}

.ownership-transfer-row[b-ol08urriv0] {
    min-height: 45px;
}

/* Footer band — gray zone + hairline, matching the dialog footers (was the gold-20% wash). */
[b-ol08urriv0] .ownership-transfer-box .e-button-right {
    position: static;
    background: #F1F4F9;
    border-top: 1px solid #E2E8F0;
    width: 100%;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Footer buttons — mirror the light-airy dialog footer: frosted-white base that lifts on hover,
   tonal-brand primary (Reassign), disabled = light gray. Overrides the global gold e-secondary /
   dark e-primary via the scoped [b-*] + descendant specificity. */
[b-ol08urriv0] .ownership-transfer-box .e-button-right .e-btn {
    border-radius: 9px;
    padding: 7px 18px;
    font-weight: 600;
    text-transform: none;
    background: rgba(255, 255, 255, 0.92);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: #2B3A4E;
    box-shadow: 0 2px 6px rgba(20, 26, 36, .14), 0 1px 2px rgba(20, 26, 36, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

[b-ol08urriv0] .ownership-transfer-box .e-button-right .e-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(20, 26, 36, .18), 0 2px 4px rgba(20, 26, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
}

[b-ol08urriv0] .ownership-transfer-box .e-button-right .e-btn.e-primary {
    background: rgb(var(--color-sf-primary), 0.12);
    border-color: rgb(var(--color-sf-primary), 0.25);
    color: rgb(var(--color-sf-primary));
}

[b-ol08urriv0] .ownership-transfer-box .e-button-right .e-btn.e-primary:hover {
    background: rgb(var(--color-sf-primary), 0.18);
    border-color: rgb(var(--color-sf-primary), 0.38);
}

[b-ol08urriv0] .ownership-transfer-box .e-button-right .e-btn:disabled {
    background: #F0F2F6;
    border-color: #E4E8EF;
    color: #A6AEBB;
    box-shadow: none;
    transform: none;
}

[b-ol08urriv0] .ownership-transfer-box .e-button-right .e-btn .e-btn-icon {
    color: inherit;
    font-size: 13px;
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* Calendar module — SfSchedule host. KISS scroll/fit: ONE bounded container (viewport height),
   the scheduler fills it; no shell/flex surgery. Brand-aware via --color-sf-* tokens. */
.cal-wrap[b-kjusf7h3r7] {
    position: relative;
    height: calc(100vh - 56px);
    padding: 16px 20px 10px;
    background: #F4F6FA;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cal-wrap .loading-overlay[b-kjusf7h3r7] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
}

.cal-card[b-kjusf7h3r7] {
    /* sizes to the scheduler's definite height — no flex-stretch (Week/Day offsetTop crash) */
    flex: none;
    background: #fff;
    border: 1px solid #E6EAF1;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 26, 36, .04), 0 4px 16px rgba(20, 26, 36, .05);
    overflow: hidden;
}

/* ---- Toolbar: Month-only — hide the view switcher + Today; keep prev/next + month label --- */
.cal-card[b-kjusf7h3r7]  .e-schedule .e-schedule-toolbar .e-toolbar-item.e-views,
.cal-card[b-kjusf7h3r7]  .e-schedule .e-schedule-toolbar .e-toolbar-item.e-today,
.cal-card[b-kjusf7h3r7]  .e-schedule .e-schedule-toolbar .e-toolbar-item.e-separator {
    display: none;
}

/* ---- Event colors (applied via EventRendered CssClasses) ---------------------- */
.cal-card[b-kjusf7h3r7]  .e-schedule .e-appointment.ev-int {
    background: rgb(var(--color-sf-primary));
    border-color: rgb(var(--color-sf-primary));
}

.cal-card[b-kjusf7h3r7]  .e-schedule .e-appointment.ev-req {
    background: #A98307; /* deep gold — readable white text, distinct from interviews */
    border-color: #A98307;
}

/* ---- Quick-info footer: Go to Requisition (replaces disabled Edit/Delete) ------ */
.cal-card[b-kjusf7h3r7]  .qi-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 12px;
}

.cal-card[b-kjusf7h3r7]  .qi-gotoreq {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: rgb(var(--color-sf-primary));
    background: rgb(var(--color-sf-primary), 0.08);
    border: 1px solid rgb(var(--color-sf-primary), 0.22);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color .12s ease, transform .12s ease;
}

.cal-card[b-kjusf7h3r7]  .qi-gotoreq:hover {
    background: rgb(var(--color-sf-primary), 0.14);
    transform: translateY(-1px);
}

.cal-card[b-kjusf7h3r7]  .qi-gotoreq i {
    font-size: 13px;
}

/* ---- Legend -------------------------------------------------------------------- */
.cal-legend[b-kjusf7h3r7] {
    flex: none;
    display: flex;
    gap: 18px;
    font-size: 12px;
    font-weight: 600;
    color: #6B7688;
    padding: 0 4px;
}

.cal-legend span[b-kjusf7h3r7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cal-legend i[b-kjusf7h3r7] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    display: inline-block;
}

.cal-legend .lg-int[b-kjusf7h3r7] {
    background: rgb(var(--color-sf-primary));
}

.cal-legend .lg-req[b-kjusf7h3r7] {
    background: #A98307;
}
/* /Components/Pages/CandidateApplicationStatus.razor.rz.scp.css */
.candidate-portal-card[b-kpqkjxfgpx] {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(142, 24, 27, 0.12);
    border-radius: 1.1rem;
    box-shadow: 0 1.4rem 3.6rem rgba(51, 31, 33, 0.12);
    box-sizing: border-box;
    max-width: 43rem;
    padding: clamp(1.35rem, 4vw, 2.6rem);
    width: 100%;
}

.candidate-portal-kicker[b-kpqkjxfgpx] {
    color: #8e181b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

h1[b-kpqkjxfgpx] {
    color: #272123;
    font-size: clamp(1.8rem, 5vw, 2.65rem);
    letter-spacing: -0.035em;
    margin: 0.35rem 0 0.45rem;
}

h2[b-kpqkjxfgpx] {
    color: #332c2e;
    font-size: 1.05rem;
    margin: 1.8rem 0 1rem;
}

.candidate-portal-lead[b-kpqkjxfgpx] {
    color: #625a5c;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.candidate-portal-email[b-kpqkjxfgpx],
.candidate-portal-job[b-kpqkjxfgpx] {
    background: #f8f6f6;
    border: 1px solid #ebe5e6;
    border-radius: 0.75rem;
    margin: 1.25rem 0;
    padding: 1rem;
}

.candidate-portal-email[b-kpqkjxfgpx] {
    align-items: center;
    display: flex;
    gap: 0.85rem;
}

.candidate-portal-email i[b-kpqkjxfgpx] {
    color: #8e181b;
    font-size: 1.5rem;
}

.candidate-portal-email span[b-kpqkjxfgpx] {
    display: flex;
    flex-direction: column;
}

.candidate-portal-email small[b-kpqkjxfgpx],
.candidate-portal-label[b-kpqkjxfgpx] {
    color: #7b7274;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.candidate-portal-email strong[b-kpqkjxfgpx] {
    color: #342d2f;
    margin-top: 0.12rem;
}

label[b-kpqkjxfgpx] {
    color: #40383a;
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin: 1.2rem 0 0.45rem;
}

.candidate-portal-code[b-kpqkjxfgpx] {
    border: 1px solid #cfc6c8;
    border-radius: 0.6rem;
    box-sizing: border-box;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.45em;
    padding: 0.75rem 0.8rem 0.75rem 1.2rem;
    text-align: center;
    width: 100%;
}

.candidate-portal-code:focus[b-kpqkjxfgpx] {
    border-color: #8e181b;
    box-shadow: 0 0 0 3px rgba(142, 24, 27, 0.12);
    outline: none;
}

.candidate-portal-primary[b-kpqkjxfgpx],
.candidate-portal-link-button[b-kpqkjxfgpx] {
    border-radius: 0.55rem;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    margin-top: 1rem;
    min-height: 2.8rem;
    padding: 0.7rem 1rem;
    width: 100%;
}

.candidate-portal-primary[b-kpqkjxfgpx] {
    background: #8e181b;
    border: 1px solid #8e181b;
    color: #fff;
}

.candidate-portal-primary:hover:not(:disabled)[b-kpqkjxfgpx] {
    background: #731316;
}

.candidate-portal-primary:disabled[b-kpqkjxfgpx],
.candidate-portal-link-button:disabled[b-kpqkjxfgpx] {
    cursor: not-allowed;
    opacity: 0.55;
}

.candidate-portal-link-button[b-kpqkjxfgpx] {
    background: transparent;
    border: 0;
    color: #8e181b;
}

.candidate-portal-link-button:hover:not(:disabled)[b-kpqkjxfgpx] {
    background: #faf2f3;
}

.candidate-portal-message[b-kpqkjxfgpx] {
    background: #edf7f0;
    border-radius: 0.55rem;
    color: #155d2d;
    margin-top: 1rem;
    padding: 0.8rem 0.9rem;
}

.candidate-portal-message-error[b-kpqkjxfgpx] {
    background: #fcebec;
    color: #8e181b;
}

.candidate-portal-help[b-kpqkjxfgpx] {
    color: #7a7173;
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 1.3rem 0 0;
    text-align: center;
}

.candidate-portal-job[b-kpqkjxfgpx] {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.candidate-portal-job > div[b-kpqkjxfgpx] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.candidate-portal-job strong[b-kpqkjxfgpx] {
    overflow-wrap: anywhere;
}

.candidate-portal-job div > span:last-child:not(.candidate-portal-label)[b-kpqkjxfgpx] {
    color: #6e6567;
    font-size: 0.85rem;
}

.candidate-portal-current[b-kpqkjxfgpx] {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.candidate-portal-status-pill[b-kpqkjxfgpx] {
    background: color-mix(in srgb, var(--portal-status-color) 10%, white);
    border: 1px solid color-mix(in srgb, var(--portal-status-color) 45%, white);
    border-radius: 999px;
    color: var(--portal-status-color);
    font-size: 0.9rem;
    font-weight: 800;
    padding: 0.42rem 1rem;
}

.candidate-portal-updated[b-kpqkjxfgpx] {
    color: #756c6e;
    font-size: 0.8rem;
}

.candidate-portal-timeline[b-kpqkjxfgpx] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.candidate-portal-timeline li[b-kpqkjxfgpx] {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 1rem 1fr;
    min-height: 3.5rem;
    position: relative;
}

.candidate-portal-timeline li:not(:last-child)[b-kpqkjxfgpx]::before {
    background: #ddd5d7;
    content: "";
    height: calc(100% - 0.7rem);
    left: 0.42rem;
    position: absolute;
    top: 0.85rem;
    width: 2px;
}

.candidate-portal-timeline-marker[b-kpqkjxfgpx] {
    background: var(--portal-status-color);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--portal-status-color) 55%, white);
    height: 0.85rem;
    margin-top: 0.05rem;
    width: 0.85rem;
    z-index: 1;
}

.candidate-portal-timeline li > div[b-kpqkjxfgpx] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding-bottom: 1rem;
}

.candidate-portal-timeline time[b-kpqkjxfgpx] {
    color: #7a7173;
    font-size: 0.78rem;
}

.candidate-portal-loading[b-kpqkjxfgpx] {
    align-items: center;
    color: #5f5658;
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    min-height: 10rem;
}

.candidate-portal-spinner[b-kpqkjxfgpx] {
    animation: candidate-portal-spin-b-kpqkjxfgpx 0.8s linear infinite;
    border: 3px solid #eadfe0;
    border-radius: 50%;
    border-top-color: #8e181b;
    height: 1.2rem;
    width: 1.2rem;
}

.candidate-portal-state-icon[b-kpqkjxfgpx] {
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-size: 1.5rem;
    height: 3rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 3rem;
}

.candidate-portal-state-error[b-kpqkjxfgpx] {
    background: #fcebec;
    color: #8e181b;
}

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

@media (max-width: 34rem) {
    .candidate-portal-job[b-kpqkjxfgpx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CandidateSearchLab.razor.rz.scp.css */
.natural-search-page[b-0tcdbruhn8] {
    margin: 0 auto;
    max-width: 1280px;
    padding: 28px;
}

.natural-search-hero[b-0tcdbruhn8],
.natural-search-plan[b-0tcdbruhn8],
.natural-search-results[b-0tcdbruhn8] {
    background: #fff;
    border: 1px solid #e1e4e9;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(30, 35, 45, .05);
}

.natural-search-hero[b-0tcdbruhn8] {
    background: linear-gradient(135deg, #fff 0%, #fff 66%, rgba(142, 24, 27, .06) 100%);
    padding: 26px;
}

.natural-search-kicker[b-0tcdbruhn8] {
    color: rgb(var(--color-sf-primary));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.natural-search-hero h1[b-0tcdbruhn8] {
    color: #252a33;
    font-size: 28px;
    margin: 4px 0 8px;
}

.natural-search-hero p[b-0tcdbruhn8] {
    color: #626a76;
    line-height: 1.55;
    margin: 0 0 20px;
    max-width: 760px;
}

.natural-search-hero label[b-0tcdbruhn8] {
    color: #343942;
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.natural-search-hero textarea[b-0tcdbruhn8] {
    border: 1px solid #cdd2d9;
    border-radius: 9px;
    box-sizing: border-box;
    color: #292e37;
    font: inherit;
    line-height: 1.5;
    padding: 12px 14px;
    resize: vertical;
    width: 100%;
}

.natural-search-hero textarea:focus[b-0tcdbruhn8] {
    border-color: rgb(var(--color-sf-primary));
    box-shadow: 0 0 0 3px rgba(142, 24, 27, .1);
    outline: none;
}

.natural-search-actions[b-0tcdbruhn8] {
    align-items: center;
    display: flex;
    gap: 13px;
    margin-top: 12px;
}

.natural-search-actions > span[b-0tcdbruhn8] {
    color: #78808b;
    font-size: 11.5px;
}

.natural-search-button[b-0tcdbruhn8] {
    align-items: center;
    background: rgb(var(--color-sf-primary));
    border: 0;
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    padding: 11px 16px;
}

.natural-search-button:disabled[b-0tcdbruhn8] {
    cursor: not-allowed;
    opacity: .55;
}

.natural-search-message[b-0tcdbruhn8] {
    background: #eaf7ee;
    border: 1px solid #b9e2c4;
    border-radius: 9px;
    color: #176a31;
    margin-top: 16px;
    padding: 11px 14px;
}

.natural-search-message.is-error[b-0tcdbruhn8] {
    background: #fcedee;
    border-color: #edc1c3;
    color: #8e181b;
}

.natural-search-plan[b-0tcdbruhn8] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding: 15px 18px;
}

.natural-search-plan > div[b-0tcdbruhn8] {
    border-right: 1px solid #e4e7eb;
    margin-right: 3px;
    padding-right: 14px;
}

.natural-search-plan strong[b-0tcdbruhn8],
.plan-label[b-0tcdbruhn8] {
    display: block;
}

.plan-label[b-0tcdbruhn8] {
    color: #858c96;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.plan-chip[b-0tcdbruhn8] {
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 10px;
}

.plan-chip.is-required[b-0tcdbruhn8] {
    background: #f4e8e9;
    color: #83191c;
}

.plan-chip.is-preferred[b-0tcdbruhn8] {
    background: #fff4d8;
    color: #765300;
}

.plan-chip.is-location[b-0tcdbruhn8] {
    background: #eaf1fa;
    color: #28547e;
}

.natural-search-results[b-0tcdbruhn8] {
    margin-top: 18px;
    overflow: hidden;
}

.natural-search-results > header[b-0tcdbruhn8] {
    align-items: center;
    border-bottom: 1px solid #e8eaee;
    display: flex;
    justify-content: space-between;
    padding: 18px 20px;
}

.natural-search-results h2[b-0tcdbruhn8] {
    color: #292e37;
    font-size: 17px;
    margin: 0 0 3px;
}

.natural-search-results header p[b-0tcdbruhn8] {
    color: #747c87;
    font-size: 11.5px;
    margin: 0;
}

.natural-search-results header > span[b-0tcdbruhn8] {
    background: #f2e8e9;
    border-radius: 999px;
    color: rgb(var(--color-sf-primary));
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.natural-search-table-wrap[b-0tcdbruhn8] {
    overflow-x: auto;
}

.natural-search-results table[b-0tcdbruhn8] {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.natural-search-results th[b-0tcdbruhn8] {
    background: #f4f6f9;
    color: #5f6875;
    font-size: 10.5px;
    letter-spacing: .02em;
    padding: 10px 12px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.natural-search-results td[b-0tcdbruhn8] {
    border-top: 1px solid #eceef1;
    color: #3c424c;
    padding: 12px;
    vertical-align: top;
}

.natural-search-results tbody tr:first-child td[b-0tcdbruhn8] {
    border-top: 0;
}

.natural-search-results td strong[b-0tcdbruhn8],
.natural-search-results td small[b-0tcdbruhn8] {
    display: block;
}

.natural-search-results td small[b-0tcdbruhn8] {
    color: #7b838e;
    margin-top: 2px;
}

.preferred-match[b-0tcdbruhn8] {
    color: #14652d;
    font-weight: 700;
}

.no-preferred[b-0tcdbruhn8] {
    color: #9298a1;
}

.natural-search-empty[b-0tcdbruhn8] {
    color: #747c87;
    padding: 42px 20px;
    text-align: center;
}

@media (max-width: 700px) {
    .natural-search-page[b-0tcdbruhn8] {
        padding: 16px;
    }

    .natural-search-actions[b-0tcdbruhn8] {
        align-items: stretch;
        flex-direction: column;
    }

    .natural-search-button[b-0tcdbruhn8] {
        justify-content: center;
    }

    .natural-search-plan > div[b-0tcdbruhn8] {
        border: 0;
        flex-basis: 100%;
    }
}
/* /Components/Pages/Controls/Candidates/ReviewSignalsPanel.razor.rz.scp.css */
.review-signals-container[b-b60gz7n0ib] {
    display: grid;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.review-signal-section[b-b60gz7n0ib] {
    background: #fffaf1;
    border: 1px solid #ead7b1;
    border-left: 4px solid #b56a20;
    border-radius: 5px;
    padding: 9px 12px;
}

.review-signal-heading[b-b60gz7n0ib] {
    align-items: center;
    color: #5b3a17;
    display: flex;
    font-weight: 600;
    gap: 8px;
}

.review-signal-count[b-b60gz7n0ib] {
    align-items: center;
    background: #f1dfbd;
    border-radius: 10px;
    display: inline-flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
}

.review-signal-section ul[b-b60gz7n0ib] {
    margin: 7px 0 0;
    padding-left: 20px;
}

.review-signal-section li[b-b60gz7n0ib] {
    line-height: 1.45;
    margin-bottom: 5px;
}

.review-signals-empty[b-b60gz7n0ib] {
    align-items: center;
    color: #4b6354;
    display: flex;
    gap: 8px;
    justify-content: center;
    min-height: 250px;
}

.review-signals-empty .e-icons[b-b60gz7n0ib] {
    color: #2e7d32;
}
/* /Components/Pages/Dash.razor.rz.scp.css */
/* ============================================================================
   Dash.razor.css — Recruiter cockpit (2026 UI refresh, Phase A).
   Scoped to the Dash page. Accent maps to the tenant brand tokens (--color-sf-*),
   so Titan renders maroon/gold and other tenants swap automatically; neutrals are
   fixed to the app's light-modern palette. Semantic good/warn/risk stay universal.
   ============================================================================ */

.dash-wrap[b-5gb0gpkvrv] {
    /* cockpit-local tokens: brand-driven accent + fixed neutrals/semantics */
    --dc-accent: rgb(var(--color-sf-primary));
    --dc-accent-weak: rgb(var(--color-sf-primary), 0.08);
    --dc-accent-line: rgb(var(--color-sf-primary), 0.22);
    --dc-ink: #141A24;
    --dc-muted: #6B7688;
    /* Issue #601: was #98A2B3 — 2.58:1 on the white card and 2.34:1 on the page ground, failing WCAG AA
       (4.5:1 normal, 3:1 large) on all nine consumers: the heatmap column headers, the KPI captions, the
       feed timestamps, the row hints, the reco footer, the dash footer, the muted funnel values, the trend
       month labels and the 22px revenue figure. --dc-muted (#6B7688) already measures 4.59:1 and passes, so
       this was one token rather than a palette problem. #6E7A8C measures ~4.6:1 on white; every consumer
       inherits the fix. */
    --dc-faint: #6E7A8C;
    --dc-line: #E6EAF1;
    --dc-line-soft: #EEF1F6;
    --dc-card: #FFFFFF;
    --dc-good: #17936A;
    --dc-good-weak: #E7F4EE;
    --dc-warn: #C77E06;
    --dc-warn-weak: #FBF1DC;
    --dc-risk: #D64545;
    --dc-risk-weak: #FBEAEA;
    --dc-shadow: 0 1px 2px rgba(20, 26, 36, .04), 0 4px 16px rgba(20, 26, 36, .05);
    --dc-r: 12px;

    position: relative;
    /* Issue #600: was `min-height: calc(100vh - 56px)` with a free-flowing block layout, which let the
       page grow past the viewport whenever .dash-toolbar wrapped. .app-shell is `min-height: 100vh`
       rather than a fixed height, so it grew with it, and `html, body, form { overflow: hidden }`
       clipped the excess with no scrollbar at all — the Revenue card and .dash-foot simply became
       unreachable below ~1250px. Now a bounded flex column: the toolbar takes what it needs and
       .dash-scroll takes exactly the remainder, so nothing can overflow.
       56px is the app top bar (shell.css:209 `.top-bar { height: 56px; flex: none }`) — a real fixed
       value, unlike the 135px this replaces, which added a GUESSED ~79px toolbar. `height: 100%` is
       deliberately not used: .app-shell declares min-height, not height, so a percentage here would
       resolve against an indefinite parent and fall back to auto. */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
    background: #F4F6FA;
    padding: 0;
    color: var(--dc-ink);
}

.dash-wrap .loading-overlay[b-5gb0gpkvrv] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
}

.tnum[b-5gb0gpkvrv] {
    font-variant-numeric: tabular-nums;
}

/* ---- Dashboard toolbar (in-content; sits under the app TopBar) ---------------- */
.dash-toolbar[b-5gb0gpkvrv] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    /* Issue #600: never shrink and never absorb free space — this row is allowed to wrap to two
       lines (six children total ~1147px against ~912px available on a 1366px laptop), and
       .dash-scroll below measures whatever it actually consumes. */
    flex: none;
    padding: 16px 24px;
    background: rgba(244, 246, 250, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--dc-line);
    position: sticky; /* stays put while .app-content scrolls the cards under it */
    top: 0;
    z-index: 6;
}

.dash-toolbar .dt-title h1[b-5gb0gpkvrv] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.dash-toolbar .dt-sub[b-5gb0gpkvrv] {
    font-size: 12px;
    font-weight: 500;
    color: var(--dc-muted);
    margin-top: 2px;
}

/* segmented period control (replaces the old SfDropDownList) */
.dash-toolbar .dt-periods[b-5gb0gpkvrv] {
    display: flex;
    gap: 2px;
    background: #ECEFF5;
    border: 1px solid var(--dc-line);
    border-radius: 9px;
    padding: 3px;
}

.dash-toolbar .dt-periods button[b-5gb0gpkvrv] {
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dc-muted);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.dash-toolbar .dt-periods button:hover[b-5gb0gpkvrv] {
    color: var(--dc-ink);
}

.dash-toolbar .dt-periods button.on[b-5gb0gpkvrv] {
    background: #fff;
    color: var(--dc-accent);
    box-shadow: 0 1px 2px rgba(20, 26, 36, .10);
}

/* Refresh — same frosted-glass recipe as the grid top buttons (#divHeader .e-topButton) */
.dash-toolbar[b-5gb0gpkvrv]  .dt-refresh-btn.e-btn {
    color: #2B3A4E;
    background-color: rgba(255, 255, 255, 0.86);
    background-image: none;
    backdrop-filter: blur(7px) saturate(1.1);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(20, 26, 36, .16), 0 1px 2px rgba(20, 26, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.dash-toolbar[b-5gb0gpkvrv]  .dt-refresh-btn.e-btn .e-btn-icon {
    color: #5A6474;
    font-size: 15px;
}

.dash-toolbar[b-5gb0gpkvrv]  .dt-refresh-btn.e-btn:hover {
    background-color: rgba(255, 255, 255, 0.98);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(20, 26, 36, .20), 0 2px 4px rgba(20, 26, 36, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.dash-toolbar[b-5gb0gpkvrv]  .dt-refresh-btn.e-btn:active {
    background-color: rgba(255, 255, 255, 0.90);
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(20, 26, 36, .14), inset 0 1px 2px rgba(20, 26, 36, .07);
}

.dash-toolbar[b-5gb0gpkvrv]  .dt-refresh-btn.e-btn:focus,
.dash-toolbar[b-5gb0gpkvrv]  .dt-refresh-btn.e-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--color-sf-primary), .25);
}

.dash-toolbar .dt-spacer[b-5gb0gpkvrv] {
    flex: 1 1 auto;
}

.dash-toolbar .dt-refreshed[b-5gb0gpkvrv] {
    font-size: 12px;
    color: var(--dc-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

.dash-toolbar .dt-refreshed .dot[b-5gb0gpkvrv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dc-good);
    box-shadow: 0 0 0 3px var(--dc-good-weak);
}

/* ---- Scroll region (KISS: one bounded div; the cards inside scroll) ----------
   Issue #600: the height is now measured, not assumed. It fills whatever .dash-wrap's flex column
   has left after .dash-toolbar, so a toolbar that wraps to two rows shrinks this instead of pushing
   the page off the bottom of the viewport. `min-height: 0` is required: a flex item's default
   `min-height: auto` refuses to shrink below its content, which would reinstate the overflow this
   fixes. Still exactly one bounded scroller — .app-content's own `overflow: auto` never engages,
   because .dash-wrap can no longer exceed it. */
.dash-scroll[b-5gb0gpkvrv] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---- Content ---------------------------------------------------------------- */
.dash-content[b-5gb0gpkvrv] {
    padding: 20px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rowlabel[b-5gb0gpkvrv] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 -6px;
}

.rowlabel h2[b-5gb0gpkvrv] {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--dc-muted);
}

.rowlabel .hint[b-5gb0gpkvrv] {
    font-size: 11.5px;
    color: var(--dc-faint);
}

/* ---- Card ------------------------------------------------------------------- */
.dcard[b-5gb0gpkvrv] {
    background: var(--dc-card);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r);
    box-shadow: var(--dc-shadow);
}

.dcard .hd[b-5gb0gpkvrv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 0;
}

.dcard .hd h3[b-5gb0gpkvrv] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.005em;
}

.dcard .hd .tag[b-5gb0gpkvrv] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--dc-muted);
}

.dcard .bd[b-5gb0gpkvrv] {
    padding: 14px 16px 16px;
}

/* ---- KPI cards -------------------------------------------------------------- */
.kpi-row[b-5gb0gpkvrv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.kpi[b-5gb0gpkvrv] {
    background: var(--dc-card);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r);
    box-shadow: var(--dc-shadow);
    padding: 14px 15px;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.kpi .lab[b-5gb0gpkvrv] {
    font-size: 11.5px;
    color: var(--dc-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi .lab .ic[b-5gb0gpkvrv] {
    color: var(--dc-accent);
    font-size: 14px;
}

.kpi .val[b-5gb0gpkvrv] {
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -.02em;
    margin-top: 8px;
    line-height: 1;
}

.kpi .sub[b-5gb0gpkvrv] {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-faint);
}

.kpi.accent[b-5gb0gpkvrv] {
    border-color: var(--dc-accent-line);
    background: linear-gradient(180deg, var(--dc-accent-weak), #fff 60%);
}

/* ---- Planned (net-new sections landing in later phases) --------------------- */
.dcard.planned[b-5gb0gpkvrv] {
    border-style: dashed;
    border-color: #D6DEEA;
    box-shadow: none;
    background: #FBFCFE;
}

.dcard.planned .pl[b-5gb0gpkvrv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    color: var(--dc-muted);
}

.dcard.planned .pl .pic[b-5gb0gpkvrv] {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--dc-accent-weak);
    color: var(--dc-accent);
    font-size: 17px;
}

.dcard.planned .pl .pt[b-5gb0gpkvrv] {
    font-size: 13px;
    font-weight: 700;
    color: var(--dc-ink);
}

.dcard.planned .pl .pd[b-5gb0gpkvrv] {
    font-size: 12px;
    color: var(--dc-muted);
    margin-top: 1px;
}

.dcard.planned .pl .badge[b-5gb0gpkvrv] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dc-accent);
    background: var(--dc-accent-weak);
    border-radius: 20px;
    padding: 3px 10px;
}

/* grid layout for two-up planned rows */
.dgrid2[b-5gb0gpkvrv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* ---- Wrapped Syncfusion sections sit flush inside cards --------------------- */
.dcard[b-5gb0gpkvrv]  .e-card {
    box-shadow: none;
    border: 0;
}

.dcard .bd[b-5gb0gpkvrv]  .e-grid {
    border: 1px solid var(--dc-line);
    border-radius: 10px;
    overflow: hidden;
}

.dash-foot[b-5gb0gpkvrv] {
    color: var(--dc-faint);
    font-size: 11.5px;
    text-align: center;
    padding: 4px 0 2px;
}

.dash-foot b[b-5gb0gpkvrv] {
    color: var(--dc-muted);
    font-weight: 600;
}

/* ============================================================================
   Cockpit sections — full layout with ROUGH values (data wired in later phases).
   Adapted from the recruiter-dashboard mockup; accent = brand tokens.
   ============================================================================ */

/* ---- Pipeline stage flow ---------------------------------------------------- */
.pipe[b-5gb0gpkvrv] {
    padding: 16px;
}

.pipe .flow[b-5gb0gpkvrv] {
    display: flex;
    gap: 0;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden; /* overflow-x:auto silently promotes overflow-y to auto → phantom vertical scrollbar; pin it hidden */
    padding-bottom: 4px;
}

.pipe .stage[b-5gb0gpkvrv] {
    flex: 1;
    min-width: 118px;
    position: relative;
    padding: 2px 6px;
}

.pipe .node[b-5gb0gpkvrv] {
    border: 1px solid var(--dc-line);
    border-radius: 11px;
    padding: 14px 12px 16px;
    background: #FCFDFF;
    min-height: 104px;
    height: 80%;
}

.pipe .node.hot[b-5gb0gpkvrv] {
    border-color: #F1D08C;
    background: linear-gradient(180deg, #FFFBF1, #fff);
}

.pipe .node.crit[b-5gb0gpkvrv] {
    border-color: #F0BDBD;
    background: linear-gradient(180deg, #FEF4F4, #fff);
}

.pipe .snm[b-5gb0gpkvrv] {
    font-size: 11px;
    font-weight: 700;
    color: var(--dc-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pipe .scount[b-5gb0gpkvrv] {
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.02em;
    margin-top: 6px;
    line-height: 1;
}

.pipe .sdays[b-5gb0gpkvrv] {
    font-size: 11.5px;
    color: var(--dc-muted);
    margin-top: 5px;
}

.pipe .sdays b[b-5gb0gpkvrv] {
    color: var(--dc-ink);
    font-weight: 700;
}

.pipe .hdot[b-5gb0gpkvrv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
}

.pipe .hdot.g[b-5gb0gpkvrv] {
    background: var(--dc-good);
}

.pipe .hdot.a[b-5gb0gpkvrv] {
    background: var(--dc-warn);
}

.pipe .hdot.r[b-5gb0gpkvrv] {
    background: var(--dc-risk);
}

.pipe .drop[b-5gb0gpkvrv] {
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translate(50%, -50%);
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    color: var(--dc-faint);
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: 20px;
    padding: 1px 6px;
}

.pipe .stage:last-child .drop[b-5gb0gpkvrv] {
    display: none;
}

/* ---- Heatmap table ---------------------------------------------------------- */
.heat[b-5gb0gpkvrv] {
    padding: 6px 4px 8px;
}

.heat table[b-5gb0gpkvrv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.heat th[b-5gb0gpkvrv] {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dc-faint);
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dc-line);
}

.heat td[b-5gb0gpkvrv] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--dc-line-soft);
    vertical-align: middle;
}

.heat tr:last-child td[b-5gb0gpkvrv] {
    border-bottom: 0;
}

.heat td:first-child[b-5gb0gpkvrv] {
    border-left: 3px solid transparent;
}

.heat tr.sev-r td:first-child[b-5gb0gpkvrv] {
    border-left-color: var(--dc-risk);
}

.heat tr.sev-a td:first-child[b-5gb0gpkvrv] {
    border-left-color: var(--dc-warn);
}

.heat tr.sev-g td:first-child[b-5gb0gpkvrv] {
    border-left-color: var(--dc-good);
}

.heat .code[b-5gb0gpkvrv] {
    font-family: var(--dc-mono, ui-monospace, Consolas, monospace);
    font-size: 11.5px;
    color: var(--dc-accent);
    font-weight: 600;
}

.heat .rt[b-5gb0gpkvrv] {
    font-weight: 600;
}

.heat .co[b-5gb0gpkvrv] {
    color: var(--dc-muted);
}

.heat .num[b-5gb0gpkvrv] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.heat .chip[b-5gb0gpkvrv] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.chip.warn[b-5gb0gpkvrv] {
    background: var(--dc-warn-weak);
    color: var(--dc-warn);
}

.chip.risk[b-5gb0gpkvrv] {
    background: var(--dc-risk-weak);
    color: var(--dc-risk);
}

.chip.good[b-5gb0gpkvrv] {
    background: var(--dc-good-weak);
    color: var(--dc-good);
}

/* ---- Smart Recommendations -------------------------------------------------- */
.reco[b-5gb0gpkvrv] {
    padding: 8px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.reco .r[b-5gb0gpkvrv] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 11px;
    border: 1px solid var(--dc-line);
    border-radius: 10px;
    background: #FCFDFF;
}

.reco .r .ib[b-5gb0gpkvrv] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 15px;
    background: var(--dc-accent-weak);
    color: var(--dc-accent);
}

.reco .r.hot .ib[b-5gb0gpkvrv] {
    background: var(--dc-warn-weak);
    color: var(--dc-warn);
}

.reco .r p[b-5gb0gpkvrv] {
    margin: 0;
    font-size: 12.5px;
}

.reco .r p b[b-5gb0gpkvrv] {
    font-weight: 700;
}

.reco .r .act[b-5gb0gpkvrv] {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dc-accent);
    white-space: nowrap;
    border: 1px solid var(--dc-accent-line);
    background: var(--dc-accent-weak);
    border-radius: 7px;
    padding: 5px 9px;
    cursor: pointer;
}

.reco .foot[b-5gb0gpkvrv] {
    font-size: 11px;
    color: var(--dc-faint);
    padding: 2px 2px 0;
}

.reco .dt-code[b-5gb0gpkvrv] {
    font-family: var(--dc-mono, ui-monospace, Consolas, monospace);
    font-weight: 600;
    color: var(--dc-accent);
}

/* ---- Activity feed ---------------------------------------------------------- */
.feed[b-5gb0gpkvrv] {
    padding: 6px 16px 14px;
}

.feed .ev[b-5gb0gpkvrv] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--dc-line-soft);
}

.feed .ev:last-child[b-5gb0gpkvrv] {
    border-bottom: 0;
}

.feed .tl[b-5gb0gpkvrv] {
    font-size: 11px;
    color: var(--dc-faint);
    width: 52px;
    flex: none;
    text-align: right;
}

.feed .who2[b-5gb0gpkvrv] {
    font-weight: 600;
    font-size: 12.5px;
}

.feed .ev .co[b-5gb0gpkvrv] {
    color: var(--dc-muted);
    font-size: 12px;
}

.pill[b-5gb0gpkvrv] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.pill.phn[b-5gb0gpkvrv] {
    background: var(--dc-accent-weak);
    color: var(--dc-accent);
}

.pill.int[b-5gb0gpkvrv] {
    background: #E7F0FB;
    color: #2A6BB8;
}

.pill.oex[b-5gb0gpkvrv] {
    background: var(--dc-good-weak);
    color: var(--dc-good);
}

.pill.hir[b-5gb0gpkvrv] {
    background: #E4F5EC;
    color: #0F7A50;
}

.pill.rej[b-5gb0gpkvrv] {
    background: var(--dc-risk-weak);
    color: var(--dc-risk);
}

.pill.new[b-5gb0gpkvrv] {
    background: #EFF1F6;
    color: var(--dc-muted);
}

/* ---- SLA & Compliance ------------------------------------------------------- */
.sla[b-5gb0gpkvrv] {
    padding: 6px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sla .a[b-5gb0gpkvrv] {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--dc-line);
}

.sla .a.r[b-5gb0gpkvrv] {
    background: var(--dc-risk-weak);
    border-color: #F1CFCF;
}

.sla .a.a[b-5gb0gpkvrv] {
    background: var(--dc-warn-weak);
    border-color: #EEDDB0;
}

.sla .a .sq[b-5gb0gpkvrv] {
    width: 8px;
    height: 34px;
    border-radius: 4px;
    flex: none;
}

.sla .a.r .sq[b-5gb0gpkvrv] {
    background: var(--dc-risk);
}

.sla .a.a .sq[b-5gb0gpkvrv] {
    background: var(--dc-warn);
}

.sla .a .t[b-5gb0gpkvrv] {
    font-size: 12.5px;
    font-weight: 600;
}

.sla .a .m[b-5gb0gpkvrv] {
    font-size: 11.5px;
    color: var(--dc-muted);
}

.sla .a .age[b-5gb0gpkvrv] {
    margin-left: auto;
    font-weight: 800;
    font-size: 13px;
}

.sla .a.r .age[b-5gb0gpkvrv] {
    color: var(--dc-risk);
}

.sla .a.a .age[b-5gb0gpkvrv] {
    color: var(--dc-warn);
}

/* ---- Conversion funnel ------------------------------------------------------ */
.funnel[b-5gb0gpkvrv] {
    padding: 14px 16px;
}

.funnel .fr[b-5gb0gpkvrv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
}

.funnel .fr:last-child[b-5gb0gpkvrv] {
    margin-bottom: 0;
}

.funnel .fl[b-5gb0gpkvrv] {
    width: 130px;
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--dc-muted);
}

.funnel .bar[b-5gb0gpkvrv] {
    flex: 1;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgb(var(--color-sf-primary)), rgb(var(--color-sf-primary), 0.62));
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #fff;
    font-weight: 750;
    font-size: 14px;
}

/* zero-count stage: neutral bar so sparse data doesn't paint a full brand bar over a 0 */
.funnel .bar.zero[b-5gb0gpkvrv] {
    background: #E9EDF4;
    color: var(--dc-muted);
}

.funnel .cv[b-5gb0gpkvrv] {
    width: 64px;
    flex: none;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--dc-good);
}

.funnel .cv.mut[b-5gb0gpkvrv] {
    color: var(--dc-faint);
}

/* ---- Trend ------------------------------------------------------------------ */
.trend[b-5gb0gpkvrv] {
    padding: 12px 16px 8px;
}

.trend .lg[b-5gb0gpkvrv] {
    display: flex;
    gap: 16px;
    font-size: 11.5px;
    color: var(--dc-muted);
    padding: 0 2px 8px;
}

.trend .lg span[b-5gb0gpkvrv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.trend .lg i[b-5gb0gpkvrv] {
    width: 10px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

/* ---- Revenue ---------------------------------------------------------------- */
.rev[b-5gb0gpkvrv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 6px 4px;
}

.rev .rc[b-5gb0gpkvrv] {
    padding: 12px 16px;
    border-right: 1px solid var(--dc-line-soft);
}

.rev .rc:last-child[b-5gb0gpkvrv] {
    border-right: 0;
}

.rev .rl[b-5gb0gpkvrv] {
    font-size: 11.5px;
    color: var(--dc-muted);
    font-weight: 600;
}

.rev .rv[b-5gb0gpkvrv] {
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.02em;
    margin-top: 5px;
    color: var(--dc-faint);
}

@media (max-width: 1080px) {
    .dgrid2[b-5gb0gpkvrv] {
        grid-template-columns: 1fr;
    }

    .rev[b-5gb0gpkvrv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Issue #596: failed-load banner. Warning-toned but non-blocking; the stale figures stay readable. */
.dash-loaderror[b-5gb0gpkvrv] {
    margin: 0 24px 12px;
    padding: 10px 14px;
    border: 1px solid #E9B949;
    border-left: 4px solid #E9B949;
    border-radius: 6px;
    background: #FDF7E7;
    color: #6B4E00;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login page — 2026 refresh: brand-gradient hero stage + frosted glass card.
   Brand-aware via --color-sf-primary/secondary tokens (theme-titan / theme-cobalt swap cleanly).
   The old .grid-container layout (+ its global rules in styles.css / material-syncfusion-overrides.css)
   is retired by the class rename — those rules are now inert. */

.login-stage[b-pbyotj8c3y] {
    min-height: 100dvh; /* full-bleed front door — the layout renders /login without the shell */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background: radial-gradient(900px 480px at 12% 8%, rgb(var(--color-sf-secondary), 0.18), transparent 60%),
    radial-gradient(760px 560px at 88% 92%, rgb(var(--color-sf-primary), 0.10), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, rgb(var(--color-sf-primary)) 22%, #ffffff) 0%, color-mix(in srgb, rgb(var(--color-sf-primary)) 34%, #ffffff) 100%);
}

.login-card[b-pbyotj8c3y] {
    position: relative; /* spinner overlay + entrance animation anchor */
    width: 400px;
    max-width: 94vw;
    padding: 36px 34px 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96); /* near-solid white — lower alpha let the maroon bleed through pink */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 20px 50px rgba(20, 26, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
    animation: login-rise-b-pbyotj8c3y 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}

@keyframes login-rise-b-pbyotj8c3y {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* brand monogram */
.login-mark[b-pbyotj8c3y] {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(150deg, rgb(var(--color-sf-primary)), color-mix(in srgb, rgb(var(--color-sf-primary)) 72%, #14090a));
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgb(var(--color-sf-primary), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.login-title[b-pbyotj8c3y] {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    color: #1F2733;
    letter-spacing: 0.2px;
}

.login-sub[b-pbyotj8c3y] {
    text-align: center;
    font-size: 13px;
    color: #5A6474;
    margin: 4px 0 26px;
}

.login-field[b-pbyotj8c3y] {
    margin-bottom: 16px;
}

.login-label[b-pbyotj8c3y] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5A6474;
    margin-bottom: 4px;
}

.login-remember[b-pbyotj8c3y] {
    margin: 4px 0 20px;
}

[b-pbyotj8c3y] .login-remember .e-label {
    font-size: 12.5px !important;
    color: #5A6474;
}

/* solid-brand CTA — the one loud element on the card; lifts on hover like the shell buttons */
[b-pbyotj8c3y] .login-btn.e-btn {
    width: 100%;
    padding: 11px 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    text-transform: none !important;
    color: #fff !important;
    background: rgb(var(--color-sf-primary)) !important;
    border: 1px solid rgb(var(--color-sf-primary)) !important;
    box-shadow: 0 6px 16px rgb(var(--color-sf-primary), 0.38);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

[b-pbyotj8c3y] .login-btn.e-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgb(var(--color-sf-primary), 0.45);
}

[b-pbyotj8c3y] .login-btn.e-btn:active:not(:disabled) {
    filter: brightness(0.96);
    transform: translateY(0);
}

[b-pbyotj8c3y] .login-btn.e-btn:disabled {
    opacity: 0.75;
}

.login-divider[b-pbyotj8c3y] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 19px 0;
    color: #7B8492;
    font-size: 12px;
    text-transform: uppercase;
}

.login-divider[b-pbyotj8c3y]::before,
.login-divider[b-pbyotj8c3y]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #DDE1E7;
}

.login-passkey-btn[b-pbyotj8c3y] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgb(var(--color-sf-primary));
    border-radius: 10px;
    background: #fff;
    color: rgb(var(--color-sf-primary));
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.login-passkey-btn:hover:not(:disabled)[b-pbyotj8c3y] {
    transform: translateY(-1px);
    background: rgb(var(--color-sf-primary), 0.06);
    box-shadow: 0 5px 14px rgb(var(--color-sf-primary), 0.18);
}

.login-passkey-btn:disabled[b-pbyotj8c3y] {
    cursor: not-allowed;
    opacity: 0.55;
}

.login-passkey-icon[b-pbyotj8c3y] {
    margin-right: 6px;
}

.login-passkey-hint[b-pbyotj8c3y] {
    margin-top: 8px;
    color: #6C7583;
    font-size: 11.5px;
    line-height: 1.4;
    text-align: center;
}

/* uppercase username input (Syncfusion internals need ::deep) */
[b-pbyotj8c3y] .upper input {
    text-transform: uppercase;
}

/* loading overlay covers the whole card, matching its radius */
[b-pbyotj8c3y] .e-spin-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* validation messages sit tight under their inputs */
[b-pbyotj8c3y] .validation-message {
    font-size: 12px;
    color: #C0392B;
    margin-top: 3px;
}
/* /Components/Pages/ManagePasskeys.razor.rz.scp.css */
.passkeys-page[b-ktkvpda4xw] {
    margin: 0 auto;
    max-width: 980px;
    padding: 28px;
}

.passkeys-intro[b-ktkvpda4xw] {
    align-items: center;
    background: linear-gradient(135deg, #fff 0%, #fff 64%, rgba(142, 24, 27, .06) 100%);
    border: 1px solid #E2E5EA;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(30, 35, 45, .06);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 26px;
}

.passkeys-kicker[b-ktkvpda4xw] {
    color: rgb(var(--color-sf-primary));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.passkeys-intro h1[b-ktkvpda4xw] {
    color: #252A33;
    font-size: 28px;
    margin: 4px 0 8px;
}

.passkeys-intro p[b-ktkvpda4xw] {
    color: #626A76;
    line-height: 1.55;
    margin: 0;
    max-width: 570px;
}

.passkeys-register[b-ktkvpda4xw] {
    align-items: center;
    background: rgb(var(--color-sf-primary));
    border: 1px solid rgb(var(--color-sf-primary));
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    padding: 11px 16px;
}

.passkeys-register:hover:not(:disabled)[b-ktkvpda4xw] {
    filter: brightness(.9);
}

.passkeys-register:disabled[b-ktkvpda4xw] {
    cursor: not-allowed;
    opacity: .55;
}

.passkeys-message[b-ktkvpda4xw] {
    background: #EAF7EE;
    border: 1px solid #B9E2C4;
    border-radius: 9px;
    color: #176A31;
    margin-top: 16px;
    padding: 11px 14px;
}

.passkeys-message.passkeys-error[b-ktkvpda4xw] {
    background: #FCEDEE;
    border-color: #EDC1C3;
    color: #8E181B;
}

.passkeys-card[b-ktkvpda4xw] {
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(30, 35, 45, .05);
    margin-top: 18px;
    overflow: hidden;
}

.passkeys-card-heading[b-ktkvpda4xw] {
    align-items: center;
    border-bottom: 1px solid #EAECF0;
    display: flex;
    justify-content: space-between;
    padding: 20px 22px;
}

.passkeys-card-heading h2[b-ktkvpda4xw] {
    color: #292E37;
    font-size: 17px;
    margin: 0 0 4px;
}

.passkeys-card-heading p[b-ktkvpda4xw] {
    color: #737B87;
    font-size: 12.5px;
    margin: 0;
}

.passkeys-count[b-ktkvpda4xw] {
    background: #F2E8E9;
    border-radius: 999px;
    color: rgb(var(--color-sf-primary));
    font-size: 13px;
    font-weight: 800;
    min-width: 30px;
    padding: 5px 9px;
    text-align: center;
}

.passkeys-empty[b-ktkvpda4xw] {
    align-items: center;
    color: #757D88;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 44px 20px;
    text-align: center;
}

.passkeys-empty > i[b-ktkvpda4xw] {
    color: #A7ADB6;
    font-size: 30px;
}

.passkeys-empty strong[b-ktkvpda4xw] {
    color: #3A404A;
}

.passkeys-empty span[b-ktkvpda4xw] {
    font-size: 12.5px;
}

.passkey-row[b-ktkvpda4xw] {
    align-items: center;
    border-bottom: 1px solid #ECEEF2;
    display: grid;
    gap: 13px;
    grid-template-columns: auto 1fr auto auto;
    padding: 15px 20px;
}

.passkey-row:last-child[b-ktkvpda4xw] {
    border-bottom: 0;
}

.passkey-icon[b-ktkvpda4xw] {
    background: #F4EDEE;
    border-radius: 9px;
    color: rgb(var(--color-sf-primary));
    display: grid;
    font-size: 19px;
    height: 38px;
    place-items: center;
    width: 38px;
}

.passkey-details strong[b-ktkvpda4xw],
.passkey-details span[b-ktkvpda4xw] {
    display: block;
}

.passkey-details strong[b-ktkvpda4xw] {
    color: #2C313A;
    font-size: 13.5px;
}

.passkey-details span[b-ktkvpda4xw] {
    color: #7A828E;
    font-size: 11.5px;
    margin-top: 3px;
}

.passkey-state[b-ktkvpda4xw] {
    color: #66707C;
    font-size: 11.5px;
}

.passkey-remove[b-ktkvpda4xw] {
    background: #fff;
    border: 1px solid #E5B8BA;
    border-radius: 7px;
    color: #8E181B;
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 10px;
}

.passkey-remove:hover:not(:disabled)[b-ktkvpda4xw] {
    background: #FCEDEE;
}

.passkey-remove:disabled[b-ktkvpda4xw] {
    cursor: not-allowed;
    opacity: .55;
}

.passkeys-note[b-ktkvpda4xw] {
    align-items: center;
    color: #6E7682;
    display: flex;
    font-size: 12px;
    gap: 8px;
    margin-top: 14px;
    padding: 0 4px;
}

@media (max-width: 700px) {
    .passkeys-page[b-ktkvpda4xw] {
        padding: 16px;
    }

    .passkeys-intro[b-ktkvpda4xw] {
        align-items: stretch;
        flex-direction: column;
    }

    .passkeys-register[b-ktkvpda4xw] {
        justify-content: center;
        width: 100%;
    }

    .passkey-row[b-ktkvpda4xw] {
        grid-template-columns: auto 1fr;
    }

    .passkey-state[b-ktkvpda4xw] {
        grid-column: 2;
    }

    .passkey-remove[b-ktkvpda4xw] {
        grid-column: 2;
        justify-self: start;
    }
}
/* /Components/Pages/PasskeyLab.razor.rz.scp.css */
.lab-page[b-pozvu16jel] {
    align-items: flex-start;
    background:
        radial-gradient(circle at 15% 10%, rgba(254, 193, 15, 0.18), transparent 32rem),
        linear-gradient(145deg, #f8f5f1 0%, #f7f8fb 52%, #f4ebec 100%);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 1.25rem;
}

.lab-card[b-pozvu16jel] {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(142, 24, 27, 0.13);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 4rem rgba(47, 27, 28, 0.12);
    max-width: 52rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    width: 100%;
}

.lab-badge[b-pozvu16jel] {
    color: #8e181b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

h1[b-pozvu16jel] {
    color: #231f20;
    font-size: clamp(2rem, 5vw, 3.2rem);
    letter-spacing: -0.04em;
    margin: 0.35rem 0 0.75rem;
}

.lab-lead[b-pozvu16jel] {
    color: #5d5658;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}

.lab-warning[b-pozvu16jel] {
    background: #fff7dc;
    border-left: 4px solid #d99b00;
    border-radius: 0.4rem;
    color: #604600;
    margin: 1.25rem 0 1.75rem;
    padding: 0.85rem 1rem;
}

label[b-pozvu16jel] {
    color: #373033;
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

input[b-pozvu16jel] {
    border: 1px solid #cfc7c9;
    border-radius: 0.55rem;
    box-sizing: border-box;
    font: inherit;
    padding: 0.8rem 0.9rem;
    width: 100%;
}

input:focus[b-pozvu16jel] {
    border-color: #8e181b;
    box-shadow: 0 0 0 3px rgba(142, 24, 27, 0.12);
    outline: none;
}

.lab-actions[b-pozvu16jel] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 1rem 0 1.5rem;
}

button[b-pozvu16jel] {
    background: #fff;
    border: 1px solid #bcb3b5;
    border-radius: 0.5rem;
    color: #332d2f;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.72rem 1rem;
}

button:hover:not(:disabled)[b-pozvu16jel] {
    background: #f5f1f2;
}

button:disabled[b-pozvu16jel] {
    cursor: not-allowed;
    opacity: 0.55;
}

button.lab-primary[b-pozvu16jel] {
    background: #8e181b;
    border-color: #8e181b;
    color: #fff;
}

button.lab-primary:hover:not(:disabled)[b-pozvu16jel] {
    background: #701215;
}

button.lab-danger[b-pozvu16jel] {
    border-color: #a4373a;
    color: #8e181b;
}

.lab-message[b-pozvu16jel],
.lab-progress[b-pozvu16jel] {
    background: #edf7f0;
    border-radius: 0.5rem;
    color: #155d2d;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
}

.lab-progress[b-pozvu16jel] {
    background: #eef3fb;
    color: #244f83;
}

.lab-message-error[b-pozvu16jel] {
    background: #fcebec;
    color: #8e181b;
}

.lab-status[b-pozvu16jel] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.lab-status > div[b-pozvu16jel] {
    background: #f8f7f7;
    border-radius: 0.65rem;
    padding: 0.9rem 1rem;
}

.lab-status dt[b-pozvu16jel] {
    color: #746d6f;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.lab-status dd[b-pozvu16jel] {
    color: #302a2c;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

details[b-pozvu16jel] {
    border-top: 1px solid #e2dcde;
    color: #5d5658;
    line-height: 1.6;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

summary[b-pozvu16jel] {
    color: #453d40;
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 42rem) {
    .lab-page[b-pozvu16jel] {
        padding: 1rem;
    }

    .lab-status[b-pozvu16jel] {
        grid-template-columns: 1fr;
    }

    .lab-actions button[b-pozvu16jel] {
        width: 100%;
    }
}