@import '_content/Excubo.Blazor.TreeViews/Excubo.Blazor.TreeViews.ggbo2a6x37.bundle.scp.css';
@import '_content/Volo.Abp.Account.Pro.Public.Blazor.Shared/Volo.Abp.Account.Pro.Public.Blazor.Shared.bt59d6l1jm.bundle.scp.css';
@import '_content/Volo.Abp.PermissionManagement.Blazor/Volo.Abp.PermissionManagement.Blazor.p33ll9g8os.bundle.scp.css';

/* /Chat/ChatDock.razor.rz.scp.css */
/* Docked mini-chat — floating popup, bottom-right. Scoped CSS: every class the
   component renders is defined here (including the bubble classes copied verbatim
   from Pages/Chat/Index.razor.css so the dock's messages look identical to the
   full /chat page). House vh- naming + Bootstrap CSS-var theming. */

.vh-chatdock[b-8qtpkuqo12] {
    position: fixed;
    right: 20px;
    bottom: 0;
    width: 340px;
    height: 440px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bs-body-bg, var(--vh-surface));
    border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb));
    border-bottom: none;
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
    box-shadow: 0 8px 28px rgb(var(--vh-raw-rgb-15-23-42) / .22);
    overflow: hidden;
}

/* Minimized = just the ~44px header bar. */
.vh-chatdock.minimized[b-8qtpkuqo12] {
    height: 44px;
}

/* ---------------- header ---------------- */
.vh-chatdock-head[b-8qtpkuqo12] {
    display: flex;
    align-items: center;
    gap: .55rem;
    height: 44px;
    flex-shrink: 0;
    padding: 0 .55rem 0 .75rem;
    background: var(--bs-primary, var(--vh-raw-2563eb));
    color: var(--vh-on-primary);
    cursor: pointer;
    user-select: none;
}

.vh-chatdock-avatar[b-8qtpkuqo12] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: rgb(var(--vh-white-rgb) / .25);
    color: var(--vh-on-primary);
    font-weight: 600;
    font-size: .72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vh-chatdock-avatar img[b-8qtpkuqo12] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.vh-chatdock-head-meta[b-8qtpkuqo12] {
    flex: 1;
    min-width: 0;
}

.vh-chatdock-head-name[b-8qtpkuqo12] {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.vh-chatdock-head-actions[b-8qtpkuqo12] {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
}

.vh-chatdock-unread[b-8qtpkuqo12] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--vh-surface);
    color: var(--bs-primary, var(--vh-raw-2563eb));
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

.vh-chatdock-iconbtn[b-8qtpkuqo12] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vh-on-primary);
    cursor: pointer;
    font-size: .85rem;
    opacity: .9;
}

.vh-chatdock-iconbtn:hover[b-8qtpkuqo12] {
    background: rgb(var(--vh-white-rgb) / .2);
    opacity: 1;
}

/* ---------------- messages ---------------- */
.vh-chatdock-messages[b-8qtpkuqo12] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .85rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    background: var(--vh-raw-f7f9fc);
}

.vh-chatdock-loadmore[b-8qtpkuqo12] {
    display: flex;
    justify-content: center;
    padding: .1rem 0 .35rem;
}

.vh-chatdock-loadmore button[b-8qtpkuqo12] {
    border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb));
    border-radius: 999px;
    padding: .28rem .7rem;
    background: var(--vh-surface);
    color: var(--bs-primary, var(--vh-raw-2563eb));
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
}

.vh-chatdock-loadmore button:disabled[b-8qtpkuqo12] {
    opacity: .6;
    cursor: default;
}

.vh-chatdock-empty[b-8qtpkuqo12] {
    margin: auto;
    text-align: center;
    color: var(--vh-raw-9aa3b2);
    font-size: .82rem;
    padding: 1rem .5rem;
}

/* bubbles — copied from Pages/Chat/Index.razor.css (scoped CSS can't reach the page's) */
.vh-chat-msg[b-8qtpkuqo12] {
    display: flex;
    max-width: 82%;
}

.vh-chat-msg.mine[b-8qtpkuqo12] {
    align-self: flex-end;
    justify-content: flex-end;
}

.vh-chat-msg.theirs[b-8qtpkuqo12] {
    align-self: flex-start;
}

.vh-chat-bubble[b-8qtpkuqo12] {
    padding: .45rem .65rem;
    border-radius: .8rem;
    font-size: .85rem;
    line-height: 1.35;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.vh-chat-msg.theirs .vh-chat-bubble[b-8qtpkuqo12] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-raw-e8ecf2);
    border-bottom-left-radius: .2rem;
    color: var(--vh-raw-1f2937);
}

.vh-chat-msg.mine .vh-chat-bubble[b-8qtpkuqo12] {
    background: var(--bs-primary, var(--vh-raw-2563eb));
    color: var(--vh-on-primary);
    border-bottom-right-radius: .2rem;
}

.vh-chat-text[b-8qtpkuqo12] {
    display: block;
}

.vh-chat-time[b-8qtpkuqo12] {
    display: block;
    font-size: .63rem;
    opacity: .7;
    margin-top: .2rem;
    text-align: right;
}

.vh-chatdock-new-messages[b-8qtpkuqo12] {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 58px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: calc(100% - 2rem);
    border: 0;
    border-radius: 999px;
    padding: .4rem .72rem;
    background: var(--bs-primary, var(--vh-raw-2563eb));
    color: var(--vh-on-primary);
    box-shadow: 0 4px 14px rgb(var(--vh-raw-rgb-15-23-42) / .2);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.vh-chatdock-new-messages:hover[b-8qtpkuqo12] {
    filter: brightness(1.05);
}

.vh-chatdock-loadmore button:focus-visible[b-8qtpkuqo12],
.vh-chatdock-new-messages:focus-visible[b-8qtpkuqo12],
.vh-chatdock-iconbtn:focus-visible[b-8qtpkuqo12],
.vh-chatdock-send:focus-visible[b-8qtpkuqo12] {
    outline: 3px solid rgb(var(--vh-white-rgb) / .75);
    outline-offset: 2px;
}

/* ---------------- composer ---------------- */
.vh-chatdock-composer[b-8qtpkuqo12] {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    padding: .55rem .6rem;
    border-top: 1px solid var(--bs-border-color, var(--vh-raw-eef1f6));
    background: var(--bs-body-bg, var(--vh-surface));
    flex-shrink: 0;
}

.vh-chatdock-composer textarea[b-8qtpkuqo12] {
    resize: none;
    max-height: 96px;
    font-size: .85rem;
}

.vh-chatdock-send[b-8qtpkuqo12] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--bs-primary, var(--vh-raw-2563eb));
    color: var(--vh-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vh-chatdock-send:disabled[b-8qtpkuqo12] {
    opacity: .55;
    cursor: default;
}

.vh-chatdock-send:not(:disabled):hover[b-8qtpkuqo12] {
    filter: brightness(1.05);
}
/* /Components/Candidates/CandidateHiredStatusPill.razor.rz.scp.css */
.chs-root[b-5d9pwp6cf9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    vertical-align: middle;
}

.chs-pill[b-5d9pwp6cf9] {
    min-height: 20px;
    border-radius: var(--vh-radius-pill);
    padding: 2px 9px;
    border: 1px solid var(--vh-line);
    font-family: var(--vh-font-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    text-transform: uppercase;
}

button.chs-pill[b-5d9pwp6cf9] {
    cursor: pointer;
}

button.chs-pill:hover[b-5d9pwp6cf9] {
    filter: brightness(.97);
}

button.chs-pill:focus-visible[b-5d9pwp6cf9],
.chs-option:focus-visible[b-5d9pwp6cf9] {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-primary) 20%, var(--vh-transparent));
}

button.chs-pill:disabled[b-5d9pwp6cf9] {
    cursor: wait;
    opacity: .78;
}

.chs-pill.none[b-5d9pwp6cf9] {
    background: var(--vh-surface-soft);
    color: var(--vh-text-muted);
    border-color: var(--vh-line);
}

.chs-pill.hired[b-5d9pwp6cf9] {
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    border-color: var(--vh-tonal-red-bd);
}

.chs-pill.previous[b-5d9pwp6cf9] {
    background: var(--vh-tonal-green-bg);
    color: var(--vh-tonal-green-text);
    border-color: var(--vh-tonal-green-bd);
}

.chs-root.compact .chs-pill[b-5d9pwp6cf9] {
    min-height: 18px;
    padding: 2px 7px;
    font-size: 9px;
}

.chs-caret[b-5d9pwp6cf9] {
    font-size: 8px;
}

.chs-spinner[b-5d9pwp6cf9] {
    font-size: 9px;
}

.chs-backdrop[b-5d9pwp6cf9] {
    position: fixed;
    inset: 0;
    z-index: 1039;
}

.chs-menu[b-5d9pwp6cf9] {
    position: absolute;
    z-index: 1040;
    top: calc(100% + 6px);
    left: 0;
    width: min(270px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    overflow: hidden;
    padding: 6px 0;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
}

@media (max-width: 575.98px) {
    .chs-menu[b-5d9pwp6cf9],
    .chs-root.in-modal .chs-menu[b-5d9pwp6cf9] {
        position: fixed;
        inset: auto 12px 12px;
        width: auto;
        max-width: none;
        max-height: min(70vh, 360px);
        overflow-y: auto;
    }
}

.chs-root.in-modal .chs-backdrop[b-5d9pwp6cf9] {
    z-index: 1059;
}

.chs-root.in-modal .chs-menu[b-5d9pwp6cf9] {
    z-index: 1060;
}

.chs-option[b-5d9pwp6cf9] {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-text-body);
    text-align: left;
    cursor: pointer;
}

.chs-option:hover[b-5d9pwp6cf9] {
    background: var(--vh-surface-soft);
}

.chs-option[aria-checked="true"][b-5d9pwp6cf9] {
    background: var(--vh-primary-soft);
}

.chs-option-dot[b-5d9pwp6cf9] {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1px solid var(--vh-line);
    border-radius: 50%;
    background: var(--vh-surface-soft);
}

.chs-option-dot.hired[b-5d9pwp6cf9] {
    border-color: var(--vh-tonal-red-bd);
    background: var(--vh-tonal-red-text);
}

.chs-option-dot.previous[b-5d9pwp6cf9] {
    border-color: var(--vh-tonal-green-bd);
    background: var(--vh-tonal-green-text);
}

.chs-option-copy[b-5d9pwp6cf9] {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.chs-option-copy strong[b-5d9pwp6cf9] {
    font-size: 12px;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.chs-option-copy small[b-5d9pwp6cf9] {
    font-size: 10px;
    line-height: 1.25;
    color: var(--vh-text-muted);
}

.chs-check[b-5d9pwp6cf9] {
    flex: 0 0 auto;
    color: var(--vh-primary);
    font-size: 11px;
}

.chs-error[b-5d9pwp6cf9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 190px;
    overflow-wrap: anywhere;
    color: var(--vh-danger);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .chs-error[b-5d9pwp6cf9] {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.chs-live[b-5d9pwp6cf9] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Candidates/Profile/CandidateProfileLockedPreview.razor.rz.scp.css */
.vhp-locked-preview[b-rqvcuifxb3] {
    overflow: hidden;
}

.vhp-locked-preview-stage[b-rqvcuifxb3] {
    position: relative;
    min-height: 160px;
    overflow: hidden;
    border-radius: var(--vh-radius-md);
}

.vhp-locked-preview.links .vhp-locked-preview-stage[b-rqvcuifxb3] {
    min-height: 132px;
}

.vhp-locked-preview.preferences .vhp-locked-preview-stage[b-rqvcuifxb3] {
    min-height: 310px;
}

.vhp-locked-preview.embedded[b-rqvcuifxb3] {
    min-height: 191px;
    padding: 14px 17px;
    border-color: rgb(var(--vh-primary-hover-rgb) / .22);
    border-radius: 13px;
    background: var(--vh-blue-tint);
    box-shadow: none;
}

.vhp-locked-preview.embedded .vhp-ai-summary-label[b-rqvcuifxb3] {
    margin-bottom: 8px;
}

.vhp-locked-preview.embedded .vhp-locked-preview-stage[b-rqvcuifxb3] {
    min-height: 140px;
}

.vhp-locked-preview.embedded .vhp-locked-summary[b-rqvcuifxb3] {
    min-height: 124px;
    padding: 10px 4px;
}

.vhp-locked-preview-content[b-rqvcuifxb3] {
    height: 100%;
    filter: blur(4px);
    opacity: .58;
    pointer-events: none;
    user-select: none;
    transform: scale(1.015);
    transform-origin: center;
}

.vhp-locked-preview-overlay[b-rqvcuifxb3] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    text-align: center;
}

.vhp-locked-preview-overlay[b-rqvcuifxb3]::before {
    position: absolute;
    inset: 0;
    background: var(--vh-surface);
    content: "";
    opacity: .58;
}

.vhp-locked-preview-badge[b-rqvcuifxb3],
.vhp-locked-preview-cta[b-rqvcuifxb3] {
    position: relative;
    z-index: 1;
}

.vhp-locked-preview-badge[b-rqvcuifxb3] {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vh-line-strong);
    border-radius: 50%;
    background: var(--vh-surface);
    box-shadow: 0 4px 12px -4px rgb(var(--vh-cobalt-shadow-rgb) / .32);
    color: var(--vh-body);
    font-size: 1rem;
}

.vhp-locked-preview-cta[b-rqvcuifxb3] {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 700;
    white-space: normal;
}

.vhp-locked-preview-cta:focus-visible[b-rqvcuifxb3] {
    outline: 3px solid var(--vh-primary-soft);
    outline-offset: 3px;
}

.vhp-locked-summary[b-rqvcuifxb3] {
    min-height: 138px;
    padding: 18px;
}

.vhp-locked-line[b-rqvcuifxb3],
.vhp-locked-value[b-rqvcuifxb3] {
    border-radius: 999px;
    background: var(--vh-line-strong);
}

.vhp-locked-line[b-rqvcuifxb3] {
    width: 76%;
    height: 10px;
    margin-bottom: 13px;
}

.vhp-locked-line.wide[b-rqvcuifxb3] {
    width: 96%;
}

.vhp-locked-line.medium[b-rqvcuifxb3] {
    width: 62%;
}

.vhp-locked-line.short[b-rqvcuifxb3] {
    width: 38%;
    margin-bottom: 0;
}

.vhp-locked-links[b-rqvcuifxb3] {
    justify-content: center;
    padding-top: 20px;
}

.vhp-locked-value[b-rqvcuifxb3] {
    width: 72%;
    height: 9px;
    margin-top: 7px;
}

@media (max-width: 480px) {
    .vhp-locked-preview-stage[b-rqvcuifxb3] {
        min-height: 170px;
    }

    .vhp-locked-preview.preferences .vhp-locked-preview-stage[b-rqvcuifxb3] {
        min-height: 300px;
    }
}
/* /Components/Emails/SentEmailDetailBody.razor.rz.scp.css */
/* Sent-email drill-down (envelope + timeline + body). These rules stay local
   to the shared component; the parent profile surface now lives in the global
   wwwroot/css/vh-candidate-profile.css stylesheet. */

.sed-envelope[b-1xpwjj9f9n] { font-size: .8rem; color: var(--vh-gray-90); margin-bottom: .4rem; }

/* Same look as the page-level .vh-section-title the block used before. */
.sed-title[b-1xpwjj9f9n] {
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vh-text-muted);
    margin: 1.1rem 0 .5rem;
}

.sed-timeline[b-1xpwjj9f9n] { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }

.sed-ev[b-1xpwjj9f9n] { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; }
.sed-ev-type[b-1xpwjj9f9n] { font-weight: 600; text-transform: capitalize; min-width: 90px; }
.sed-ev-time[b-1xpwjj9f9n] { color: var(--vh-muted); }
.sed-ev-url[b-1xpwjj9f9n] { color: var(--vh-primary); word-break: break-all; }

.sed-body[b-1xpwjj9f9n] {
    border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb));
    border-radius: .4rem;
    padding: .6rem;
    max-height: 420px;
    overflow: auto;
    /* Deliberate: stored SendGrid email HTML targets var(--vh-fixed-light-surface) —
       keep the panel light even under the dark theme. */
    background: var(--vh-fixed-light-surface);
}
/* /Components/Layout/OnboardingLayout.razor.rz.scp.css */
.vh-onb-layout[b-r04uogswbw] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: var(--vh-surface);
    overflow: auto;
}
/* /Components/Vh/MentionTextArea.razor.rz.scp.css */
/* Positioning context for the caret-anchored mention dropdown. */
.vh-mta[b-ihcz2r3mf0] {
    position: relative;
}

/* The dropdown floats over the page at the caret coordinates reported by JS
   (left/top are inline styles). Self-contained copy of the design-system
   .vh-mention-* look (wwwroot/css/vh-candidate-profile.css). This copy stays
   local because the standalone mention editor also renders outside a profile shell.
   z-index keeps it above surrounding chrome. */
.vh-mta-pop[b-ihcz2r3mf0] {
    position: absolute;
    z-index: 1080;
    min-width: 220px;
    max-width: 320px;
    margin-top: .15rem;
    border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb));
    border-radius: .4rem;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bs-body-bg, var(--vh-surface));
    box-shadow: var(--vh-shadow-pop);
}

.vh-mta-item[b-ihcz2r3mf0] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    cursor: pointer;
    font-size: .85rem;
}

.vh-mta-group[b-ihcz2r3mf0] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .42rem .6rem .3rem;
    background: var(--vh-surface);
    color: var(--vh-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.vh-mta-item:hover[b-ihcz2r3mf0],
.vh-mta-item.active[b-ihcz2r3mf0] {
    background: var(--vh-gray-10); /* canon open-menu option hover (design-system §5) */
}

.vh-mta-item img[b-ihcz2r3mf0] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.vh-mta-type[b-ihcz2r3mf0] {
    margin-left: auto;
    color: var(--vh-muted);
    font-size: .72rem;
}
/* /Components/Vh/RichTextArea.razor.rz.scp.css */
/* Cobalt rich-text box — var(--vh-surface), hairline border, toolbar row under the
   editor (legacy comment-editor layout). Tokens from vh-tokens.css. */
.vh-rta[b-ygidvq5za9] {
    position: relative;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 10px;
    transition: border-color .12s, box-shadow .12s;
}
.vh-rta:focus-within[b-ygidvq5za9] {
    border-color: var(--vh-primary);
    box-shadow: 0 0 0 3px rgb(var(--vh-primary-rgb) / .08);
}

.vh-rta-editor[b-ygidvq5za9] {
    min-height: 96px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--vh-ink);
    outline: none;
    word-break: break-word;
}
.vh-rta-editor[data-empty="true"][b-ygidvq5za9]::before {
    content: attr(data-placeholder);
    color: var(--vh-muted);
    pointer-events: none;
    display: block;
}
.vh-rta-editor :is(ul, ol)[b-ygidvq5za9] { margin: 4px 0; padding-left: 22px; }
.vh-rta-editor a[b-ygidvq5za9] { color: var(--vh-primary); text-decoration: underline; }

/* Toolbar — muted icons on a soft strip, exactly one hairline above. */
.vh-rta-toolbar[b-ygidvq5za9] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-top: 1px solid var(--vh-line);
}
.vh-rta-toolbar button[b-ygidvq5za9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 0;
    background: var(--vh-transparent);
    border-radius: var(--vh-radius-md);
    color: var(--vh-muted);
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.vh-rta-toolbar button:hover[b-ygidvq5za9] { background: var(--vh-surface-soft); color: var(--vh-ink); }
.vh-rta-toolbar button.on[b-ygidvq5za9] { background: var(--vh-blue-tint); color: var(--vh-primary); }
.vh-rta-sep[b-ygidvq5za9] { width: 1px; height: 16px; background: var(--vh-line); margin: 0 4px; }

/* Link mini-panel between editor and toolbar. */
.vh-rta-linkrow[b-ygidvq5za9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid var(--vh-line);
    background: var(--vh-surface-soft);
}
.vh-rta-linkinput[b-ygidvq5za9] {
    flex: 1;
    border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius-md);
    padding: 4px 8px;
    font-size: .8rem;
    color: var(--vh-ink);
    background: var(--vh-surface);
    outline: none;
}
.vh-rta-linkinput:focus[b-ygidvq5za9] { border-color: var(--vh-primary); }
.vh-rta-linkbtn[b-ygidvq5za9] {
    border: 0;
    background: var(--vh-transparent);
    border-radius: var(--vh-radius-md);
    padding: 4px 10px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--vh-body);
    cursor: pointer;
}
.vh-rta-linkbtn:hover[b-ygidvq5za9] { background: var(--vh-surface); }
.vh-rta-linkbtn.apply[b-ygidvq5za9] { color: var(--vh-primary); }
.vh-rta-linkbtn.apply:disabled[b-ygidvq5za9] { opacity: .45; cursor: default; }

/* Mention dropdown — self-contained copy of the MentionTextArea look (that
   component's rules are scoped to it and don't reach this one). */
.vh-mta-pop[b-ygidvq5za9] {
    position: absolute;
    z-index: 1080;
    min-width: 220px;
    max-width: 320px;
    margin-top: .15rem;
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    max-height: 220px;
    overflow-y: auto;
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-pop);
}
.vh-mta-item[b-ygidvq5za9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    cursor: pointer;
    font-size: .85rem;
}
.vh-mta-item:hover[b-ygidvq5za9],
.vh-mta-item.active[b-ygidvq5za9] { background: var(--vh-blue-tint); }
.vh-mta-item img[b-ygidvq5za9] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.vh-mta-type[b-ygidvq5za9] {
    margin-left: auto;
    color: var(--vh-muted);
    font-size: .72rem;
}
/* /Components/Vh/VhDropdown.razor.rz.scp.css */
/* VhDropdown — Type 2 (button + single-select menu), legacy StyledMenu/VHInputRadio.
   Tokens only (vh-tokens.css / Documentation/design-system.md) — no new hex.

   z-index scale: base backdrop/menu sit at 1039/1040 — above the LeptonX
   sticky chrome (Bootstrap scale: sticky 1020, fixed 1030) but below
   Bootstrap/Blazorise modals (1055). The .vh-dd-modal modifier (1059/1060)
   stacks above modals for in-modal usage. */

.vh-dd[b-1qsoyqqoeg] { position: relative; display: inline-flex; flex-direction: column; gap: 4px; }

.vh-dd-label[b-1qsoyqqoeg] {
    font-family: var(--vh-font-secondary);
    font-size: 12px;
    font-weight: 500;
    color: var(--vh-text-muted);
    margin: 0;
}

.vh-dd-btn[b-1qsoyqqoeg] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-md);
    padding: 5px 12px;
    font-family: var(--vh-font-secondary);
    font-size: 14px;
    line-height: 18px;
    color: var(--vh-black-80); /* legacy pipeline-listing filter text */
    cursor: pointer;
    max-width: 320px;
}
.vh-dd-btn:hover[b-1qsoyqqoeg] { background: var(--vh-gray-10); }
.vh-dd-btn:focus-visible[b-1qsoyqqoeg] {
    outline: 0;
    border-color: var(--vh-input-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-input-focus) 15%, var(--vh-transparent));
}
.vh-dd-btn:disabled[b-1qsoyqqoeg] { background: var(--vh-disabled-bg); color: var(--vh-disabled-text); cursor: not-allowed; }
.vh-dd-btn-text[b-1qsoyqqoeg] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-dd-icon[b-1qsoyqqoeg] { font-size: 12px; color: var(--vh-black-60); flex: 0 0 auto; }
.vh-dd-caret[b-1qsoyqqoeg] { font-size: 10px; color: var(--vh-black-40); flex: 0 0 auto; }

/* var(--vh-transparent) click-catcher — closes on outside click (established pattern). */
.vh-dd-backdrop[b-1qsoyqqoeg] { position: fixed; inset: 0; z-index: 1039; }

.vh-dd-menu[b-1qsoyqqoeg] {
    position: absolute;
    z-index: 1040;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    max-width: 360px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop); /* legacy menus: shadow only, no border */
    padding: 6px 0;
}
.vh-dd-menu-up[b-1qsoyqqoeg] { top: auto; bottom: calc(100% + 4px); }

.vh-dd-title[b-1qsoyqqoeg] {
    font-family: var(--vh-font-secondary);
    font-size: 14px;
    font-weight: 700;
    color: var(--vh-text-body);
    padding: 4px 16px 9px;
}

.vh-dd-item[b-1qsoyqqoeg] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 16px;
    font-family: var(--vh-font-secondary);
    font-size: 14px;
    color: var(--vh-text-body);
    cursor: pointer;
}
.vh-dd-item:hover[b-1qsoyqqoeg] { background: var(--vh-gray-10); }
.vh-dd-item:focus-visible[b-1qsoyqqoeg] {
    outline: 0;
    background: var(--vh-gray-10);
    box-shadow: inset 3px 0 0 var(--vh-input-focus);
}
.vh-dd-item[aria-checked="true"][b-1qsoyqqoeg] {
    background: var(--vh-primary-soft);
    color: var(--vh-selection-text);
    font-weight: 600;
}
.vh-dd-item input[b-1qsoyqqoeg] { display: none; }
.vh-dd-item span[b-1qsoyqqoeg] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-dd-item .vh-dd-check[b-1qsoyqqoeg] {
    margin-left: auto;
    color: var(--vh-selection-text);
    flex: 0 0 auto;
    font-weight: 700;
    overflow: visible;
    visibility: hidden;
}
.vh-dd-item[aria-checked="true"] .vh-dd-check[b-1qsoyqqoeg] { visibility: visible; }

/* Modifier: full-width trigger (form fields, e.g. inside modals). */
.vh-dd-block[b-1qsoyqqoeg] { width: 100%; }
.vh-dd-block .vh-dd-btn[b-1qsoyqqoeg] { width: 100%; max-width: none; }

/* Modifier: usage inside Blazorise modals (stack above .modal z-index 1055). */
.vh-dd-modal .vh-dd-backdrop[b-1qsoyqqoeg] { z-index: 1059; }
.vh-dd-modal .vh-dd-menu[b-1qsoyqqoeg] { z-index: 1060; }
/* /Components/Vh/VhFiltersCard.razor.rz.scp.css */
/* ABP-default filter card (see /identity/users): var(--vh-surface) card with the
   quick-search row and the collapsible advanced-filters region. Tokens only —
   the dark layer flips it. */
.vh-filters-card[b-kmhogpdp49] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    box-shadow: var(--vh-shadow-cobalt);
    padding: 16px 18px;
    margin-bottom: 18px;
    font-family: var(--vh-font-primary);
}

.vh-filters-row[b-kmhogpdp49] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vh-filters-search[b-kmhogpdp49] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vh-filters-toggle[b-kmhogpdp49] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--vh-primary);
    border-radius: var(--vh-radius-md);
    background: var(--vh-transparent);
    color: var(--vh-primary);
    font: 500 13.5px/1 var(--vh-font-primary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vh-filters-toggle:hover[b-kmhogpdp49],
.vh-filters-toggle.open[b-kmhogpdp49] {
    background: var(--vh-blue-tint);
}

.vh-filters-toggle i[b-kmhogpdp49] { font-size: 11px; }

.vh-filters-body[b-kmhogpdp49] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--vh-line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-end;
}

@media (max-width: 767.98px) {
    .vh-filters-card[b-kmhogpdp49] {
        padding: 14px;
    }

    .vh-filters-row[b-kmhogpdp49] {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .vh-filters-search[b-kmhogpdp49] {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .vh-filters-toggle[b-kmhogpdp49] {
        width: 100%;
        justify-content: center;
    }

    .vh-filters-body[b-kmhogpdp49] {
        align-items: stretch;
    }
}
/* /Components/Vh/VhHelpTooltip.razor.rz.scp.css */
/* Compact contextual help — mirrors the legacy Material UI tooltip while
   supporting both pointer hover and keyboard focus. Tokens keep both themes
   legible; lightweight elevation uses the design-system popover shadow. */
.vh-help-tip[b-xtr6gn69ov] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.vh-help-tip-trigger[b-xtr6gn69ov] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1.5px solid var(--vh-text-muted);
    border-radius: 50%;
    background: var(--vh-transparent);
    color: var(--vh-text-muted);
    font-family: var(--vh-font-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.vh-help-tip-trigger:hover[b-xtr6gn69ov] {
    border-color: var(--vh-primary);
    color: var(--vh-primary);
}

.vh-help-tip-trigger:focus-visible[b-xtr6gn69ov] {
    outline: 0;
    border-color: var(--vh-input-focus);
    color: var(--vh-input-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-input-focus) 15%, var(--vh-transparent));
}

.vh-help-tip-content[b-xtr6gn69ov] {
    position: absolute;
    z-index: 1040;
    top: calc(100% + 8px);
    right: 0;
    width: max-content;
    max-width: min(300px, calc(100vw - 32px));
    padding: 6px 10px;
    border-radius: var(--vh-radius);
    background: var(--vh-ink);
    color: var(--vh-surface);
    box-shadow: var(--vh-shadow-pop);
    font-family: var(--vh-font-secondary);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}

.vh-help-tip:hover .vh-help-tip-content[b-xtr6gn69ov],
.vh-help-tip:focus-within .vh-help-tip-content[b-xtr6gn69ov] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: .05s, .05s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .vh-help-tip-content[b-xtr6gn69ov] { transition: none; }
}
/* /Components/Vh/VhInfiniteScroll.razor.rz.scp.css */
/* Sentinel row for the shared infinite scroll (legacy InfiniteScroll loader). */
.vh-iscroll[b-mj36xjfcl9] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1px;
    padding: 8px 0;
}

.vh-iscroll-spin[b-mj36xjfcl9] {
    width: 22px;
    height: 22px;
    border: 3px solid var(--vh-gray-30);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: vh-iscroll-rot-b-mj36xjfcl9 0.8s linear infinite;
}

@keyframes vh-iscroll-rot-b-mj36xjfcl9 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Vh/VhTalentCard.razor.rz.scp.css */
/* ======================================================================
   "Cobalt" talent card — single column, mirrors the React talent card.
   The component keeps the exact shared visual language used by /talent-pool.
   ====================================================================== */

/* The outer wrapper carries the entrance; the inner card remains stable. */
.tp-outer[b-d7f85mgz84] {
    width: 100%; box-sizing: border-box;
    opacity: 0; transform: translateY(14px);
    animation: tp-rise-b-d7f85mgz84 .5s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes tp-rise-b-d7f85mgz84 { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .tp-outer[b-d7f85mgz84] { opacity: 1; transform: none; animation: none; }
}

.tp-card[b-d7f85mgz84] {
    position: relative;
    box-sizing: border-box; display: flex; gap: 22px; padding: 18px;
    background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card);
    font-family: var(--vh-font-primary);
    box-shadow: var(--vh-shadow-surface);
    transition: border-color .2s ease, background-color .2s ease;
}
.tp-card-link[b-d7f85mgz84] {
    position: absolute; inset: 0; z-index: 1; border-radius: inherit;
    text-decoration: none; color: inherit;
}
.tp-card-link:focus-visible[b-d7f85mgz84] {
    outline: 3px solid var(--vh-primary-hover);
    outline-offset: 2px;
}
.tp-card:hover[b-d7f85mgz84] {
    border-color: var(--vh-primary-hover); background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}
@media (max-width: 760px) {
    .tp-card[b-d7f85mgz84] { flex-direction: column; gap: 16px; }
}

/* Card content sits above the navigation overlay. Blank content clicks pass
   through to the profile link; real controls opt back into pointer events. */
.tp-media[b-d7f85mgz84],
.tp-body[b-d7f85mgz84] { position: relative; z-index: 2; pointer-events: none; }
.tp-media video[b-d7f85mgz84] { pointer-events: auto; }

/* ---------------- left: intro-video hero ---------------- */
.tp-media[b-d7f85mgz84] { flex: 0 0 248px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) { .tp-media[b-d7f85mgz84] { flex: 0 0 auto; } }
.tp-media-frame[b-d7f85mgz84] {
    position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px;
    overflow: hidden; background: var(--vh-media-deep);
    border: 1px solid var(--vh-line);
}
.tp-media-frame video[b-d7f85mgz84] {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    background: var(--vh-media-deep);
}
.tp-novideo[b-d7f85mgz84] {
    position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px;
    overflow: hidden; border: 1px solid var(--vh-line);
    background: linear-gradient(160deg, var(--vh-blue-tint), var(--vh-surface) 70%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.tp-novideo-avatar[b-d7f85mgz84] {
    width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--vh-color-white); box-shadow: 0 6px 16px -8px rgb(var(--vh-primary-hover-rgb) / .6);
}
.tp-novideo-initials[b-d7f85mgz84] {
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 26px; color: var(--vh-color-white);
    background: linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary-active));
    box-shadow: 0 6px 16px -8px rgb(var(--vh-primary-hover-rgb) / .6);
}
.tp-novideo-label[b-d7f85mgz84] { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--vh-muted); }

/* Realtime presence — green "online now" dot on the candidate photo. */
.tp-online-dot[b-d7f85mgz84] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vh-success);
    border: 3px solid var(--vh-color-white);
    box-shadow: 0 1px 3px rgb(var(--vh-cobalt-shadow-rgb) / .3);
    z-index: 1;
}
.tp-novideo-avatar-wrap[b-d7f85mgz84] { position: relative; display: inline-flex; }
.tp-online-dot-avatar[b-d7f85mgz84] { right: 2px; bottom: 2px; }

/* ---------------- right: body ---------------- */
.tp-body[b-d7f85mgz84] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-head[b-d7f85mgz84] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.tp-name[b-d7f85mgz84] {
    margin: 0; font-weight: 700; font-size: 19px; line-height: 1.15;
    letter-spacing: -.015em; color: var(--vh-ink);
}
.tp-verified[b-d7f85mgz84] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--vh-tonal-green-text);
    background: var(--vh-tonal-green-bg); border: 1px solid var(--vh-tonal-green-bd);
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.tp-verified[b-d7f85mgz84]  svg { display: block; }
.tp-pill[b-d7f85mgz84] {
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--vh-color-white); background: linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary-active));
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.tp-pill-premium[b-d7f85mgz84] { background: linear-gradient(135deg, var(--vh-amber-500), var(--vh-amber-700)); }

.tp-eyebrow[b-d7f85mgz84] {
    margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--vh-primary);
}
.tp-current[b-d7f85mgz84] { margin-top: 3px; font-size: 12.5px; color: var(--vh-body); }
.tp-current b[b-d7f85mgz84] { color: var(--vh-ink); font-weight: 600; }

.tp-signals[b-d7f85mgz84] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.tp-chip[b-d7f85mgz84] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500; color: var(--vh-body);
    background: var(--vh-surface-soft); border: 1px solid var(--vh-line);
    padding: 4px 10px; border-radius: 8px; white-space: nowrap;
}
.tp-chip b[b-d7f85mgz84] { color: var(--vh-ink); font-weight: 600; }
.tp-chip[b-d7f85mgz84]  svg { display: block; color: var(--vh-muted); }
.tp-chip-visa[b-d7f85mgz84] { color: var(--vh-blue-deep); }

/* ---------------- skills ---------------- */
.tp-skills-head[b-d7f85mgz84] {
    display: flex; align-items: center; gap: 10px; margin-top: 16px; margin-bottom: 9px;
}
.tp-skills-head .label[b-d7f85mgz84] {
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--vh-muted); white-space: nowrap;
}
.tp-skills-head .rule[b-d7f85mgz84] { flex: 1; height: 1px; background: var(--vh-line); }
.tp-skills-head .key[b-d7f85mgz84] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--vh-primary); white-space: nowrap;
}
.tp-skills-head .key i[b-d7f85mgz84] {
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--vh-primary-hover); display: inline-block;
}
.tp-not-informed[b-d7f85mgz84] { font-size: 12.5px; color: var(--vh-muted); font-style: italic; }

.tp-skills[b-d7f85mgz84] { display: flex; flex-wrap: wrap; gap: 7px; }
.tp-skill[b-d7f85mgz84] {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 8px; white-space: nowrap;
    color: var(--vh-blue-deep); background: var(--vh-surface-soft); border: 1px solid var(--vh-line);
}
.tp-skill-main[b-d7f85mgz84] {
    color: var(--vh-color-white); border: 1px solid var(--vh-transparent);
    background: linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary));
}
.tp-skill-more[b-d7f85mgz84] {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 600; color: var(--vh-muted); padding: 4px 6px;
}
/* /Pages/Admin/Calendar/Index.razor.rz.scp.css */
/* Admin Calendars list — legacy Index.cshtml tabs/cards.
   Colors come from the design-system tokens (Documentation/design-system.md);
   the dark-mode token layer in vh-tokens.css flips them automatically. */

.adm-cali-gate[b-jvfwm5svid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 16px;
    color: var(--vh-text-muted);
    font-size: 1.05rem;
}

.adm-cali-gate i[b-jvfwm5svid] { font-size: 2rem; }

.adm-cali-feedback[b-jvfwm5svid] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--vh-tonal-green-bd);
    border-radius: var(--vh-radius);
    background: var(--vh-tonal-green-bg);
    color: var(--vh-tonal-green-text);
    font-size: .9rem;
}

.adm-cali-feedback.error[b-jvfwm5svid] {
    border-color: var(--vh-tonal-red-bd);
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
}

.adm-cali-google-card[b-jvfwm5svid] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-card);
}

.adm-cali-google-mark[b-jvfwm5svid] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--vh-black-20);
    border-radius: 50%;
    background: var(--vh-black-10);
    color: var(--vh-text-heading);
    font-size: 1.15rem;
}

.adm-cali-google-heading[b-jvfwm5svid] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.adm-cali-google-heading h2[b-jvfwm5svid] {
    margin: 0;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: 1rem;
    font-weight: 650;
}

.adm-cali-google-copy p[b-jvfwm5svid] {
    margin: 4px 0 0;
    color: var(--vh-text-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.adm-cali-status[b-jvfwm5svid] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--vh-black-10);
    color: var(--vh-text-muted);
    font-size: .72rem;
    font-weight: 650;
}

.adm-cali-status.connected[b-jvfwm5svid] {
    background: var(--vh-tonal-green-bg);
    color: var(--vh-tonal-green-text);
}

.adm-cali-status.reconnect[b-jvfwm5svid],
.adm-cali-status.unavailable[b-jvfwm5svid] {
    background: var(--vh-tonal-amber-bg);
    color: var(--vh-tonal-amber-text);
}

.adm-cali-status.unconfigured[b-jvfwm5svid] {
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
}

.adm-cali-google-actions[b-jvfwm5svid] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

/* Page chrome is the ABP default (PageHeader + breadcrumb); the two former
   work-bar buttons sit in a right-aligned action row under the header. */
.adm-cali-actions[b-jvfwm5svid] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.adm-cali-subtitle[b-jvfwm5svid] {
    display: block;
    margin: 0 0 12px;
    color: var(--vh-text-muted);
    font-size: .9rem;
}

.adm-cali-btn[b-jvfwm5svid] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-black-10);
    color: var(--vh-black-80);
    border-radius: var(--vh-radius);
    padding: 7px 12px;
    font-size: .9rem;
    cursor: pointer;
}

.adm-cali-btn.primary[b-jvfwm5svid] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }
.adm-cali-btn.danger[b-jvfwm5svid] {
    background: var(--vh-danger);
    border-color: var(--vh-danger);
    color: var(--vh-on-primary);
}
.adm-cali-btn:disabled[b-jvfwm5svid] {
    background: var(--vh-disabled-bg);
    border-color: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.adm-cali-link-danger[b-jvfwm5svid] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-danger);
    cursor: pointer;
    font-size: .86rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.adm-cali-link-danger:disabled[b-jvfwm5svid] {
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.adm-cali-btn-spinner[b-jvfwm5svid] {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border: 2px solid currentColor;
    border-right-color: var(--vh-transparent);
    border-radius: 50%;
    vertical-align: -1px;
    animation: adm-cali-spin-b-jvfwm5svid .8s linear infinite;
}

.adm-cali-card[b-jvfwm5svid] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 20px;
}

.adm-cali-loading[b-jvfwm5svid] { display: flex; justify-content: center; padding: 40px 0; }

.adm-cali-spinner[b-jvfwm5svid] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: adm-cali-spin-b-jvfwm5svid .8s linear infinite;
}

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

.adm-cali-empty[b-jvfwm5svid] { color: var(--vh-text-muted); margin: 8px 0; }

.adm-cali-list[b-jvfwm5svid] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.adm-cali-link[b-jvfwm5svid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-md);
    text-decoration: none;
    color: var(--vh-black-80);
    min-width: 140px;
    transition: border-color .15s ease, color .15s ease;
}

.adm-cali-link:hover[b-jvfwm5svid] { border-color: var(--vh-primary); box-shadow: var(--vh-shadow-surface-hover); color: var(--vh-primary); }

.adm-cali-img[b-jvfwm5svid] { border-radius: 6px; }

.adm-cali-name[b-jvfwm5svid] { font-weight: 600; font-size: .9rem; text-align: center; }

/* modal */
.adm-cali-backdrop[b-jvfwm5svid] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1040;
}

.adm-cali-modal[b-jvfwm5svid] {
    position: fixed;
    top: 14vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, 94vw);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-modal);
    z-index: 1050;
}

.adm-cali-modal-head[b-jvfwm5svid] { padding: 14px 18px; border-bottom: 1px solid var(--vh-black-20); }
.adm-cali-modal-head h4[b-jvfwm5svid] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
}

.adm-cali-modal-body[b-jvfwm5svid] { padding: 16px 18px; }

.adm-cali-field[b-jvfwm5svid] { margin-bottom: 12px; }
.adm-cali-field label[b-jvfwm5svid] { display: block; font-weight: 600; margin-bottom: 4px; font-size: .85rem; }
.adm-cali-field input[b-jvfwm5svid] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
}
.adm-cali-field input:focus[b-jvfwm5svid] { outline: none; border-color: var(--vh-input-focus); }

.adm-cali-modal-foot[b-jvfwm5svid] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--vh-black-20);
}

.adm-cali-confirm[b-jvfwm5svid] { width: min(480px, 94vw); }
.adm-cali-confirm p[b-jvfwm5svid] { margin: 0; color: var(--vh-text-muted); line-height: 1.5; }

@media (max-width: 720px) {
    .adm-cali-google-card[b-jvfwm5svid] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .adm-cali-google-actions[b-jvfwm5svid] {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .adm-cali-google-actions .adm-cali-btn[b-jvfwm5svid] {
        flex: 1 1 auto;
    }
}
/* /Pages/Admin/Calendar/Manage.razor.rz.scp.css */
/* Admin calendar Manage — custom time grid replacing legacy FullCalendar.
   Colors come from the design-system tokens (Documentation/design-system.md);
   the dark-mode token layer in vh-tokens.css flips them automatically. */

.adm-cal-gate[b-ggad3vgsg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 16px;
    color: var(--vh-text-muted);
    font-size: 1.05rem;
}

.adm-cal-gate i[b-ggad3vgsg9] { font-size: 2rem; }

.adm-cal-page[b-ggad3vgsg9] { padding: 1rem 1.5rem 2.5rem; }

.adm-cal-subheader[b-ggad3vgsg9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.adm-cal-title[b-ggad3vgsg9] {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
}

.adm-cal-toggles[b-ggad3vgsg9] { display: flex; flex-wrap: wrap; gap: 16px; }

.adm-cal-check[b-ggad3vgsg9] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }

.adm-cal-card[b-ggad3vgsg9] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 16px;
}

/* legend — swatch colors are the legacy FullCalendar event colors and MUST
   stay in sync with the SlotDto.Color values the server sends for events. */
.adm-cal-legend[b-ggad3vgsg9] { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; font-size: .85rem; }
.adm-cal-legend i[b-ggad3vgsg9] { display: inline-block; width: 22px; height: 12px; margin-right: 4px; border-radius: 2px; }
.adm-cal-swatch-available[b-ggad3vgsg9] { background-color: var(--vh-raw-90ee90); }
.adm-cal-swatch-scheduled[b-ggad3vgsg9] { background-color: var(--vh-raw-add8e6); }
.adm-cal-swatch-conflict[b-ggad3vgsg9] { background-color: var(--vh-raw-ff4500); }
.adm-cal-swatch-unavailable[b-ggad3vgsg9] { background-color: var(--vh-raw-a9a9a9); }
.adm-cal-swatch-google[b-ggad3vgsg9] { background-color: var(--vh-raw-1e90ff); }

/* toolbar */
.adm-cal-toolbar[b-ggad3vgsg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.adm-cal-toolbar-left[b-ggad3vgsg9], .adm-cal-toolbar-right[b-ggad3vgsg9] { display: flex; gap: 4px; }

.adm-cal-range-title[b-ggad3vgsg9] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
}

.adm-cal-btn[b-ggad3vgsg9] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-black-10);
    color: var(--vh-black-80);
    border-radius: var(--vh-radius);
    padding: 5px 10px;
    font-size: .85rem;
    cursor: pointer;
}

.adm-cal-btn:hover:not(:disabled)[b-ggad3vgsg9] { background: var(--vh-black-20); }
.adm-cal-btn.active[b-ggad3vgsg9] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }
.adm-cal-btn.primary[b-ggad3vgsg9] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }
.adm-cal-btn.danger[b-ggad3vgsg9] { background: var(--vh-danger); border-color: var(--vh-danger); color: var(--vh-on-primary); }
.adm-cal-btn:disabled[b-ggad3vgsg9] {
    background: var(--vh-disabled-bg);
    border-color: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

/* grid */
.adm-cal-grid-wrap[b-ggad3vgsg9] { position: relative; overflow-x: auto; }

.adm-cal-overlay[b-ggad3vgsg9] {
    position: absolute;
    inset: 0;
    /* surface at 60% — keeps the veil color-scheme-correct in dark mode */
    background: color-mix(in srgb, var(--vh-surface) 60%, var(--vh-transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.adm-cal-spinner[b-ggad3vgsg9] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: adm-cal-spin-b-ggad3vgsg9 .8s linear infinite;
}

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

.adm-cal-grid[b-ggad3vgsg9] { min-width: 760px; }

.adm-cal-grid-head[b-ggad3vgsg9] {
    display: grid;
    grid-template-columns: 56px repeat(auto-fit, minmax(0, 1fr));
    border-bottom: 2px solid var(--vh-black-20);
}

.adm-cal-gutter-head[b-ggad3vgsg9] {
    font-size: .72rem;
    color: var(--vh-text-muted);
    padding: 6px 4px;
    text-align: center;
}

.adm-cal-day-head[b-ggad3vgsg9] {
    text-align: center;
    font-weight: 600;
    font-size: .85rem;
    padding: 6px 4px;
    border-left: 1px solid var(--vh-black-10);
    color: var(--vh-black-80);
}

/* Soft tint from var(--vh-warning) over the surface — dark-mode safe. */
.adm-cal-day-head.today[b-ggad3vgsg9] { background: color-mix(in srgb, var(--vh-warning) 12%, var(--vh-surface)); }

.adm-cal-grid-body[b-ggad3vgsg9] {
    display: grid;
    grid-template-columns: 56px repeat(auto-fit, minmax(0, 1fr));
    position: relative;
}

.adm-cal-gutter[b-ggad3vgsg9] { position: relative; }

.adm-cal-hour-label[b-ggad3vgsg9] {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: .7rem;
    color: var(--vh-text-muted);
}

.adm-cal-day-col[b-ggad3vgsg9] {
    position: relative;
    border-left: 1px solid var(--vh-black-10);
    cursor: pointer;
}

.adm-cal-day-col:hover[b-ggad3vgsg9] { background: var(--vh-black-10); }

.adm-cal-hour-line[b-ggad3vgsg9] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--vh-black-10);
    pointer-events: none;
}

.adm-cal-hour-line.business[b-ggad3vgsg9] { border-top-color: var(--vh-black-20); }

.adm-cal-event[b-ggad3vgsg9] {
    position: absolute;
    border-radius: var(--vh-radius-sm);
    padding: 1px 4px;
    font-size: .7rem;
    line-height: 1.15;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vh-surface) 70%, var(--vh-transparent));
    z-index: 5;
}

.adm-cal-event-time[b-ggad3vgsg9] { font-weight: 700; margin-right: 4px; }
.adm-cal-event-title[b-ggad3vgsg9] { white-space: nowrap; }

.adm-cal-now[b-ggad3vgsg9] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid var(--vh-danger);
    z-index: 6;
    pointer-events: none;
}

/* modals */
.adm-cal-backdrop[b-ggad3vgsg9] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1040;
}

.adm-cal-modal[b-ggad3vgsg9] {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 94vw);
    max-height: 84vh;
    overflow-y: auto;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-modal);
    z-index: 1050;
}

.adm-cal-modal-head[b-ggad3vgsg9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--vh-black-20);
}

.adm-cal-modal-head h4[b-ggad3vgsg9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
}

.adm-cal-modal-body[b-ggad3vgsg9] { padding: 16px 18px; }

.adm-cal-modal-foot[b-ggad3vgsg9] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--vh-black-20);
    position: relative;
}

.adm-cal-foot-left[b-ggad3vgsg9] { margin-right: auto; }

/* gear dropdown + menus */
.adm-cal-gear[b-ggad3vgsg9] { position: relative; }

.adm-cal-menu[b-ggad3vgsg9] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 240px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.adm-cal-menu-item[b-ggad3vgsg9] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    text-align: left;
    width: 100%;
    padding: 8px 14px;
    font-size: .85rem;
    color: var(--vh-black-80);
    cursor: pointer;
}

.adm-cal-menu-item:hover[b-ggad3vgsg9] { background: var(--vh-black-10); }

/* configure-slots form */
.adm-cal-radio-row[b-ggad3vgsg9] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.adm-cal-radio[b-ggad3vgsg9] { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.adm-cal-radio-block[b-ggad3vgsg9] { display: block; font-weight: 600; margin: 8px 0 4px; }

/* native checks/radios follow the design system accent (design-system.md §5) */
.adm-cal-check input[b-ggad3vgsg9],
.adm-cal-radio input[b-ggad3vgsg9] { accent-color: var(--vh-primary); }

.adm-cal-field[b-ggad3vgsg9] { margin-bottom: 12px; }
.adm-cal-field label[b-ggad3vgsg9] { display: block; font-weight: 600; margin-bottom: 4px; font-size: .85rem; }
.adm-cal-field input[b-ggad3vgsg9] {
    width: 100%;
    max-width: 280px;
    padding: 6px 8px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
}
.adm-cal-field input:focus[b-ggad3vgsg9] { outline: none; border-color: var(--vh-input-focus); }

.adm-cal-days[b-ggad3vgsg9] { display: flex; flex-wrap: wrap; gap: 12px; }

.adm-cal-duration-row[b-ggad3vgsg9] { display: flex; gap: 16px; flex-wrap: wrap; }

.adm-cal-hint[b-ggad3vgsg9] { font-size: .85rem; color: var(--vh-text-muted); margin-bottom: 8px; }

.adm-cal-ranges[b-ggad3vgsg9] { display: flex; flex-direction: column; gap: 8px; }

.adm-cal-range-row[b-ggad3vgsg9] { display: flex; gap: 8px; align-items: center; }
.adm-cal-range-row input[b-ggad3vgsg9] {
    width: 130px;
    padding: 6px 8px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
}
.adm-cal-range-row input:focus[b-ggad3vgsg9] { outline: none; border-color: var(--vh-input-focus); }

/* transfer picker (ui-combos Tipo 2 = shared VhDropdown) */
.adm-cal-transfer[b-ggad3vgsg9] { max-width: 320px; }
/* /Pages/Admin/Calendar/SlotInfo.razor.rz.scp.css */
/* Admin SlotInfo — legacy SlotInfo.cshtml card.
   Colors come from the design-system tokens (Documentation/design-system.md). */

.adm-csi-gate[b-4gqztnjwcx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 16px;
    color: var(--vh-text-muted);
    font-size: 1.05rem;
}

.adm-csi-gate i[b-4gqztnjwcx] { font-size: 2rem; }

.adm-csi-page[b-4gqztnjwcx] { padding: 1rem 1.5rem 2.5rem; }

.adm-csi-loading[b-4gqztnjwcx] { display: flex; justify-content: center; padding: 48px 0; }

.adm-csi-spinner[b-4gqztnjwcx] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: adm-csi-spin-b-4gqztnjwcx .8s linear infinite;
}

@keyframes adm-csi-spin-b-4gqztnjwcx { to { transform: rotate(360deg); } }

.adm-csi-card[b-4gqztnjwcx] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 24px;
    max-width: 640px;
}

.adm-csi-title[b-4gqztnjwcx] {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
}

.adm-csi-btn[b-4gqztnjwcx] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-black-10);
    color: var(--vh-black-80);
    border-radius: var(--vh-radius);
    padding: 7px 14px;
    cursor: pointer;
    margin-top: 8px;
}

.adm-csi-btn.primary[b-4gqztnjwcx] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }
.adm-csi-btn:disabled[b-4gqztnjwcx] {
    background: var(--vh-disabled-bg);
    border-color: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}
/* /Pages/Admin/Candidates/Index.razor.rz.scp.css */
/* Candidate admin — legacy admin grid layout restyled with the design-system
   tokens (Documentation/design-system.md): primary var(--vh-primary) actions, ds-table
   header/hover, ds pager. Length menu = shared VhDropdown (ui-combos Type 2).
   Page chrome = ABP-default PageHeader + VhFiltersCard (design-system §12);
   the page sits on the normal LeptonX content flow. */

.adc-gate[b-b5milwzjm1] {
    margin: 4rem auto;
    text-align: center;
    color: var(--vh-text-muted);
    font-size: 1rem;
}

.adc-card[b-b5milwzjm1] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 1.25rem 1.5rem 1.5rem;
}

/* ---- filters (VhFiltersCard content: search row + collapsible checkboxes) ---- */
.adc-filter-checks[b-b5milwzjm1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.adc-filter-search[b-b5milwzjm1] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.adc-filter-label[b-b5milwzjm1] {
    font-size: .8rem;
    color: var(--vh-text-muted);
    white-space: nowrap;
}

.adc-check[b-b5milwzjm1] {
    font-size: .85rem;
    color: var(--vh-text-body);
    cursor: pointer;
    user-select: none;
}
.adc-check input[b-b5milwzjm1] { margin-right: .35rem; accent-color: var(--vh-primary); }

.adc-search-group[b-b5milwzjm1] { display: flex; width: 280px; }
.adc-search-group .adc-input[b-b5milwzjm1] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.adc-search-btn[b-b5milwzjm1] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 1rem;
}

.adc-input[b-b5milwzjm1] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .5rem .75rem;
    font-size: .85rem;
    color: var(--vh-text-body);
    background: var(--vh-surface);
}
.adc-input:focus[b-b5milwzjm1] { outline: none; border-color: var(--vh-input-focus); }
.adc-input[readonly][b-b5milwzjm1], .adc-input[disabled][b-b5milwzjm1] { background: var(--vh-input-disabled-bg); }

/* ---- buttons ---- */
.adc-btn[b-b5milwzjm1] {
    border: 1px solid var(--vh-transparent);
    border-radius: var(--vh-radius);
    padding: .45rem .9rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.adc-btn:disabled[b-b5milwzjm1] {
    background: var(--vh-disabled-bg);
    border-color: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.adc-btn-primary[b-b5milwzjm1] { background: var(--vh-primary); color: var(--vh-on-primary); }
.adc-btn-primary:hover:not(:disabled)[b-b5milwzjm1] { background: var(--vh-primary-hover); }

.adc-btn-light[b-b5milwzjm1] {
    background: var(--vh-gray-10);
    color: var(--vh-text-body);
    border-color: var(--vh-gray-30);
}
.adc-btn-light:hover:not(:disabled)[b-b5milwzjm1] { background: var(--vh-gray-20); }

/* ---- table ---- */
.adc-table-wrap[b-b5milwzjm1] { overflow-x: auto; }

.adc-table[b-b5milwzjm1] {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    color: var(--vh-text-body);
}

.adc-table th[b-b5milwzjm1] {
    text-align: left;
    color: var(--vh-text-heading);
    border-bottom: 2px solid var(--vh-black-20);
    font-weight: 700;
    padding: 9px 12px;
    white-space: nowrap;
}

.adc-table td[b-b5milwzjm1] {
    padding: 9px 12px;
    border-top: 1px solid var(--vh-black-10);
    white-space: nowrap;
}

.adc-table tbody tr:hover[b-b5milwzjm1] { background: var(--vh-gray-10); }

.adc-empty[b-b5milwzjm1] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 1.25rem !important;
}

.adc-link[b-b5milwzjm1] { color: var(--vh-primary); text-decoration: none; }
.adc-link:hover[b-b5milwzjm1] { text-decoration: underline; }

.adc-label[b-b5milwzjm1] {
    display: inline-block;
    border-radius: var(--vh-radius-sm);
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .5rem;
    color: var(--vh-on-primary);
}
.adc-label-yes[b-b5milwzjm1] { background: var(--vh-success); }
.adc-label-no[b-b5milwzjm1] { background: var(--vh-black-30); }

/* ---- row actions / generic dropdown ---- */
.adc-dd[b-b5milwzjm1] { position: relative; display: inline-block; }

.adc-actions-btn[b-b5milwzjm1] { padding: .35rem .7rem; }
.adc-caret[b-b5milwzjm1] { font-size: .65rem; margin-left: .15rem; }

.adc-dd-menu[b-b5milwzjm1] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 230px;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    padding: .3rem 0;
}

.adc-dd-menu-up[b-b5milwzjm1] { top: auto; bottom: calc(100% + 4px); min-width: 70px; }

.adc-dd-item[b-b5milwzjm1] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: var(--vh-transparent);
    padding: .5rem .9rem;
    font-size: .82rem;
    color: var(--vh-text-body);
    cursor: pointer;
}
.adc-dd-item:hover[b-b5milwzjm1] { background: var(--vh-gray-10); color: var(--vh-primary); }

/* ---- footer / pager ---- */
.adc-foot[b-b5milwzjm1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    font-size: .8rem;
    color: var(--vh-text-muted);
}

.adc-foot-left[b-b5milwzjm1] { display: flex; align-items: center; gap: .5rem; }
.adc-foot-sep[b-b5milwzjm1] { color: var(--vh-gray-30); }
.adc-foot-left[b-b5milwzjm1]  .vh-dd-btn { min-width: 70px; padding: 3px 10px; }
.adc-foot-left[b-b5milwzjm1]  .vh-dd-menu { min-width: 70px; }

.adc-pager[b-b5milwzjm1] { display: flex; gap: .25rem; }

.adc-page-btn[b-b5milwzjm1] {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-sm);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font-size: .78rem;
    cursor: pointer;
}
.adc-page-btn:hover:not(:disabled):not(.adc-page-active)[b-b5milwzjm1] { background: var(--vh-gray-10); }
.adc-page-btn:disabled[b-b5milwzjm1] { color: var(--vh-gray-40); cursor: not-allowed; }
.adc-page-active[b-b5milwzjm1] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }

/* ---- modals ---- */
.adc-modal-backdrop[b-b5milwzjm1] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--vh-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem 1rem;
    overflow-y: auto;
}

.adc-modal[b-b5milwzjm1] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: 560px;
    max-width: 100%;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

/* size modifiers named by real width: base 560 < lg 720 < xl 760 */
.adc-modal-xl[b-b5milwzjm1] { width: 760px; }
.adc-modal-lg[b-b5milwzjm1] { width: 720px; }

.adc-modal-head[b-b5milwzjm1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem .85rem;
    border-bottom: 1px solid var(--vh-black-10);
}

.adc-modal-title[b-b5milwzjm1] { margin: 0; font-size: 1rem; font-weight: 600; font-family: var(--vh-font-heading); color: var(--vh-text-heading); }

.adc-modal-close[b-b5milwzjm1] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-gray-50);
    font-size: .95rem;
    cursor: pointer;
}
.adc-modal-close:hover[b-b5milwzjm1] { color: var(--vh-gray-90); }

.adc-tabs[b-b5milwzjm1] {
    padding: .7rem 1.5rem 0;
    border-bottom: 1px solid var(--vh-black-10);
}

.adc-tab[b-b5milwzjm1] {
    display: inline-block;
    padding: .35rem .15rem .6rem;
    font-size: .85rem;
    color: var(--vh-primary);
}
.adc-tab-active[b-b5milwzjm1] { border-bottom: 2px solid var(--vh-primary); font-weight: 600; }

.adc-modal-body[b-b5milwzjm1] { padding: 1.25rem 1.5rem; }
.adc-modal-body-roomy[b-b5milwzjm1] { padding: 1.75rem 2.25rem .75rem; }

.adc-modal-foot[b-b5milwzjm1] {
    display: flex;
    justify-content: flex-end;
    padding: .9rem 1.5rem 1.1rem;
    border-top: 1px solid var(--vh-black-10);
}

.adc-modal-foot-split[b-b5milwzjm1] { justify-content: space-between; }
.adc-foot-actions[b-b5milwzjm1] { display: flex; gap: .5rem; }

/* ---- edit modal ---- */
.adc-edit-top[b-b5milwzjm1] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: .5rem;
}

.adc-avatar-box[b-b5milwzjm1] { flex: 0 0 128px; text-align: center; padding-top: .5rem; }

.adc-avatar[b-b5milwzjm1] {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--vh-black-10);
}

.adc-avatar-fallback[b-b5milwzjm1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
    font-size: 2rem;
    font-weight: 600;
}

.adc-edit-fields[b-b5milwzjm1] { flex: 1; }

.adc-field[b-b5milwzjm1] { margin-bottom: .9rem; }
.adc-field label[b-b5milwzjm1] {
    display: block;
    font-size: .8rem;
    color: var(--vh-text-muted);
    margin-bottom: .35rem;
}

.adc-edit-checks[b-b5milwzjm1] { display: flex; gap: 1.5rem; margin: .35rem 0 1rem; }

.adc-section-label[b-b5milwzjm1] {
    display: block;
    font-size: .8rem;
    color: var(--vh-text-muted);
    margin-bottom: .5rem;
}

.adc-pills[b-b5milwzjm1] { display: flex; flex-wrap: wrap; gap: 0; }

.adc-pill[b-b5milwzjm1] {
    border: 1px solid var(--vh-gray-30);
    padding: .4rem .8rem;
    font-size: .78rem;
    color: var(--vh-gray-90);
    cursor: pointer;
    user-select: none;
    background: var(--vh-surface);
}
.adc-pill:first-child[b-b5milwzjm1] { border-radius: var(--vh-radius-pill) 0 0 var(--vh-radius-pill); }
.adc-pill:last-child[b-b5milwzjm1] { border-radius: 0 var(--vh-radius-pill) var(--vh-radius-pill) 0; }
.adc-pill + .adc-pill[b-b5milwzjm1] { margin-left: -1px; }
.adc-pill input[b-b5milwzjm1] { margin-right: .3rem; }
.adc-pill-active[b-b5milwzjm1] { background: var(--vh-primary-soft); border-color: var(--vh-primary); color: var(--vh-primary); font-weight: 600; }

/* ---- comparer modal ---- */
.adc-invite-note[b-b5milwzjm1] { font-size: .85rem; color: var(--vh-gray-90); margin: 0 0 1rem; }

.adc-compare-row[b-b5milwzjm1] {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.adc-compare-card[b-b5milwzjm1] {
    flex: 1;
    min-width: 270px;
    max-width: 310px;
    border: 1px solid var(--vh-black-10);
    border-radius: var(--vh-radius-chip);
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .3rem;
}

.adc-avatar-lg[b-b5milwzjm1] { width: 110px; height: 110px; margin-bottom: .6rem; }

.adc-compare-name[b-b5milwzjm1] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--vh-black-90);
    text-decoration: none;
    min-height: 1.4rem;
}
.adc-compare-name:hover[b-b5milwzjm1] { color: var(--vh-primary); }

.adc-compare-line[b-b5milwzjm1] { font-size: .8rem; color: var(--vh-gray-90); }

.adc-compare-premium[b-b5milwzjm1] { font-size: .88rem; font-weight: 700; color: var(--vh-gray-90); margin: .8rem 0 .9rem; }

.adc-keep-btn[b-b5milwzjm1] { border-radius: var(--vh-radius-pill); padding: .5rem 1.6rem; }
/* /Pages/Admin/CompanyInterviews/Index.razor.rz.scp.css */
/* Admin Company Interviews — legacy AspNetZero portlet (always-visible
   filters, grid + DataTables footer) on the design-system tokens
   (Documentation/design-system.md): primary actions var(--vh-primary), table
   header/hover + pager from the ds-table pattern (/design-system §8).
   Page chrome: ABP-default PageHeader + VhFiltersCard (design-system §12)
   on the normal LeptonX content flow; only the page's own skins live
   here. Type 2 dropdowns = shared VhDropdown. */

.aci-loader[b-4c5khtvyjj] { display: flex; justify-content: center; padding: 4rem 0; }
.aci-spinner[b-4c5khtvyjj] { width: 36px; height: 36px; border: 3px solid var(--vh-black-20); border-top-color: var(--vh-primary); border-radius: 50%; animation: aci-spin-b-4c5khtvyjj .8s linear infinite; }
@keyframes aci-spin-b-4c5khtvyjj { to { transform: rotate(360deg); } }

.aci-private[b-4c5khtvyjj] { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 4rem 0; color: var(--vh-text-muted); }
.aci-private i[b-4c5khtvyjj] { font-size: 2rem; }

.aci-card[b-4c5khtvyjj] { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-md); box-shadow: var(--vh-shadow-card); padding: 1.25rem; }

/* ---- Search (Type 5b — submit on button/Enter, like the legacy), now the
   filters-card quick-search row: stretches like /identity/users ---- */
.aci-search-group[b-4c5khtvyjj] { flex: 1; min-width: 0; }
.aci-search[b-4c5khtvyjj] { display: flex; max-width: 100%; }
.aci-search input[b-4c5khtvyjj] { flex: 1; min-width: 0; border: 1px solid var(--vh-input-border); border-right: 0; border-radius: var(--vh-radius) 0 0 var(--vh-radius); padding: .45rem .75rem; font-size: .85rem; color: var(--vh-text-body); outline: none; }
.aci-search input:focus[b-4c5khtvyjj] { border-color: var(--vh-input-focus); }
.aci-search-btn[b-4c5khtvyjj] { border: 0; background: var(--vh-primary); color: var(--vh-on-primary); border-radius: 0 var(--vh-radius) var(--vh-radius) 0; padding: .45rem .9rem; cursor: pointer; }
.aci-search-btn:hover[b-4c5khtvyjj] { background: var(--vh-primary-hover); }

/* ---- Fixed filters (Type 2 — shared VhDropdown), re-homed in the
   VhFiltersCard advanced region; the wrapper owns the row layout ---- */
.aci-filters[b-4c5khtvyjj] { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; flex: 1; }
.aci-filters[b-4c5khtvyjj]  .vh-dd-btn { min-width: 130px; }
.aci-filters[b-4c5khtvyjj]  .vh-dd-menu { min-width: 220px; }

/* Used directly by the page markup (search label + row-actions backdrop) */
.aci-dd-label[b-4c5khtvyjj] { font-size: .78rem; color: var(--vh-text-muted); font-weight: 500; margin: 0 0 .25rem; display: block; }
.aci-dd-backdrop[b-4c5khtvyjj] { position: fixed; inset: 0; z-index: 24; }

/* ---- Table (ds-table reference) ---- */
.aci-table-wrap[b-4c5khtvyjj] { overflow-x: auto; }
.aci-table[b-4c5khtvyjj] { width: 100%; border-collapse: collapse; font-size: .82rem; color: var(--vh-text-body); }
.aci-table th[b-4c5khtvyjj] { text-align: left; font-weight: 700; color: var(--vh-text-heading); border-bottom: 2px solid var(--vh-black-20); padding: 9px 12px; white-space: nowrap; }
.aci-table td[b-4c5khtvyjj] { border-top: 1px solid var(--vh-black-10); padding: 9px 12px; vertical-align: middle; white-space: nowrap; }
.aci-table tbody tr:hover[b-4c5khtvyjj] { background: var(--vh-gray-10); }
.aci-table a[b-4c5khtvyjj] { color: var(--vh-primary); text-decoration: none; }
.aci-table a:hover[b-4c5khtvyjj] { text-decoration: underline; }
.aci-empty[b-4c5khtvyjj] { text-align: center; color: var(--vh-text-muted); padding: 1.4rem 0 !important; }

.aci-sortable[b-4c5khtvyjj] { cursor: pointer; user-select: none; }
.aci-sortable:hover[b-4c5khtvyjj] { background: var(--vh-gray-10); }
.aci-sort-icon[b-4c5khtvyjj] { margin-left: .3rem; font-size: .7rem; color: var(--vh-primary); }
.aci-sort-idle[b-4c5khtvyjj] { color: var(--vh-black-40); }

/* ---- Badges (status pills — design-system semantic tokens) ---- */
.aci-badge[b-4c5khtvyjj] { display: inline-block; padding: .2rem .6rem; border-radius: var(--vh-radius-pill); font-size: .74rem; font-weight: 500; color: var(--vh-on-primary); max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.aci-badge-success[b-4c5khtvyjj] { background: var(--vh-success); }
.aci-badge-danger[b-4c5khtvyjj] { background: var(--vh-danger); color: var(--vh-gray-20); }
.aci-badge-warning[b-4c5khtvyjj] { background: var(--vh-warning); color: var(--vh-black-90); }
.aci-badge-info[b-4c5khtvyjj] { background: var(--vh-primary); }

/* ---- Row actions (legacy dropleft — an ACTIONS menu, stays hand-rolled) ---- */
.aci-actions-cell[b-4c5khtvyjj] { width: 1%; }
.aci-actions[b-4c5khtvyjj] { position: relative; display: flex; justify-content: center; }
.aci-actions-btn[b-4c5khtvyjj] { border: 1px solid var(--vh-gray-30); background: var(--vh-gray-10); color: var(--vh-black-60); border-radius: var(--vh-radius); padding: .3rem .55rem; cursor: pointer; }
.aci-actions-btn:hover[b-4c5khtvyjj] { background: var(--vh-gray-20); }
.aci-actions-menu[b-4c5khtvyjj] { position: absolute; z-index: 25; top: 50%; right: calc(100% + 6px); transform: translateY(-50%); min-width: 230px; background: var(--vh-surface); border-radius: var(--vh-radius-md); box-shadow: var(--vh-shadow-pop); padding: .3rem 0; display: flex; flex-direction: column; }
.aci-actions-item[b-4c5khtvyjj] { display: block; text-align: left; background: none; border: 0; width: 100%; padding: .45rem .9rem; font-size: .82rem; color: var(--vh-text-body); cursor: pointer; text-decoration: none; }
.aci-actions-item:hover[b-4c5khtvyjj] { background: var(--vh-gray-10); color: var(--vh-primary); text-decoration: none; }
.aci-actions-none[b-4c5khtvyjj] { padding: .45rem .9rem; font-size: .8rem; color: var(--vh-gray-40); }

/* ---- Footer: info + page size + pager (ds-table pager) ---- */
.aci-footer[b-4c5khtvyjj] { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .9rem; }
.aci-info[b-4c5khtvyjj] { font-size: .8rem; color: var(--vh-text-muted); }
.aci-pagesize[b-4c5khtvyjj] { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--vh-text-muted); }
.aci-pagesize[b-4c5khtvyjj]  .vh-dd-btn { min-width: 70px; padding: .25rem .55rem; }
.aci-pagesize[b-4c5khtvyjj]  .vh-dd-menu { min-width: 70px; }
.aci-pager[b-4c5khtvyjj] { display: flex; gap: .25rem; margin-left: auto; }
.aci-page-btn[b-4c5khtvyjj] { min-width: 30px; height: 30px; border: 1px solid var(--vh-gray-30); background: var(--vh-surface); color: var(--vh-text-body); border-radius: var(--vh-radius-sm); font-size: .8rem; cursor: pointer; }
/* exclude the active page so no !important patch is needed (adc/eml idiom) */
.aci-page-btn:hover:not(:disabled):not(.aci-page-active)[b-4c5khtvyjj] { background: var(--vh-gray-10); }
.aci-page-btn:disabled[b-4c5khtvyjj] { color: var(--vh-gray-40); cursor: not-allowed; }
.aci-page-active[b-4c5khtvyjj] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }

@media (max-width: 900px) {
    .aci-pager[b-4c5khtvyjj] { margin-left: 0; }
}
/* /Pages/Admin/DynamicReports/Index.razor.rz.scp.css */
/* /admin/dynamic-reports — legacy /App/DynamicReport layout (filter card,
   DataTables grid, Actions dropdown per row, footer chrome, modal-lg) restyled
   with the design-system tokens (Documentation/design-system.md): primary
   var(--vh-primary) actions, ds-table header/hover, ds pager. Length menu = VhDropdown.
   Page chrome is the ABP default: PageHeader + VhFiltersCard (search row). */

.drx-page[b-30x3boqe7k] {
    color: var(--vh-text-body);
    font-size: 14px;
}

/* .drx-content carries no width cap: page content fills the normal LeptonX
   flow (page-chrome standard, design-system.md §12) like /admin/candidates. */

/* Admin-only Add button — right-aligned action row under the header. */
.drx-actions-row[b-30x3boqe7k] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.drx-gate[b-30x3boqe7k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 16px;
    color: var(--vh-text-muted);
    font-size: 15px;
}

.drx-gate i[b-30x3boqe7k] { font-size: 28px; }

/* ---- buttons ---- */
.drx-btn[b-30x3boqe7k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--vh-transparent);
    border-radius: var(--vh-radius);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: var(--vh-gray-10);
    color: var(--vh-gray-90);
}

.drx-btn:disabled[b-30x3boqe7k] {
    background: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.drx-btn-primary[b-30x3boqe7k] { background: var(--vh-primary); color: var(--vh-on-primary); }
.drx-btn-primary:hover[b-30x3boqe7k] { background: var(--vh-primary-hover); }

.drx-btn-danger[b-30x3boqe7k] { background: var(--vh-danger); color: var(--vh-on-primary); }
.drx-btn-danger:active:not(:disabled)[b-30x3boqe7k] { background: var(--vh-danger-active); }

/* legacy "info" button — solid primary-hover variation (design-system.md §9) */
.drx-btn-info[b-30x3boqe7k] { background: var(--vh-primary-hover); color: var(--vh-on-primary); }
.drx-btn-info:hover[b-30x3boqe7k] { background: var(--vh-primary); }

.drx-btn-default[b-30x3boqe7k] { background: var(--vh-gray-10); color: var(--vh-text-body); }
.drx-btn-default:hover[b-30x3boqe7k] { background: var(--vh-gray-20); }

/* ---- card + filter ---- */
.drx-card[b-30x3boqe7k] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 20px 24px 16px;
}

/* Search form lives in the VhFiltersCard search slot (flex row). */
.drx-filter[b-30x3boqe7k] { flex: 1; min-width: 0; }

.drx-filter-label[b-30x3boqe7k] {
    display: block;
    margin-bottom: 6px;
    color: var(--vh-text-muted);
}

.drx-search-group[b-30x3boqe7k] {
    display: flex;
    max-width: 640px;
}

.drx-search-group input[b-30x3boqe7k] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--vh-input-border);
    border-right: none;
    border-radius: var(--vh-radius) 0 0 var(--vh-radius);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--vh-text-body);
    outline: none;
}

.drx-search-group input:focus[b-30x3boqe7k] { border-color: var(--vh-input-focus); }
.drx-search-group input[b-30x3boqe7k]::placeholder { color: var(--vh-text-placeholder); }

.drx-search-btn[b-30x3boqe7k] {
    border: none;
    border-radius: 0 var(--vh-radius) var(--vh-radius) 0;
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    padding: 0 16px;
    cursor: pointer;
}

.drx-search-btn:hover[b-30x3boqe7k] { background: var(--vh-primary-hover); }

/* ---- table ---- */
.drx-table-wrap[b-30x3boqe7k] { position: relative; }

.drx-overlay[b-30x3boqe7k] {
    position: absolute;
    inset: 0;
    /* surface at 60% — keeps the veil color-scheme-correct in dark mode */
    background: color-mix(in srgb, var(--vh-surface) 60%, var(--vh-transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.drx-spinner[b-30x3boqe7k] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: drx-spin-b-30x3boqe7k .8s linear infinite;
}

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

.drx-table[b-30x3boqe7k] {
    width: 100%;
    border-collapse: collapse;
}

.drx-table th[b-30x3boqe7k] {
    text-align: left;
    color: var(--vh-text-heading);
    border-bottom: 2px solid var(--vh-black-20);
    font-weight: 700;
    padding: 9px 12px;
    white-space: nowrap;
}

.drx-table td[b-30x3boqe7k] {
    padding: 9px 12px;
    border-top: 1px solid var(--vh-black-10);
    vertical-align: middle;
    color: var(--vh-text-body);
    word-break: break-word;
}

.drx-table tbody tr:hover[b-30x3boqe7k] { background: var(--vh-gray-10); }

.drx-col-action[b-30x3boqe7k] { width: 130px; white-space: nowrap; }
.drx-col-dept[b-30x3boqe7k] { width: 160px; }
.drx-col-name[b-30x3boqe7k] { min-width: 200px; }

.drx-empty[b-30x3boqe7k] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 26px 12px !important;
}

/* placeholder row keeps the card surface — no hover tint, no !important war */
.drx-table tbody tr.drx-empty-row:hover[b-30x3boqe7k] { background: var(--vh-transparent); }

/* ---- row actions dropdown ---- */
.drx-actions[b-30x3boqe7k] { position: relative; display: inline-block; }

.drx-actions-btn[b-30x3boqe7k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: var(--vh-radius);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: 12.5px;
    padding: 7px 12px;
    cursor: pointer;
}

.drx-actions-btn:hover[b-30x3boqe7k] { background: var(--vh-primary-hover); }

.drx-actions-menu[b-30x3boqe7k] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 150px;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    padding: 6px 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
}

.drx-actions-menu button[b-30x3boqe7k] {
    border: none;
    background: none;
    text-align: left;
    padding: 9px 18px;
    font-size: 13px;
    color: var(--vh-text-body);
    cursor: pointer;
}

.drx-actions-menu button:hover[b-30x3boqe7k] { background: var(--vh-gray-10); color: var(--vh-primary); }

/* ---- footer (info + length + pager) ---- */
.drx-footer[b-30x3boqe7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
    color: var(--vh-text-muted);
}

.drx-footer-left[b-30x3boqe7k] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.drx-pagesize[b-30x3boqe7k] { display: inline-flex; align-items: center; gap: 6px; }

.drx-pagesize[b-30x3boqe7k]  .vh-dd-btn { min-width: 70px; padding: 3px 10px; }
.drx-pagesize[b-30x3boqe7k]  .vh-dd-menu { min-width: 70px; }

.drx-pager[b-30x3boqe7k] { display: inline-flex; gap: 5px; }

.drx-pager button[b-30x3boqe7k] {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-sm);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    cursor: pointer;
    font-size: 13px;
}

.drx-pager button:hover:not(:disabled):not(.drx-current)[b-30x3boqe7k] { background: var(--vh-gray-10); }

.drx-pager button.drx-current[b-30x3boqe7k] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }

.drx-pager button:disabled[b-30x3boqe7k] { color: var(--vh-gray-40); cursor: not-allowed; }

/* ---- click-outside backdrop for menus ---- */
.drx-backdrop[b-30x3boqe7k] {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--vh-transparent);
}

/* ---- modal (legacy #EditSql modal-lg) ---- */
.drx-modal-backdrop[b-30x3boqe7k] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1050;
    padding: 40px 16px;
    overflow-y: auto;
}

.drx-modal[b-30x3boqe7k] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: 100%;
    max-width: 800px;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

.drx-modal-header[b-30x3boqe7k] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--vh-black-10);
}

.drx-modal-header h5[b-30x3boqe7k] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    min-height: 19px;
}

.drx-modal-body[b-30x3boqe7k] {
    padding: 20px 24px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.drx-field[b-30x3boqe7k] { margin-bottom: 16px; }

.drx-field label[b-30x3boqe7k] {
    display: block;
    margin-bottom: 6px;
    color: var(--vh-text-body);
}

.drx-field input[b-30x3boqe7k],
.drx-field textarea[b-30x3boqe7k] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--vh-text-body);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.drx-field input:focus[b-30x3boqe7k],
.drx-field textarea:focus[b-30x3boqe7k] { border-color: var(--vh-input-focus); }

.drx-tsql[b-30x3boqe7k] {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    white-space: pre;
}

.drx-validation[b-30x3boqe7k] {
    display: block;
    margin-top: 4px;
    color: var(--vh-danger);
    font-size: 12px;
}

.drx-modal-footer[b-30x3boqe7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--vh-black-10);
}

.drx-modal-footer-right[b-30x3boqe7k] { display: inline-flex; gap: 8px; }

@media (max-width: 720px) {
    .drx-footer[b-30x3boqe7k] { flex-direction: column; align-items: flex-start; }
    .drx-col-dept[b-30x3boqe7k] { width: auto; }
}
/* /Pages/Admin/EmailLogs/Index.razor.rz.scp.css */
/* Email Logs — audit-logs-style admin grid restyled with the design-system
   tokens (Documentation/design-system.md), mirroring the wave-10 admin pages
   (adc-*). Page chrome is the ABP default: PageHeader + VhFiltersCard holding
   the panel trigger + recipient quick search; only the page's own filter
   skins live below. Collapsible filter panel (rendered inside the grid card);
   Details modal reuses SentEmailDetailBody. */

.eml-gate[b-h2tlmsicpf] {
    margin: 4rem auto;
    text-align: center;
    color: var(--vh-text-muted);
    font-size: 1rem;
}

.eml-card[b-h2tlmsicpf] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 1.25rem 1.5rem 1.5rem;
}

/* ---- filter-card controls (panel toggle + recipient quick search) ---- */
.eml-filter-toggle[b-h2tlmsicpf] { position: relative; }

.eml-filter-count[b-h2tlmsicpf] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    border-radius: var(--vh-radius-pill);
    font-size: .68rem;
    font-weight: 700;
    padding: .05rem .45rem;
}

.eml-caret[b-h2tlmsicpf] { font-size: .7rem; }

.eml-search-group[b-h2tlmsicpf] { display: flex; width: 300px; max-width: 100%; }
.eml-search-group .eml-input[b-h2tlmsicpf] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.eml-search-btn[b-h2tlmsicpf] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 1rem;
}

/* ---- collapsible filter panel ---- */
.eml-filter-panel[b-h2tlmsicpf] {
    border: 1px solid var(--vh-black-10);
    border-radius: var(--vh-radius-md);
    padding: 1rem 1.1rem .9rem;
    margin-bottom: 1.1rem;
    background: var(--vh-gray-10);
}

.eml-filter-grid[b-h2tlmsicpf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem 1.1rem;
}

.eml-field[b-h2tlmsicpf] { min-width: 0; }

.eml-filter-label[b-h2tlmsicpf] {
    display: block;
    font-size: .8rem;
    color: var(--vh-text-muted);
    margin-bottom: .45rem;
}

.eml-filter-actions[b-h2tlmsicpf] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .9rem;
}

/* Panel dropdowns stretch like the inputs next to them. */
.eml-filter-panel[b-h2tlmsicpf]  .vh-dd-block { width: 100%; }
.eml-filter-panel[b-h2tlmsicpf]  .vh-dd-block .vh-dd-btn { width: 100%; justify-content: space-between; }

.eml-input[b-h2tlmsicpf] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .5rem .75rem;
    font-size: .85rem;
    color: var(--vh-text-body);
    background: var(--vh-surface);
}
.eml-input:focus[b-h2tlmsicpf] { outline: none; border-color: var(--vh-input-focus); }

/* ---- buttons ---- */
.eml-btn[b-h2tlmsicpf] {
    border: 1px solid var(--vh-transparent);
    border-radius: var(--vh-radius);
    padding: .45rem .9rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.eml-btn:disabled[b-h2tlmsicpf] {
    background: var(--vh-disabled-bg);
    border-color: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.eml-btn-primary[b-h2tlmsicpf] { background: var(--vh-primary); color: var(--vh-on-primary); }
.eml-btn-primary:hover:not(:disabled)[b-h2tlmsicpf] { background: var(--vh-primary-hover); }

.eml-btn-light[b-h2tlmsicpf] {
    background: var(--vh-gray-10);
    color: var(--vh-text-body);
    border-color: var(--vh-gray-30);
}
.eml-btn-light:hover:not(:disabled)[b-h2tlmsicpf] { background: var(--vh-gray-20); }

.eml-details-btn[b-h2tlmsicpf] { padding: .3rem .6rem; font-size: .76rem; }

/* ---- table ---- */
.eml-table-wrap[b-h2tlmsicpf] { overflow-x: auto; }

.eml-table[b-h2tlmsicpf] {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    color: var(--vh-text-body);
}

.eml-table th[b-h2tlmsicpf] {
    text-align: left;
    color: var(--vh-text-heading);
    border-bottom: 2px solid var(--vh-black-20);
    font-weight: 700;
    padding: 9px 12px;
    white-space: nowrap;
}

.eml-table td[b-h2tlmsicpf] {
    padding: 9px 12px;
    border-top: 1px solid var(--vh-black-10);
    white-space: nowrap;
}

.eml-table tbody tr:hover[b-h2tlmsicpf] { background: var(--vh-gray-10); }

.eml-th-num[b-h2tlmsicpf], .eml-td-num[b-h2tlmsicpf] { text-align: right; }

.eml-td-subject[b-h2tlmsicpf], .eml-td-template[b-h2tlmsicpf] {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eml-empty[b-h2tlmsicpf] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 1.25rem !important;
}

.eml-none[b-h2tlmsicpf] { color: var(--vh-gray-40); }

.eml-link[b-h2tlmsicpf] { color: var(--vh-primary); text-decoration: none; }
.eml-link:hover[b-h2tlmsicpf] { text-decoration: underline; }

/* ---- status / delivery badges ---- */
.eml-badge[b-h2tlmsicpf] {
    display: inline-block;
    border-radius: var(--vh-radius-sm);
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .5rem;
    color: var(--vh-on-primary);
}
.eml-badge-green[b-h2tlmsicpf] { background: var(--vh-success); }
.eml-badge-red[b-h2tlmsicpf] { background: var(--vh-danger); }
.eml-badge-amber[b-h2tlmsicpf] { background: var(--vh-warning); color: var(--vh-black-90); }
.eml-badge-grey[b-h2tlmsicpf] { background: var(--vh-black-30); }

/* ---- footer / pager (adc idiom) ---- */
.eml-foot[b-h2tlmsicpf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    font-size: .8rem;
    color: var(--vh-text-muted);
}

.eml-foot-left[b-h2tlmsicpf] { display: flex; align-items: center; gap: .5rem; }
.eml-foot-sep[b-h2tlmsicpf] { color: var(--vh-gray-30); }
.eml-foot-left[b-h2tlmsicpf]  .vh-dd-btn { min-width: 70px; padding: 3px 10px; }
.eml-foot-left[b-h2tlmsicpf]  .vh-dd-menu { min-width: 70px; }

.eml-pager[b-h2tlmsicpf] { display: flex; gap: .25rem; }

.eml-page-btn[b-h2tlmsicpf] {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-sm);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font-size: .78rem;
    cursor: pointer;
}
.eml-page-btn:hover:not(:disabled):not(.eml-page-active)[b-h2tlmsicpf] { background: var(--vh-gray-10); }
.eml-page-btn:disabled[b-h2tlmsicpf] { color: var(--vh-gray-40); cursor: not-allowed; }
.eml-page-active[b-h2tlmsicpf] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }

/* ---- details modal ---- */
.eml-modal-backdrop[b-h2tlmsicpf] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--vh-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem 1rem;
    overflow-y: auto;
}

.eml-modal[b-h2tlmsicpf] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: 760px;
    max-width: 100%;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

.eml-modal-head[b-h2tlmsicpf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem .6rem;
}

.eml-modal-title[b-h2tlmsicpf] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
}

.eml-modal-close[b-h2tlmsicpf] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-gray-50);
    font-size: .95rem;
    cursor: pointer;
}
.eml-modal-close:hover[b-h2tlmsicpf] { color: var(--vh-gray-90); }

.eml-modal-meta[b-h2tlmsicpf] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: 0 1.5rem .85rem;
    font-size: .8rem;
    color: var(--vh-text-muted);
    border-bottom: 1px solid var(--vh-black-10);
}

.eml-modal-body[b-h2tlmsicpf] {
    padding: 1.1rem 1.5rem 1.35rem;
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
}
/* /Pages/Admin/HighFive/Index.razor.rz.scp.css */
.hf-page[b-8529e16347] {
    color: var(--vh-text-body);
}

.hf-layout[b-8529e16347] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    max-width: 1080px;
}

.hf-compose-card[b-8529e16347],
.hf-preview-card[b-8529e16347] {
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-card);
}

.hf-compose-card[b-8529e16347] {
    padding: 28px;
}

.hf-intro[b-8529e16347] {
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
}

.hf-mark[b-8529e16347] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--vh-tonal-amber-bd);
    border-radius: var(--vh-radius-lg);
    background: var(--vh-tonal-amber-bg);
    color: var(--vh-amber-700);
    font-size: 21px;
}

.hf-kicker[b-8529e16347] {
    display: block;
    margin-bottom: 4px;
    color: var(--vh-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
}

.hf-intro h2[b-8529e16347] {
    margin: 0 0 7px;
    color: var(--vh-text-heading);
    font-size: 22px;
    font-weight: 750;
}

.hf-intro p[b-8529e16347] {
    margin: 1px 0;
    color: var(--vh-text-body);
    font-size: 14px;
    line-height: 1.45;
}

.hf-label[b-8529e16347] {
    display: block;
    margin-bottom: 7px;
    color: var(--vh-text-heading);
    font-size: 13px;
    font-weight: 650;
}

[b-8529e16347] .hf-editor {
    min-height: 210px;
    resize: vertical;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: 13px 14px;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font-size: 14px;
    line-height: 1.55;
}

[b-8529e16347] .hf-editor:focus {
    border-color: var(--vh-primary);
    box-shadow: 0 0 0 3px rgb(var(--vh-primary-rgb) / .08);
    outline: none;
}

[b-8529e16347] .vh-mta-pop {
    min-width: 250px;
    max-width: 360px;
}

.hf-editor-meta[b-8529e16347] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 7px;
    color: var(--vh-text-muted);
    font-size: 12px;
}

.hf-count[b-8529e16347] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.hf-count.near-limit[b-8529e16347] {
    color: var(--vh-amber-700);
    font-weight: 700;
}

.hf-status[b-8529e16347] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
}

.hf-status.success[b-8529e16347] {
    border-color: var(--vh-success);
    background: var(--vh-success-soft);
    color: var(--vh-tonal-green-text);
}

.hf-status.warning[b-8529e16347] {
    border-color: var(--vh-tonal-amber-bd);
    background: var(--vh-tonal-amber-bg);
    color: var(--vh-tonal-amber-text);
}

.hf-status.error[b-8529e16347] {
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
}

.hf-actions[b-8529e16347] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--vh-line);
}

.hf-privacy[b-8529e16347] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--vh-text-muted);
    font-size: 12px;
}

.hf-send[b-8529e16347] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 112px;
    height: 40px;
    border: 1px solid var(--vh-primary);
    border-radius: var(--vh-radius);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, transform .12s;
}

.hf-send:hover:not(:disabled)[b-8529e16347] {
    border-color: var(--vh-primary-hover);
    background: var(--vh-primary-hover);
    transform: translateY(-1px);
}

.hf-send:disabled[b-8529e16347] {
    border-color: var(--vh-line);
    background: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.hf-spinner[b-8529e16347] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: var(--vh-transparent);
    border-radius: 50%;
    animation: hf-spin-b-8529e16347 .7s linear infinite;
}

.hf-preview-card[b-8529e16347] {
    align-self: start;
    padding: 20px;
}

.hf-preview-heading[b-8529e16347] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.hf-preview-heading > i[b-8529e16347] {
    color: var(--vh-primary);
    font-size: 22px;
}

.hf-preview-heading strong[b-8529e16347],
.hf-preview-heading span[b-8529e16347] {
    display: block;
}

.hf-preview-heading strong[b-8529e16347] {
    color: var(--vh-text-heading);
    font-size: 13px;
}

.hf-preview-heading span[b-8529e16347] {
    margin-top: 1px;
    color: var(--vh-text-muted);
    font-size: 11px;
}

.hf-slack-attachment[b-8529e16347] {
    min-height: 138px;
    border-left: 4px solid var(--vh-success);
    border-radius: 0 var(--vh-radius-md) var(--vh-radius-md) 0;
    padding: 12px 14px;
    background: var(--vh-surface-soft);
}

.hf-slack-attachment strong[b-8529e16347] {
    color: var(--vh-text-heading);
    font-size: 13px;
}

.hf-slack-attachment p[b-8529e16347] {
    margin: 8px 0 0;
    color: var(--vh-text-body);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hf-slack-attachment p.placeholder[b-8529e16347] {
    color: var(--vh-text-placeholder);
    font-style: italic;
}

.hf-tip[b-8529e16347] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    border-top: 1px solid var(--vh-line);
    padding-top: 16px;
    color: var(--vh-text-muted);
}

.hf-tip i[b-8529e16347] {
    margin-top: 2px;
    color: var(--vh-amber-700);
}

.hf-tip p[b-8529e16347] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

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

@media (max-width: 840px) {
    .hf-layout[b-8529e16347] {
        grid-template-columns: 1fr;
    }

    .hf-preview-card[b-8529e16347] {
        order: -1;
    }
}

@media (max-width: 560px) {
    .hf-compose-card[b-8529e16347] {
        padding: 20px 16px;
    }

    .hf-intro[b-8529e16347] {
        align-items: flex-start;
    }

    .hf-mark[b-8529e16347] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .hf-actions[b-8529e16347] {
        align-items: stretch;
        flex-direction: column;
    }

    .hf-send[b-8529e16347] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-send[b-8529e16347] {
        transition: none;
    }

    .hf-send:hover:not(:disabled)[b-8529e16347] {
        transform: none;
    }
}
/* /Pages/Admin/InviteCandidate/Index.razor.rz.scp.css */
/* /admin/invite-candidate — legacy /App/InviteCandidate layout (filter row,
   DataTable + footer chrome, centered modal) restyled with the design-system
   tokens (Documentation/design-system.md). Page chrome is the ABP default:
   PageHeader + VhFiltersCard; the legacy helper text + New Invite button sit
   in an action row between them. TM filter and length menu are the shared
   VhDropdown (ui-combos Type 2). */

.ic-page[b-xv7w70s3a5] {
    color: var(--vh-text-body);
}

/* ---- loader / permission gate ---- */
.ic-loader[b-xv7w70s3a5] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.ic-spinner[b-xv7w70s3a5] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: ic-spin-b-xv7w70s3a5 0.8s linear infinite;
}

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

.ic-private[b-xv7w70s3a5] {
    text-align: center;
    padding: 80px 0;
    color: var(--vh-text-muted);
}

.ic-private i[b-xv7w70s3a5] {
    font-size: 28px;
    margin-bottom: 12px;
}

/* ---- action row ---- */
/* .ic-content carries no width cap: filters + grid fill the normal LeptonX
   flow (page-chrome standard, design-system.md §12) like /admin/candidates. */

.ic-actions[b-xv7w70s3a5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ic-subtitle[b-xv7w70s3a5] {
    font-size: 13px;
    color: var(--vh-text-muted);
}

/* ---- buttons ---- */
.ic-btn-primary[b-xv7w70s3a5] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    border: none;
    border-radius: var(--vh-radius);
    padding: 9px 16px;
    font-size: 13px;
    cursor: pointer;
}

.ic-btn-primary:hover[b-xv7w70s3a5] { background: var(--vh-primary-hover); }

.ic-btn-success[b-xv7w70s3a5] {
    background: var(--vh-success);
    color: var(--vh-on-primary);
    border: none;
    border-radius: var(--vh-radius);
    padding: 9px 18px;
    font-size: 13px;
    cursor: pointer;
}

.ic-btn-default[b-xv7w70s3a5] {
    background: var(--vh-transparent);
    color: var(--vh-gray-90);
    border: 0;
    border-radius: var(--vh-radius-sm);
    padding: 9px 18px;
    font-size: 13px;
    cursor: pointer;
}

.ic-btn-default:hover:not(:disabled)[b-xv7w70s3a5] { background: var(--vh-gray-10); }

.ic-btn-success:hover:not(:disabled)[b-xv7w70s3a5] { background: var(--vh-success-hover); }

.ic-btn-primary:disabled[b-xv7w70s3a5],
.ic-btn-success:disabled[b-xv7w70s3a5],
.ic-btn-default:disabled[b-xv7w70s3a5] {
    background: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

/* ---- card + filters ---- */
.ic-card[b-xv7w70s3a5] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 20px;
    margin-bottom: 24px;
}

/* Filter form fills the VhFiltersCard search slot (flex row). */
.ic-filters[b-xv7w70s3a5] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.ic-filters label[b-xv7w70s3a5] {
    display: block;
    font-size: 13px;
    color: var(--vh-text-muted);
    margin-bottom: 6px;
}

.ic-filter-search input[b-xv7w70s3a5] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: 0 10px;
    font-size: 13px;
    color: var(--vh-text-body);
    background: var(--vh-surface);
    box-sizing: border-box;
}

.ic-filter-search input:focus[b-xv7w70s3a5] { border-color: var(--vh-input-focus); outline: none; }

.ic-filter-tm[b-xv7w70s3a5]  .vh-dd-btn { height: 38px; }

.ic-search-group[b-xv7w70s3a5] {
    display: flex;
}

.ic-search-group input[b-xv7w70s3a5] {
    border-radius: var(--vh-radius) 0 0 var(--vh-radius);
    flex: 1;
}

.ic-search-btn[b-xv7w70s3a5] {
    border-radius: 0 var(--vh-radius) var(--vh-radius) 0;
    height: 38px;
}

/* ---- table ---- */
.ic-table-wrap[b-xv7w70s3a5] {
    overflow-x: auto;
}

.ic-table[b-xv7w70s3a5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ic-table th[b-xv7w70s3a5],
.ic-table td[b-xv7w70s3a5] {
    padding: 9px 12px;
    text-align: left;
    white-space: nowrap;
}

.ic-table thead th[b-xv7w70s3a5] {
    color: var(--vh-text-heading);
    border-bottom: 2px solid var(--vh-black-20);
    font-weight: 700;
}

.ic-table td[b-xv7w70s3a5] {
    border-top: 1px solid var(--vh-black-10);
    color: var(--vh-text-body);
}

.ic-table tbody tr:hover[b-xv7w70s3a5] { background: var(--vh-gray-10); }

.ic-table a[b-xv7w70s3a5] {
    color: var(--vh-primary);
    text-decoration: none;
}

.ic-table a:hover[b-xv7w70s3a5] { text-decoration: underline; }

.ic-empty[b-xv7w70s3a5] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 24px 0;
}

/* ---- table footer ---- */
.ic-table-footer[b-xv7w70s3a5] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 13px;
    color: var(--vh-text-muted);
}

.ic-length[b-xv7w70s3a5] { display: inline-flex; align-items: center; gap: 6px; }
.ic-length[b-xv7w70s3a5]  .vh-dd-btn { min-width: 70px; padding: 3px 10px; }
.ic-length[b-xv7w70s3a5]  .vh-dd-menu { min-width: 70px; }

.ic-pager[b-xv7w70s3a5] {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.ic-pager button[b-xv7w70s3a5] {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-sm);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    cursor: pointer;
    font-size: 13px;
}

.ic-pager button:hover:not(:disabled)[b-xv7w70s3a5] { background: var(--vh-gray-10); }

.ic-pager button:disabled[b-xv7w70s3a5] {
    color: var(--vh-gray-40);
    cursor: not-allowed;
}

.ic-pager .ic-page-active[b-xv7w70s3a5] {
    background: var(--vh-primary);
    border-color: var(--vh-primary);
    color: var(--vh-on-primary);
}

/* ---- modal ---- */
.ic-modal-backdrop[b-xv7w70s3a5] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1050;
    padding: 48px 16px;
}

.ic-modal[b-xv7w70s3a5] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: 100%;
    max-width: 800px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.ic-modal-body[b-xv7w70s3a5] {
    padding: 24px;
}

.ic-form-group[b-xv7w70s3a5] {
    margin-bottom: 16px;
}

.ic-form-group label[b-xv7w70s3a5] {
    display: block;
    font-size: 13px;
    color: var(--vh-text-body);
    margin-bottom: 6px;
}

.ic-form-group input[type="text"][b-xv7w70s3a5],
.ic-form-group input[type="email"][b-xv7w70s3a5] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: 0 10px;
    font-size: 13px;
    box-sizing: border-box;
}

.ic-form-group input[type="text"]:focus[b-xv7w70s3a5],
.ic-form-group input[type="email"]:focus[b-xv7w70s3a5] { border-color: var(--vh-input-focus); outline: none; }

.ic-hint[b-xv7w70s3a5] {
    display: block;
    font-size: 12px;
    color: var(--vh-text-muted);
    margin-top: 4px;
}

/* legacy: .validationError { color: var(--vh-danger) } rendered as a <ul> per field */
.ic-validation[b-xv7w70s3a5] {
    color: var(--vh-danger);
    font-size: 12px;
    margin: 6px 0 0;
    padding-left: 18px;
}

.ic-modal-footer[b-xv7w70s3a5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    border-top: 1px solid var(--vh-black-10);
    padding-top: 16px;
}
/* /Pages/Admin/MockInterviews/Index.razor.rz.scp.css */
/* /admin/mock-interviews — legacy /App/MockInterviews look (Metronic admin):
   var(--vh-surface) card, search + collapsible advanced filters, striped grid,
   DataTables-style footer, dropleft actions menu. */

/* Page chrome: ABP-default PageHeader + right-aligned action row (design-system
   §12) on the normal LeptonX content flow; the card owns search + filters. */

/* CTA action row under the PageHeader */
.amk-actions-row[b-khv9vevjk2] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.amk-gate[b-khv9vevjk2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 4rem 1rem;
    color: var(--vh-text-muted);
    font-size: 1.05rem;
}

.amk-gate i[b-khv9vevjk2] {
    font-size: 2rem;
}

.amk-btn[b-khv9vevjk2] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    border-radius: var(--vh-radius);
    padding: .5rem .9rem;
    font-size: .9rem;
    cursor: pointer;
}

.amk-btn:hover[b-khv9vevjk2] {
    background: var(--vh-gray-10);
}

.amk-btn-primary[b-khv9vevjk2] {
    background: var(--vh-primary);
    border-color: var(--vh-primary);
    color: var(--vh-on-primary);
}

.amk-btn-primary:hover[b-khv9vevjk2] {
    background: var(--vh-primary-hover);
}

.amk-btn-success[b-khv9vevjk2] {
    background: var(--vh-success);
    border-color: var(--vh-success);
    color: var(--vh-on-primary);
}

.amk-btn-success:hover[b-khv9vevjk2] {
    background: var(--vh-success-hover);
}

.amk-card[b-khv9vevjk2] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 1.25rem;
}

/* ---- search + filters ---- */

.amk-search[b-khv9vevjk2] {
    display: flex;
    gap: 0;
}

.amk-search input[b-khv9vevjk2] {
    flex: 1;
    border: 1px solid var(--vh-input-border);
    border-right: 0;
    border-radius: var(--vh-input-radius) 0 0 var(--vh-input-radius);
    padding: .55rem .75rem;
    font-size: .92rem;
    outline: none;
}

.amk-search input:focus[b-khv9vevjk2] {
    border-color: var(--vh-input-focus);
}

.amk-search-btn[b-khv9vevjk2] {
    border: 1px solid var(--vh-primary);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    border-radius: 0 var(--vh-input-radius) var(--vh-input-radius) 0;
    padding: 0 1rem;
    cursor: pointer;
}

.amk-adv-toggle[b-khv9vevjk2] {
    background: none;
    border: none;
    color: var(--vh-primary);
    font-size: .88rem;
    padding: .6rem 0;
    cursor: pointer;
}

.amk-filters[b-khv9vevjk2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 2rem;
    padding-bottom: .75rem;
}

.amk-filter[b-khv9vevjk2] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.amk-filter label[b-khv9vevjk2] {
    font-size: .88rem;
    color: var(--vh-text-body);
}

.amk-select[b-khv9vevjk2] {
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .5rem .6rem;
    font-size: .9rem;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    width: 100%;
}

.amk-select:focus[b-khv9vevjk2] {
    border-color: var(--vh-input-focus);
    outline: none;
}

/* ---- table ---- */

.amk-table-wrap[b-khv9vevjk2] {
    overflow-x: auto;
    margin-top: .5rem;
}

.amk-table[b-khv9vevjk2] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.amk-table th[b-khv9vevjk2] {
    color: var(--vh-text-heading);
    border-bottom: 2px solid var(--vh-black-20);
    text-align: left;
    font-weight: 700;
    padding: 9px 12px;
    white-space: nowrap;
}

.amk-table td[b-khv9vevjk2] {
    padding: 9px 12px;
    border-top: 1px solid var(--vh-black-10);
    color: var(--vh-text-body);
    vertical-align: middle;
}

.amk-table tbody tr:hover[b-khv9vevjk2] {
    background: var(--vh-gray-10);
}

.amk-table a[b-khv9vevjk2] {
    color: var(--vh-primary);
    text-decoration: none;
}

.amk-table a:hover[b-khv9vevjk2] {
    text-decoration: underline;
}

.amk-sortable[b-khv9vevjk2] {
    cursor: pointer;
    user-select: none;
}

.amk-sortable i[b-khv9vevjk2] {
    margin-left: .3rem;
    color: var(--vh-black-40);
}

.amk-empty[b-khv9vevjk2] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 1.5rem 0 !important;
}

.amk-assignee[b-khv9vevjk2] {
    background: none;
    border: none;
    color: var(--vh-text-body);
    cursor: pointer;
    padding: 0;
    font-size: .9rem;
    text-decoration: underline dotted var(--vh-black-40);
}

.amk-assignee:hover[b-khv9vevjk2] {
    color: var(--vh-primary);
}

/* ---- actions dropdown (legacy dropleft) ---- */

.amk-actions-cell[b-khv9vevjk2] {
    width: 1%;
    white-space: nowrap;
}

.amk-dd[b-khv9vevjk2] {
    position: relative;
    display: inline-block;
}

.amk-dd-btn[b-khv9vevjk2] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-black-10);
    color: var(--vh-text-muted);
    border-radius: var(--vh-radius);
    padding: .35rem .6rem;
    cursor: pointer;
}

.amk-dd-backdrop[b-khv9vevjk2] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.amk-dd-menu[b-khv9vevjk2] {
    position: absolute;
    right: 100%;
    top: 0;
    margin-right: .25rem;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    min-width: 220px;
    z-index: 95;
    padding: .35rem 0;
}

.amk-dd-item[b-khv9vevjk2] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .5rem 1rem;
    font-size: .9rem;
    color: var(--vh-text-body);
    cursor: pointer;
}

.amk-dd-item:hover[b-khv9vevjk2] {
    background: var(--vh-gray-10);
    color: var(--vh-primary);
}

/* ---- footer / pagination ---- */

.amk-foot[b-khv9vevjk2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .9rem;
    font-size: .88rem;
    color: var(--vh-text-muted);
}

.amk-foot-size[b-khv9vevjk2]  .vh-dd-btn { min-width: 70px; padding: 3px 10px; }
.amk-foot-size[b-khv9vevjk2]  .vh-dd-menu { min-width: 70px; }

.amk-foot-size[b-khv9vevjk2] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.amk-pager[b-khv9vevjk2] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.amk-page-btn[b-khv9vevjk2] {
    border: 1px solid var(--vh-gray-30);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    min-width: 30px;
    height: 30px;
    border-radius: var(--vh-radius-sm);
    cursor: pointer;
}

.amk-page-btn:not(:disabled):hover[b-khv9vevjk2] {
    background: var(--vh-gray-10);
}

.amk-page-btn:disabled[b-khv9vevjk2] {
    color: var(--vh-gray-40);
    cursor: not-allowed;
}

.amk-page-current[b-khv9vevjk2] {
    background: var(--vh-primary);
    border: 1px solid var(--vh-primary);
    color: var(--vh-on-primary);
    min-width: 30px;
    height: 30px;
    border-radius: var(--vh-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- loading ---- */

.amk-loading[b-khv9vevjk2] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.amk-spinner[b-khv9vevjk2] {
    width: 2.2rem;
    height: 2.2rem;
    border: 3px solid var(--vh-black-10);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: amk-spin-b-khv9vevjk2 .8s linear infinite;
}

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

/* ---- small modals ---- */

.amk-modal-backdrop[b-khv9vevjk2] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1040;
}

.amk-modal[b-khv9vevjk2] {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    z-index: 1050;
    width: min(560px, 94vw);
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
    max-height: 84vh;
}

.amk-modal-head[b-khv9vevjk2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vh-black-10);
}

.amk-modal-head h5[b-khv9vevjk2] {
    margin: 0;
    font-size: 1.05rem;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
}

.amk-x[b-khv9vevjk2] {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--vh-black-40);
    cursor: pointer;
}

.amk-modal-body[b-khv9vevjk2] {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
}

.amk-modal-foot[b-khv9vevjk2] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--vh-black-10);
}

.amk-textarea[b-khv9vevjk2] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .5rem .6rem;
    font-size: .9rem;
    resize: vertical;
}

.amk-textarea:focus[b-khv9vevjk2] {
    outline: none;
    border-color: var(--vh-input-focus);
}

.amk-field-row[b-khv9vevjk2] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .8rem;
    font-size: .92rem;
}

.amk-field-row > label[b-khv9vevjk2] {
    font-weight: 600;
    color: var(--vh-text-body);
}

.amk-req[b-khv9vevjk2] {
    color: var(--vh-danger);
}

.amk-error[b-khv9vevjk2] {
    color: var(--vh-danger);
    font-size: .82rem;
}
/* /Pages/Admin/MockInterviews/MockAssessmentModal.razor.rz.scp.css */
/* Assessment modal — legacy #MockUpdateModal (fullscreen-ish admin modal).
   Colors come from the design-system tokens (Documentation/design-system.md). */

.ama-backdrop[b-ry8lka2b37] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1060;
}

.ama-modal[b-ry8lka2b37] {
    position: fixed;
    inset: 2vh 3vw;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    z-index: 1065;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

.ama-loading[b-ry8lka2b37] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.ama-spinner[b-ry8lka2b37] {
    width: 2.4rem;
    height: 2.4rem;
    border: 3px solid var(--vh-black-10);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: ama-spin-b-ry8lka2b37 .8s linear infinite;
}

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

.ama-head[b-ry8lka2b37] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vh-black-10);
}

.ama-head h5[b-ry8lka2b37] {
    margin: 0;
    font-size: 1.05rem;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-weight: 600;
}

.ama-head a[b-ry8lka2b37],
.ama-body a[b-ry8lka2b37] {
    color: var(--vh-primary);
    text-decoration: none;
}

.ama-head a:hover[b-ry8lka2b37],
.ama-body a:hover[b-ry8lka2b37] {
    text-decoration: underline;
}

.ama-x[b-ry8lka2b37] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--vh-black-40);
    cursor: pointer;
}

.ama-body[b-ry8lka2b37] {
    padding: 1.1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    font-size: .92rem;
    color: var(--vh-text-body);
}

.ama-section-title[b-ry8lka2b37] {
    color: var(--vh-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: .4rem 0 .8rem;
}

.ama-hr[b-ry8lka2b37] {
    border: 0;
    border-top: 1px solid var(--vh-black-10);
    margin: 1.2rem 0;
}

.ama-row[b-ry8lka2b37] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .55rem;
}

.ama-grow[b-ry8lka2b37] {
    flex: 1;
    display: flex;
    gap: .5rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.ama-links[b-ry8lka2b37] {
    display: flex;
    gap: 1.5rem;
}

.ama-row label[b-ry8lka2b37],
.ama-block > label[b-ry8lka2b37],
.ama-field > label[b-ry8lka2b37],
.ama-grid2 label[b-ry8lka2b37] {
    font-weight: 600;
    color: var(--vh-text-muted);
}

.ama-muted[b-ry8lka2b37] {
    color: var(--vh-black-40);
}

.ama-block[b-ry8lka2b37] {
    margin-bottom: .9rem;
}

.ama-pre[b-ry8lka2b37] {
    background: var(--vh-gray-10);
    border: 1px solid var(--vh-black-10);
    border-radius: .35rem;
    padding: .55rem .7rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: .9rem;
    margin: .25rem 0 0;
    min-height: 2.2rem;
}

.ama-table[b-ry8lka2b37] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin-top: .3rem;
}

.ama-table th[b-ry8lka2b37] {
    background: var(--vh-black-10);
    text-align: left;
    padding: .45rem .6rem;
    font-weight: 600;
}

.ama-table td[b-ry8lka2b37] {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--vh-black-10);
}

.ama-table tbody tr:nth-child(odd)[b-ry8lka2b37] {
    background: var(--vh-gray-10);
}

.ama-empty[b-ry8lka2b37] {
    text-align: center;
    color: var(--vh-text-muted);
}

.ama-feedback-cell[b-ry8lka2b37] {
    max-width: 360px;
    white-space: pre-wrap;
}

.ama-managers[b-ry8lka2b37] {
    margin: .5rem 0 0;
    color: var(--vh-text-muted);
}

.ama-grid2[b-ry8lka2b37] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem 2rem;
    margin-bottom: .8rem;
}

.ama-radios[b-ry8lka2b37] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: .9rem;
}

.ama-radio[b-ry8lka2b37] {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-weight: 500;
}

/* native radios + the override checkbox follow the ds accent (design-system.md §5) */
.ama-radio input[b-ry8lka2b37] { accent-color: var(--vh-primary); }

.ama-field[b-ry8lka2b37] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .8rem;
}

.ama-select[b-ry8lka2b37] {
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .45rem .6rem;
    font-size: .9rem;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    width: 100%;
}

.ama-select:focus[b-ry8lka2b37] {
    outline: none;
    border-color: var(--vh-input-focus);
}

.ama-select:disabled[b-ry8lka2b37] {
    background: var(--vh-input-disabled-bg);
    color: var(--vh-black-40);
}

.ama-textarea[b-ry8lka2b37] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .5rem .6rem;
    font-size: .9rem;
    resize: vertical;
}

.ama-textarea:focus[b-ry8lka2b37] {
    outline: none;
    border-color: var(--vh-input-focus);
}

.ama-questions[b-ry8lka2b37] {
    background: var(--vh-blue-tint); /* ≈ legacy var(--vh-blue-tint) */
    border-radius: var(--vh-radius-md);
    padding: .8rem 1rem;
    margin-bottom: .9rem;
}

.ama-questions h6[b-ry8lka2b37] {
    margin: 0 0 .6rem;
    font-weight: 600;
}

.ama-question[b-ry8lka2b37] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .65rem;
}

.ama-question label[b-ry8lka2b37] {
    font-weight: 600;
    color: var(--vh-text-body);
}

.ama-override[b-ry8lka2b37] {
    margin: .4rem 0 .8rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ama-error[b-ry8lka2b37] {
    color: var(--vh-danger);
    font-size: .82rem;
}

.ama-foot[b-ry8lka2b37] {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .9rem 1.5rem;
    border-top: 1px solid var(--vh-black-10);
}

.ama-btn[b-ry8lka2b37] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    border-radius: var(--vh-radius);
    padding: .5rem 1rem;
    font-size: .9rem;
    cursor: pointer;
}

.ama-btn:hover[b-ry8lka2b37] {
    background: var(--vh-gray-10);
}

.ama-btn-success[b-ry8lka2b37] {
    background: var(--vh-success);
    border-color: var(--vh-success);
    color: var(--vh-on-primary);
}

.ama-btn-success:hover:not(:disabled)[b-ry8lka2b37] {
    background: var(--vh-success-hover);
}

.ama-btn-meeting[b-ry8lka2b37] {
    background: var(--vh-primary);
    border-color: var(--vh-primary);
    color: var(--vh-on-primary);
    margin-right: auto;
}

/* ---- video player overlay ---- */

.ama-video-backdrop[b-ry8lka2b37] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1070;
}

.ama-video-modal[b-ry8lka2b37] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1075;
    background: var(--vh-media-black); /* video surround stays var(--vh-media-black) in both themes */
    border-radius: var(--vh-radius-lg);
    padding: .5rem;
    width: min(720px, 92vw);
}

.ama-video-modal video[b-ry8lka2b37] {
    width: 100%;
    border-radius: .3rem;
}

.ama-video-x[b-ry8lka2b37] {
    position: absolute;
    top: -2.2rem;
    right: 0;
    color: var(--vh-color-white); /* over the dark video backdrop in both themes */
    font-size: 1.8rem;
}
/* /Pages/Admin/MockInterviews/MockCreateModal.razor.rz.scp.css */
/* Create-mock modal — legacy CreateOrEditModal look.
   Colors come from the design-system tokens (Documentation/design-system.md). */

.amc-backdrop[b-5sbw66rkhx] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1060;
}

.amc-modal[b-5sbw66rkhx] {
    position: fixed;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, 94vw);
    max-height: 90vh;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    z-index: 1065;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

.amc-head[b-5sbw66rkhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--vh-black-10);
}

.amc-head h5[b-5sbw66rkhx] {
    margin: 0;
    font-size: 1.05rem;
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-weight: 600;
}

.amc-x[b-5sbw66rkhx] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--vh-black-40);
    cursor: pointer;
}

.amc-body[b-5sbw66rkhx] {
    padding: 1.1rem 1.4rem;
    overflow-y: auto;
    flex: 1;
    font-size: .92rem;
    color: var(--vh-text-body);
}

.amc-label[b-5sbw66rkhx] {
    display: block;
    font-weight: 600;
    color: var(--vh-text-body);
    margin-bottom: .45rem;
}

.amc-radios[b-5sbw66rkhx] {
    display: flex;
    gap: .6rem;
    margin-bottom: 1rem;
}

.amc-radio[b-5sbw66rkhx] {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius);
    padding: .5rem .8rem;
    cursor: pointer;
}

.amc-radio input[b-5sbw66rkhx] { accent-color: var(--vh-primary); }

.amc-radio.active[b-5sbw66rkhx] {
    border-color: var(--vh-primary);
}

.amc-field[b-5sbw66rkhx] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 1rem;
}

.amc-field > label[b-5sbw66rkhx] {
    font-weight: 600;
    color: var(--vh-text-body);
}

.amc-select[b-5sbw66rkhx] {
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .5rem .6rem;
    font-size: .9rem;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    width: 100%;
}

.amc-select:focus[b-5sbw66rkhx] {
    outline: none;
    border-color: var(--vh-input-focus);
}

.amc-textarea[b-5sbw66rkhx] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .5rem .6rem;
    font-size: .9rem;
    resize: vertical;
}

.amc-textarea:focus[b-5sbw66rkhx] {
    outline: none;
    border-color: var(--vh-input-focus);
}

.amc-wait[b-5sbw66rkhx] {
    border: 1px solid var(--vh-black-10);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-card);
    color: var(--vh-primary);
    text-align: center;
    padding: 2.2rem 1rem;
    margin-bottom: 1rem;
}

.amc-opt-img[b-5sbw66rkhx] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: .45rem;
    vertical-align: middle;
}

.amc-opt-empty[b-5sbw66rkhx] {
    color: var(--vh-text-muted);
}

/* ---- inline calendar ---- */

.amc-calendar[b-5sbw66rkhx] {
    border: 1px solid var(--vh-black-10);
    border-radius: var(--vh-radius-md);
    padding: .8rem;
    margin-bottom: 1rem;
}

.amc-cal-head[b-5sbw66rkhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.amc-cal-month[b-5sbw66rkhx] {
    font-weight: 600;
}

.amc-cal-arrow[b-5sbw66rkhx] {
    border: none;
    background: var(--vh-black-10);
    color: var(--vh-primary);
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    cursor: pointer;
}

.amc-cal-arrow:disabled[b-5sbw66rkhx] {
    color: var(--vh-black-40);
    cursor: default;
}

.amc-cal-week[b-5sbw66rkhx],
.amc-cal-days[b-5sbw66rkhx] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
}

.amc-cal-week span[b-5sbw66rkhx] {
    text-align: center;
    font-size: .78rem;
    color: var(--vh-text-muted);
    font-weight: 600;
    padding-bottom: .3rem;
}

.amc-cal-day[b-5sbw66rkhx] {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 50%;
    font-size: .85rem;
    color: var(--vh-black-40);
}

.amc-cal-day.enabled[b-5sbw66rkhx] {
    background: var(--vh-black-10);
    color: var(--vh-text-body);
    cursor: pointer;
}

.amc-cal-day.enabled:hover[b-5sbw66rkhx] {
    background: var(--vh-primary-soft);
}

.amc-cal-day.selected[b-5sbw66rkhx] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
}

.amc-foot[b-5sbw66rkhx] {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--vh-black-10);
}

.amc-btn[b-5sbw66rkhx] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    border-radius: var(--vh-radius);
    padding: .5rem 1rem;
    font-size: .9rem;
    cursor: pointer;
}

.amc-btn:hover[b-5sbw66rkhx] {
    background: var(--vh-gray-10);
}

.amc-btn-primary[b-5sbw66rkhx] {
    background: var(--vh-primary);
    border-color: var(--vh-primary);
    color: var(--vh-on-primary);
}

.amc-btn-primary:hover:not(:disabled)[b-5sbw66rkhx] {
    background: var(--vh-primary-hover);
}
/* /Pages/Admin/Skills/Index.razor.rz.scp.css */
/* Admin Skills (/admin/skills) — legacy backoffice layout (var(--vh-surface) card, DataTables
   grid + footer chrome) restyled with the design-system tokens
   (Documentation/design-system.md): primary var(--vh-primary) actions, ds-table header/hover,
   ds pager. Type 2 combos = shared VhDropdown. Page chrome = ABP-default
   PageHeader + VhFiltersCard (design-system §12) on the normal LeptonX content
   flow; only the page's own skins live here. */

/* ---- loading / gate ---- */
.ask-loader[b-apmqbdexl4] {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.ask-spinner[b-apmqbdexl4] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: ask-spin-b-apmqbdexl4 .8s linear infinite;
}

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

.ask-private[b-apmqbdexl4] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 80px 16px;
    font-size: 15px;
}

.ask-private i[b-apmqbdexl4] {
    font-size: 28px;
    margin-bottom: 12px;
    color: var(--vh-black-40);
}

/* ---- primary CTA (filters-card search row, right of the search) ---- */
.ask-btn-primary[b-apmqbdexl4] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    border: 0;
    border-radius: var(--vh-radius);
    padding: 9px 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.ask-btn-primary:hover[b-apmqbdexl4] {
    background: var(--vh-primary-hover);
}

/* ---- card ---- */
.ask-card[b-apmqbdexl4] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-card);
    padding: 20px;
}

/* ---- search (filters-card quick-search row; the card owns row spacing) ---- */
.ask-search[b-apmqbdexl4] {
    display: flex;
    flex: 1;
    min-width: 180px;
}

.ask-search input[b-apmqbdexl4] {
    flex: 1;
    border: 1px solid var(--vh-input-border);
    border-right: 0;
    border-radius: var(--vh-radius) 0 0 var(--vh-radius);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--vh-text-body);
    outline: none;
}

.ask-search input[b-apmqbdexl4]::placeholder { color: var(--vh-text-placeholder); }

.ask-search input:focus[b-apmqbdexl4] {
    border-color: var(--vh-input-focus);
}

.ask-search-btn[b-apmqbdexl4] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    border: 0;
    border-radius: 0 var(--vh-radius) var(--vh-radius) 0;
    padding: 0 16px;
    cursor: pointer;
}

.ask-search-btn:hover[b-apmqbdexl4] { background: var(--vh-primary-hover); }

/* ---- advanced filters (VhFiltersCard collapsible body) ---- */
.ask-advanced[b-apmqbdexl4] {
    max-width: 420px;
}

.ask-advanced[b-apmqbdexl4]  .vh-dd-btn { min-width: 160px; }

/* ---- table (ds-table reference: /design-system §8) ---- */
.ask-table-wrap[b-apmqbdexl4] {
    overflow-x: auto;
}

.ask-table[b-apmqbdexl4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--vh-text-body);
}

.ask-table th[b-apmqbdexl4] {
    text-align: left;
    color: var(--vh-text-heading);
    border-bottom: 2px solid var(--vh-black-20);
    padding: 9px 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ask-sortable[b-apmqbdexl4] {
    cursor: pointer;
    user-select: none;
}

.ask-sortable:hover[b-apmqbdexl4] {
    background: var(--vh-gray-10);
}

[b-apmqbdexl4] .ask-sort-muted {
    color: var(--vh-black-40);
}

.ask-sortable[b-apmqbdexl4]  .fa-sort-up,
.ask-sortable[b-apmqbdexl4]  .fa-sort-down {
    color: var(--vh-primary);
}

.ask-table td[b-apmqbdexl4] {
    border-top: 1px solid var(--vh-black-10);
    padding: 9px 12px;
    vertical-align: middle;
}

.ask-table tbody tr:hover[b-apmqbdexl4] {
    background: var(--vh-gray-10);
}

.ask-cell-name[b-apmqbdexl4] {
    font-weight: 500;
}

.ask-col-count[b-apmqbdexl4], .ask-col-type[b-apmqbdexl4] {
    width: 7%;
}

.ask-col-actions[b-apmqbdexl4] {
    width: 1%;
}

.ask-empty[b-apmqbdexl4] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 26px 12px !important;
}

/* synonym pill badges (legacy badge-pill badge-success) */
.ask-badge[b-apmqbdexl4] {
    display: inline-block;
    background: var(--vh-success);
    color: var(--vh-on-primary);
    border-radius: var(--vh-radius-pill);
    padding: 3px 10px;
    font-size: 11.5px;
    margin: 1px 4px 1px 0;
    white-space: nowrap;
}

/* ---- row actions (action menu — commands, not a value select) ---- */
.ask-actions-cell[b-apmqbdexl4] {
    white-space: nowrap;
}

.ask-actions[b-apmqbdexl4] {
    position: relative;
    display: inline-block;
}

.ask-actions-btn[b-apmqbdexl4] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    border: 0;
    border-radius: var(--vh-radius);
    padding: 7px 12px;
    font-size: 12.5px;
    cursor: pointer;
}

.ask-actions-btn:hover[b-apmqbdexl4] {
    background: var(--vh-primary-hover);
}

.ask-caret[b-apmqbdexl4] {
    font-size: 10px;
    margin-left: 6px;
}

.ask-actions-btn .ask-caret[b-apmqbdexl4] {
    color: rgb(var(--vh-white-rgb) / .75);
}

.ask-dd-backdrop[b-apmqbdexl4] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.ask-actions-menu[b-apmqbdexl4] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 95;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    min-width: 150px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
}

.ask-actions-item[b-apmqbdexl4] {
    background: none;
    border: 0;
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--vh-text-body);
    cursor: pointer;
}

.ask-actions-item:hover[b-apmqbdexl4] {
    background: var(--vh-gray-10);
    color: var(--vh-primary);
}

/* ---- footer (ds pager reference) ---- */
.ask-footer[b-apmqbdexl4] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.ask-info[b-apmqbdexl4] {
    font-size: 12.5px;
    color: var(--vh-text-muted);
}

.ask-pagesize[b-apmqbdexl4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--vh-text-muted);
}

.ask-pagesize[b-apmqbdexl4]  .vh-dd-btn { min-width: 70px; padding: 3px 10px; }
.ask-pagesize[b-apmqbdexl4]  .vh-dd-menu { min-width: 70px; }

.ask-pager[b-apmqbdexl4] {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.ask-page-btn[b-apmqbdexl4] {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-sm);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font-size: 12.5px;
    cursor: pointer;
}

.ask-page-btn:disabled[b-apmqbdexl4] {
    color: var(--vh-gray-40);
    cursor: not-allowed;
}

.ask-page-btn:not(:disabled):hover[b-apmqbdexl4] {
    background: var(--vh-gray-10);
}

.ask-page-active[b-apmqbdexl4] {
    background: var(--vh-primary);
    border-color: var(--vh-primary);
    color: var(--vh-on-primary);
}

.ask-page-active:not(:disabled):hover[b-apmqbdexl4] {
    background: var(--vh-primary);
}

/* ---- modals ---- */
.ask-overlay[b-apmqbdexl4] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1040;
}

.ask-modal[b-apmqbdexl4] {
    position: fixed;
    top: 6vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(780px, 94vw);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    z-index: 1050;
    box-shadow: var(--vh-shadow-modal);
    max-height: 86vh;
    overflow-y: auto;
}

.ask-modal-sm[b-apmqbdexl4] {
    width: min(440px, 94vw);
    top: 18vh;
}

.ask-modal-body[b-apmqbdexl4] {
    padding: 22px 24px;
}

.ask-form-group[b-apmqbdexl4] {
    margin-bottom: 16px;
}

.ask-form-group > label[b-apmqbdexl4] {
    display: block;
    font-size: 13px;
    color: var(--vh-text-body);
    margin-bottom: 6px;
}

.ask-form-group input[type="text"][b-apmqbdexl4] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--vh-text-body);
    outline: none;
    box-sizing: border-box;
}

.ask-form-group input[type="text"]:focus[b-apmqbdexl4] {
    border-color: var(--vh-input-focus);
}

.ask-radios[b-apmqbdexl4] {
    display: flex;
    gap: 18px;
}

.ask-radio[b-apmqbdexl4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--vh-text-body);
    margin: 0;
    cursor: pointer;
}

.ask-radio input[b-apmqbdexl4] { accent-color: var(--vh-primary); }

.ask-validation[b-apmqbdexl4] {
    color: var(--vh-danger);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.ask-modal-footer[b-apmqbdexl4] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--vh-black-10);
    padding-top: 16px;
    margin-top: 4px;
}

.ask-btn-success[b-apmqbdexl4] {
    background: var(--vh-success);
    color: var(--vh-on-primary);
    border: 0;
    border-radius: var(--vh-radius);
    padding: 9px 18px;
    font-size: 13px;
    cursor: pointer;
}

.ask-btn-success:hover:not(:disabled)[b-apmqbdexl4] { background: var(--vh-success-hover); }

.ask-btn-success:disabled[b-apmqbdexl4] {
    background: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.ask-btn-danger[b-apmqbdexl4] {
    background: var(--vh-danger);
    color: var(--vh-on-primary);
    border: 0;
    border-radius: var(--vh-radius);
    padding: 9px 18px;
    font-size: 13px;
    cursor: pointer;
}

.ask-btn-danger:active:not(:disabled)[b-apmqbdexl4] { background: var(--vh-danger-active); }

.ask-btn-danger:disabled[b-apmqbdexl4] {
    background: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

/* modal Close/Cancel — ds “.vh-btn-text vh-btn-muted” look */
.ask-btn-default[b-apmqbdexl4] {
    background: var(--vh-transparent);
    color: var(--vh-gray-90);
    border: 0;
    border-radius: var(--vh-radius-sm);
    padding: 9px 18px;
    font-size: 13px;
    cursor: pointer;
}

.ask-btn-default:hover[b-apmqbdexl4] { background: var(--vh-gray-10); }

.ask-confirm-text[b-apmqbdexl4] {
    font-size: 14px;
    color: var(--vh-text-body);
    margin: 4px 0 18px;
}
/* /Pages/Calendar/Booking.razor.rz.scp.css */
/* Candidate booking page — legacy vh-package Components/Calendar styles
   (styles.js + Scheduled/styles.js), mapped onto the vh-tokens palette
   (primary --vh-primary, available-day --vh-primary-pale, hairlines --vh-line). */

.vhcal-page[b-hgb2cnd7wn] {
    background: var(--vh-surface);
    min-height: 60vh;
    font-family: var(--vh-font-secondary);
}

.vhcal-wrapper[b-hgb2cnd7wn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "header header"
        "calendar time";
    column-gap: clamp(2rem, 6vw, 8rem);
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 4rem;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .vhcal-wrapper[b-hgb2cnd7wn] {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "calendar" "time";
        column-gap: 0;
    }
}

/* ---- header ---- */
.vhcal-header[b-hgb2cnd7wn] {
    grid-area: header;
    padding: 2.5rem 0 1.8rem 0;
    border-bottom: 1px solid var(--vh-line-strong);
}

.vhcal-title[b-hgb2cnd7wn] {
    font-family: var(--vh-font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
}

.vhcal-subtitle[b-hgb2cnd7wn] {
    color: var(--vh-gray-60);
    margin: .3rem 0 0;
}

/* ---- month grid ---- */
.vhcal-calendar[b-hgb2cnd7wn] {
    grid-area: calendar;
    padding: 3rem 0 0 0;
}

.vhcal-month-header[b-hgb2cnd7wn] {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 28px 28px;
    align-items: center;
}

.vhcal-month-name[b-hgb2cnd7wn] {
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.vhcal-arrow[b-hgb2cnd7wn] {
    background: none;
    border: none;
    color: var(--vh-primary);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}

.vhcal-arrow:disabled[b-hgb2cnd7wn] {
    color: var(--vh-gray-40);
    cursor: default;
}

.vhcal-week[b-hgb2cnd7wn],
.vhcal-days[b-hgb2cnd7wn] {
    margin: 0;
    padding: 1rem 0 0 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    list-style: none;
    user-select: none;
}

.vhcal-week li[b-hgb2cnd7wn] {
    font-size: 14px;
    color: var(--vh-text-body);
}

.vhcal-week li:first-child[b-hgb2cnd7wn],
.vhcal-week li:last-child[b-hgb2cnd7wn] {
    color: var(--vh-gray-50);
}

.vhcal-days[b-hgb2cnd7wn] {
    row-gap: 1rem;
}

.vhcal-day[b-hgb2cnd7wn] {
    min-width: 24px;
}

.vhcal-ellipse[b-hgb2cnd7wn] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    justify-content: center;
    align-content: center;
    font-size: 14px;
    color: var(--vh-gray-100);
    background: var(--vh-transparent);
}

.vhcal-ellipse.available[b-hgb2cnd7wn] {
    background: var(--vh-primary-pale);
    cursor: pointer;
}

.vhcal-ellipse.selected[b-hgb2cnd7wn] {
    background: var(--vh-primary);
    color: var(--vh-on-primary); /* var(--vh-on-primary) on brand — stays */
}

.vhcal-cal-footer[b-hgb2cnd7wn] {
    padding: 1.5rem 1.7rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.vhcal-legend[b-hgb2cnd7wn] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: 13px;
    color: var(--vh-text-body);
}

.vhcal-dot[b-hgb2cnd7wn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.vhcal-dot.available[b-hgb2cnd7wn] { background: var(--vh-primary-pale); }
.vhcal-dot.selected[b-hgb2cnd7wn] { background: var(--vh-primary); }

/* ---- pick time ---- */
.vhcal-picktime[b-hgb2cnd7wn] {
    grid-area: time;
    padding: 3rem 0;
    text-align: center;
}

.vhcal-picktime-header[b-hgb2cnd7wn] {
    padding: 0 1.7rem 2rem;
}

.vhcal-picktime-header h6[b-hgb2cnd7wn] {
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.vhcal-tz[b-hgb2cnd7wn] {
    color: var(--vh-gray-60);
    font-size: 13px;
    font-weight: 400;
}

.vhcal-times[b-hgb2cnd7wn] {
    max-height: 430px;
    overflow-y: auto;
}

.vhcal-time-item[b-hgb2cnd7wn] {
    display: grid;
    grid-template-columns: 2fr 10px;
    grid-template-rows: 60px;
    border-top: 1px solid var(--vh-line);
    cursor: pointer;
}

.vhcal-time-item:hover[b-hgb2cnd7wn] {
    background: var(--vh-surface-soft);
}

.vhcal-time-item.confirm[b-hgb2cnd7wn] {
    grid-template-columns: 1fr 1fr;
}

.vhcal-time-label[b-hgb2cnd7wn] {
    display: grid;
    justify-content: center;
    align-content: center;
    font-size: 14px;
}

.vhcal-confirm-btn[b-hgb2cnd7wn] {
    background: var(--vh-primary);
    color: var(--vh-on-primary); /* var(--vh-on-primary) on brand — stays */
    border: none;
    border-radius: var(--vh-radius);
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--vh-font-secondary);
}

.vhcal-confirm-btn:hover:not(:disabled)[b-hgb2cnd7wn] {
    background: var(--vh-primary-hover);
}

.vhcal-confirm-btn:disabled[b-hgb2cnd7wn] {
    opacity: .7;
    cursor: default;
}

.vhcal-pick-cta[b-hgb2cnd7wn] {
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-size: 16px;
    font-weight: 700;
}

.vhcal-illustration[b-hgb2cnd7wn] {
    margin-top: 1.5rem;
    font-size: 5rem;
    color: var(--vh-primary-pale);
}

.vhcal-illustration.big[b-hgb2cnd7wn] {
    font-size: 7rem;
    margin: 2rem 0;
}

/* ---- scheduled ---- */
.vhcal-scheduled-wrap[b-hgb2cnd7wn] {
    grid-template-areas: "header header" "alert alert" "actions actions";
    grid-template-columns: 1fr 1fr;
}

.vhcal-sch-header[b-hgb2cnd7wn] {
    grid-area: header;
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid var(--vh-line-strong);
}

.vhcal-sch-icon[b-hgb2cnd7wn] {
    font-size: 2rem;
    color: var(--vh-primary);
}

.vhcal-sch-info h6[b-hgb2cnd7wn] {
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.vhcal-sch-time[b-hgb2cnd7wn] {
    font-weight: 700;
}

.vhcal-sch-google[b-hgb2cnd7wn] {
    justify-self: end;
}

.vhcal-link[b-hgb2cnd7wn] {
    color: var(--vh-primary-hover);
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
}

.vhcal-alert[b-hgb2cnd7wn] {
    grid-area: alert;
    display: flex;
    align-items: center;
    background: var(--vh-tonal-amber-bg);
    border: 1px solid var(--vh-tonal-amber-bd);
    color: var(--vh-tonal-amber-text);
    border-radius: var(--vh-radius-sm);
    padding: 1.2rem 1rem;
    margin-top: 1.5rem;
}

.vhcal-alert-icon[b-hgb2cnd7wn] {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: var(--vh-warning-light);
    /* Constant dark ink on the amber disc in both themes (same exception
       as the .vh-pill-warning dark override in vh-tokens.css). */
    color: var(--vh-fixed-light-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 .5rem 0 1.4rem;
    flex: none;
}

.vhcal-alert-title[b-hgb2cnd7wn] {
    font-weight: 700;
    font-size: 14px;
}

.vhcal-alert-sub[b-hgb2cnd7wn] {
    margin-top: .35rem;
    font-size: 13px;
}

.vhcal-actions[b-hgb2cnd7wn] {
    grid-area: actions;
    max-width: 520px;
    margin: 2.5rem auto 0;
    width: 100%;
    display: grid;
    row-gap: 1rem;
}

.vhcal-actions-row[b-hgb2cnd7wn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

/* ---- empty / cancelled / error states ---- */
.vhcal-state[b-hgb2cnd7wn] {
    max-width: 420px;
    margin: 6rem auto;
    text-align: center;
}

.vhcal-state-text[b-hgb2cnd7wn] {
    font-size: 16px;
    color: var(--vh-gray-100);
    margin: .5rem 0;
}

.vhcal-error-icon[b-hgb2cnd7wn] {
    font-size: 3.4rem;
    color: var(--vh-danger);
    margin-bottom: 1.5rem;
}

.vhcal-state .vh-btn-primary[b-hgb2cnd7wn] {
    margin-top: 2rem;
}

/* ---- loading ---- */
.vhcal-loading[b-hgb2cnd7wn] {
    display: grid;
    justify-content: center;
    padding: 10rem 0;
}

.vhcal-spinner[b-hgb2cnd7wn] {
    width: 42px;
    height: 42px;
    border: 4px solid var(--vh-primary-soft);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: vhcal-spin-b-hgb2cnd7wn .8s linear infinite;
}

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

/* ---- calendly embed ---- */
.vhcal-calendly[b-hgb2cnd7wn] {
    width: 100%;
    min-height: 80vh;
    border: none;
}

/* ---- modal ---- */
/* Above the Bootstrap/LeptonX modal stack (backdrop 1050 / dialog 1055). */
.vhcal-modal-backdrop[b-hgb2cnd7wn] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1060;
}

.vhcal-modal[b-hgb2cnd7wn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: min(520px, calc(100vw - 32px));
    z-index: 1061;
    box-shadow: var(--vh-shadow-modal);
}

.vhcal-modal-header[b-hgb2cnd7wn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--vh-line-strong);
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-weight: 700;
    font-size: 16px;
}

.vhcal-modal-x[b-hgb2cnd7wn] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vh-gray-60);
}

.vhcal-modal-body[b-hgb2cnd7wn] {
    padding: 1.2rem 1.4rem;
    color: var(--vh-text-body);
    font-size: 14px;
}

/* Sits on top of the global .vh-input utility (border/radius/focus). */
.vhcal-textarea[b-hgb2cnd7wn] {
    margin-top: .5rem;
    resize: vertical;
}

.vhcal-modal-error[b-hgb2cnd7wn] {
    color: var(--vh-danger);
    margin-top: .6rem;
}

.vhcal-modal-footer[b-hgb2cnd7wn] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--vh-line-strong);
}
/* /Pages/CanadaPipeline/Board.razor.rz.scp.css */
/* Canadian Pipeline board — copy-adapt of the event-pipeline epb- styles
   (scoped per component, so the shared class names don't clash). Canada-only
   additions use the cap- prefix: header Add Candidate button, canadaOffice
   card block (matching bar / info lines / priority badge+menu) and the
   CONTRACT INFO / Add Candidate modal forms.
   Colors come from vh-tokens.css (design-system.md) — no raw hex except the
   decorative column-accent ramp flagged for DS-owner tokens (see below). */

/* ---- Layout constants (extracted so this file and the EventPipeline copy
   can't drift): board viewport-offset fallback + the popover z-ladder —
   column menu 70 < card menus 80 < bulk bar 100, all far below Blazorise
   modals (1050+). Each var sits on its consumer (scoped CSS has no shared
   root element to host them). ---- */
.epb-board[b-5vdxjj2ngd] { --epb-board-offset: 250px; }
.epb-colmenu[b-5vdxjj2ngd] { --epb-z-colmenu: 70; }
.cap-priority-menu[b-5vdxjj2ngd], .epb-assignee-menu[b-5vdxjj2ngd] { --epb-z-cardmenu: 80; }
.epb-bulkbar[b-5vdxjj2ngd] { --epb-z-bulkbar: 100; }

/* ===== Page header (legacy canada visual/Header) ===== */
.epb-header[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.epb-head-left[b-5vdxjj2ngd] { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.epb-head-right[b-5vdxjj2ngd] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.epb-back[b-5vdxjj2ngd] { font-size: 13px; color: var(--vh-muted); text-decoration: none; white-space: nowrap; }
.epb-back:hover[b-5vdxjj2ngd] { color: var(--vh-primary); }

/* Event name links to the public event page (legacy job-headline link) */
.epb-headline[b-5vdxjj2ngd] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vh-ink);
    margin: 0;
    max-width: 460px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: inline-block;
}
.epb-headline:hover[b-5vdxjj2ngd] { color: var(--vh-primary); text-decoration: underline; }

.epb-search[b-5vdxjj2ngd] { max-width: 240px; }
.epb-refresh[b-5vdxjj2ngd] { border: 1px solid var(--vh-line); }

/* Sort toggle (legacy Sorting dropdown: Matching | Newest) — active fill is
   var(--vh-primary-hover) (design-system.md §9) */
.epb-sort[b-5vdxjj2ngd] {
    display: flex;
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    overflow: hidden;
}
.epb-sort-btn[b-5vdxjj2ngd] {
    border: none;
    background: var(--vh-surface);
    color: var(--vh-muted);
    font-size: 12px;
    padding: .3rem .6rem;
    cursor: pointer;
}
.epb-sort-btn + .epb-sort-btn[b-5vdxjj2ngd] { border-left: 1px solid var(--vh-line); }
.epb-sort-btn.on[b-5vdxjj2ngd] { background: var(--vh-primary-hover); color: var(--vh-on-primary); }

/* Add Candidate (legacy ButtonAddCandidate) — canadian-board exclusive;
   .vh-btn-primary utility supplies the colors, this only tunes header rhythm */
.cap-add[b-5vdxjj2ngd] {
    font-size: 13px;
    white-space: nowrap;
}
.cap-add i[b-5vdxjj2ngd] { margin-right: .25rem; font-size: 12px; }

/* Edit (→ /event-pipeline/{id}/edit — edit screen not ported yet) */
.epb-edit[b-5vdxjj2ngd] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 13px;
    color: var(--vh-muted);
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    padding: .3rem .6rem;
    text-decoration: none;
    white-space: nowrap;
}
.epb-edit:hover[b-5vdxjj2ngd] { color: var(--vh-primary); border-color: var(--vh-primary); }

/* ===== Tab bar (legacy visual/Tabs): Event Pipeline | Interviews — active =
   var(--vh-primary-hover) (design-system.md §9) ===== */
.epb-tabs[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    border-bottom: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-surface);
    margin-bottom: .9rem;
}
.epb-tab[b-5vdxjj2ngd] {
    position: relative;
    font-size: .875rem;
    color: var(--vh-gray-90);
    cursor: pointer;
    padding: .5rem 0 .6rem;
    text-decoration: none;
    white-space: nowrap;
}
.epb-tab:hover[b-5vdxjj2ngd] { color: var(--vh-primary); }
.epb-tab.active[b-5vdxjj2ngd] { color: var(--vh-primary-hover); font-weight: 700; }
.epb-tab.active[b-5vdxjj2ngd]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--vh-primary-hover);
}

/* ===== Board ===== */
.epb-board[b-5vdxjj2ngd] {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    /* default align-items (stretch): every column paints its background down
       to the board's bottom edge regardless of how few cards it holds */
    /* Fallback only — vhBoardFit.fit() sets the exact px height at runtime so
       the board (and its horizontal scrollbar) ends at the viewport bottom and
       the page itself never scrolls vertically. */
    height: calc(100dvh - var(--epb-board-offset));
    /* Classic (non-overlay) scrollbar — macOS overlay bars would keep the
       horizontal scrollbar invisible until a scroll gesture. */
    scrollbar-width: thin;
    scrollbar-color: var(--vh-gray-40) var(--vh-transparent);
}
/* While a bulk selection is active the fixed bulk bar floats over the bottom
   of the board — reserve room so it never covers the last cards/scrollbar. */
.epb-board-bulk[b-5vdxjj2ngd] { padding-bottom: 4rem; }
.epb-board[b-5vdxjj2ngd]::-webkit-scrollbar { height: 12px; }
.epb-board[b-5vdxjj2ngd]::-webkit-scrollbar-track { background: var(--vh-transparent); }
.epb-board[b-5vdxjj2ngd]::-webkit-scrollbar-thumb {
    background: var(--vh-gray-40);
    border-radius: 6px;
    border: 3px solid var(--vh-transparent);
    background-clip: padding-box;
}
.epb-board[b-5vdxjj2ngd]::-webkit-scrollbar-thumb:hover { background-color: var(--vh-gray-50); }

.epb-col[b-5vdxjj2ngd] {
    flex: 0 0 270px;
    background: var(--vh-surface-soft);
    border-radius: var(--vh-radius-chip);
    display: flex;
    flex-direction: column;
    /* height comes from the board's align-items: stretch — the viewport-fitted
       board (vhBoardFit) makes every column full-height, short content or not */
}

.epb-col-head[b-5vdxjj2ngd] {
    padding: .5rem .6rem .4rem;
    border-top: 3px solid var(--vh-muted);
    border-radius: var(--vh-radius-chip) var(--vh-radius-chip) 0 0;
}

.epb-col-title[b-5vdxjj2ngd] { display: flex; align-items: center; gap: .4rem; min-height: 24px; }
.epb-col-name[b-5vdxjj2ngd] {
    font-weight: 600;
    font-size: .85rem;
    color: var(--vh-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.epb-col-name.editable[b-5vdxjj2ngd] { cursor: text; }

/* StepColumnType colour accents — event block 30-42 + the canadian columns
   (Pre-Vetting 80, TalkingToCompany/hold 82-88, NotEligible 89). Semantic
   hues snap to semantic vh tokens; the remaining decorative ramp uses exact
   raw tokens until the DS owner names them (design-system.md §8.1). */
.epb-type-30[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-0891b2); }   /* English and Code Verified */
.epb-type-31[b-5vdxjj2ngd] { border-top-color: var(--vh-primary); }     /* Screening */
.epb-type-32[b-5vdxjj2ngd] { border-top-color: var(--vh-success); }     /* Selected */
.epb-type-33[b-5vdxjj2ngd] { border-top-color: var(--vh-danger); }      /* Keep Hacking / Rejected */
.epb-type-34[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-7c3aed); }   /* Screening Call */
.epb-type-35[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-6d49cb); }   /* Pre Selected */
.epb-type-36[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-0e7490); }   /* Company Screening */
.epb-type-37[b-5vdxjj2ngd] { border-top-color: var(--vh-warning); }     /* Applied — "For your review" accent */
.epb-type-38[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-8b5cf6); }   /* Scheduling Call */
.epb-type-39[b-5vdxjj2ngd] { border-top-color: var(--vh-muted); }       /* Meetup Keep Hacking */
.epb-type-40[b-5vdxjj2ngd] { border-top-color: var(--vh-success); }     /* Meetup Selected */
.epb-type-41[b-5vdxjj2ngd] { border-top-color: var(--vh-muted); }       /* Stand By */
.epb-type-42[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-1d4ed8); }   /* Interview Confirmed (decorative deep var(--vh-primary)) */
.epb-type-80[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-0ea5e9); }   /* Pre-Vetting (decorative sky) */
.epb-type-81[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-14b8a6); }   /* Eligible */
.epb-type-82[b-5vdxjj2ngd] { border-top-color: var(--vh-secondary); }   /* Talking to Company (hold) */
.epb-type-83[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-fb923c); }   /* (decorative amber ramp) */
.epb-type-84[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-fdba74); }
.epb-type-85[b-5vdxjj2ngd] { border-top-color: var(--vh-warning); }
.epb-type-86[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-d97706); }
.epb-type-87[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-b45309); }
.epb-type-88[b-5vdxjj2ngd] { border-top-color: var(--vh-raw-92400e); }
.epb-type-89[b-5vdxjj2ngd] { border-top-color: var(--vh-danger); }      /* Not Eligible (reject) */

/* Legacy isForYourReview (columnType 37) highlighted column header */
.epb-col-head.epb-fyr[b-5vdxjj2ngd] { background: var(--vh-tonal-amber-bg); }

.epb-col-count[b-5vdxjj2ngd] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-pill);
    padding: 0 .5rem;
    font-size: 12px;
    color: var(--vh-body);
    min-width: 1.4rem;
    text-align: center;
}

.epb-col-tools[b-5vdxjj2ngd] { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.epb-tool[b-5vdxjj2ngd] { color: var(--vh-muted); font-size: 12px; cursor: pointer; padding: .1rem .2rem; }
.epb-tool:hover[b-5vdxjj2ngd] { color: var(--vh-primary); }
.epb-tool.danger:hover[b-5vdxjj2ngd] { color: var(--vh-danger); }

/* ⚡ Smart Actions indicator — render-only (backend shell, not ported) */
.epb-bolt[b-5vdxjj2ngd] {
    color: var(--vh-line-strong);
    font-size: 12px;
    padding: .1rem .2rem;
    cursor: default;
    position: relative;
}
.epb-bolt.on[b-5vdxjj2ngd] { color: var(--vh-warning); }
.epb-bolt-count[b-5vdxjj2ngd] {
    font-size: .6rem;   /* intentionally sub-caption — matches the EventPipeline board */
    font-weight: 700;
    color: var(--vh-tonal-amber-text);
    margin-left: 1px;
}

.epb-rename[b-5vdxjj2ngd] { font-size: 13px; padding: .15rem .4rem; height: auto; }

/* Inline step forms (add / delete confirm) */
.epb-step-form[b-5vdxjj2ngd] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    padding: .45rem;
    margin-top: .4rem;
    font-size: 13px;
    color: var(--vh-body);
}
.epb-step-form-actions[b-5vdxjj2ngd] { display: flex; gap: .35rem; margin-top: .4rem; }
.epb-delconfirm span[b-5vdxjj2ngd] { font-weight: 600; }

/* Step-type VhDropdown (add form + column editor) — spacing of the old select */
.epb-col-head[b-5vdxjj2ngd]  .vh-dd { margin-top: .4rem; }

/* Column-scoped "Select all" */
.epb-selectall[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 12px;
    color: var(--vh-muted);
    margin: .4rem 0 0;
    cursor: pointer;
    user-select: none;
}

/* Column ⋯ menu (legacy ColumnActions) + inline job picker */
.epb-colmenu-wrap[b-5vdxjj2ngd] { position: relative; }
.epb-colmenu[b-5vdxjj2ngd] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: var(--epb-z-colmenu);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    box-shadow: 0 8px 24px rgb(var(--vh-raw-rgb-17-24-39) / .12);
    padding: .35rem;
    min-width: 230px;
}
.epb-colmenu-item[b-5vdxjj2ngd] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--vh-body);
    padding: .35rem .5rem;
    border-radius: .3rem;
    cursor: pointer;
    text-decoration: none;
}
.epb-colmenu-item:hover[b-5vdxjj2ngd] { background: var(--vh-blue-tint); color: var(--vh-primary); }

/* Job picker (legacy "Add all candidates to job" AsyncSelect) */
.epb-jobpicker[b-5vdxjj2ngd] { padding: .35rem .5rem; }
.epb-jobpicker-list[b-5vdxjj2ngd] {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--vh-line);
    border-radius: .3rem;
    margin-top: .35rem;
}
.epb-jobpicker-item[b-5vdxjj2ngd] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--vh-body);
    padding: .3rem .45rem;
    cursor: pointer;
}
.epb-jobpicker-item:hover[b-5vdxjj2ngd] { background: var(--vh-blue-tint); }
.epb-jobpicker-item.sel[b-5vdxjj2ngd] { background: var(--vh-primary); color: var(--vh-on-primary); }
.epb-jobpicker-empty[b-5vdxjj2ngd] { font-size: 12px; color: var(--vh-muted); padding: .35rem .45rem; }
.epb-jobpicker-confirm[b-5vdxjj2ngd] { font-size: 12px; color: var(--vh-body); margin-top: .4rem; }
.epb-jobpicker-actions[b-5vdxjj2ngd] { display: flex; gap: .35rem; margin-top: .4rem; }

.epb-col-body[b-5vdxjj2ngd] {
    padding: .5rem;
    overflow-y: auto;
    gap: .5rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;         /* fill the stretched column — wheel-scroll and drop work on the empty area below the cards */
    min-height: 90px;       /* drop target even when the column is empty */
    border-radius: 0 0 var(--vh-radius-chip) var(--vh-radius-chip);
    border: 2px dashed var(--vh-transparent);
    scrollbar-width: none;  /* interview-pipeline pattern hides the column scrollbar */
}
.epb-col-body[b-5vdxjj2ngd]::-webkit-scrollbar { display: none; }

/* DnD highlight on the hovered column */
.epb-col-body.epb-dropover[b-5vdxjj2ngd] { border-color: var(--vh-primary); background: var(--vh-blue-tint); }
.epb-col-body.epb-dropblock[b-5vdxjj2ngd] { border-color: var(--vh-line); background: var(--vh-surface-soft); cursor: not-allowed; }

.epb-empty[b-5vdxjj2ngd] { text-align: center; color: var(--vh-black-30); font-size: .85rem; padding: .5rem; }

/* ===== Candidate card — flat content surface; selected uses a crisp inset ring. ===== */
.epb-card[b-5vdxjj2ngd] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    padding: .8rem .8rem .7rem;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    font-family: var(--vh-font-primary);
    box-shadow: var(--vh-shadow-cobalt);
    transition: border-color .25s ease, background-color .2s ease;
}
.epb-card:hover[b-5vdxjj2ngd] {
    border-color: var(--vh-primary-hover);
    box-shadow: var(--vh-shadow-surface-hover);
}
.epb-card:active[b-5vdxjj2ngd] { cursor: grabbing; }
.epb-card.sel[b-5vdxjj2ngd] {
    border-color: var(--vh-primary-hover);
    box-shadow: inset 0 0 0 1px var(--vh-primary-hover);
}

.epb-card-top[b-5vdxjj2ngd] { display: flex; align-items: center; gap: .5rem; }
.epb-check[b-5vdxjj2ngd] { flex: 0 0 auto; margin: 0; cursor: pointer; }
.epb-avatar[b-5vdxjj2ngd] {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    background: var(--vh-surface-soft); color: var(--vh-body); font-weight: 600; font-size: 13px;
    display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
}
.epb-avatar img[b-5vdxjj2ngd] { width: 100%; height: 100%; object-fit: cover; }
.epb-card-id[b-5vdxjj2ngd] { flex: 1 1 auto; min-width: 0; }
.epb-name[b-5vdxjj2ngd] { font-weight: 600; font-size: .85rem; color: var(--vh-ink); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epb-name:hover[b-5vdxjj2ngd] { color: var(--vh-primary); text-decoration: underline; }
.epb-pos[b-5vdxjj2ngd] { font-size: 12px; color: var(--vh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Candidate flag (1 var(--vh-danger) / 2 var(--vh-warning)) */
.epb-flag-1[b-5vdxjj2ngd] { color: var(--vh-danger); font-size: 13px; flex: 0 0 auto; }
.epb-flag-2[b-5vdxjj2ngd] { color: var(--vh-warning); font-size: 13px; flex: 0 0 auto; }

/* ===== canadaOffice card block (legacy renderCanadianOfficeInfo /
   renderContractInfo) ===== */
.cap-info[b-5vdxjj2ngd] { margin-top: .45rem; display: flex; flex-direction: column; gap: .3rem; }

.cap-line[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 12px;
    color: var(--vh-body);
    min-width: 0;
}
.cap-line i[b-5vdxjj2ngd] { color: var(--vh-muted); width: 14px; text-align: center; flex: 0 0 14px; }
.cap-line span[b-5vdxjj2ngd] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Matching bar — 4 colour bands (var(--vh-primary) / var(--vh-success) /
   var(--vh-warning) / var(--vh-danger), emitted by MatchColor()) */
.cap-match[b-5vdxjj2ngd] { display: flex; align-items: center; gap: .4rem; }
.cap-match i[b-5vdxjj2ngd] { color: var(--vh-muted); width: 14px; text-align: center; flex: 0 0 14px; font-size: 12px; }
.cap-match-track[b-5vdxjj2ngd] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--vh-line);
    overflow: hidden;
}
.cap-match-bar[b-5vdxjj2ngd] { height: 100%; border-radius: 3px; }
.cap-match-pct[b-5vdxjj2ngd] { font-size: 12px; font-weight: 700; flex: 0 0 auto; }

/* var(--vh-danger) dot marker for "Below …" income ranges (legacy Circle) */
.cap-below-dot[b-5vdxjj2ngd] {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--vh-danger); display: inline-block; flex: 0 0 8px;
}

/* Priority badge + dropdown (legacy renderPriorityField / priorityInfoList:
   0 Not Set var(--vh-muted), 1 Low var(--vh-warning-light),
   2 Medium var(--vh-secondary), 3 High var(--vh-danger)) */
.cap-priority-wrap[b-5vdxjj2ngd] { position: relative; margin-top: .4rem; }
.cap-priority[b-5vdxjj2ngd] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--vh-line);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-pill);
    padding: .12rem .55rem;
    font-size: 12px;
    color: var(--vh-body);
    cursor: pointer;
}
.cap-priority:hover[b-5vdxjj2ngd] { border-color: var(--vh-primary); }
.cap-priority-dot[b-5vdxjj2ngd] { width: 9px; height: 9px; border-radius: 50%; background: var(--vh-black-30); flex: 0 0 9px; }
.cap-priority-0 .cap-priority-dot[b-5vdxjj2ngd], .cap-priority-dot.cap-priority-0[b-5vdxjj2ngd] { background: var(--vh-black-30); }
.cap-priority-1 .cap-priority-dot[b-5vdxjj2ngd], .cap-priority-dot.cap-priority-1[b-5vdxjj2ngd] { background: var(--vh-warning-light); }
.cap-priority-2 .cap-priority-dot[b-5vdxjj2ngd], .cap-priority-dot.cap-priority-2[b-5vdxjj2ngd] { background: var(--vh-secondary-hover); }
.cap-priority-3 .cap-priority-dot[b-5vdxjj2ngd], .cap-priority-dot.cap-priority-3[b-5vdxjj2ngd] { background: var(--vh-danger-light); }

.cap-priority-menu[b-5vdxjj2ngd] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: var(--epb-z-cardmenu);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    box-shadow: 0 8px 24px rgb(var(--vh-raw-rgb-17-24-39) / .15);
    padding: .3rem;
    min-width: 130px;
}
.cap-priority-item[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--vh-body);
    padding: .28rem .4rem;
    border-radius: .3rem;
    cursor: pointer;
    text-align: left;
}
.cap-priority-item:hover[b-5vdxjj2ngd] { background: var(--vh-blue-tint); }

/* Meta row: hourglass daysAgo */
.epb-meta[b-5vdxjj2ngd] { display: flex; gap: .7rem; margin-top: .35rem; font-size: 12px; color: var(--vh-muted); flex-wrap: wrap; }
.epb-meta i[b-5vdxjj2ngd] { color: var(--vh-muted); margin-right: .15rem; }

/* Call status line (legacy bookACallInfo disabled states) — tonal pill pairs */
.epb-call-line[b-5vdxjj2ngd] {
    margin-top: .35rem;
    font-size: 12px;
    font-weight: 600;
    border-radius: .3rem;
    padding: .2rem .4rem;
    display: inline-block;
}
.epb-call-line i[b-5vdxjj2ngd] { margin-right: .25rem; }
.epb-call-requested[b-5vdxjj2ngd] { background: var(--vh-tonal-blue-bg); color: var(--vh-tonal-blue-text); }
.epb-call-scheduled[b-5vdxjj2ngd] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); }
.epb-call-canceled[b-5vdxjj2ngd] { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); }

/* Active Book a call — interview-pipeline primary button (mirrors .ipb-btn-primary
   / the .vh-btn-gradient utility; local h30 keeps the card density) */
.epb-bookacall[b-5vdxjj2ngd] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--vh-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: .35rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--vh-on-primary);
    border: 1px solid var(--vh-transparent);
    background: var(--vh-gradient-primary);
    box-shadow: 0 6px 14px -8px rgb(var(--vh-primary-hover-rgb) / 70%);
    transition: all .2s ease;
}
.epb-bookacall:hover[b-5vdxjj2ngd] { filter: brightness(1.04); box-shadow: 0 10px 18px -8px rgb(var(--vh-primary-hover-rgb) / 80%); }
.epb-bookacall:disabled[b-5vdxjj2ngd] {
    color: var(--vh-muted);
    border: 1px solid var(--vh-line);
    background: var(--vh-surface-soft);
    box-shadow: none;
    cursor: wait;
    filter: none;
}

/* Filter button + Clear Filters (legacy header FilterPipeline trigger) */
.epb-filter-btn[b-5vdxjj2ngd] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 13px;
    color: var(--vh-muted);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    padding: .3rem .6rem;
    cursor: pointer;
    white-space: nowrap;
}
.epb-filter-btn:hover:not(:disabled)[b-5vdxjj2ngd] { color: var(--vh-primary); border-color: var(--vh-primary); }
.epb-filter-btn:disabled[b-5vdxjj2ngd] { color: var(--vh-black-30); cursor: not-allowed; }
.epb-clearfilters[b-5vdxjj2ngd] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.epb-clearfilters:hover[b-5vdxjj2ngd] { text-decoration: underline; }

/* Assignee chip + picker (legacy AssigneeCandidates) */
.epb-assignee-wrap[b-5vdxjj2ngd] { position: relative; margin-top: .4rem; }
.epb-assignee[b-5vdxjj2ngd] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--vh-line);
    background: var(--vh-surface-soft);
    border-radius: var(--vh-radius-pill);
    padding: .12rem .5rem .12rem .15rem;
    font-size: 12px;
    color: var(--vh-body);
    cursor: pointer;
    max-width: 100%;
}
.epb-assignee:hover[b-5vdxjj2ngd] { border-color: var(--vh-primary); color: var(--vh-primary); }
.epb-assignee-avatar[b-5vdxjj2ngd] {
    width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
    background: var(--vh-black-20); color: var(--vh-body); font-weight: 600;
    font-size: .55rem;   /* intentionally sub-caption — matches the EventPipeline board */
    display: flex; align-items: center; justify-content: center; flex: 0 0 20px;
}
.epb-assignee-avatar img[b-5vdxjj2ngd] { width: 100%; height: 100%; object-fit: cover; }
.epb-assignee-name[b-5vdxjj2ngd] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

.epb-assignee-menu[b-5vdxjj2ngd] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: var(--epb-z-cardmenu);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    box-shadow: 0 8px 24px rgb(var(--vh-raw-rgb-17-24-39) / .15);
    padding: .45rem;
    width: 230px;
}
.epb-assignee-unassign[b-5vdxjj2ngd] {
    width: 100%;
    border: none;
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    font-size: 12px;
    border-radius: .3rem;
    padding: .25rem .4rem;
    cursor: pointer;
    margin-bottom: .35rem;
    text-align: left;
}
.epb-assignee-unassign:hover[b-5vdxjj2ngd] { background: var(--vh-danger-soft); }
.epb-assignee-search[b-5vdxjj2ngd] { width: 100%; font-size: 12px; }
.epb-assignee-list[b-5vdxjj2ngd] {
    max-height: 170px;
    overflow-y: auto;
    margin-top: .35rem;
    display: flex;
    flex-direction: column;
}
.epb-assignee-item[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--vh-body);
    padding: .25rem .3rem;
    border-radius: .3rem;
    cursor: pointer;
    text-align: left;
}
.epb-assignee-item:hover[b-5vdxjj2ngd] { background: var(--vh-blue-tint); }
.epb-assignee-empty[b-5vdxjj2ngd] { font-size: 12px; color: var(--vh-muted); padding: .3rem; }

/* Card actions — interview-pipeline button pair: Move = soft outline
   (.ipb-btn-outline), Reject = subtle-until-hover var(--vh-danger) (.ipb-btn-subtle,
   scoped .epb-reject — no Bootstrap .text-danger override war) */
.epb-card-actions[b-5vdxjj2ngd] { display: flex; gap: .5rem; margin-top: .5rem; align-items: center; }
.epb-card-actions a[b-5vdxjj2ngd] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--vh-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    color: var(--vh-primary);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line-strong);
    text-decoration: none;
    transition: all .2s ease;
}
.epb-card-actions a:hover[b-5vdxjj2ngd] { color: var(--vh-primary); border-color: var(--vh-primary-hover); background: var(--vh-blue-tint); }
.epb-card-actions a.epb-reject[b-5vdxjj2ngd] { color: var(--vh-body); }
.epb-card-actions a.epb-reject:hover[b-5vdxjj2ngd] { color: var(--vh-tonal-red-text); border-color: var(--vh-tonal-red-bd); background: var(--vh-tonal-red-bg); }

.epb-movelist[b-5vdxjj2ngd] {
    margin-top: .4rem;
    border-top: 1px solid var(--vh-line);
    padding-top: .35rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.epb-movelist a[b-5vdxjj2ngd] { font-size: 13px; color: var(--vh-primary); cursor: pointer; padding: .1rem .25rem; border-radius: var(--vh-radius); }
.epb-movelist a:hover[b-5vdxjj2ngd] { background: var(--vh-blue-tint); }

/* Per-column "Load more" (legacy InfiniteScroll, pages of 10) */
.epb-loadmore[b-5vdxjj2ngd] {
    border: 1px dashed var(--vh-line-strong);
    background: var(--vh-transparent);
    color: var(--vh-muted);
    font-size: 12px;
    border-radius: .35rem;
    padding: .25rem;
    cursor: pointer;
}
.epb-loadmore:hover:not(:disabled)[b-5vdxjj2ngd] { color: var(--vh-primary); border-color: var(--vh-primary); }

/* ===== Bulk action bar — inverted slab: --vh-black-90 flips to near-white on
   the dark theme, so the text pairs with --vh-surface (flips the other way) ===== */
.epb-bulkbar[b-5vdxjj2ngd] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    z-index: var(--epb-z-bulkbar);
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--vh-black-90);
    color: var(--vh-surface);
    border-radius: .6rem;
    padding: .5rem .8rem;
    box-shadow: 0 10px 30px rgb(var(--vh-raw-rgb-17-24-39) / .35);
}
.epb-bulk-count[b-5vdxjj2ngd] { font-size: 13px; font-weight: 600; white-space: nowrap; }
/* "Move to…" VhDropdown sizing inside the bar (child component → ::deep) */
.epb-bulkbar[b-5vdxjj2ngd]  .vh-dd-btn { min-width: 150px; font-size: 13px; padding: 4px 12px; }
/* Inverted-slab exception: muted text-button ink is unreadable on the slab in
   both themes — pin var(--vh-primary-hover) (same as the EventPipeline bulk Clear). */
.epb-bulkbar .epb-bulk-clear[b-5vdxjj2ngd] { color: var(--vh-primary-hover); }
.epb-bulk-chat-wrap[b-5vdxjj2ngd] { display: inline-flex; }

/* ===== Reject modal (legacy canada RejectModal) ===== */
.epb-reasons[b-5vdxjj2ngd] { display: flex; flex-direction: column; gap: .35rem; max-height: 300px; overflow-y: auto; }
.epb-reason[b-5vdxjj2ngd] {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: 13px;
    color: var(--vh-body);
    cursor: pointer;
    margin: 0;
}
.epb-reason input[b-5vdxjj2ngd] { margin-top: .15rem; }

/* Custom feedback question (Yes/No) + the feedback editor step */
.cap-feedback-ask[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: 13px;
    color: var(--vh-body);
    flex-wrap: wrap;
}
.cap-feedback-opt[b-5vdxjj2ngd] { display: inline-flex; align-items: center; gap: .3rem; margin: 0; cursor: pointer; }
.cap-feedback[b-5vdxjj2ngd] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Small form labels + inline validation (canon caption size 12px) */
.cap-form-label[b-5vdxjj2ngd] { font-size: 12px; }
.cap-validation[b-5vdxjj2ngd] { font-size: 12px; color: var(--vh-danger); }

/* ===== Modal forms (CONTRACT INFO / Add Candidate — legacy RelocationContainer) ===== */
.cap-contract-name[b-5vdxjj2ngd] { font-weight: 700; font-size: .9rem; color: var(--vh-ink); margin-bottom: .6rem; }

.cap-form[b-5vdxjj2ngd] { display: flex; flex-wrap: wrap; gap: .6rem .9rem; }
.cap-field[b-5vdxjj2ngd] { flex: 1 1 calc(50% - .9rem); min-width: 220px; }
.cap-field.cap-wide[b-5vdxjj2ngd] { flex: 1 1 100%; }

.cap-label[b-5vdxjj2ngd] { display: block; font-size: 12px; color: var(--vh-body); margin-bottom: .2rem; }
.cap-label.req[b-5vdxjj2ngd]::after { content: " *"; color: var(--vh-danger); }

/* Required-field error ring for the combo controls (Autocomplete input /
   VhDropdown button are child components → ::deep) */
.cap-field-err[b-5vdxjj2ngd]  .form-control, .cap-field-err[b-5vdxjj2ngd]  .vh-dd-btn { border-color: var(--vh-danger); }

/* Autocomplete combos (ui-combos.md Tipo 1) */
.cap-opt-empty[b-5vdxjj2ngd] { font-size: .85rem; color: var(--vh-muted); }

/* Growth Manager async picker (legacy AsyncSelect → Blazorise Autocomplete) */
.cap-gm-wrap[b-5vdxjj2ngd] { position: relative; }
.cap-gm-wrap.err[b-5vdxjj2ngd]  .form-control, .cap-gm-wrap.err .cap-gm-selected[b-5vdxjj2ngd] { border-color: var(--vh-danger); }
.cap-gm-selected[b-5vdxjj2ngd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius);
    padding: .25rem .5rem;
    font-size: 13px;
    color: var(--vh-body);
    background: var(--vh-surface-soft);
}
.cap-gm-selected a[b-5vdxjj2ngd] { color: var(--vh-muted); cursor: pointer; }
.cap-gm-selected a:hover[b-5vdxjj2ngd] { color: var(--vh-danger); }
/* /Pages/CandidateEvents/Index.razor.rz.scp.css */
/* Candidate Events (screen 07) — faithful port of react-platform
   event-candidates-list styles (styled-components → vh tokens).
   Sources: pages/b2b/event/event-candidates-list/styles.js,
   Shared/highlighted-events/styles.js, components/CandidateCard/styles.js,
   Shared/no-events/styles.js, event-candidates-list/skeleton/styles.js.
   Odd spacing values (2.063rem, 1.313rem, 4.5rem, ...) are verbatim legacy
   px-to-rem conversions kept for pixel parity with the source screens. */

/* Page root: normal LeptonX content flow (design-system §12) — no centered
   max-width box; content starts at the standard gutter under PageHeader and
   the card grid fills the width fluidly. */
.vh-cand-events[b-o52pbhv3pb] {
    width: 100%;
    font-family: var(--vh-font-primary);
    color: var(--vh-gray-90);
}

/* ---- section titles (OtherEvents SectionTitle) -------------------------- */

.vh-ce-section-title[b-o52pbhv3pb] {
    display: flex;
    justify-content: space-between;
    margin: 4.5rem 0 2.063rem 0;
}

.vh-ce-section-title h4[b-o52pbhv3pb] {
    margin: 0;
    font-family: var(--vh-font-heading);
    font-size: 24px;            /* app-scale H4 (design-system section 3) */
    line-height: 32px;
    font-weight: bold;
    color: var(--vh-text-heading);
}

.vh-cand-events > .vh-ce-section-title:first-child[b-o52pbhv3pb] {
    margin-top: 0;
}

/* ---- shared card pieces -------------------------------------------------- */

.vh-ce-pill[b-o52pbhv3pb] {
    width: max-content;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vh-radius-pill);
    background-color: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    padding: 0.125rem 0.75rem;
    font-size: 14px;            /* body.md */
    color: var(--vh-gray-90);
    text-align: center;
}

.vh-ce-date[b-o52pbhv3pb] {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--vh-black-60);
}

.vh-ce-date .vh-ce-online[b-o52pbhv3pb] {
    margin-left: 1.313rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--vh-black-60);
}

/* CTAs use the global .vh-btn-primary / .vh-btn-outline-primary + .vh-btn-lg
   utilities (vh-tokens.css); only the legacy fixed width stays local. */
.vh-ce-cta-btn[b-o52pbhv3pb] {
    width: 150px;
}

.vh-ce-registered[b-o52pbhv3pb] {
    height: 35px;
    display: grid;
    grid-template-columns: 35px max-content;
    grid-gap: 0.75rem;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--vh-gray-90);
}

.vh-ce-avatar[b-o52pbhv3pb] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
}

/* ---- promoted hero (HighlightedEvents) ----------------------------------- */

.vh-ce-hero-card[b-o52pbhv3pb] {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-content: space-between;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    box-sizing: border-box;
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-surface);
    cursor: pointer;
    animation: vh-ce-fade-b-o52pbhv3pb 0.4s ease;
}

.vh-ce-hero-content[b-o52pbhv3pb] {
    height: 100%;
    width: 100%;
    display: grid;
    grid-gap: 1.313rem;
    justify-content: space-between;
    align-content: center;
    padding: 2.063rem;
    box-sizing: border-box;
    border-radius: var(--vh-radius-lg) 0 0 var(--vh-radius-lg);
}

.vh-ce-hero-content h3[b-o52pbhv3pb] {
    margin: 0;
    font-family: var(--vh-font-heading);
    font-size: 28px;            /* app-scale H3 (design-system section 3) */
    line-height: 36px;
    font-weight: bold;
    color: var(--vh-text-heading);
}

.vh-ce-hero-cover[b-o52pbhv3pb] {
    width: 100%;
    height: 100%;
    border-radius: 0 var(--vh-radius-lg) var(--vh-radius-lg) 0;
    object-fit: cover;
    overflow: hidden;
    min-height: 280px;
}

.vh-ce-cta[b-o52pbhv3pb] {
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto;
    grid-gap: 0.75rem;
    align-items: center;
}

.vh-ce-hero-dots[b-o52pbhv3pb] {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
}

.vh-ce-hero-dot[b-o52pbhv3pb] {
    cursor: pointer;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--vh-black-20);
    transition: all 0.4s ease;
}

.vh-ce-hero-dot.active[b-o52pbhv3pb] {
    background-color: var(--vh-primary-hover); /* legacy var(--vh-primary-hover) */
}

/* ---- grouped cards (CandidateCard) ---------------------------------------- */

.vh-ce-card[b-o52pbhv3pb] {
    width: 100%;
    display: grid;
    grid-template-columns: 385px 1fr;
    align-items: center;
    justify-content: space-between;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    box-sizing: border-box;
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-surface);
    transition: border-color .2s ease, background-color .2s ease;
    cursor: pointer;
}

.vh-ce-card:hover[b-o52pbhv3pb] {
    border-color: var(--vh-primary-hover);
    background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}

.vh-ce-card + .vh-ce-card[b-o52pbhv3pb] {
    margin-top: 2.5rem;
}

.vh-ce-card-cover[b-o52pbhv3pb] {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: var(--vh-radius-lg) 0 0 var(--vh-radius-lg);
    object-fit: cover;
    overflow: hidden;
}

.vh-ce-card-content[b-o52pbhv3pb] {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 150px;
    grid-gap: 1.313rem;
    justify-content: space-between;
    padding: 2.063rem;
    box-sizing: border-box;
    border-radius: 0 var(--vh-radius-lg) var(--vh-radius-lg) 0;
}

.vh-ce-card-left[b-o52pbhv3pb] {
    display: grid;
    grid-gap: 1.313rem;
    align-content: center;
}

.vh-ce-card-left h5[b-o52pbhv3pb] {
    margin: 0;
    font-family: var(--vh-font-heading);
    font-size: 20px;            /* app-scale H5 (design-system section 3) */
    line-height: 24px;
    font-weight: bold;
    color: var(--vh-text-heading);
}

.vh-ce-card-right[b-o52pbhv3pb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vh-ce-exclusive[b-o52pbhv3pb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.vh-ce-exclusive p[b-o52pbhv3pb] {
    margin: 0;
    font-size: 13px;
    color: var(--vh-gray-90);
}

.vh-ce-exclusive-tag[b-o52pbhv3pb] {
    width: auto;
    min-height: 1.313rem;
    border-radius: var(--vh-radius-sm);
    background-color: var(--vh-gray-20);
    padding: 0.125rem 0.375rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 12px;            /* caption */
    color: var(--vh-gray-90);
}

/* ---- empty state (NoEvents ticket) ---------------------------------------- */

.vh-ce-empty[b-o52pbhv3pb] {
    min-height: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.vh-ce-empty-icon[b-o52pbhv3pb] {
    position: relative;
    height: 156px;
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vh-ce-empty-rect[b-o52pbhv3pb] {
    background: var(--vh-blue-20);
    height: 67px;
    width: 114px;
    border-radius: 70px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.vh-ce-empty-rect-top[b-o52pbhv3pb] { top: 42%; }
.vh-ce-empty-rect-bottom[b-o52pbhv3pb] { top: 62%; }

.vh-ce-empty-ticket[b-o52pbhv3pb] {
    height: 65px;
    width: 65px;
    position: absolute;
    z-index: 2;
    color: var(--vh-black-70);  /* SVG paths inherit this text color */
}

.vh-ce-empty-title[b-o52pbhv3pb] {
    margin-top: 1rem;
    font-size: 16px;
    font-weight: bold;
    color: var(--vh-text-heading);
    line-height: 19px;
    text-align: center;
}

.vh-ce-empty-sub[b-o52pbhv3pb] {
    margin-top: 0.375rem;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--vh-gray-90);
}

/* ---- skeleton -------------------------------------------------------------- */

.vh-ce-skeleton[b-o52pbhv3pb] {
    display: grid;
    grid-gap: 1.5rem;
}

.vh-ce-skel-title[b-o52pbhv3pb],
.vh-ce-skel-hero[b-o52pbhv3pb],
.vh-ce-skel-card[b-o52pbhv3pb] {
    border-radius: var(--vh-radius-lg);
    background: linear-gradient(90deg, var(--vh-black-10) 25%, var(--vh-line) 37%, var(--vh-black-10) 63%);
    background-size: 400% 100%;
    animation: vh-ce-shimmer-b-o52pbhv3pb 1.4s ease infinite;
}

.vh-ce-skel-title[b-o52pbhv3pb] { height: 28px; width: 200px; border-radius: var(--vh-radius); }
.vh-ce-skel-hero[b-o52pbhv3pb] { height: 397px; }
.vh-ce-skel-card[b-o52pbhv3pb] { height: 220px; }

@keyframes vh-ce-shimmer-b-o52pbhv3pb {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes vh-ce-fade-b-o52pbhv3pb {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

/* ---- responsive (legacy md/sd stack) --------------------------------------- */

@media (max-width: 900px) {
    .vh-ce-hero-card[b-o52pbhv3pb],
    .vh-ce-card[b-o52pbhv3pb] {
        grid-template-columns: 1fr;
        border: none;
    }

    .vh-ce-card:hover[b-o52pbhv3pb] { box-shadow: none; }

    .vh-ce-hero-cover[b-o52pbhv3pb],
    .vh-ce-card-cover[b-o52pbhv3pb] {
        order: -1;
        height: 315px;
        border-radius: var(--vh-radius-lg);
        min-height: unset;
    }

    .vh-ce-hero-content[b-o52pbhv3pb],
    .vh-ce-card-content[b-o52pbhv3pb] {
        border-radius: var(--vh-radius-lg);
        grid-template-columns: 1fr;
    }

    .vh-ce-hero-content h3[b-o52pbhv3pb] { font-size: 22px; line-height: 34px; }

    .vh-ce-section-title[b-o52pbhv3pb] {
        margin: 3.75rem 0 2.063rem;
        padding-top: 3.75rem;
        border-top: 1px solid var(--vh-gray-30);
    }
}

@media (max-width: 476px) {
    .vh-ce-hero-content[b-o52pbhv3pb],
    .vh-ce-card-content[b-o52pbhv3pb] { padding: 1.5rem; }

    .vh-ce-hero-cover[b-o52pbhv3pb],
    .vh-ce-card-cover[b-o52pbhv3pb] { height: 215px; }
}
/* /Pages/Chat/Index.razor.rz.scp.css */
/* VanHack chat — two-pane messenger. Colors/typography ride the vh-* design
   tokens (vh-tokens.css / Documentation/design-system.md), so the LeptonX
   dark-theme token remap applies automatically — no hardcoded colors here. */

.vh-chat[b-6bwe3f242s] {
    display: flex;
    /* 120px ≈ LeptonX header + content paddings at default density (the page
       renders no PageHeader — the messenger owns the full content height);
       dvh keeps the pane correct when mobile browser chrome collapses. */
    height: calc(100dvh - 120px);
    min-height: 460px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-lg);
    overflow: hidden;
    background: var(--vh-surface);
    font-family: var(--vh-font-primary);
}

/* Full-canvas status, used for a failed initial snapshot and for the candidate
   inbox before the first recruiter message. It remains visible on mobile, where
   the normal conversation pane is hidden until a thread is opened. */
.vh-chat-canvas-state[b-6bwe3f242s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 7vw, 5rem);
    text-align: center;
    background: var(--vh-surface);
}

.vh-chat-canvas-state-icon[b-6bwe3f242s] {
    position: relative;
    display: grid;
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid var(--vh-tonal-blue-bd);
    border-radius: 50%;
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
    font-size: 1.8rem;
}

.vh-chat-canvas-state-icon .fa-paper-plane[b-6bwe3f242s] {
    position: absolute;
    right: -4px;
    bottom: 2px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 3px solid var(--vh-surface);
    border-radius: 50%;
    background: var(--vh-secondary-soft);
    color: var(--vh-secondary);
    font-size: .72rem;
}

.vh-chat-canvas-state h1[b-6bwe3f242s] {
    margin: 0;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 700;
}

.vh-chat-canvas-state p[b-6bwe3f242s] {
    max-width: 470px;
    margin: .55rem 0 0;
    color: var(--vh-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.vh-chat-load-retry[b-6bwe3f242s] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    padding: .55rem 1rem;
    border: 0;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
}

.vh-chat-load-retry:hover:not(:disabled)[b-6bwe3f242s] {
    background: var(--vh-primary-hover);
}

.vh-chat-load-retry:focus-visible[b-6bwe3f242s] {
    outline: 2px solid var(--vh-primary);
    outline-offset: 3px;
}

.vh-chat-load-retry:disabled[b-6bwe3f242s] {
    cursor: wait;
    opacity: .65;
}

/* ---------------- left pane ---------------- */
.vh-chat-list[b-6bwe3f242s] {
    width: 320px;
    min-width: 280px;
    min-height: 0;
    border-right: 1px solid var(--vh-line);
    display: flex;
    flex-direction: column;
}

.vh-chat-list-head[b-6bwe3f242s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--vh-line);
}

.vh-chat-title[b-6bwe3f242s] {
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.vh-chat-unread-total[b-6bwe3f242s] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--vh-radius-pill);
    padding: .05rem .45rem;
    min-width: 1.2rem;
    text-align: center;
}

.vh-chat-head-actions[b-6bwe3f242s] {
    display: flex;
    gap: .35rem;
}

.vh-chat-list-tools[b-6bwe3f242s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--vh-line);
    background: var(--vh-surface-soft);
}

.vh-chat-filter-group[b-6bwe3f242s] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .15rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-pill);
    background: var(--vh-surface);
}

.vh-chat-filter[b-6bwe3f242s] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 28px;
    padding: .25rem .55rem;
    border: 0;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-transparent);
    color: var(--vh-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.vh-chat-filter:hover[b-6bwe3f242s],
.vh-chat-filter.active[b-6bwe3f242s] {
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
}

.vh-chat-filter span[b-6bwe3f242s] {
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    text-align: center;
    font-size: 11px;
}

.vh-chat-sort[b-6bwe3f242s] {
    min-width: 112px;
}

.vh-chat-sort[b-6bwe3f242s]  .vh-dd-btn {
    min-height: 30px;
    padding: .32rem .5rem;
    font-size: 12px;
}

.vh-chat-filter:focus-visible[b-6bwe3f242s],
.vh-chat-new-messages:focus-visible[b-6bwe3f242s] {
    outline: 2px solid var(--vh-primary);
    outline-offset: 2px;
}

.vh-chat-iconbtn[b-6bwe3f242s] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vh-body);
    cursor: pointer;
}

.vh-chat-iconbtn:hover[b-6bwe3f242s] {
    background: var(--vh-surface-soft);
}

.vh-chat-newbtn[b-6bwe3f242s] {
    appearance: none;
    padding: 0;
    border: 0;
    background: var(--vh-transparent);
    text-decoration: none;
}

.vh-chat-newbtn:focus-visible[b-6bwe3f242s] {
    outline: 2px solid var(--vh-primary);
    outline-offset: 2px;
}

/* Mobile-only: back-to-list button in the conversation header. */
.vh-chat-back[b-6bwe3f242s] {
    display: none;
}

.vh-chat-contacts[b-6bwe3f242s] {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--vh-line);
    background: var(--vh-surface-soft);
}

/* Autocomplete option row (avatar + name/company) — rendered via ItemContent. */
.vh-chat-contact[b-6bwe3f242s] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .15rem 0;
    border-radius: var(--vh-radius-md);
}

.vh-chat-contact-meta[b-6bwe3f242s] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vh-chat-contact-name[b-6bwe3f242s] {
    font-weight: 600;
    font-size: 14px;
}

.vh-chat-contact-sub[b-6bwe3f242s] {
    color: var(--vh-muted);
    font-size: 12px;
}

.vh-chat-threads[b-6bwe3f242s] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.vh-chat-bucket[b-6bwe3f242s] {
    padding: .55rem 1rem .25rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vh-muted);
}

.vh-chat-thread[b-6bwe3f242s] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--vh-line);
}

.vh-chat-thread:hover[b-6bwe3f242s] {
    background: var(--vh-surface-soft);
}

.vh-chat-thread.active[b-6bwe3f242s] {
    background: var(--vh-blue-tint);
}

.vh-chat-thread-meta[b-6bwe3f242s] {
    flex: 1;
    min-width: 0;
}

.vh-chat-thread-top[b-6bwe3f242s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.vh-chat-thread-name[b-6bwe3f242s] {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vh-chat-thread-time[b-6bwe3f242s] {
    color: var(--vh-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.vh-chat-thread-bottom[b-6bwe3f242s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .1rem;
}

.vh-chat-thread-last[b-6bwe3f242s] {
    color: var(--vh-body);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vh-chat-badge[b-6bwe3f242s] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--vh-radius-pill);
    padding: .05rem .4rem;
    min-width: 1.15rem;
    text-align: center;
    flex-shrink: 0;
}

/* ---------------- avatars + presence dot ---------------- */
.vh-chat-avatar[b-6bwe3f242s] {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: visible;
    background: var(--vh-surface-soft);
    color: var(--vh-body);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vh-chat-avatar.sm[b-6bwe3f242s] {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.vh-chat-avatar img[b-6bwe3f242s] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.vh-chat-dot[b-6bwe3f242s] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--vh-surface);
}

.vh-chat-dot.online[b-6bwe3f242s] {
    background: var(--vh-success);
}

/* ---------------- right pane ---------------- */
.vh-chat-conv[b-6bwe3f242s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.vh-chat-placeholder[b-6bwe3f242s] {
    margin: auto;
    text-align: center;
    color: var(--vh-muted);
    font-size: 14px;
}

.vh-chat-placeholder .b-icon[b-6bwe3f242s],
.vh-chat-placeholder i[b-6bwe3f242s] {
    font-size: 2.4rem;
    display: block;
    margin-bottom: .6rem;
    opacity: .5;
}

.vh-chat-conv-head[b-6bwe3f242s] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem 1.15rem;
    border-bottom: 1px solid var(--vh-line);
}

.vh-chat-conv-meta[b-6bwe3f242s] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vh-chat-conv-name[b-6bwe3f242s] {
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-weight: 700;
    font-size: 16px;
}

.vh-chat-conv-sub[b-6bwe3f242s] {
    font-size: 13px;
    color: var(--vh-muted);
    min-height: 1.05rem;
}

.vh-chat-typing[b-6bwe3f242s] {
    color: var(--vh-success);
    font-style: italic;
}

.vh-chat-messages[b-6bwe3f242s] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    background: var(--vh-surface-soft);
}

.vh-chat-new-messages[b-6bwe3f242s] {
    position: absolute;
    left: 50%;
    bottom: 72px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transform: translateX(-50%);
    padding: .42rem .75rem;
    border: 1px solid var(--vh-primary);
    border-radius: var(--vh-radius-pill);
    background: var(--vh-surface);
    color: var(--vh-primary);
    box-shadow: var(--vh-shadow-pop);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.vh-chat-new-messages:hover[b-6bwe3f242s] {
    background: var(--vh-blue-tint);
}

.vh-chat-loadmore[b-6bwe3f242s] {
    text-align: center;
    margin-bottom: .5rem;
}

.vh-chat-loadmore a[b-6bwe3f242s] {
    font-size: 13px;
    color: var(--vh-primary);
    cursor: pointer;
}

.vh-chat-loadmore a:hover[b-6bwe3f242s] {
    color: var(--vh-primary-hover);
}

.vh-chat-msg[b-6bwe3f242s] {
    display: flex;
    max-width: 78%;
}

.vh-chat-msg.mine[b-6bwe3f242s] {
    align-self: flex-end;
    justify-content: flex-end;
}

.vh-chat-msg.theirs[b-6bwe3f242s] {
    align-self: flex-start;
}

.vh-chat-bubble[b-6bwe3f242s] {
    padding: .5rem .7rem;
    border-radius: var(--vh-radius-card-sm);
    font-size: 14px;
    line-height: 1.35;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.vh-chat-msg.theirs .vh-chat-bubble[b-6bwe3f242s] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-bottom-left-radius: var(--vh-radius);
    color: var(--vh-ink);
}

.vh-chat-msg.mine .vh-chat-bubble[b-6bwe3f242s] {
    background: var(--vh-primary);
    color: var(--vh-on-primary); /* On-brand contrast token for both appearances. */
    border-bottom-right-radius: var(--vh-radius);
}

.vh-chat-time[b-6bwe3f242s] {
    display: block;
    font-size: 12px;
    opacity: .7;
    margin-top: .2rem;
    text-align: right;
}

.vh-chat-read[b-6bwe3f242s] {
    margin-left: .2rem;
}

.vh-chat-composer[b-6bwe3f242s] {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .65rem .85rem;
    border-top: 1px solid var(--vh-line);
}

.vh-chat-composer textarea[b-6bwe3f242s] {
    resize: none;
    max-height: 120px;
}

.vh-chat-empty[b-6bwe3f242s] {
    text-align: center;
    color: var(--vh-muted);
    font-size: 13px;
    padding: 1.5rem .5rem;
}

/* Mobile: the two panes are exclusive — the thread list by default, the
   conversation when one is open (.conv-open, set from OpenProfileId). */
@media (max-width: 768px) {
    .vh-chat-list[b-6bwe3f242s] {
        width: 100%;
        max-width: 100%;
        border-right: 0;
    }
    .vh-chat-conv[b-6bwe3f242s] {
        display: none;
    }
    .vh-chat.conv-open .vh-chat-list[b-6bwe3f242s] {
        display: none;
    }
    .vh-chat.conv-open .vh-chat-conv[b-6bwe3f242s] {
        display: flex;
    }
    .vh-chat-back[b-6bwe3f242s] {
        display: flex;
    }
}
/* /Pages/CommunicationHub/Index.razor.rz.scp.css */
.ch-page[b-5dojsn0w5o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    color: var(--vh-text-body);
    font-family: var(--vh-font-primary);
}

.ch-page-head[b-5dojsn0w5o] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.ch-eyebrow[b-5dojsn0w5o] {
    color: var(--vh-primary);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .13em;
}

.ch-page-head h1[b-5dojsn0w5o] {
    margin: .12rem 0 .2rem;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.ch-page-head p[b-5dojsn0w5o] {
    margin: 0;
    max-width: 720px;
    color: var(--vh-muted);
    font-size: .88rem;
}

.ch-live-pill[b-5dojsn0w5o] {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .35rem .65rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-pill);
    background: var(--vh-surface);
    color: var(--vh-muted);
    font-size: .75rem;
    font-weight: 650;
}

.ch-live-dot[b-5dojsn0w5o],
.ch-unread-dot[b-5dojsn0w5o] {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--vh-success);
}

.ch-filters[b-5dojsn0w5o] {
    display: flex;
    gap: .42rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ch-filters[b-5dojsn0w5o]::-webkit-scrollbar {
    display: none;
}

.ch-filter[b-5dojsn0w5o] {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 34px;
    padding: .35rem .65rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-pill);
    background: var(--vh-surface);
    color: var(--vh-body);
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ch-filter strong[b-5dojsn0w5o] {
    min-width: 1.15rem;
    padding: .05rem .28rem;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-surface-soft);
    color: var(--vh-muted);
    font-size: .68rem;
    text-align: center;
}

.ch-filter:hover[b-5dojsn0w5o],
.ch-filter.active[b-5dojsn0w5o] {
    border-color: var(--vh-primary);
    color: var(--vh-primary);
}

.ch-filter.active[b-5dojsn0w5o] {
    background: var(--vh-primary-soft);
}

.ch-filter.active strong[b-5dojsn0w5o] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
}

.ch-alert[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    border: 1px solid var(--vh-danger);
    border-radius: var(--vh-radius-md);
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
    font-size: .82rem;
}

.ch-alert span[b-5dojsn0w5o] {
    flex: 1;
}

.ch-alert button[b-5dojsn0w5o] {
    border: 0;
    background: var(--vh-transparent);
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ch-shell[b-5dojsn0w5o] {
    display: grid;
    grid-template-columns: minmax(290px, 355px) minmax(0, 1fr);
    height: calc(100dvh - 255px);
    min-height: 570px;
    overflow: hidden;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-lg);
    background: var(--vh-surface);
}

.ch-inbox[b-5dojsn0w5o],
.ch-conversation[b-5dojsn0w5o] {
    min-width: 0;
    min-height: 0;
}

.ch-inbox[b-5dojsn0w5o] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--vh-line);
    background: var(--vh-surface);
}

.ch-inbox-tools[b-5dojsn0w5o] {
    display: flex;
    gap: .45rem;
    padding: .72rem;
    border-bottom: 1px solid var(--vh-line);
}

.ch-search[b-5dojsn0w5o] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: 0 .62rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface-soft);
    color: var(--vh-muted);
}

.ch-search:focus-within[b-5dojsn0w5o] {
    border-color: var(--vh-primary);
    box-shadow: var(--vh-focus-ring);
}

.ch-search input[b-5dojsn0w5o] {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    outline: 0;
    background: var(--vh-transparent);
    color: var(--vh-body);
    font: inherit;
    font-size: .8rem;
}

.ch-search button[b-5dojsn0w5o] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-muted);
    cursor: pointer;
}

.ch-icon-button[b-5dojsn0w5o] {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-muted);
    cursor: pointer;
}

.ch-icon-button:hover:not(:disabled)[b-5dojsn0w5o] {
    border-color: var(--vh-primary);
    color: var(--vh-primary);
}

.ch-queue-caption[b-5dojsn0w5o] {
    display: flex;
    justify-content: space-between;
    padding: .45rem .78rem;
    border-bottom: 1px solid var(--vh-line);
    color: var(--vh-muted);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ch-thread-list[b-5dojsn0w5o] {
    flex: 1;
    overflow-y: auto;
}

.ch-thread[b-5dojsn0w5o] {
    position: relative;
    display: flex;
    width: 100%;
    gap: .65rem;
    padding: .78rem;
    border: 0;
    border-bottom: 1px solid var(--vh-line);
    background: var(--vh-transparent);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ch-thread:hover[b-5dojsn0w5o] {
    background: var(--vh-surface-soft);
}

.ch-thread.active[b-5dojsn0w5o] {
    background: var(--vh-primary-soft);
}

.ch-thread.active[b-5dojsn0w5o]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--vh-primary);
    content: "";
}

.ch-avatar[b-5dojsn0w5o] {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    overflow: visible;
    border-radius: 50%;
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
    font-size: .76rem;
    font-weight: 750;
}

.ch-avatar.large[b-5dojsn0w5o] {
    width: 42px;
    height: 42px;
}

.ch-avatar img[b-5dojsn0w5o] {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.ch-unread-dot[b-5dojsn0w5o] {
    position: absolute;
    right: -1px;
    bottom: 0;
    width: .56rem;
    height: .56rem;
    border: 2px solid var(--vh-surface);
    background: var(--vh-primary);
}

.ch-thread-content[b-5dojsn0w5o] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
}

.ch-thread-top[b-5dojsn0w5o] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.ch-thread-top strong[b-5dojsn0w5o] {
    overflow: hidden;
    color: var(--vh-text-heading);
    font-size: .82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-thread-top time[b-5dojsn0w5o] {
    flex: 0 0 auto;
    color: var(--vh-muted);
    font-size: .67rem;
}

.ch-thread-preview[b-5dojsn0w5o] {
    overflow: hidden;
    color: var(--vh-body);
    font-size: .75rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-thread-preview i[b-5dojsn0w5o] {
    margin-right: .22rem;
    color: var(--vh-muted);
    font-size: .65rem;
}

.ch-thread-meta[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .35rem;
    overflow: hidden;
}

.ch-status[b-5dojsn0w5o] {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    flex: 0 0 auto;
    padding: .12rem .4rem;
    border-radius: var(--vh-radius-pill);
    font-size: .62rem;
    font-weight: 700;
}

.ch-status.needs-reply[b-5dojsn0w5o] {
    background: var(--vh-secondary-soft);
    color: var(--vh-secondary);
}

.ch-status.waiting[b-5dojsn0w5o] {
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
}

.ch-status.resolved[b-5dojsn0w5o] {
    background: var(--vh-success-soft);
    color: var(--vh-success);
}

.ch-status.needs-link[b-5dojsn0w5o] {
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
}

.ch-assignee[b-5dojsn0w5o] {
    overflow: hidden;
    color: var(--vh-muted);
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-assignee.unassigned[b-5dojsn0w5o] {
    font-style: italic;
}

.ch-unread-count[b-5dojsn0w5o] {
    display: grid;
    min-width: 1.15rem;
    height: 1.15rem;
    align-self: center;
    place-items: center;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: .62rem;
    font-weight: 750;
}

.ch-load-more[b-5dojsn0w5o],
.ch-load-older[b-5dojsn0w5o] {
    display: block;
    margin: .65rem auto;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-primary);
    font: inherit;
    font-size: .75rem;
    font-weight: 650;
    cursor: pointer;
}

.ch-conversation[b-5dojsn0w5o] {
    display: flex;
    flex-direction: column;
    background: var(--vh-surface-soft);
}

.ch-conversation-head[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 68px;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--vh-line);
    background: var(--vh-surface);
}

.ch-back[b-5dojsn0w5o] {
    display: none;
}

.ch-candidate[b-5dojsn0w5o] {
    flex: 1;
    min-width: 0;
}

.ch-candidate-line[b-5dojsn0w5o],
.ch-candidate-sub[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.ch-candidate h2[b-5dojsn0w5o] {
    overflow: hidden;
    margin: 0;
    color: var(--vh-text-heading);
    font-size: .95rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-channel[b-5dojsn0w5o] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .13rem .38rem;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
    font-size: .62rem;
    font-weight: 700;
}

.ch-candidate-sub[b-5dojsn0w5o] {
    margin-top: .15rem;
    overflow: hidden;
    color: var(--vh-muted);
    font-size: .68rem;
    white-space: nowrap;
}

.ch-candidate-sub a[b-5dojsn0w5o] {
    color: var(--vh-primary);
    text-decoration: none;
}

.ch-candidate-sub i[b-5dojsn0w5o] {
    color: var(--vh-success);
}

.ch-head-actions[b-5dojsn0w5o] {
    display: flex;
    gap: .3rem;
}

.ch-action-button[b-5dojsn0w5o] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 32px;
    padding: .28rem .48rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-muted);
    font: inherit;
    font-size: .68rem;
    font-weight: 650;
    cursor: pointer;
}

.ch-action-button:hover:not(:disabled)[b-5dojsn0w5o],
.ch-action-button.selected[b-5dojsn0w5o] {
    border-color: var(--vh-primary);
    color: var(--vh-primary);
}

.ch-action-button.selected[b-5dojsn0w5o] {
    background: var(--vh-primary-soft);
}

.ch-collaboration[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .85rem;
    border-bottom: 1px solid var(--vh-line);
    background: var(--vh-surface);
}

.ch-collaboration > div:last-child[b-5dojsn0w5o] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ch-collaboration strong[b-5dojsn0w5o] {
    color: var(--vh-body);
    font-size: .69rem;
    font-weight: 650;
}

.ch-collaboration small[b-5dojsn0w5o] {
    color: var(--vh-muted);
    font-size: .64rem;
}

.ch-viewer-stack[b-5dojsn0w5o] {
    display: flex;
    min-width: 28px;
}

.ch-viewer-stack span[b-5dojsn0w5o] {
    display: grid;
    width: 25px;
    height: 25px;
    margin-left: -7px;
    place-items: center;
    border: 2px solid var(--vh-surface);
    border-radius: 50%;
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: .58rem;
    font-weight: 750;
}

.ch-viewer-stack span:first-child[b-5dojsn0w5o] {
    margin-left: 0;
}

.ch-typing[b-5dojsn0w5o] {
    display: inline-flex;
    gap: .12rem;
    margin-right: .3rem;
}

.ch-typing i[b-5dojsn0w5o] {
    width: .22rem;
    height: .22rem;
    border-radius: 50%;
    background: var(--vh-primary);
    animation: ch-bounce-b-5dojsn0w5o 1s infinite ease-in-out;
}

.ch-typing i:nth-child(2)[b-5dojsn0w5o] {
    animation-delay: .13s;
}

.ch-typing i:nth-child(3)[b-5dojsn0w5o] {
    animation-delay: .26s;
}

.ch-link-banner[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--vh-danger);
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
    font-size: .72rem;
}

.ch-link-copy[b-5dojsn0w5o] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .5rem;
}

.ch-link-banner span[b-5dojsn0w5o] {
    display: flex;
    flex-direction: column;
}

.ch-link-search[b-5dojsn0w5o] {
    position: relative;
    width: min(290px, 35vw);
}

.ch-link-search label[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .5rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    font-size: .65rem;
}

.ch-link-search input[b-5dojsn0w5o] {
    width: 100%;
    height: 32px;
    border: 0;
    outline: 0;
    background: var(--vh-transparent);
    color: var(--vh-body);
}

.ch-link-results[b-5dojsn0w5o] {
    position: absolute;
    z-index: 10;
    top: calc(100% + .25rem);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-pop);
}

.ch-link-results button[b-5dojsn0w5o] {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: .1rem;
    padding: .48rem .6rem;
    border: 0;
    border-bottom: 1px solid var(--vh-line);
    background: var(--vh-surface);
    color: var(--vh-body);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ch-link-results button:hover[b-5dojsn0w5o] {
    background: var(--vh-surface-soft);
}

.ch-link-results span[b-5dojsn0w5o] {
    color: var(--vh-muted);
    font-size: .62rem;
}

.ch-messages[b-5dojsn0w5o] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .85rem clamp(.75rem, 3vw, 2rem);
}

.ch-message[b-5dojsn0w5o] {
    display: flex;
    margin: .45rem 0;
}

.ch-message.outbound[b-5dojsn0w5o] {
    justify-content: flex-end;
}

.ch-bubble[b-5dojsn0w5o] {
    max-width: min(72%, 660px);
    padding: .58rem .7rem .42rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-lg);
    background: var(--vh-surface);
}

.ch-message.outbound .ch-bubble[b-5dojsn0w5o] {
    border-color: var(--vh-primary);
    background: var(--vh-primary-soft);
}

.ch-bubble.failed[b-5dojsn0w5o] {
    border-color: var(--vh-danger);
    background: var(--vh-danger-soft);
}

.ch-bubble p[b-5dojsn0w5o] {
    margin: 0;
    color: var(--vh-body);
    font-size: .82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.ch-bubble footer[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    margin-top: .3rem;
    color: var(--vh-muted);
    font-size: .6rem;
}

.ch-delivery[b-5dojsn0w5o] {
    color: var(--vh-primary);
}

.ch-message-error[b-5dojsn0w5o] {
    margin-top: .3rem;
    color: var(--vh-danger);
    font-size: .64rem;
}

.ch-day-divider[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .9rem 0;
    color: var(--vh-muted);
    font-size: .62rem;
    font-weight: 650;
}

.ch-day-divider[b-5dojsn0w5o]::before,
.ch-day-divider[b-5dojsn0w5o]::after {
    height: 1px;
    flex: 1;
    background: var(--vh-line);
    content: "";
}

.ch-composer[b-5dojsn0w5o] {
    padding: .65rem .85rem .8rem;
    border-top: 1px solid var(--vh-line);
    background: var(--vh-surface);
}

.ch-compose-box[b-5dojsn0w5o] {
    overflow: hidden;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
}

.ch-compose-box.focused[b-5dojsn0w5o] {
    border-color: var(--vh-primary);
    box-shadow: var(--vh-focus-ring);
}

.ch-compose-box textarea[b-5dojsn0w5o] {
    display: block;
    width: 100%;
    min-height: 58px;
    max-height: 150px;
    resize: vertical;
    padding: .65rem .72rem;
    border: 0;
    outline: 0;
    background: var(--vh-transparent);
    color: var(--vh-body);
    font: inherit;
    font-size: .82rem;
}

.ch-compose-footer[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .38rem .48rem .42rem .7rem;
    border-top: 1px solid var(--vh-line);
    color: var(--vh-muted);
    font-size: .62rem;
}

.ch-sms-note[b-5dojsn0w5o] {
    flex: 1;
}

.ch-send[b-5dojsn0w5o] {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 32px;
    padding: .32rem .72rem;
    border: 1px solid var(--vh-primary);
    border-radius: var(--vh-radius-md);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font: inherit;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
}

.ch-send:hover:not(:disabled)[b-5dojsn0w5o] {
    border-color: var(--vh-primary-hover);
    background: var(--vh-primary-hover);
}

.ch-send:disabled[b-5dojsn0w5o],
.ch-action-button:disabled[b-5dojsn0w5o],
.ch-icon-button:disabled[b-5dojsn0w5o] {
    opacity: .55;
    cursor: not-allowed;
}

.ch-optout[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .65rem;
    border: 1px solid var(--vh-danger);
    border-radius: var(--vh-radius-md);
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
    font-size: .75rem;
    font-weight: 650;
}

.ch-empty[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--vh-muted);
    text-align: center;
}

.ch-empty.hero[b-5dojsn0w5o] {
    width: min(430px, 80%);
    margin: auto;
}

.ch-empty.compact[b-5dojsn0w5o] {
    padding: 2.2rem 1.2rem;
}

.ch-empty-icon[b-5dojsn0w5o] {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: .6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
    font-size: 1rem;
}

.ch-empty strong[b-5dojsn0w5o] {
    color: var(--vh-text-heading);
    font-size: .9rem;
}

.ch-empty p[b-5dojsn0w5o] {
    margin: .28rem 0 0;
    max-width: 360px;
    font-size: .75rem;
    line-height: 1.45;
}

.ch-thread-skeleton[b-5dojsn0w5o] {
    display: flex;
    gap: .65rem;
    padding: .78rem;
    border-bottom: 1px solid var(--vh-line);
}

.ch-thread-skeleton > span[b-5dojsn0w5o],
.ch-thread-skeleton b[b-5dojsn0w5o],
.ch-thread-skeleton i[b-5dojsn0w5o] {
    display: block;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-surface-soft);
    animation: ch-pulse-b-5dojsn0w5o 1.25s infinite alternate;
}

.ch-thread-skeleton > span[b-5dojsn0w5o] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.ch-thread-skeleton div[b-5dojsn0w5o] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
}

.ch-thread-skeleton b[b-5dojsn0w5o] {
    width: 65%;
    height: .7rem;
}

.ch-thread-skeleton i[b-5dojsn0w5o] {
    width: 90%;
    height: .55rem;
}

.ch-thread-loading[b-5dojsn0w5o] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: auto;
    color: var(--vh-muted);
    font-size: .78rem;
}

.ch-spinner[b-5dojsn0w5o] {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid var(--vh-line);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: ch-spin-b-5dojsn0w5o .8s linear infinite;
}

.ch-page button:focus-visible[b-5dojsn0w5o],
.ch-page input:focus-visible[b-5dojsn0w5o],
.ch-page textarea:focus-visible[b-5dojsn0w5o],
.ch-page a:focus-visible[b-5dojsn0w5o] {
    outline: 2px solid var(--vh-primary);
    outline-offset: 2px;
}

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

@keyframes ch-bounce-b-5dojsn0w5o {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-3px); }
}

@keyframes ch-pulse-b-5dojsn0w5o {
    from { opacity: .55; }
    to { opacity: 1; }
}

@media (max-width: 1100px) {
    .ch-action-button[b-5dojsn0w5o] {
        width: 34px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .ch-action-button i[b-5dojsn0w5o] {
        font-size: .75rem;
    }
}

@media (max-width: 820px) {
    .ch-page-head p[b-5dojsn0w5o],
    .ch-live-pill[b-5dojsn0w5o] {
        display: none;
    }

    .ch-shell[b-5dojsn0w5o] {
        display: block;
        height: calc(100dvh - 210px);
        min-height: 520px;
    }

    .ch-inbox[b-5dojsn0w5o],
    .ch-conversation[b-5dojsn0w5o] {
        width: 100%;
        height: 100%;
        border-right: 0;
    }

    .ch-conversation[b-5dojsn0w5o] {
        display: none;
    }

    .ch-shell.conversation-open .ch-inbox[b-5dojsn0w5o] {
        display: none;
    }

    .ch-shell.conversation-open .ch-conversation[b-5dojsn0w5o] {
        display: flex;
    }

    .ch-back[b-5dojsn0w5o] {
        display: inline-grid;
    }

    .ch-link-banner[b-5dojsn0w5o] {
        align-items: stretch;
        flex-direction: column;
    }

    .ch-link-search[b-5dojsn0w5o] {
        width: 100%;
    }

    .ch-bubble[b-5dojsn0w5o] {
        max-width: 88%;
    }
}

@media (max-width: 520px) {
    .ch-page[b-5dojsn0w5o] {
        gap: .65rem;
    }

    .ch-page-head h1[b-5dojsn0w5o] {
        font-size: 1.4rem;
    }

    .ch-shell[b-5dojsn0w5o] {
        margin-inline: -.75rem;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .ch-conversation-head[b-5dojsn0w5o] {
        padding-inline: .5rem;
    }

    .ch-avatar.large[b-5dojsn0w5o] {
        display: none;
    }

    .ch-candidate-sub a[b-5dojsn0w5o],
    .ch-sms-note[b-5dojsn0w5o] {
        display: none;
    }

    .ch-collaboration[b-5dojsn0w5o] {
        padding-inline: .65rem;
    }

    .ch-messages[b-5dojsn0w5o] {
        padding-inline: .65rem;
    }

    .ch-composer[b-5dojsn0w5o] {
        padding: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch-page *[b-5dojsn0w5o],
    .ch-page *[b-5dojsn0w5o]::before,
    .ch-page *[b-5dojsn0w5o]::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}
/* /Pages/Companies/Detail.razor.rz.scp.css */
/* /company/{id} detail — ports pages/company-profile styles.js
   (SideMenu + MainContent). Same tokenized palette as the /companies list,
   consumed via vh-tokens (design-system.md) so the LeptonX dark layer
   remaps it. Action buttons use the global .vh-btn-* utilities; the fixed
   dropdowns use the shared <VhDropdown> component (ui-combos.md Type 2). */

.cd-page[b-3agqetcxwe] {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    font-family: var(--vh-font-primary);
    color: var(--vh-gray-90);
}

.cd-layout[b-3agqetcxwe] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
    padding: 16px 0;
}

/* ---- SideMenu ---- */
.cd-side[b-3agqetcxwe] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 16px;
    position: sticky;
    /* Clear the fixed LeptonX header so the sticky sidebar never tucks
       under the shell chrome while scrolling. */
    top: calc(var(--lpx-header-height, 64px) + 12px);
}

.cd-back[b-3agqetcxwe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-primary);
    font-family: var(--vh-font-primary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 12px;
}

.cd-side-header[b-3agqetcxwe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cd-logo[b-3agqetcxwe] {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: var(--vh-black-10);
    color: var(--vh-black-40);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.cd-options[b-3agqetcxwe] { position: relative; }

.cd-options-btn[b-3agqetcxwe] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-black-40);
    font-size: 18px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--vh-radius);
}

.cd-options-btn:hover[b-3agqetcxwe] { background: var(--vh-gray-20); }

[b-3agqetcxwe] .cd-options-backdrop,
.cd-options-backdrop[b-3agqetcxwe] {
    position: fixed;
    inset: 0;
    z-index: 30;
}

[b-3agqetcxwe] .cd-options-menu,
.cd-options-menu[b-3agqetcxwe] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 31;
    min-width: 190px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-3agqetcxwe] .cd-options-menu button,
.cd-options-menu button[b-3agqetcxwe] {
    border: none;
    background: var(--vh-transparent);
    text-align: left;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    color: var(--vh-black-90);
    padding: 10px 14px;
    cursor: pointer;
}

[b-3agqetcxwe] .cd-options-menu button:hover { background: var(--vh-surface-soft); }
[b-3agqetcxwe] .cd-options-menu button:disabled { color: var(--vh-black-30); cursor: not-allowed; }
.cd-options-menu button:hover[b-3agqetcxwe] { background: var(--vh-surface-soft); }
.cd-options-menu button:disabled[b-3agqetcxwe] { color: var(--vh-black-30); cursor: not-allowed; }

.cd-side-sub[b-3agqetcxwe] { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }

.cd-company-name[b-3agqetcxwe] {
    font-family: var(--vh-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
}

.cd-join-date[b-3agqetcxwe] { font-size: 13px; color: var(--vh-black-60); }

.cd-post-job[b-3agqetcxwe] {
    margin-top: 10px;
    border: none;
    background: var(--vh-primary);
    color: var(--vh-on-primary); /* var(--vh-on-primary) on brand fill — correct in both themes */
    font-family: var(--vh-font-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--vh-radius-pill);
    cursor: pointer;
}

/* Legacy hover LIGHTENS the primary (design-system §2). */
.cd-post-job:hover[b-3agqetcxwe] { background: var(--vh-primary-hover); }

/* ---- VanHack Team ---- */
.cd-team[b-3agqetcxwe] { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.cd-team-title[b-3agqetcxwe] { font-weight: 700; font-size: 14px; color: var(--vh-black-90); }
.cd-team-empty[b-3agqetcxwe] { font-size: 12px; color: var(--vh-black-40); }
.cd-team-list[b-3agqetcxwe] { display: flex; flex-direction: column; gap: 10px; }

.cd-team-member[b-3agqetcxwe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cd-team-info[b-3agqetcxwe] { display: flex; align-items: center; gap: 10px; min-width: 0; }

[b-3agqetcxwe] .cd-avatar,
.cd-avatar[b-3agqetcxwe] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

[b-3agqetcxwe] .cd-avatar-initials,
.cd-avatar-initials[b-3agqetcxwe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
    font-size: 13px;
    font-weight: 700;
}

.cd-team-text[b-3agqetcxwe] { display: flex; flex-direction: column; min-width: 0; }
.cd-team-position[b-3agqetcxwe] { font-size: 12px; color: var(--vh-black-60); }
.cd-team-name[b-3agqetcxwe] { font-size: 13px; font-weight: 600; color: var(--vh-black-90); }

[b-3agqetcxwe] .cd-icon-btn,
.cd-icon-btn[b-3agqetcxwe] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-black-40);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--vh-radius);
    font-size: 14px;
}

[b-3agqetcxwe] .cd-icon-btn:hover { background: var(--vh-gray-20); color: var(--vh-gray-90); }
[b-3agqetcxwe] .cd-icon-btn:disabled { color: var(--vh-black-20); cursor: not-allowed; }
.cd-icon-btn:hover[b-3agqetcxwe] { background: var(--vh-gray-20); color: var(--vh-gray-90); }
.cd-icon-btn:disabled[b-3agqetcxwe] { color: var(--vh-black-20); cursor: not-allowed; }

/* ---- Tabs bar (legacy MUI pills) ---- */
.cd-main[b-3agqetcxwe] { min-width: 0; }

.cd-tabs[b-3agqetcxwe] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.cd-tab[b-3agqetcxwe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-black-60);
    font-family: var(--vh-font-primary);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: var(--vh-radius-pill);
    cursor: pointer;
}

.cd-tab:hover[b-3agqetcxwe] { background: var(--vh-black-10); }
.cd-tab-active[b-3agqetcxwe] { background: var(--vh-blue-tint); color: var(--vh-primary); }

/* ---- shared loaders / modals (used by child tabs via ::deep) ---- */
[b-3agqetcxwe] .cd-loader,
.cd-loader[b-3agqetcxwe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 0;
    color: var(--vh-black-60);
    font-size: 14px;
}

[b-3agqetcxwe] .cd-spinner,
.cd-spinner[b-3agqetcxwe] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-gray-30);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: cd-spin-b-3agqetcxwe 0.8s linear infinite;
}

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

.cd-private[b-3agqetcxwe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 0;
    color: var(--vh-black-60);
}

.cd-private i[b-3agqetcxwe] { font-size: 28px; }

[b-3agqetcxwe] .cd-modal-backdrop,
.cd-modal-backdrop[b-3agqetcxwe] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 40;
}

[b-3agqetcxwe] .cd-modal,
.cd-modal[b-3agqetcxwe] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 41;
    width: min(622px, calc(100vw - 32px));
    max-height: 86vh;
    overflow: auto;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-modal);
    font-family: var(--vh-font-primary);
}

[b-3agqetcxwe] .cd-modal-header,
.cd-modal-header[b-3agqetcxwe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--vh-line);
}

[b-3agqetcxwe] .cd-modal-header h6,
.cd-modal-header h6[b-3agqetcxwe] { margin: 0; font-family: var(--vh-font-heading); font-size: 16px; font-weight: 700; color: var(--vh-text-heading); }

[b-3agqetcxwe] .cd-modal-body,
.cd-modal-body[b-3agqetcxwe] { padding: 18px 20px; font-size: 14px; color: var(--vh-gray-90); }

[b-3agqetcxwe] .cd-modal-footer,
.cd-modal-footer[b-3agqetcxwe] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--vh-line);
}

/* ---- merge modal bits ---- */
.cd-merge-info[b-3agqetcxwe] { color: var(--vh-black-60); font-size: 13px; }
.cd-merge-warning[b-3agqetcxwe] { color: var(--vh-danger); font-weight: 700; font-size: 13px; }
.cd-merge-find[b-3agqetcxwe] { font-weight: 600; margin-top: 8px; }

[b-3agqetcxwe] .cd-search,
.cd-search[b-3agqetcxwe] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: 6px 8px;
    background: var(--vh-surface);
}

[b-3agqetcxwe] .cd-search:focus-within,
.cd-search:focus-within[b-3agqetcxwe] { border-color: var(--vh-input-focus); }

[b-3agqetcxwe] .cd-search input,
.cd-search input[b-3agqetcxwe] {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    background: var(--vh-transparent);
    min-width: 0;
}

.cd-merge-list[b-3agqetcxwe] { max-height: 320px; overflow: auto; margin-top: 12px; }

.cd-merge-item[b-3agqetcxwe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--vh-line);
}

.cd-merge-item-info[b-3agqetcxwe] { display: flex; flex-direction: column; min-width: 0; }
.cd-merge-item-name[b-3agqetcxwe] { font-weight: 700; color: var(--vh-black-90); font-size: 14px; }
.cd-merge-item-site[b-3agqetcxwe] { color: var(--vh-black-60); font-size: 13px; }

[b-3agqetcxwe] .cd-end,
.cd-end[b-3agqetcxwe] { text-align: center; padding: 24px 0; color: var(--vh-black-60); font-size: 14px; }

[b-3agqetcxwe] .cd-more,
.cd-more[b-3agqetcxwe] { text-align: center; padding: 16px 0; }

[b-3agqetcxwe] .cd-more button,
.cd-more button[b-3agqetcxwe] {
    border: 1px solid var(--vh-primary);
    background: var(--vh-surface);
    color: var(--vh-primary);
    font-family: var(--vh-font-primary);
    font-size: 14px;
    padding: 8px 24px;
    border-radius: var(--vh-radius-sm);
    cursor: pointer;
}

.cd-check[b-3agqetcxwe] { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; }

/* ---- collaborators modal ---- */
.cd-collab-group[b-3agqetcxwe] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cd-collab-group label[b-3agqetcxwe] { font-size: 13px; font-weight: 600; color: var(--vh-black-90); }

[b-3agqetcxwe] .cd-collab-chips,
.cd-collab-chips[b-3agqetcxwe] { display: flex; flex-wrap: wrap; gap: 6px; }

[b-3agqetcxwe] .cd-chip,
.cd-chip[b-3agqetcxwe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vh-blue-tint);
    color: var(--vh-black-90);
    border-radius: var(--vh-radius-pill);
    font-size: 13px;
    padding: 4px 10px;
}

[b-3agqetcxwe] .cd-chip button,
.cd-chip button[b-3agqetcxwe] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-black-60);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.cd-opt-img[b-3agqetcxwe] { width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; object-fit: cover; }

/* ---- generic field styles for child tabs (fixed dropdowns = <VhDropdown>) ---- */
[b-3agqetcxwe] .cd-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
[b-3agqetcxwe] .cd-field label { font-size: 13px; font-weight: 600; color: var(--vh-black-90); }

[b-3agqetcxwe] .cd-field input[type="text"] {
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius);
    padding: 9px 10px;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    color: var(--vh-gray-90);
    outline: none;
}

[b-3agqetcxwe] .cd-field input[type="text"]:focus { border-color: var(--vh-input-focus); }

/* ---- toast (custom; colors per design-system §6 toasts) ---- */
[b-3agqetcxwe] .cd-toast,
.cd-toast[b-3agqetcxwe] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 60;
    padding: 12px 18px;
    border-radius: var(--vh-radius-md);
    font-family: var(--vh-font-primary);
    font-size: 14px;
    color: var(--vh-on-primary); /* var(--vh-on-primary) on brand fill — correct in both themes */
    box-shadow: var(--vh-shadow-pop);
}

[b-3agqetcxwe] .cd-toast-ok { background: var(--vh-success); }
[b-3agqetcxwe] .cd-toast-error { background: var(--vh-danger); }
.cd-toast-ok[b-3agqetcxwe] { background: var(--vh-success); }
.cd-toast-error[b-3agqetcxwe] { background: var(--vh-danger); }

/* ---- responsive ---- */
@media (max-width: 920px) {
    .cd-layout[b-3agqetcxwe] { grid-template-columns: 1fr; }
    .cd-side[b-3agqetcxwe] { position: static; }
}
/* /Pages/Companies/DetailContractsTab.razor.rz.scp.css */
/* Contract tab — legacy Tabs/Contracts/styles.js. Colors via vh-tokens (design-system.md). */

.cdc-tab[b-gh5s9lhywm] { display: flex; flex-direction: column; gap: 14px; font-family: var(--vh-font-primary); }

.cdc-header[b-gh5s9lhywm] { display: flex; justify-content: space-between; align-items: center; }

.cdc-card[b-gh5s9lhywm] { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-chip); }

.cdc-card-main[b-gh5s9lhywm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
}

.cdc-card-main:hover[b-gh5s9lhywm] { background: var(--vh-surface-soft); }

.cdc-card-title[b-gh5s9lhywm] { display: flex; align-items: center; gap: 10px; }
.cdc-card-title i[b-gh5s9lhywm] { color: var(--vh-primary); }
.cdc-card-title h6[b-gh5s9lhywm] { margin: 0; font-family: var(--vh-font-heading); font-size: 15px; font-weight: 700; color: var(--vh-text-heading); }

.cdc-card-sub[b-gh5s9lhywm] { display: flex; gap: 16px; margin-top: 6px; font-size: 13px; }
.cdc-hires[b-gh5s9lhywm] { color: var(--vh-success); font-weight: 600; }
.cdc-expire[b-gh5s9lhywm] { color: var(--vh-black-60); }

.cdc-card-side[b-gh5s9lhywm] { display: flex; align-items: center; gap: 14px; color: var(--vh-black-40); }

.cdc-history[b-gh5s9lhywm] { border-top: 1px solid var(--vh-line); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

.cdc-doc[b-gh5s9lhywm] { display: inline-flex; align-items: center; gap: 8px; color: var(--vh-primary); font-size: 13px; text-decoration: none; }
.cdc-doc-disabled[b-gh5s9lhywm] { color: var(--vh-black-40); cursor: not-allowed; }

.cdc-history-item[b-gh5s9lhywm] { display: flex; align-items: center; gap: 12px; }

.cdc-history-icon[b-gh5s9lhywm] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cdc-history-text[b-gh5s9lhywm] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cdc-history-title[b-gh5s9lhywm] { font-size: 14px; font-weight: 700; color: var(--vh-black-90); }
.cdc-history-desc[b-gh5s9lhywm] { font-size: 13px; color: var(--vh-black-60); }
.cdc-history-date[b-gh5s9lhywm] { font-size: 12px; color: var(--vh-black-40); flex-shrink: 0; }
/* /Pages/Companies/DetailGeneralTab.razor.rz.scp.css */
/* General tab — legacy Tabs/general/styles.js. Colors via vh-tokens
   (design-system.md); job status tags use the global .vh-pill-tonal-*. */

.cdg-tab[b-wkk18u8sui] { display: flex; flex-direction: column; gap: 18px; font-family: var(--vh-font-primary); }

.cdg-toggles[b-wkk18u8sui] { display: flex; gap: 16px; flex-wrap: wrap; }

.cdg-toggle-card[b-wkk18u8sui] {
    flex: 1;
    min-width: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 16px;
}

.cdg-toggle-title[b-wkk18u8sui] { font-weight: 700; font-size: 15px; color: var(--vh-black-90); }
.cdg-toggle-sub[b-wkk18u8sui] { font-size: 13px; color: var(--vh-black-60); }

/* Switch (legacy MUI switch). Shared with profile/contracts via ::deep. */
[b-wkk18u8sui] .cdg-switch,
.cdg-switch[b-wkk18u8sui] { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
[b-wkk18u8sui] .cdg-switch input,
.cdg-switch input[b-wkk18u8sui] { opacity: 0; width: 0; height: 0; }

[b-wkk18u8sui] .cdg-slider,
.cdg-slider[b-wkk18u8sui] {
    position: absolute;
    inset: 0;
    background: var(--vh-black-20);
    border-radius: var(--vh-radius-pill);
    cursor: pointer;
    transition: background 0.2s ease;
}

[b-wkk18u8sui] .cdg-slider::before,
.cdg-slider[b-wkk18u8sui]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: var(--vh-color-white); /* knob stays var(--vh-color-white) on the colored track in both themes */
    border-radius: 50%;
    transition: transform 0.2s ease;
}

[b-wkk18u8sui] .cdg-switch input:checked + .cdg-slider,
.cdg-switch input:checked + .cdg-slider[b-wkk18u8sui] { background: var(--vh-primary); }
[b-wkk18u8sui] .cdg-switch input:checked + .cdg-slider::before,
.cdg-switch input:checked + .cdg-slider[b-wkk18u8sui]::before { transform: translateX(18px); }

/* Stat cards */
.cdg-stats[b-wkk18u8sui] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.cdg-stat[b-wkk18u8sui] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 16px;
}

.cdg-stat-title[b-wkk18u8sui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--vh-black-60);
}

.cdg-stat h3[b-wkk18u8sui] { margin: 8px 0 0; font-size: 28px; font-weight: 700; color: var(--vh-black-90); }

/* Jobs lists */
.cdg-jobs[b-wkk18u8sui] { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-chip); padding: 16px; }

.cdg-jobs-title[b-wkk18u8sui] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--vh-black-90);
    margin-bottom: 8px;
}

.cdg-jobs-count[b-wkk18u8sui] {
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
    border-radius: var(--vh-radius-pill);
    font-size: 12px;
    padding: 2px 10px;
}

.cdg-job[b-wkk18u8sui] {
    display: grid;
    grid-template-columns: 1fr 170px 110px 48px;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--vh-line);
}

.cdg-job:last-child[b-wkk18u8sui] { border-bottom: none; }

.cdg-job-title[b-wkk18u8sui] { font-weight: 600; font-size: 14px; color: var(--vh-black-90); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cdg-job-date[b-wkk18u8sui], .cdg-job-pos[b-wkk18u8sui] { font-size: 13px; color: var(--vh-black-60); }
.cdg-job-actions[b-wkk18u8sui] { position: relative; justify-self: end; }

/* Neutral tag (Closed & other statuses) — colored ones are .vh-pill-tonal-*. */
.cdg-tag[b-wkk18u8sui] { border-radius: var(--vh-radius-pill); font-size: 11px; padding: 2px 10px; background: var(--vh-surface-soft); color: var(--vh-muted); }

.cdg-no-jobs[b-wkk18u8sui] { padding: 18px 4px; color: var(--vh-black-40); font-size: 14px; }

@media (max-width: 920px) {
    .cdg-stats[b-wkk18u8sui] { grid-template-columns: repeat(2, 1fr); }
    .cdg-job[b-wkk18u8sui] { grid-template-columns: 1fr 48px; }
    .cdg-job-date[b-wkk18u8sui], .cdg-job-pos[b-wkk18u8sui] { display: none; }
}
/* /Pages/Companies/DetailHistoryTab.razor.rz.scp.css */
/* History tab — legacy Tabs/History/styles.js. Colors via vh-tokens (design-system.md). */

.cdh-tab[b-uww1fa65t6] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 18px;
    font-family: var(--vh-font-primary);
}

.cdh-header[b-uww1fa65t6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cdh-filters[b-uww1fa65t6] { display: flex; align-items: center; gap: 10px; }

.cdh-search[b-uww1fa65t6] {
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius);
    padding: 8px 12px;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    outline: none;
    min-width: 220px;
    background: var(--vh-transparent);
    color: var(--vh-text-body);
}

.cdh-search:focus[b-uww1fa65t6] { border-color: var(--vh-input-focus); }

.cdh-list[b-uww1fa65t6] { display: flex; flex-direction: column; }

.cdh-item[b-uww1fa65t6] {
    display: grid;
    grid-template-columns: 120px 44px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.cdh-date[b-uww1fa65t6] { font-size: 13px; color: var(--vh-black-60); }

.cdh-icon[b-uww1fa65t6] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.cdh-icon-milestone[b-uww1fa65t6] { background: var(--vh-blue-tint); color: var(--vh-primary); }
.cdh-icon-common[b-uww1fa65t6] { background: var(--vh-surface-soft); color: var(--vh-black-40); }

.cdh-message[b-uww1fa65t6] { font-size: 14px; color: var(--vh-black-90); }

.cdh-end[b-uww1fa65t6] {
    text-align: center;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    background: var(--vh-surface-soft);
    color: var(--vh-muted);
    font-weight: 700;
    font-size: 15px;
    padding: 12px;
    margin-top: 24px;
}

@media (max-width: 640px) {
    .cdh-item[b-uww1fa65t6] { grid-template-columns: 44px 1fr; }
    .cdh-date[b-uww1fa65t6] { display: none; }
}
/* /Pages/Companies/DetailIntegrationsTab.razor.rz.scp.css */
/* Integrations tab — legacy Tabs/Integrations/styles.js. Colors via vh-tokens
   (design-system.md); status badges/alerts use the tonal token set. */

.cdi-tab[b-6fn71hspyu] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 18px;
    font-family: var(--vh-font-primary);
}

.cdi-title[b-6fn71hspyu] { margin: 0 0 4px; font-family: var(--vh-font-heading); font-size: 17px; font-weight: 700; color: var(--vh-text-heading); }
.cdi-sub[b-6fn71hspyu] { margin: 0 0 16px; font-size: 14px; color: var(--vh-black-60); }

.cdi-search[b-6fn71hspyu] { max-width: 400px; margin-bottom: 16px; }
.cdi-search i[b-6fn71hspyu] { color: var(--vh-gray-50); }

.cdi-grid[b-6fn71hspyu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.cdi-card[b-6fn71hspyu] {
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cdi-card-header[b-6fn71hspyu] { display: flex; align-items: center; gap: 10px; min-width: 0; }

.cdi-logo[b-6fn71hspyu] {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.cdi-logo-fallback[b-6fn71hspyu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-black-10);
    color: var(--vh-black-40);
}

.cdi-name[b-6fn71hspyu] { font-size: 14px; font-weight: 700; color: var(--vh-black-90); overflow: hidden; text-overflow: ellipsis; }

.cdi-card-footer[b-6fn71hspyu] { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.cdi-badge[b-6fn71hspyu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--vh-radius-pill);
    font-size: 12px;
    padding: 3px 10px;
}

.cdi-badge-on[b-6fn71hspyu] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); }
.cdi-badge-off[b-6fn71hspyu] { background: var(--vh-black-10); color: var(--vh-black-60); }

.cdi-error[b-6fn71hspyu],
.cdi-success[b-6fn71hspyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--vh-radius-md);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 14px;
}

.cdi-error[b-6fn71hspyu] { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); }
.cdi-success[b-6fn71hspyu] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); }
/* /Pages/Companies/DetailProfileTab.razor.rz.scp.css */
/* Profile tab — legacy Tabs/profile/styles.js. Colors via vh-tokens (design-system.md). */

.cdp-tab[b-1mcu2fc136] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 18px;
    font-family: var(--vh-font-primary);
    max-width: 720px;
}

.cdp-row[b-1mcu2fc136] { display: flex; align-items: flex-end; gap: 12px; }
.cdp-grow[b-1mcu2fc136] { flex: 1; }
.cdp-sync[b-1mcu2fc136] { margin-bottom: 14px; }

.cdp-location[b-1mcu2fc136] { width: 100%; }
.cdp-location[b-1mcu2fc136]  .b-is-autocomplete { width: 100%; }
.cdp-location[b-1mcu2fc136]  .form-control {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius);
    padding: 9px 10px;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    color: var(--vh-gray-90);
    background: var(--vh-surface);
    box-shadow: none;
}
.cdp-location[b-1mcu2fc136]  .form-control:focus { border-color: var(--vh-input-focus); }
.cdp-location[b-1mcu2fc136]  .dropdown-menu {
    border: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-pop);
}
.cdp-location-empty[b-1mcu2fc136] { color: var(--vh-muted); font-size: 13px; }

.cdp-domains[b-1mcu2fc136] {
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    padding: 14px;
    margin: 6px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdp-domains-switch[b-1mcu2fc136] { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cdp-domains-label[b-1mcu2fc136] { font-size: 13px; color: var(--vh-gray-90); display: flex; align-items: center; gap: 8px; }
.cdp-domains-label i[b-1mcu2fc136] { color: var(--vh-primary); }

.cdp-domains-edit[b-1mcu2fc136] { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--vh-black-60); }

.cdp-domains-edit input[b-1mcu2fc136] {
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius);
    padding: 9px 10px;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    outline: none;
}

.cdp-domains-edit input:focus[b-1mcu2fc136] { border-color: var(--vh-input-focus); }

.cdp-save[b-1mcu2fc136] { align-self: flex-start; }
/* /Pages/Companies/DetailTeamTab.razor.rz.scp.css */
/* Team tab — legacy Tabs/team/styles.js. Colors via vh-tokens (design-system.md). */

.cdt-tab[b-kakqh6sqgf] { display: flex; flex-direction: column; gap: 18px; font-family: var(--vh-font-primary); }

[b-kakqh6sqgf] .cdt-section,
.cdt-section[b-kakqh6sqgf] { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-chip); padding: 16px; }

[b-kakqh6sqgf] .cdt-section-title,
.cdt-section-title[b-kakqh6sqgf] {
    font-family: var(--vh-font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--vh-text-heading);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdt-section-header[b-kakqh6sqgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cdt-count[b-kakqh6sqgf] {
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
    border-radius: var(--vh-radius-pill);
    font-size: 12px;
    padding: 2px 10px;
}

/* Responsibles cards */
.cdt-responsibles[b-kakqh6sqgf] { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

.cdt-resp-card[b-kakqh6sqgf] { position: relative; }

.cdt-resp-btn[b-kakqh6sqgf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--vh-line);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-chip);
    padding: 14px 18px;
    min-width: 120px;
    cursor: pointer;
    font-family: var(--vh-font-primary);
}

.cdt-resp-btn:hover[b-kakqh6sqgf] { background: var(--vh-surface-soft); }
.cdt-resp-label[b-kakqh6sqgf] { font-size: 13px; font-weight: 600; color: var(--vh-black-90); }

.cdt-resp-pop[b-kakqh6sqgf] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 31;
    width: 280px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-chip);
    box-shadow: var(--vh-shadow-pop);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdt-resp-empty[b-kakqh6sqgf] { font-size: 13px; color: var(--vh-black-60); }

.cdt-resp-member[b-kakqh6sqgf] { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.cdt-resp-edit[b-kakqh6sqgf] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-primary);
    font-family: var(--vh-font-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    padding: 4px 0;
}

.cdt-role-desc[b-kakqh6sqgf] { color: var(--vh-black-60); font-size: 13px; }

/* Member rows */
[b-kakqh6sqgf] .cdt-member-info,
.cdt-member-info[b-kakqh6sqgf] { display: flex; align-items: center; gap: 10px; min-width: 0; }

[b-kakqh6sqgf] .cdt-member-text,
.cdt-member-text[b-kakqh6sqgf] { display: flex; flex-direction: column; min-width: 0; }

[b-kakqh6sqgf] .cdt-member-name,
.cdt-member-name[b-kakqh6sqgf] { font-size: 14px; font-weight: 600; color: var(--vh-black-90); }

[b-kakqh6sqgf] .cdt-member-email,
.cdt-member-email[b-kakqh6sqgf] { font-size: 13px; color: var(--vh-black-60); overflow: hidden; text-overflow: ellipsis; }

.cdt-member-role[b-kakqh6sqgf] { font-size: 12px; color: var(--vh-black-40); }

.cdt-member-row[b-kakqh6sqgf] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 48px;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--vh-line);
}

.cdt-member-row:last-child[b-kakqh6sqgf] { border-bottom: none; }

.cdt-member-date[b-kakqh6sqgf] { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cdt-active[b-kakqh6sqgf] { color: var(--vh-success); }
.cdt-invited[b-kakqh6sqgf] { color: var(--vh-black-60); }
.cdt-member-activity[b-kakqh6sqgf] { font-size: 13px; color: var(--vh-black-60); }
.cdt-member-actions[b-kakqh6sqgf] { position: relative; justify-self: end; }

.cdt-no-members[b-kakqh6sqgf] { padding: 18px 4px; color: var(--vh-black-40); font-size: 14px; }

/* Filters row */
.cdt-filters[b-kakqh6sqgf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cdt-filters .cd-search[b-kakqh6sqgf] { flex: 1; min-width: 220px; }

@media (max-width: 920px) {
    .cdt-member-row[b-kakqh6sqgf] { grid-template-columns: 1fr 48px; }
    .cdt-member-date[b-kakqh6sqgf], .cdt-member-activity[b-kakqh6sqgf] { display: none; }
}
/* /Pages/Companies/Index.razor.rz.scp.css */
/* /companies admin list — ports pages/company-profile-admin styles.js
   (CompanyItem). Typography follows var(--vh-font-primary); badge pill tokens
   HP vs neutral-20/dark-neutral-10 for Lead; rows divided by gray-10 with
   neutral-10 hover. All colors consume the vh-tokens palette
   (design-system.md) so the LeptonX dark layer remaps them.
   Page chrome follows the shared PageHeader / VhFiltersCard / normal
   LeptonX content-flow pattern (§12). */

.co-page[b-7pmbryt5oq] {
    font-family: var(--vh-font-primary);
    color: var(--vh-body);
}

/* ---- Work-bar search (legacy SearchInput — search-with-clear) ---- */
.co-search[b-7pmbryt5oq] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: 6px 8px;
    background: var(--vh-surface);
    min-width: 260px;
}

.co-search:focus-within[b-7pmbryt5oq] { border-color: var(--vh-input-focus); }

.co-search input[b-7pmbryt5oq] {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    color: var(--vh-gray-90);
    background: var(--vh-transparent);
    min-width: 0;
}

.co-search input[b-7pmbryt5oq]::placeholder { color: var(--vh-gray-50); }

.co-search-btn[b-7pmbryt5oq],
.co-search-clear[b-7pmbryt5oq] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-black-40);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--vh-radius-sm);
}

.co-search-btn:hover[b-7pmbryt5oq],
.co-search-clear:hover[b-7pmbryt5oq] { background: var(--vh-gray-20); color: var(--vh-gray-90); }

/* ---- List rows: .vh-row-list / .vh-row-card utilities carry the card look
   (surface, border, radius, hover lift) — here only the page's columns. ---- */
.co-item-left[b-7pmbryt5oq] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Company initial tile — Cobalt avatar (soft var(--vh-blue-tint), var(--vh-blue-deep) letter). */
.co-avatar[b-7pmbryt5oq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--vh-blue-tint);
    border: 1px solid var(--vh-tonal-blue-bd);
    color: var(--vh-blue-deep);
    font-weight: 700;
    font-size: 16px;
}

.co-info[b-7pmbryt5oq] { min-width: 0; }

.co-name[b-7pmbryt5oq] {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--vh-ink);
    letter-spacing: -0.01em;
}

.co-site[b-7pmbryt5oq] {
    font-weight: 400;
    font-size: 13px;
    color: var(--vh-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-item-right[b-7pmbryt5oq] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.co-created[b-7pmbryt5oq] {
    font-size: 12.5px;
    color: var(--vh-muted);
}

.co-arrow[b-7pmbryt5oq] {
    font-size: 12px;
    color: var(--vh-muted);
    transition: color 0.18s ease, transform 0.18s ease;
}

.co-item:hover .co-arrow[b-7pmbryt5oq] {
    color: var(--vh-primary);
    transform: translateX(2px);
}

/* ---- Loaders / end states ---- */
.co-loader[b-7pmbryt5oq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 0;
    color: var(--vh-black-60);
    font-size: 14px;
}

.co-loader p[b-7pmbryt5oq] { margin: 0; }

.co-spinner[b-7pmbryt5oq] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-gray-30);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: co-spin-b-7pmbryt5oq 0.8s linear infinite;
}

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

.co-end[b-7pmbryt5oq] {
    text-align: center;
    padding: 32px 0;
    color: var(--vh-black-60);
    font-size: 14px;
}

.co-more[b-7pmbryt5oq] {
    text-align: center;
    padding: 24px 0;
}

.co-more button[b-7pmbryt5oq] {
    border: 1px solid var(--vh-primary);
    background: var(--vh-surface);
    color: var(--vh-primary);
    font-family: var(--vh-font-primary);
    font-size: 14px;
    padding: 8px 24px;
    border-radius: var(--vh-radius-sm);
    cursor: pointer;
}

.co-more button:hover[b-7pmbryt5oq] { background: var(--vh-blue-tint); }

/* ---- PrivatePage fallback ---- */
.co-private[b-7pmbryt5oq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 0;
    color: var(--vh-black-60);
}

.co-private i[b-7pmbryt5oq] { font-size: 28px; }
.co-private p[b-7pmbryt5oq] { margin: 0; font-size: 15px; }

/* ---- Responsive (legacy md breakpoint) ---- */
@media (max-width: 768px) {
    .co-created[b-7pmbryt5oq] { display: none; }
}
/* /Pages/DesignSystem/Index.razor.rz.scp.css */
/* /design-system — living style guide. Layout-only CSS; all colors via tokens
   (vh-tokens.css). The controls themselves use the global .vh-* utilities.
   Spacing units: px for control-internal spacing (the legacy specs are px —
   9px 12px inputs, 33px modal padding), rem for page-level rhythm (section
   padding, row gaps). */

.ds-page[b-z8rdumn6pt] { max-width: 1080px; margin: 0 auto; padding: 0 0 4rem; font-family: var(--vh-font-secondary); color: var(--vh-text-body); }

/* ---- loader / gate (wave-10 admin pattern — sanctioned hand-rolled loader,
   fully tokenized; Blazorise SpinKit is not referenced by this solution) ---- */
.ds-loader[b-z8rdumn6pt] { display: flex; justify-content: center; padding: 4rem 0; }
.ds-spinner[b-z8rdumn6pt] { width: 28px; height: 28px; border: 3px solid var(--vh-black-20); border-top-color: var(--vh-primary); border-radius: 50%; animation: ds-spin-b-z8rdumn6pt .8s linear infinite; }
@keyframes ds-spin-b-z8rdumn6pt { to { transform: rotate(360deg); } }
.ds-private[b-z8rdumn6pt] { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 4rem 0; color: var(--vh-text-muted); }
.ds-private i[b-z8rdumn6pt] { font-size: 2rem; }

/* ---- header ---- */
.ds-header[b-z8rdumn6pt] { padding: 1.25rem 0 .5rem; }
.ds-title[b-z8rdumn6pt] { font-family: var(--vh-font-heading); color: var(--vh-text-heading); font-weight: 700; margin: 0 0 .5rem; }
.ds-sub[b-z8rdumn6pt] { max-width: 860px; font-size: 14px; line-height: 1.6; margin: 0 0 .9rem; }
.ds-sub code[b-z8rdumn6pt] { background: var(--vh-black-10); border-radius: var(--vh-radius-sm); padding: 1px 5px; font-size: 12px; color: var(--vh-black-70); }
.ds-sub a[b-z8rdumn6pt] { color: var(--vh-primary); }
.ds-compare-bar[b-z8rdumn6pt] { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .75rem; font-size: 12px; }
.ds-compare-bar > span[b-z8rdumn6pt] { color: var(--vh-text-muted); font-weight: 700; }
.ds-compare-bar a[b-z8rdumn6pt] { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: 0 10px; border: 1px solid var(--vh-line); border-radius: var(--vh-radius-md); color: var(--vh-text-muted); background: var(--vh-surface); text-decoration: none; font-weight: 600; }
.ds-compare-bar a:hover[b-z8rdumn6pt] { border-color: var(--vh-primary); color: var(--vh-primary); }
.ds-compare-bar a:is(.active, [aria-current="page"])[b-z8rdumn6pt] { border-color: var(--vh-primary); background: var(--vh-primary-soft); color: var(--vh-primary); }
.ds-toc[b-z8rdumn6pt] { display: flex; flex-wrap: wrap; gap: .4rem; }
.ds-toc a[b-z8rdumn6pt] { font-size: 12px; color: var(--vh-primary); background: var(--vh-primary-soft); border-radius: var(--vh-radius-pill); padding: 3px 12px; text-decoration: none; }
.ds-toc a:hover[b-z8rdumn6pt] { background: var(--vh-primary); color: var(--vh-on-primary); } /* var(--vh-on-primary) — canonical token */

/* ---- sections ---- */
.ds-section[b-z8rdumn6pt] { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-md); box-shadow: var(--vh-shadow-surface); padding: 1.4rem 1.6rem; margin-top: 1.25rem; }
.ds-h[b-z8rdumn6pt] { font-family: var(--vh-font-heading); color: var(--vh-text-heading); font-weight: 700; font-size: 20px; margin: 0 0 1rem; }
.ds-h small[b-z8rdumn6pt] { font-family: var(--vh-font-secondary); font-weight: 400; font-size: 13px; color: var(--vh-text-muted); margin-left: .5rem; }
.ds-group[b-z8rdumn6pt] { font-family: var(--vh-font-heading); color: var(--vh-text-heading); font-size: 14px; font-weight: 700; margin: 1.1rem 0 .6rem; }
.ds-note[b-z8rdumn6pt] { font-size: 13px; color: var(--vh-text-muted); line-height: 1.55; margin: .6rem 0 0; max-width: 860px; }
.ds-note code[b-z8rdumn6pt] { background: var(--vh-black-10); border-radius: var(--vh-radius-sm); padding: 1px 5px; font-size: 12px; color: var(--vh-black-70); }
.ds-muted[b-z8rdumn6pt] { font-size: 13px; color: var(--vh-text-muted); }

/* ---- palette swatches ----
   11px micro size on the swatch metadata — deliberate DS-page-only exception
   below the canon 12px caption (dense token grid; don't copy to app pages). */
.ds-swatches[b-z8rdumn6pt] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.ds-swatches-scale[b-z8rdumn6pt] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ds-swatch[b-z8rdumn6pt] { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ds-swatch-color[b-z8rdumn6pt] { height: 44px; border-radius: var(--vh-radius); border: 1px solid var(--vh-black-20); }
.ds-swatch code[b-z8rdumn6pt] { font-size: 11px; color: var(--vh-black-70); }
.ds-swatch span[b-z8rdumn6pt] { color: var(--vh-text-muted); font-size: 11px; }
.ds-swatch small[b-z8rdumn6pt] { color: var(--vh-text-muted); font-size: 11px; line-height: 1.3; }

/* ---- demo rows / fields ---- */
.ds-row[b-z8rdumn6pt] { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.ds-grid-2[b-z8rdumn6pt] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: .8rem; }
.ds-field[b-z8rdumn6pt] { display: flex; flex-direction: column; gap: .3rem; max-width: 420px; }
.ds-label[b-z8rdumn6pt] { font-size: 13px; font-weight: 500; color: var(--vh-text-body); margin: 0; }
.ds-error[b-z8rdumn6pt] { font-size: 12px; color: var(--vh-danger); }
.ds-toggle[b-z8rdumn6pt] { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; color: var(--vh-text-muted); cursor: pointer; margin: 0; }
.ds-toggle input[b-z8rdumn6pt] { accent-color: var(--vh-primary); }

/* ---- checks / radios (Blazorise Check/Radio — legacy: 20px, var(--vh-primary) accent; design-system.md §5) ---- */
.ds-checks[b-z8rdumn6pt] { gap: 1.2rem; }
.ds-checks[b-z8rdumn6pt]  .form-check { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding-left: 0; min-height: 0; font-size: 14px; color: var(--vh-text-body); }
.ds-checks[b-z8rdumn6pt]  .form-check-input { width: 20px; height: 20px; margin: 0; float: none; flex: none; accent-color: var(--vh-primary); }
.ds-checks[b-z8rdumn6pt]  .form-check-input:checked { background-color: var(--vh-primary); border-color: var(--vh-primary); }
.ds-checks[b-z8rdumn6pt]  .form-check-input:disabled ~ .form-check-label { color: var(--vh-disabled-text); cursor: not-allowed; }

/* ---- combos ---- */
.ds-combo-block[b-z8rdumn6pt] { border-top: 1px solid var(--vh-line); padding-top: .35rem; margin-top: 1rem; }
.ds-combo[b-z8rdumn6pt] { min-width: 280px; max-width: 420px; }
.ds-chiprow[b-z8rdumn6pt] { gap: .35rem; }
.ds-chip-x[b-z8rdumn6pt] { cursor: pointer; font-weight: 700; text-decoration: none; color: inherit; line-height: 1; }
.ds-search[b-z8rdumn6pt] { display: flex; align-items: center; gap: .25rem; }
.ds-search .vh-input[b-z8rdumn6pt] { max-width: 260px; }

/* ---- snippets ---- */
.ds-snippet[b-z8rdumn6pt] { position: relative; margin-top: .9rem; }
.ds-snippet pre[b-z8rdumn6pt] { background: var(--vh-black-90); color: var(--vh-gray-20); border-radius: var(--vh-radius-md); padding: 14px 16px; font-size: 13px; line-height: 1.55; overflow-x: auto; margin: 0; }
.ds-snippet code[b-z8rdumn6pt] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.ds-copy[b-z8rdumn6pt] { position: absolute; top: 8px; right: 8px; background: var(--vh-black-70); color: var(--vh-gray-20); border: 0; border-radius: var(--vh-radius-sm); font-size: 11px; padding: 3px 10px; cursor: pointer; }
.ds-copy:hover[b-z8rdumn6pt] { background: var(--vh-black-60); }

/* ---- table (admin DataTables look) ---- */
.ds-table[b-z8rdumn6pt] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ds-table th[b-z8rdumn6pt] { text-align: left; font-weight: 700; color: var(--vh-text-heading); border-bottom: 2px solid var(--vh-black-20); padding: 9px 12px; white-space: nowrap; }
.ds-table td[b-z8rdumn6pt] { border-top: 1px solid var(--vh-line); padding: 9px 12px; color: var(--vh-text-body); vertical-align: middle; }
.ds-table tbody tr:hover[b-z8rdumn6pt] { background: var(--vh-gray-10); }
.ds-th-num[b-z8rdumn6pt] { text-align: right; }
.ds-th-sort[b-z8rdumn6pt] { cursor: pointer; }
.ds-th-sort[b-z8rdumn6pt]::after { content: '↕'; color: var(--vh-black-40); margin-left: 6px; font-size: 11px; }
.ds-th-asc[b-z8rdumn6pt]::after { content: '↑'; color: var(--vh-primary); }
.ds-table-footer[b-z8rdumn6pt] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .8rem; }
.ds-pagesize[b-z8rdumn6pt] { display: flex; align-items: center; gap: .45rem; font-size: 13px; color: var(--vh-text-muted); }
.ds-pager[b-z8rdumn6pt] { display: flex; gap: .25rem; }
.ds-page-btn[b-z8rdumn6pt] { min-width: 30px; height: 30px; border: 1px solid var(--vh-gray-30); background: var(--vh-surface); border-radius: var(--vh-radius-sm); color: var(--vh-text-body); font-size: 13px; cursor: pointer; }
.ds-page-btn:hover:not(:disabled)[b-z8rdumn6pt] { background: var(--vh-gray-10); }
.ds-page-btn:disabled[b-z8rdumn6pt] { color: var(--vh-gray-40); cursor: not-allowed; }
.ds-page-active[b-z8rdumn6pt] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); } /* canonical var(--vh-on-primary) */

/* ---- surface hierarchy (§9) ---- */
.ds-surface-grid[b-z8rdumn6pt] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; gap: 1.25rem; margin-top: 1.25rem; padding: .75rem; background: var(--vh-surface-soft); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card); }
.ds-surface-sample[b-z8rdumn6pt] { display: flex; flex-direction: column; gap: .35rem; min-height: 150px; padding: 18px; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card-sm); color: var(--vh-text-body); }
.ds-surface-sample strong[b-z8rdumn6pt] { color: var(--vh-text-heading); font-size: 15px; }
.ds-surface-sample small[b-z8rdumn6pt] { color: var(--vh-text-muted); line-height: 1.45; }
.ds-surface-sample code[b-z8rdumn6pt] { margin-top: auto; color: var(--vh-primary); font-size: 12px; }
.ds-surface-kicker[b-z8rdumn6pt] { color: var(--vh-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ds-surface-flat[b-z8rdumn6pt] { box-shadow: var(--vh-shadow-surface); }
.ds-surface-pop[b-z8rdumn6pt] { box-shadow: var(--vh-shadow-pop); }
.ds-surface-modal[b-z8rdumn6pt] { box-shadow: var(--vh-shadow-modal); }
.ds-state-grid[b-z8rdumn6pt] { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ds-state-sample[b-z8rdumn6pt] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-md); color: var(--vh-text-body); font-size: 13px; }
.ds-state-focus[b-z8rdumn6pt] { border-color: var(--vh-primary); box-shadow: 0 0 0 3px var(--vh-primary-soft); }
.ds-state-selected[b-z8rdumn6pt] { box-shadow: inset 0 0 0 2px var(--vh-primary); }
.ds-state-person[b-z8rdumn6pt] { position: relative; display: inline-flex; align-items: center; gap: .65rem; min-height: 46px; color: var(--vh-text-body); font-size: 13px; }
.ds-state-avatar[b-z8rdumn6pt] { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--vh-primary); color: var(--vh-on-primary); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 3px var(--vh-surface), 0 0 0 4px var(--vh-primary); }
.ds-state-presence[b-z8rdumn6pt] { position: absolute; left: 28px; bottom: 2px; width: 10px; height: 10px; border: 2px solid var(--vh-surface); border-radius: 50%; background: var(--vh-success); }

/* ---- Cobalt cards (§10) — layout only; .vh-card / .vh-pill-tonal / .vh-chip-soft / .vh-btn-gradient are global ---- */
.ds-cobalt-grid[b-z8rdumn6pt] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: .6rem; }
.ds-cobalt-card[b-z8rdumn6pt] { padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.ds-cobalt-title[b-z8rdumn6pt] { margin: 0; color: var(--vh-ink); font-family: var(--vh-font-primary); font-size: 16px; font-weight: 700; }
.ds-cobalt-body[b-z8rdumn6pt] { margin: 0; color: var(--vh-body); font-family: var(--vh-font-primary); font-size: 13px; }
.ds-cobalt-chips[b-z8rdumn6pt] { gap: .4rem; flex-wrap: wrap; }

.ds-foot[b-z8rdumn6pt] { text-align: center; padding-top: 2rem; }
/* /Pages/EmployerEvents/Index.razor.rz.scp.css */
/* Employer Events — same visual system as /candidates/events (cloned from
   CandidateEvents/Index.razor.css; scoped CSS forces the copy). Extra bits:
   the legacy event-company-list page title block. */

.vh-ce-page-title[b-g84k3ajidb] { margin: 0 0 8px; }
.vh-ce-page-title h2[b-g84k3ajidb] { margin: 0 0 8px; font-size: 28px; font-weight: 700; color: var(--vh-raw-26374d); }
.vh-ce-page-title p[b-g84k3ajidb] { margin: 0 0 4px; font-size: 14px; color: var(--vh-raw-5d7189); }

/* Unlike the CandidateEvents source, no center cap here: the .vh-ee-page
   layer at the bottom keeps this page on the normal full-width content flow
   (page-chrome standard, design-system.md §12). */
.vh-cand-events[b-g84k3ajidb] {
    padding: 2.5rem 0;
    font-family: var(--vh-font-primary);
    color: var(--vh-gray-90);
    background-color: var(--vh-surface);
}

/* ---- section titles (OtherEvents SectionTitle) -------------------------- */

.vh-ce-section-title[b-g84k3ajidb] {
    display: flex;
    justify-content: space-between;
    margin: 4.5rem 0 2.063rem 0;
}

.vh-ce-section-title h4[b-g84k3ajidb] {
    margin: 0;
    font-family: var(--vh-font-primary);
    font-size: 28px;            /* theme.fontSize.h4 */
    font-weight: bold;
    color: var(--vh-black-80);
}

.vh-cand-events > .vh-ce-section-title:first-child[b-g84k3ajidb] {
    margin-top: 0;
}

/* ---- shared card pieces -------------------------------------------------- */

.vh-ce-pill[b-g84k3ajidb] {
    width: max-content;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vh-radius-pill);
    background-color: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    padding: 0.125rem 0.75rem;
    font-size: 14px;            /* body.md */
    color: var(--vh-gray-90);
    text-align: center;
}

.vh-ce-date[b-g84k3ajidb] {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--vh-black-60);
}

.vh-ce-date .vh-ce-online[b-g84k3ajidb] {
    margin-left: 1.313rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--vh-black-60);
}

.vh-ce-btn-solid[b-g84k3ajidb],
.vh-ce-btn-outline[b-g84k3ajidb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 40px;
    border-radius: var(--vh-radius-sm);
    font-size: 13px;            /* body.sm */
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s ease;
}

.vh-ce-btn-solid[b-g84k3ajidb] {
    border: 1px solid var(--vh-primary);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
}

.vh-ce-btn-solid:hover[b-g84k3ajidb] {
    border-color: var(--vh-primary-hover);
    background: var(--vh-transparent);
    color: var(--vh-primary);
}

.vh-ce-btn-outline[b-g84k3ajidb] {
    border: 1px solid var(--vh-primary);
    background: var(--vh-transparent);
    color: var(--vh-primary);
}

.vh-ce-btn-outline:hover[b-g84k3ajidb] {
    background: var(--vh-primary);
    color: var(--vh-on-primary);
}

.vh-ce-registered[b-g84k3ajidb] {
    height: 35px;
    display: grid;
    grid-template-columns: 35px max-content;
    grid-gap: 0.75rem;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--vh-gray-90);
}

.vh-ce-avatar[b-g84k3ajidb] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
}

/* ---- promoted hero (HighlightedEvents) ----------------------------------- */

.vh-ce-hero-card[b-g84k3ajidb] {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-content: space-between;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    box-sizing: border-box;
    border-radius: var(--vh-radius-lg);
    cursor: pointer;
    animation: vh-ce-fade-b-g84k3ajidb 0.4s ease;
}

.vh-ce-hero-content[b-g84k3ajidb] {
    height: 100%;
    width: 100%;
    display: grid;
    grid-gap: 1.313rem;
    justify-content: space-between;
    align-content: center;
    padding: 2.063rem;
    background: var(--vh-surface);
    box-sizing: border-box;
    border-radius: var(--vh-radius-lg) 0 0 var(--vh-radius-lg);
}

.vh-ce-hero-content h3[b-g84k3ajidb] {
    margin: 0;
    font-family: var(--vh-font-primary);
    font-size: 34px;            /* theme.fontSize.h3 */
    font-weight: bold;
    color: var(--vh-gray-90);
}

.vh-ce-hero-cover[b-g84k3ajidb] {
    width: 100%;
    height: 100%;
    border-radius: 0 9px 9px 0;
    object-fit: cover;
    overflow: hidden;
    min-height: 280px;
}

.vh-ce-cta[b-g84k3ajidb] {
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto;
    grid-gap: 0.75rem;
    align-items: center;
}

.vh-ce-hero-dots[b-g84k3ajidb] {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
}

.vh-ce-hero-dot[b-g84k3ajidb] {
    cursor: pointer;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--vh-black-20);
    transition: all 0.4s ease;
}

.vh-ce-hero-dot.active[b-g84k3ajidb] {
    background-color: var(--vh-primary-hover); /* legacy var(--vh-primary-hover) */
}

/* ---- grouped cards (CandidateCard) ---------------------------------------- */

.vh-ce-card[b-g84k3ajidb] {
    width: 100%;
    display: grid;
    grid-template-columns: 385px 1fr;
    align-items: center;
    justify-content: space-between;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    box-sizing: border-box;
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-surface);
    transition: border-color .2s ease, background-color .2s ease;
    cursor: pointer;
}

.vh-ce-card:hover[b-g84k3ajidb] {
    border-color: var(--vh-primary-hover);
    background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}

.vh-ce-card + .vh-ce-card[b-g84k3ajidb] {
    margin-top: 2.5rem;
}

.vh-ce-card-cover[b-g84k3ajidb] {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 9px 0 0 9px;
    object-fit: cover;
    overflow: hidden;
}

.vh-ce-card-content[b-g84k3ajidb] {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 150px;
    grid-gap: 1.313rem;
    justify-content: space-between;
    padding: 2.063rem;
    background: var(--vh-surface);
    box-sizing: border-box;
    border-radius: 0 var(--vh-radius-lg) var(--vh-radius-lg) 0;
}

.vh-ce-card-left[b-g84k3ajidb] {
    display: grid;
    grid-gap: 1.313rem;
    align-content: center;
}

.vh-ce-card-left h5[b-g84k3ajidb] {
    margin: 0;
    font-family: var(--vh-font-primary);
    font-size: 22px;            /* theme.fontSize.h5 */
    font-weight: bold;
    color: var(--vh-gray-90);
}

.vh-ce-card-right[b-g84k3ajidb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vh-ce-exclusive[b-g84k3ajidb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.vh-ce-exclusive p[b-g84k3ajidb] {
    margin: 0;
    font-size: 13px;
    color: var(--vh-gray-90);
}

.vh-ce-exclusive-tag[b-g84k3ajidb] {
    width: auto;
    min-height: 1.313rem;
    border-radius: var(--vh-radius-sm);
    background-color: var(--vh-gray-20);
    padding: 0.125rem 0.375rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 12px;            /* caption */
    color: var(--vh-gray-90);
}

/* ---- empty state (NoEvents ticket) ---------------------------------------- */

.vh-ce-empty[b-g84k3ajidb] {
    height: calc(100vh - 390px);
    min-height: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vh-ce-empty-icon[b-g84k3ajidb] {
    position: relative;
    height: 156px;
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vh-ce-empty-rect[b-g84k3ajidb] {
    background: var(--vh-blue-20);        /* legacy var(--vh-blue-20) */
    height: 67px;
    width: 114px;
    border-radius: 70px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.vh-ce-empty-rect-top[b-g84k3ajidb] { top: 42%; }
.vh-ce-empty-rect-bottom[b-g84k3ajidb] { top: 62%; }

.vh-ce-empty-ticket[b-g84k3ajidb] {
    height: 65px;
    width: 65px;
    position: absolute;
    z-index: 2;
}

.vh-ce-empty-title[b-g84k3ajidb] {
    margin-top: 1rem;
    font-size: 16px;
    font-weight: bold;
    color: var(--vh-text-heading);
    line-height: 19px;
    text-align: center;
}

.vh-ce-empty-sub[b-g84k3ajidb] {
    margin-top: 0.375rem;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--vh-gray-90);
}

/* ---- skeleton -------------------------------------------------------------- */

.vh-ce-skeleton[b-g84k3ajidb] {
    display: grid;
    grid-gap: 1.5rem;
}

.vh-ce-skel-title[b-g84k3ajidb],
.vh-ce-skel-hero[b-g84k3ajidb],
.vh-ce-skel-card[b-g84k3ajidb] {
    border-radius: var(--vh-radius-lg);
    background: linear-gradient(90deg, var(--vh-black-10) 25%, var(--vh-raw-e9eef3) 37%, var(--vh-black-10) 63%);
    background-size: 400% 100%;
    animation: vh-ce-shimmer-b-g84k3ajidb 1.4s ease infinite;
}

.vh-ce-skel-title[b-g84k3ajidb] { height: 28px; width: 200px; border-radius: var(--vh-radius); }
.vh-ce-skel-hero[b-g84k3ajidb] { height: 397px; }
.vh-ce-skel-card[b-g84k3ajidb] { height: 220px; }

@keyframes vh-ce-shimmer-b-g84k3ajidb {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes vh-ce-fade-b-g84k3ajidb {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

/* ---- responsive (legacy md/sd stack) --------------------------------------- */

@media (max-width: 900px) {
    .vh-ce-hero-card[b-g84k3ajidb],
    .vh-ce-card[b-g84k3ajidb] {
        grid-template-columns: 1fr;
        border: none;
    }

    .vh-ce-card:hover[b-g84k3ajidb] { box-shadow: none; }

    .vh-ce-hero-cover[b-g84k3ajidb],
    .vh-ce-card-cover[b-g84k3ajidb] {
        order: -1;
        height: 315px;
        border-radius: 9px;
        min-height: unset;
    }

    .vh-ce-hero-content[b-g84k3ajidb],
    .vh-ce-card-content[b-g84k3ajidb] {
        border-radius: var(--vh-radius-lg);
        grid-template-columns: 1fr;
    }

    .vh-ce-hero-content h3[b-g84k3ajidb] { font-size: 22px; line-height: 34px; }

    .vh-ce-section-title[b-g84k3ajidb] {
        margin: 3.75rem 0 2.063rem;
        padding-top: 3.75rem;
        border-top: 1px solid var(--vh-gray-30);
    }
}

@media (max-width: 476px) {
    .vh-ce-hero-content[b-g84k3ajidb],
    .vh-ce-card-content[b-g84k3ajidb] { padding: 1.5rem; }

    .vh-ce-hero-cover[b-g84k3ajidb],
    .vh-ce-card-cover[b-g84k3ajidb] { height: 215px; }
}

/* ---- Why Work With Us (legacy Shared/Benefits) ---- */
.vh-ee-benefits[b-g84k3ajidb] { margin-top: 40px; text-align: center; }
.vh-ee-benefits h4[b-g84k3ajidb],
.vh-ee-attendees h4[b-g84k3ajidb],
.vh-ee-cases h4[b-g84k3ajidb] { margin: 0 0 24px; font-size: 22px; font-weight: 700; color: var(--vh-raw-26374d); text-align: center; }
.vh-ee-benefits-grid[b-g84k3ajidb] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vh-ee-benefit[b-g84k3ajidb] {
    background: var(--vh-surface); border-radius: var(--vh-radius-chip); padding: 32px 24px; text-align: left;
    border: 1px solid var(--vh-line); box-shadow: var(--vh-shadow-surface);
}
.vh-ee-benefit img[b-g84k3ajidb] { width: 32px; height: 32px; }
.vh-ee-benefit h5[b-g84k3ajidb] { margin: 16px 0 8px; font-size: 17px; font-weight: 700; color: var(--vh-raw-26374d); }
.vh-ee-benefit p[b-g84k3ajidb] { margin: 0; font-size: 14px; color: var(--vh-raw-5d7189); }

/* ---- host-your-own card ---- */
.vh-ee-own-card[b-g84k3ajidb] { cursor: default; }
.vh-ee-own-sub[b-g84k3ajidb] { margin: 8px 0 0; font-size: 14px; color: var(--vh-raw-5d7189); }

/* ---- Previous Attendees ---- */
.vh-ee-attendees[b-g84k3ajidb] { margin-top: 48px; padding: 40px 24px; background: var(--vh-raw-f4f7fe); border-radius: var(--vh-radius-card-sm); }
.vh-ee-logos[b-g84k3ajidb] { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; margin-bottom: 32px; }
.vh-ee-logos img[b-g84k3ajidb] { height: 28px; object-fit: contain; filter: grayscale(0); }
.vh-ee-testimonials[b-g84k3ajidb] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vh-ee-testimonial[b-g84k3ajidb] {
    position: relative; background: var(--vh-surface); border-radius: var(--vh-radius-card-sm); padding: 28px 24px 56px;
    border: 1px solid var(--vh-line); text-align: center; box-shadow: var(--vh-shadow-surface);
}
.vh-ee-testimonial p[b-g84k3ajidb] { margin: 0 0 16px; font-size: 14px; color: var(--vh-raw-405067); }
.vh-ee-headline[b-g84k3ajidb] { display: block; font-size: 13px; color: var(--vh-raw-5d7189); margin-bottom: 12px; }
.vh-ee-t-logo[b-g84k3ajidb] { height: 30px; object-fit: contain; }
.vh-ee-t-avatar[b-g84k3ajidb] {
    position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--vh-color-white);
}

/* ---- Success Cases ---- */
.vh-ee-cases[b-g84k3ajidb] { margin-top: 64px; }
.vh-ee-cases-grid[b-g84k3ajidb] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vh-ee-case[b-g84k3ajidb] { position: relative; border-radius: var(--vh-radius-chip); overflow: hidden; aspect-ratio: 16 / 9; background: var(--vh-raw-26374d); }
.vh-ee-case iframe[b-g84k3ajidb] { width: 100%; height: 100%; border: 0; }
.vh-ee-case-light[b-g84k3ajidb] {
    width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
    background-size: cover; background-position: center; display: flex; align-items: flex-end;
}
.vh-ee-case-title[b-g84k3ajidb] {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px;
    background: rgb(var(--vh-black-rgb) / .55); color: var(--vh-color-white); font-size: 14px; font-weight: 600; text-align: left;
}
.vh-ee-case-title img[b-g84k3ajidb] { width: 22px; height: 22px; }

/* ---- Hiring banner ---- */
.vh-ee-hiring[b-g84k3ajidb] { margin-top: 48px; }
.vh-ee-hiring-inner[b-g84k3ajidb] {
    background-color: var(--vh-raw-3f37c9); background-repeat: no-repeat; background-position: center;
    border-radius: var(--vh-radius-card-sm); padding: 48px 24px; text-align: center; color: var(--vh-on-primary);
}
.vh-ee-hiring-inner h3[b-g84k3ajidb] { margin: 0 0 12px; font-size: 28px; font-weight: 700; }
.vh-ee-hiring-inner h5[b-g84k3ajidb] { margin: 0 0 24px; font-size: 16px; font-weight: 400; }
.vh-ee-register-btn[b-g84k3ajidb] {
    border: 0; border-radius: var(--vh-radius-md); background: var(--vh-color-white); color: var(--vh-raw-26374d);
    font-size: 14px; font-weight: 700; padding: 12px 32px; cursor: pointer;
}
.vh-ee-register-btn:disabled[b-g84k3ajidb] { opacity: .6; cursor: default; }
.vh-ee-stats[b-g84k3ajidb] { display: flex; justify-content: center; gap: 32px; margin-top: 28px; flex-wrap: wrap; }
.vh-ee-stats span[b-g84k3ajidb] { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.vh-ee-stats img[b-g84k3ajidb] { width: 18px; height: 18px; }

/* ---- FAQ ---- */
.vh-ee-faq[b-g84k3ajidb] { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin: 56px 0 24px; }
.vh-ee-faq-title h4[b-g84k3ajidb] { margin: 0; font-size: 26px; font-weight: 700; color: var(--vh-raw-26374d); }
.vh-ee-faq-item[b-g84k3ajidb] { border-bottom: 1px dashed var(--vh-raw-d9e1ec); padding: 4px 0; }
.vh-ee-faq-item summary[b-g84k3ajidb] {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    list-style: none; cursor: pointer; padding: 12px 8px; font-size: 15px; color: var(--vh-raw-26374d);
}
.vh-ee-faq-item summary[b-g84k3ajidb]::-webkit-details-marker { display: none; }
.vh-ee-faq-item summary i[b-g84k3ajidb] { font-size: 12px; color: var(--vh-raw-5d7189); transition: transform .2s ease; }
.vh-ee-faq-item[open] summary i[b-g84k3ajidb] { transform: rotate(180deg); }
.vh-ee-faq-item p[b-g84k3ajidb] { margin: 0; padding: 0 8px 16px; font-size: 14px; color: var(--vh-raw-5d7189); }

/* ---- lead modal ---- */
.vh-ee-modal-overlay[b-g84k3ajidb] {
    position: fixed; inset: 0; z-index: 1060; background: rgb(var(--vh-black-rgb) / .5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.vh-ee-modal[b-g84k3ajidb] {
    width: 520px; max-width: 100%; max-height: 92vh; overflow-y: auto;
    background: var(--vh-surface); border-radius: var(--vh-radius-card-sm); padding: 24px;
}
.vh-ee-modal-head[b-g84k3ajidb] { display: flex; align-items: flex-start; gap: 16px; }
.vh-ee-modal-head h5[b-g84k3ajidb] { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--vh-raw-26374d); flex: 1; }
.vh-ee-modal-close[b-g84k3ajidb] { border: 0; background: var(--vh-transparent); color: var(--vh-raw-405067); font-size: 16px; cursor: pointer; }
.vh-ee-form[b-g84k3ajidb] { display: flex; flex-direction: column; }
.vh-ee-form label[b-g84k3ajidb] { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--vh-raw-405067); }
.vh-ee-form label span[b-g84k3ajidb] { color: var(--vh-danger); }
.vh-ee-form input[type="text"][b-g84k3ajidb], .vh-ee-form input[type="email"][b-g84k3ajidb], .vh-ee-form select[b-g84k3ajidb] {
    border: 1px solid var(--vh-raw-d9e1ec); border-radius: var(--vh-radius-md); padding: 10px 12px; font-size: 14px; color: var(--vh-raw-26374d);
}
.vh-ee-form input.invalid[b-g84k3ajidb], .vh-ee-form select.invalid[b-g84k3ajidb] { border-color: var(--vh-danger); }
.vh-ee-err[b-g84k3ajidb] { margin-top: 4px; font-size: 12px; color: var(--vh-danger); }
.vh-ee-check[b-g84k3ajidb] { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }
.vh-ee-form .vh-ee-register-btn[b-g84k3ajidb] { margin-top: 20px; background: var(--vh-raw-0f62fe); color: var(--vh-on-primary); }
.vh-ee-success[b-g84k3ajidb] { text-align: center; padding: 16px 0 8px; }
.vh-ee-success img[b-g84k3ajidb] { width: 48px; height: 48px; }
.vh-ee-success h5[b-g84k3ajidb] { margin: 12px 0 8px; font-size: 18px; color: var(--vh-raw-26374d); }
.vh-ee-success p[b-g84k3ajidb] { margin: 0 0 20px; font-size: 14px; color: var(--vh-raw-5d7189); }

@media (max-width: 992px) {
    .vh-ee-benefits-grid[b-g84k3ajidb], .vh-ee-testimonials[b-g84k3ajidb], .vh-ee-cases-grid[b-g84k3ajidb] { grid-template-columns: 1fr; }
    .vh-ee-faq[b-g84k3ajidb] { grid-template-columns: 1fr; }
}

/* host-your-own card: no cover image — text takes the full row (legacy
   EventCard isOwnEvent renders borderless full-width copy + button). */
.vh-ee-own-card[b-g84k3ajidb] { grid-template-columns: 1fr; display: block; }
.vh-ee-own-card .vh-ce-card-content[b-g84k3ajidb] { grid-template-columns: 1fr 150px; }

/* =====================================================================
   ABP Commercial + VanHack presentation layer
   The legacy marketing structure above is intentionally retained, while
   this final layer normalizes it to the shared Cobalt theme contract.
   ===================================================================== */
.vh-cand-events.vh-ee-page[b-g84k3ajidb] {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 32px;
    color: var(--vh-body);
    background: var(--vh-transparent);
}

.vh-ee-intro[b-g84k3ajidb] {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 28px 32px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background:
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--vh-primary) 15%, var(--vh-transparent)), var(--vh-transparent) 28%),
        linear-gradient(135deg, var(--vh-surface) 0%, var(--vh-blue-tint) 100%);
    box-shadow: var(--vh-shadow-surface);
}

.vh-ee-eyebrow[b-g84k3ajidb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 5px 9px;
    border: 1px solid var(--vh-tonal-blue-bd);
    border-radius: var(--vh-radius-pill);
    background: var(--vh-tonal-blue-bg);
    color: var(--vh-tonal-blue-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vh-ee-intro h2[b-g84k3ajidb],
.vh-cand-events .vh-ce-section-title[b-g84k3ajidb],
.vh-ee-benefits h4[b-g84k3ajidb],
.vh-ee-attendees h4[b-g84k3ajidb],
.vh-ee-cases h4[b-g84k3ajidb],
.vh-ee-faq-title h4[b-g84k3ajidb] {
    color: var(--vh-ink);
}

.vh-ee-intro h2[b-g84k3ajidb] {
    max-width: 760px;
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.16;
    letter-spacing: -.025em;
}

.vh-ee-intro p[b-g84k3ajidb] {
    max-width: 760px;
    margin: 0;
    color: var(--vh-body);
    line-height: 1.65;
}

.vh-cand-events .vh-ce-section-title[b-g84k3ajidb] {
    margin: 0 0 18px;
    font-size: 1.35rem;
    letter-spacing: -.015em;
}

.vh-cand-events .vh-ce-card[b-g84k3ajidb],
.vh-cand-events .vh-ce-hero-card[b-g84k3ajidb],
.vh-ee-benefit[b-g84k3ajidb],
.vh-ee-testimonial[b-g84k3ajidb],
.vh-ee-faq-item[b-g84k3ajidb] {
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
}

.vh-cand-events .vh-ce-card[b-g84k3ajidb] {
    overflow: hidden;
}

.vh-cand-events .vh-ce-card-content[b-g84k3ajidb],
.vh-cand-events .vh-ce-hero-content[b-g84k3ajidb] {
    color: var(--vh-body);
    background: var(--vh-surface);
}

.vh-cand-events .vh-ce-hero-card[b-g84k3ajidb] { overflow: hidden; }

.vh-cand-events .vh-ce-pill[b-g84k3ajidb] {
    border-color: var(--vh-line-strong);
    background: var(--vh-surface-soft);
    color: var(--vh-body);
}

.vh-cand-events .vh-ce-card-title[b-g84k3ajidb],
.vh-cand-events .vh-ce-card-content h3[b-g84k3ajidb],
.vh-cand-events .vh-ce-card-content h4[b-g84k3ajidb],
.vh-cand-events .vh-ce-hero-content h3[b-g84k3ajidb],
.vh-ee-benefit h5[b-g84k3ajidb],
.vh-ee-own-title[b-g84k3ajidb],
.vh-ee-success h5[b-g84k3ajidb] {
    color: var(--vh-ink);
}

.vh-cand-events .vh-ce-card p[b-g84k3ajidb],
.vh-cand-events .vh-ce-card-desc[b-g84k3ajidb],
.vh-cand-events .vh-ce-meta[b-g84k3ajidb],
.vh-ee-benefit p[b-g84k3ajidb],
.vh-ee-own-sub[b-g84k3ajidb],
.vh-ee-testimonial p[b-g84k3ajidb],
.vh-ee-headline[b-g84k3ajidb],
.vh-ee-faq-item p[b-g84k3ajidb],
.vh-ee-success p[b-g84k3ajidb] {
    color: var(--vh-body);
}

.vh-ee-empty[b-g84k3ajidb] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 38px 24px;
    border: 1px dashed var(--vh-line-strong);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface-soft);
    text-align: center;
}

.vh-ee-empty-icon[b-g84k3ajidb] {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 14px;
    background: var(--vh-blue-tint);
    color: var(--vh-blue-deep);
    font-size: 20px;
}

.vh-ee-empty h3[b-g84k3ajidb],
.vh-ee-empty h4[b-g84k3ajidb] { margin: 0; color: var(--vh-ink); }
.vh-ee-empty p[b-g84k3ajidb] { max-width: 520px; margin: 0 0 10px; color: var(--vh-body); }

.vh-cand-events .vh-ce-empty-title[b-g84k3ajidb] { color: var(--vh-ink); }

.vh-cand-events .vh-ce-skel-title[b-g84k3ajidb],
.vh-cand-events .vh-ce-skel-hero[b-g84k3ajidb],
.vh-cand-events .vh-ce-skel-card[b-g84k3ajidb] {
    background: linear-gradient(90deg, var(--vh-surface-soft) 25%, var(--vh-line) 37%, var(--vh-surface-soft) 63%);
    background-size: 400% 100%;
}

.vh-ee-benefits[b-g84k3ajidb],
.vh-ee-cases[b-g84k3ajidb],
.vh-ee-hiring[b-g84k3ajidb],
.vh-ee-attendees[b-g84k3ajidb] {
    margin-top: 48px;
}

.vh-ee-benefit[b-g84k3ajidb] {
    padding: 24px;
    transition: border-color .18s ease, background-color .18s ease;
}

.vh-ee-benefit:hover[b-g84k3ajidb] {
    border-color: var(--vh-tonal-blue-bd);
    background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}

.vh-ee-benefit-icon[b-g84k3ajidb] {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    background: var(--vh-blue-tint);
    color: var(--vh-blue-deep);
}

.vh-ee-attendees[b-g84k3ajidb] {
    padding: 32px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface-soft);
}

.vh-ee-logos[b-g84k3ajidb] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.vh-ee-logos img[b-g84k3ajidb] {
    width: 100%;
    height: 52px;
    padding: 12px;
    border: 1px solid var(--vh-line);
    border-radius: 10px;
    /* Brand artwork is supplied as var(--vh-transparent)/dark PNGs; a compact var(--vh-fixed-light-surface)
       logo plate preserves the original marks in both application themes. */
    background: var(--vh-fixed-light-surface);
    object-fit: contain;
}

.vh-ee-testimonials[b-g84k3ajidb] { gap: 16px; }

.vh-ee-testimonial[b-g84k3ajidb] {
    display: flex;
    position: static;
    min-width: 0;
    flex-direction: column;
    padding: 24px;
}

.vh-ee-testimonial p[b-g84k3ajidb] { flex: 1; line-height: 1.6; }
.vh-ee-t-logo[b-g84k3ajidb] {
    max-width: 140px;
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--vh-fixed-light-surface);
}

.vh-ee-t-avatar[b-g84k3ajidb] {
    position: static;
    width: 48px;
    height: 48px;
    margin: 16px auto 0;
    border: 3px solid var(--vh-surface-soft);
    transform: none;
}

.vh-ee-case[b-g84k3ajidb] {
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}

.vh-ee-case-light:focus-visible[b-g84k3ajidb],
.vh-ee-register-btn:focus-visible[b-g84k3ajidb],
.vh-ee-modal-close:focus-visible[b-g84k3ajidb],
.vh-ee-faq-item summary:focus-visible[b-g84k3ajidb] {
    outline: 3px solid color-mix(in srgb, var(--vh-primary) 35%, var(--vh-transparent));
    outline-offset: 3px;
}

.vh-ee-hiring-inner[b-g84k3ajidb] {
    padding: 44px 28px;
    border: 1px solid color-mix(in srgb, var(--vh-primary-hover) 55%, var(--vh-transparent));
    border-radius: var(--vh-radius-card);
    background: var(--vh-gradient-primary);
    box-shadow: var(--vh-shadow-surface);
}

.vh-ee-hiring-inner h3[b-g84k3ajidb] {
    font-size: clamp(1.55rem, 3vw, 2rem);
    letter-spacing: -.02em;
}

.vh-ee-register-btn[b-g84k3ajidb] {
    border-radius: var(--vh-radius-chip);
    transition: box-shadow .16s ease, filter .16s ease, transform .16s ease;
}

.vh-ee-register-btn:hover:not(:disabled)[b-g84k3ajidb] {
    filter: brightness(.97);
    box-shadow: 0 10px 22px -12px rgb(var(--vh-black-rgb) / .5);
    transform: translateY(-1px);
}

.vh-ee-faq[b-g84k3ajidb] {
    margin: 48px 0 0;
    align-items: start;
}

.vh-ee-faq-title[b-g84k3ajidb] {
    position: sticky;
    top: 88px;
    padding: 8px 0;
}

.vh-ee-faq-list[b-g84k3ajidb] {
    display: grid;
    gap: 10px;
}

.vh-ee-faq-item[b-g84k3ajidb] { overflow: hidden; }
.vh-ee-faq-item summary[b-g84k3ajidb] { padding: 16px 18px; color: var(--vh-ink); font-weight: 700; }
.vh-ee-faq-item summary:hover[b-g84k3ajidb] { background: var(--vh-surface-soft); }
.vh-ee-faq-item summary i[b-g84k3ajidb] { color: var(--vh-muted); }
.vh-ee-faq-item p[b-g84k3ajidb] { padding: 0 18px 18px; line-height: 1.6; }

.vh-ee-modal-overlay[b-g84k3ajidb] {
    background: rgb(var(--vh-raw-rgb-5-12-22) / .66);
    backdrop-filter: blur(3px);
}

.vh-ee-modal[b-g84k3ajidb] {
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    box-shadow: 0 26px 70px rgb(var(--vh-black-rgb) / .28);
}

.vh-ee-modal-head h5[b-g84k3ajidb] { color: var(--vh-ink); }

.vh-ee-modal-close[b-g84k3ajidb] {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-lg);
    background: var(--vh-surface-soft);
    color: var(--vh-body);
}

.vh-ee-form label[b-g84k3ajidb] { color: var(--vh-body); }
.vh-ee-form label span[b-g84k3ajidb],
.vh-ee-err[b-g84k3ajidb] { color: var(--vh-danger); }

.vh-ee-form input[type="text"][b-g84k3ajidb],
.vh-ee-form input[type="email"][b-g84k3ajidb] {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius-chip);
    background: var(--vh-surface);
    color: var(--vh-ink);
}

.vh-ee-form input[type="text"]:focus[b-g84k3ajidb],
.vh-ee-form input[type="email"]:focus[b-g84k3ajidb] {
    border-color: var(--vh-primary);
    outline: 3px solid color-mix(in srgb, var(--vh-primary) 16%, var(--vh-transparent));
}

.vh-ee-form[b-g84k3ajidb]  .vh-dd-block { width: 100%; }
.vh-ee-form[b-g84k3ajidb]  .vh-dd-block .vh-dd-btn { width: 100%; justify-content: space-between; }
.vh-ee-form[b-g84k3ajidb]  .vh-ee-invalid .vh-dd-btn,
.vh-ee-form input.invalid[b-g84k3ajidb] { border-color: var(--vh-danger); }
.vh-ee-form input[type="checkbox"][b-g84k3ajidb] { accent-color: var(--vh-primary); }
.vh-ee-form .vh-ee-register-btn[b-g84k3ajidb] { background: var(--vh-gradient-primary); color: var(--vh-on-primary); }

@media (max-width: 991.98px) {
    .vh-ee-logos[b-g84k3ajidb] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vh-ee-faq[b-g84k3ajidb] { grid-template-columns: 1fr; }
    .vh-ee-faq-title[b-g84k3ajidb] { position: static; }
}

@media (max-width: 767.98px) {
    .vh-cand-events.vh-ee-page[b-g84k3ajidb] { padding-bottom: 20px; }
    .vh-ee-intro[b-g84k3ajidb] { padding: 22px 20px; }
    .vh-ee-attendees[b-g84k3ajidb] { padding: 24px 16px; }
    .vh-ee-benefits[b-g84k3ajidb],
    .vh-ee-cases[b-g84k3ajidb],
    .vh-ee-hiring[b-g84k3ajidb],
    .vh-ee-attendees[b-g84k3ajidb] { margin-top: 36px; }
    .vh-ee-own-card .vh-ce-card-content[b-g84k3ajidb] { grid-template-columns: 1fr; }
    .vh-ee-hiring-inner[b-g84k3ajidb] { padding: 36px 18px; }
    .vh-ee-stats[b-g84k3ajidb] { gap: 14px 22px; }
    .vh-ee-modal[b-g84k3ajidb] { padding: 20px; }
}

@media (max-width: 479.98px) {
    .vh-ee-logos[b-g84k3ajidb] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vh-ee-register-btn[b-g84k3ajidb] { width: 100%; }
}
/* /Pages/EventPipeline/Board.razor.rz.scp.css */
/* Event Pipeline board (epb-) — copy-adapt of the interview-pipeline ipb- styles.
   Trimmed: dashboard/summary charts, collaborators, status pill, info panel,
   offer/decline modals. Added: assignee chip + picker, column ⚡/⋯ menu with
   the job picker, call status line, screening stars.
   Colors come from the design-system tokens (vh-tokens.css): accent = the
   var(--vh-primary) (like the legacy); dark mode is free via the token layer. */

/* ===== Page header (legacy visual/Header) ===== */
.epb-header[b-cetzqgh6fz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.epb-head-left[b-cetzqgh6fz] { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.epb-head-right[b-cetzqgh6fz] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.epb-back[b-cetzqgh6fz] { font-size: .8rem; color: var(--vh-text-muted); text-decoration: none; white-space: nowrap; }
.epb-back:hover[b-cetzqgh6fz] { color: var(--vh-primary); }

/* Event name links to the public event page (legacy job-headline link) */
.epb-headline[b-cetzqgh6fz] {
    font-family: var(--vh-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
    max-width: 460px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: inline-block;
}
.epb-headline:hover[b-cetzqgh6fz] { color: var(--vh-primary); text-decoration: underline; }

.epb-search[b-cetzqgh6fz] { max-width: 240px; }
.epb-refresh[b-cetzqgh6fz] { border: 1px solid var(--vh-line); }

/* Sort toggle (legacy Sorting dropdown: Matching | Newest) */
.epb-sort[b-cetzqgh6fz] {
    display: flex;
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    overflow: hidden;
}
.epb-sort-btn[b-cetzqgh6fz] {
    border: none;
    background: var(--vh-surface);
    color: var(--vh-text-muted);
    font-size: .75rem;
    padding: .3rem .6rem;
    cursor: pointer;
}
.epb-sort-btn + .epb-sort-btn[b-cetzqgh6fz] { border-left: 1px solid var(--vh-line); }
.epb-sort-btn.on[b-cetzqgh6fz] { background: var(--vh-primary); color: var(--vh-on-primary); }

/* Edit (→ /event-pipeline/{id}/edit — edit screen not ported yet) */
.epb-edit[b-cetzqgh6fz] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--vh-text-muted);
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    padding: .3rem .6rem;
    text-decoration: none;
    white-space: nowrap;
}
.epb-edit:hover[b-cetzqgh6fz] { color: var(--vh-primary); border-color: var(--vh-primary); }

/* ===== Tab bar (legacy visual/Tabs): Event Pipeline | Interviews ===== */
.epb-tabs[b-cetzqgh6fz] {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    border-bottom: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-surface);
    margin-bottom: .9rem;
}
.epb-tab[b-cetzqgh6fz] {
    position: relative;
    font-size: .875rem;
    color: var(--vh-gray-90);
    cursor: pointer;
    padding: .5rem 0 .6rem;
    text-decoration: none;
    white-space: nowrap;
}
.epb-tab:hover[b-cetzqgh6fz] { color: var(--vh-primary); }
.epb-tab.active[b-cetzqgh6fz] { color: var(--vh-primary-hover); font-weight: 700; }
.epb-tab.active[b-cetzqgh6fz]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--vh-primary-hover);
}

/* ===== Board ===== */
.epb-board[b-cetzqgh6fz] {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    font-family: var(--vh-font-primary);
    /* default align-items (stretch): every column paints its background down
       to the board's bottom edge regardless of how few cards it holds */
    /* Fallback only — vhBoardFit.fit() sets the exact px height at runtime so
       the board (and its horizontal scrollbar) ends at the viewport bottom and
       the page itself never scrolls vertically. */
    height: calc(100dvh - 250px);
    /* Classic (non-overlay) scrollbar — macOS overlay bars would keep the
       horizontal scrollbar invisible until a scroll gesture. */
    scrollbar-width: thin;
    scrollbar-color: var(--vh-gray-40) var(--vh-transparent);
}
/* While a bulk selection is active the fixed bulk bar floats over the bottom
   of the board — reserve room so it never covers the last cards/scrollbar. */
.epb-board-bulk[b-cetzqgh6fz] { padding-bottom: 4rem; }
.epb-board[b-cetzqgh6fz]::-webkit-scrollbar { height: 12px; }
.epb-board[b-cetzqgh6fz]::-webkit-scrollbar-track { background: var(--vh-transparent); }
.epb-board[b-cetzqgh6fz]::-webkit-scrollbar-thumb {
    background: var(--vh-gray-40);
    border-radius: 6px;
    border: 3px solid var(--vh-transparent);
    background-clip: padding-box;
}
.epb-board[b-cetzqgh6fz]::-webkit-scrollbar-thumb:hover { background-color: var(--vh-gray-50); }

.epb-col[b-cetzqgh6fz] {
    flex: 0 0 270px;
    background: var(--vh-black-10);
    border-radius: var(--vh-radius-chip);
    display: flex;
    flex-direction: column;
    /* height comes from the board's align-items: stretch — the viewport-fitted
       board (vhBoardFit) makes every column full-height, short content or not */
}

.epb-col-head[b-cetzqgh6fz] {
    padding: .5rem .6rem .4rem;
    border-top: 3px solid var(--vh-black-40);
    border-radius: var(--vh-radius-chip) var(--vh-radius-chip) 0 0;
}

.epb-col-title[b-cetzqgh6fz] { display: flex; align-items: center; gap: .4rem; min-height: 24px; }
.epb-col-name[b-cetzqgh6fz] {
    font-weight: 600;
    font-size: .85rem;
    color: var(--vh-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.epb-col-name.editable[b-cetzqgh6fz] { cursor: text; }

/* Event StepColumnType colour accents (enum block 30–42).
   Semantic ones map to tokens; the remaining categorical hues use exact raw
   tokens so columns stay distinguishable. */
.epb-type-30[b-cetzqgh6fz] { border-top-color: var(--vh-raw-0891b2); }   /* English and Code Verified */
.epb-type-31[b-cetzqgh6fz] { border-top-color: var(--vh-primary); }         /* Profile Screening */
.epb-type-32[b-cetzqgh6fz] { border-top-color: var(--vh-success); }         /* Approved / Selected */
.epb-type-33[b-cetzqgh6fz] { border-top-color: var(--vh-danger); }          /* Rejected */
.epb-type-34[b-cetzqgh6fz] { border-top-color: var(--vh-raw-7c3aed); }   /* Screening Call */
.epb-type-35[b-cetzqgh6fz] { border-top-color: var(--vh-raw-6d49cb); }   /* Pre Selected */
.epb-type-36[b-cetzqgh6fz] { border-top-color: var(--vh-raw-0e7490); }   /* Company Screening */
.epb-type-37[b-cetzqgh6fz] { border-top-color: var(--vh-warning); }         /* Applied — "For your review" accent */
.epb-type-38[b-cetzqgh6fz] { border-top-color: var(--vh-raw-8b5cf6); }   /* Scheduling Call */
.epb-type-39[b-cetzqgh6fz] { border-top-color: var(--vh-black-40); }        /* Meetup Keep Hacking */
.epb-type-40[b-cetzqgh6fz] { border-top-color: var(--vh-tonal-green-text); }/* Meetup Selected */
.epb-type-41[b-cetzqgh6fz] { border-top-color: var(--vh-black-50); }        /* Stand By */
.epb-type-42[b-cetzqgh6fz] { border-top-color: var(--vh-primary-active); }  /* Interview Confirmed */

/* Legacy isForYourReview (columnType 37) highlighted column header */
.epb-col-head.epb-fyr[b-cetzqgh6fz] { background: var(--vh-tonal-amber-bg); }

.epb-col-count[b-cetzqgh6fz] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-pill);
    padding: 0 .5rem;
    font-size: .75rem;
    color: var(--vh-text-body);
    min-width: 1.4rem;
    text-align: center;
}

.epb-col-tools[b-cetzqgh6fz] { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.epb-tool[b-cetzqgh6fz] { color: var(--vh-black-40); font-size: .75rem; cursor: pointer; padding: .1rem .2rem; }
.epb-tool:hover[b-cetzqgh6fz] { color: var(--vh-primary); }
.epb-tool.danger:hover[b-cetzqgh6fz] { color: var(--vh-danger); }

/* ⚡ Smart Actions indicator — render-only (backend shell, not ported) */
.epb-bolt[b-cetzqgh6fz] {
    color: var(--vh-black-20);
    font-size: .75rem;
    padding: .1rem .2rem;
    cursor: default;
    position: relative;
}
.epb-bolt.on[b-cetzqgh6fz] { color: var(--vh-warning); }
.epb-bolt-count[b-cetzqgh6fz] {
    font-size: .6rem;
    font-weight: 700;
    color: var(--vh-tonal-amber-text);
    margin-left: 1px;
}

.epb-rename[b-cetzqgh6fz] { font-size: .8rem; padding: .15rem .4rem; height: auto; }

/* Inline step forms (add / delete confirm) */
.epb-step-form[b-cetzqgh6fz] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    padding: .45rem;
    margin-top: .4rem;
    font-size: .78rem;
    color: var(--vh-text-body);
}
.epb-step-form-actions[b-cetzqgh6fz] { display: flex; gap: .35rem; margin-top: .4rem; }
.epb-delconfirm span[b-cetzqgh6fz] { font-weight: 600; }

/* Step type select — ONLY Profile Screening (31) / Selected (32) */
/* Step-type combo is the shared VhDropdown (vh-dd-block) — compact in the column head */
.epb-step-form[b-cetzqgh6fz]  .vh-dd, .epb-col-head[b-cetzqgh6fz]  .vh-dd { margin-top: .4rem; }
.epb-step-form[b-cetzqgh6fz]  .vh-dd-btn, .epb-col-head[b-cetzqgh6fz]  .vh-dd-btn { font-size: .78rem; padding: 4px 10px; }

/* Column-scoped "Select all" */
.epb-selectall[b-cetzqgh6fz] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: var(--vh-text-muted);
    margin: .4rem 0 0;
    cursor: pointer;
    user-select: none;
}

/* Column ⋯ menu (legacy ColumnActions) + inline job picker */
.epb-colmenu-wrap[b-cetzqgh6fz] { position: relative; }
.epb-colmenu[b-cetzqgh6fz] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 70;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    box-shadow: 0 8px 24px rgb(var(--vh-raw-rgb-17-24-39) / .12);
    padding: .35rem;
    min-width: 230px;
}
.epb-colmenu-item[b-cetzqgh6fz] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font-size: .78rem;
    color: var(--vh-text-body);
    padding: .35rem .5rem;
    border-radius: .3rem;
    cursor: pointer;
    text-decoration: none;
}
.epb-colmenu-item:hover[b-cetzqgh6fz] { background: var(--vh-gray-10); color: var(--vh-primary); }

/* Job picker (legacy "Add all candidates to job" AsyncSelect) */
.epb-jobpicker[b-cetzqgh6fz] { padding: .35rem .5rem; }
.epb-jobpicker-list[b-cetzqgh6fz] {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--vh-line);
    border-radius: .3rem;
    margin-top: .35rem;
}
.epb-jobpicker-item[b-cetzqgh6fz] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font-size: .76rem;
    color: var(--vh-text-body);
    padding: .3rem .45rem;
    cursor: pointer;
}
.epb-jobpicker-item:hover[b-cetzqgh6fz] { background: var(--vh-blue-tint); }
.epb-jobpicker-item.sel[b-cetzqgh6fz] { background: var(--vh-primary); color: var(--vh-on-primary); }
.epb-jobpicker-empty[b-cetzqgh6fz] { font-size: .74rem; color: var(--vh-black-40); padding: .35rem .45rem; }
.epb-jobpicker-confirm[b-cetzqgh6fz] { font-size: .74rem; color: var(--vh-text-body); margin-top: .4rem; }
.epb-jobpicker-actions[b-cetzqgh6fz] { display: flex; gap: .35rem; margin-top: .4rem; }

.epb-col-body[b-cetzqgh6fz] {
    padding: .5rem;
    overflow-y: auto;
    gap: .5rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;         /* fill the stretched column — wheel-scroll and drop work on the empty area below the cards */
    min-height: 90px;       /* drop target even when the column is empty */
    border-radius: 0 0 var(--vh-radius-chip) var(--vh-radius-chip);
    border: 2px dashed var(--vh-transparent);
}

/* DnD highlight on the hovered column */
.epb-col-body.epb-dropover[b-cetzqgh6fz] { border-color: var(--vh-primary); background: var(--vh-blue-tint); }
.epb-col-body.epb-dropblock[b-cetzqgh6fz] { border-color: var(--vh-line); background: var(--vh-gray-10); cursor: not-allowed; }

.epb-empty[b-cetzqgh6fz] { text-align: center; color: var(--vh-black-30); font-size: .85rem; padding: .5rem; }

/* ===== Candidate card ===== */
.epb-card[b-cetzqgh6fz] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: .45rem;
    padding: .55rem;
    cursor: grab;
    user-select: none;
}
.epb-card:active[b-cetzqgh6fz] { cursor: grabbing; }
.epb-card.sel[b-cetzqgh6fz] { border-color: var(--vh-primary); box-shadow: inset 0 0 0 1px var(--vh-primary); }

.epb-card-top[b-cetzqgh6fz] { display: flex; align-items: center; gap: .5rem; }
.epb-check[b-cetzqgh6fz] { flex: 0 0 auto; margin: 0; cursor: pointer; }
.epb-avatar[b-cetzqgh6fz] {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    background: var(--vh-black-10); color: var(--vh-black-60); font-weight: 600; font-size: .8rem;
    display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
}
.epb-avatar img[b-cetzqgh6fz] { width: 100%; height: 100%; object-fit: cover; }
.epb-card-id[b-cetzqgh6fz] { flex: 1 1 auto; min-width: 0; }
.epb-name[b-cetzqgh6fz] { font-weight: 600; font-size: .85rem; color: var(--vh-text-heading); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epb-name:hover[b-cetzqgh6fz] { color: var(--vh-primary); text-decoration: underline; }
.epb-pos[b-cetzqgh6fz] { font-size: .75rem; color: var(--vh-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Candidate flag (1 var(--vh-danger) / 2 var(--vh-warning)) */
.epb-flag-1[b-cetzqgh6fz] { color: var(--vh-danger); font-size: .8rem; flex: 0 0 auto; }
.epb-flag-2[b-cetzqgh6fz] { color: var(--vh-warning); font-size: .8rem; flex: 0 0 auto; }

/* Badges row (candidate hired status + mock) */
.epb-badges[b-cetzqgh6fz] { display: flex; gap: .3rem; margin-top: .35rem; flex-wrap: wrap; }
.epb-badge[b-cetzqgh6fz] {
    font-size: .62rem;
    font-weight: 700;
    border-radius: var(--vh-radius);
    padding: .08rem .35rem;
    background: var(--vh-black-10);
    color: var(--vh-black-60);
}
.epb-badge.mock-ok[b-cetzqgh6fz] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); }
.epb-badge.mock-pending[b-cetzqgh6fz] { background: var(--vh-black-20); color: var(--vh-black-70); }

/* Screening stars (legacy admin card StarRating, read-only) */
.epb-screening[b-cetzqgh6fz] { display: flex; gap: 1px; margin-top: .35rem; font-size: .68rem; }
.epb-star[b-cetzqgh6fz] { color: var(--vh-black-20); }
.epb-star.on[b-cetzqgh6fz] { color: var(--vh-warning-light); }

/* Skills pills (max 4 + "+N"; legacy primary "*" skills highlighted) */
.epb-skills[b-cetzqgh6fz] { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .35rem; }
.epb-skill[b-cetzqgh6fz] {
    background: var(--vh-black-10);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-pill);
    font-size: .66rem;
    color: var(--vh-black-60);
    padding: .05rem .4rem;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.epb-skill.primary[b-cetzqgh6fz] { background: var(--vh-tonal-blue-bg); border-color: var(--vh-tonal-blue-bd); color: var(--vh-tonal-blue-text); font-weight: 600; }
.epb-skill.more[b-cetzqgh6fz] { background: var(--vh-black-10); color: var(--vh-primary); font-weight: 600; }

/* Meta rows: years of experience + english level + daysAgo */
.epb-meta[b-cetzqgh6fz] { display: flex; gap: .7rem; margin-top: .35rem; font-size: .7rem; color: var(--vh-text-muted); flex-wrap: wrap; }
.epb-meta i[b-cetzqgh6fz] { color: var(--vh-black-40); margin-right: .15rem; }

/* Call status line (legacy bookACallInfo disabled states) */
.epb-call-line[b-cetzqgh6fz] {
    margin-top: .35rem;
    font-size: .72rem;
    font-weight: 600;
    border-radius: .3rem;
    padding: .2rem .4rem;
    display: inline-block;
}
.epb-call-line i[b-cetzqgh6fz] { margin-right: .25rem; }
.epb-call-requested[b-cetzqgh6fz] { background: var(--vh-tonal-blue-bg); color: var(--vh-tonal-blue-text); }
.epb-call-scheduled[b-cetzqgh6fz] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); }
.epb-call-canceled[b-cetzqgh6fz] { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); }

/* Active BOOK A CALL (legacy renderBookACall PrimaryButton — w13-boards-epca) */
.epb-bookacall[b-cetzqgh6fz] {
    background: var(--vh-transparent);
    border: none;
    color: var(--vh-primary);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: .25rem 0;
    margin-top: .2rem;
    cursor: pointer;
    white-space: nowrap;
    display: block;
}
.epb-bookacall i[b-cetzqgh6fz] { margin-right: .25rem; }
.epb-bookacall:hover[b-cetzqgh6fz] { font-weight: 700; }
.epb-bookacall:disabled[b-cetzqgh6fz] { color: var(--vh-raw-9fc7e8); cursor: wait; } /* var(--vh-primary) @ ~50% tint (busy state) — readable in both modes */

/* Filter button + Clear Filters (legacy header FilterPipeline trigger) */
.epb-filter-btn[b-cetzqgh6fz] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--vh-text-muted);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: .4rem;
    padding: .3rem .6rem;
    cursor: pointer;
    white-space: nowrap;
}
.epb-filter-btn:hover:not(:disabled)[b-cetzqgh6fz] { color: var(--vh-primary); border-color: var(--vh-primary); }
.epb-filter-btn:disabled[b-cetzqgh6fz] { color: var(--vh-black-30); cursor: not-allowed; }
.epb-clearfilters[b-cetzqgh6fz] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-secondary);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.epb-clearfilters:hover[b-cetzqgh6fz] { text-decoration: underline; }

/* Settings (Card Theme) — VhDropdown sizing in the header row */
.epb-settings[b-cetzqgh6fz]  .vh-dd-btn { font-size: .78rem; padding: .3rem .6rem; }

/* Compact card theme (legacy isCompact: narrower card, tighter padding,
   Experience/Skills rows hidden — candidate.styles.js) */
.epb-board.epb-compact .epb-col[b-cetzqgh6fz] { flex-basis: 230px; }
.epb-board.epb-compact .epb-card[b-cetzqgh6fz] { padding: .5rem .55rem; }
.epb-board.epb-compact .epb-skills[b-cetzqgh6fz],
.epb-board.epb-compact .epb-meta .epb-m-xp[b-cetzqgh6fz] { display: none; }

/* Assignee chip + picker (legacy AssigneeCandidates) */
.epb-assignee-wrap[b-cetzqgh6fz] { position: relative; margin-top: .4rem; }
.epb-assignee[b-cetzqgh6fz] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--vh-line);
    background: var(--vh-gray-10);
    border-radius: var(--vh-radius-pill);
    padding: .12rem .5rem .12rem .15rem;
    font-size: .7rem;
    color: var(--vh-black-70);
    cursor: pointer;
    max-width: 100%;
}
.epb-assignee:hover[b-cetzqgh6fz] { border-color: var(--vh-primary); color: var(--vh-primary); }
.epb-assignee-avatar[b-cetzqgh6fz] {
    width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
    background: var(--vh-black-20); color: var(--vh-black-60); font-weight: 600; font-size: .55rem;
    display: flex; align-items: center; justify-content: center; flex: 0 0 20px;
}
.epb-assignee-avatar img[b-cetzqgh6fz] { width: 100%; height: 100%; object-fit: cover; }
.epb-assignee-name[b-cetzqgh6fz] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

.epb-assignee-menu[b-cetzqgh6fz] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 80;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    box-shadow: 0 8px 24px rgb(var(--vh-raw-rgb-17-24-39) / .15);
    padding: .45rem;
    width: 230px;
}
.epb-assignee-unassign[b-cetzqgh6fz] {
    width: 100%;
    border: none;
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    font-size: .72rem;
    border-radius: .3rem;
    padding: .25rem .4rem;
    cursor: pointer;
    margin-bottom: .35rem;
    text-align: left;
}
.epb-assignee-unassign:hover[b-cetzqgh6fz] { background: var(--vh-danger-soft); }
.epb-assignee-search[b-cetzqgh6fz] { width: 100%; font-size: .74rem; }
.epb-assignee-list[b-cetzqgh6fz] {
    max-height: 170px;
    overflow-y: auto;
    margin-top: .35rem;
    display: flex;
    flex-direction: column;
}
.epb-assignee-item[b-cetzqgh6fz] {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: none;
    background: none;
    font-size: .74rem;
    color: var(--vh-text-body);
    padding: .25rem .3rem;
    border-radius: .3rem;
    cursor: pointer;
    text-align: left;
}
.epb-assignee-item:hover[b-cetzqgh6fz] { background: var(--vh-gray-10); }
.epb-assignee-empty[b-cetzqgh6fz] { font-size: .72rem; color: var(--vh-black-40); padding: .3rem; }

.epb-card-actions[b-cetzqgh6fz] { display: flex; gap: .6rem; margin-top: .4rem; align-items: center; }
.epb-card-actions a[b-cetzqgh6fz] { font-size: .74rem; color: var(--vh-text-muted); cursor: pointer; }
.epb-card-actions a:hover[b-cetzqgh6fz] { color: var(--vh-primary); }
.epb-card-actions a.text-danger:hover[b-cetzqgh6fz] { color: var(--vh-danger); }

.epb-movelist[b-cetzqgh6fz] {
    margin-top: .4rem;
    border-top: 1px solid var(--vh-line);
    padding-top: .35rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.epb-movelist a[b-cetzqgh6fz] { font-size: .78rem; color: var(--vh-primary); cursor: pointer; padding: .1rem .25rem; border-radius: var(--vh-radius); }
.epb-movelist a:hover[b-cetzqgh6fz] { background: var(--vh-blue-tint); }

/* Per-column "Load more" (legacy InfiniteScroll, pages of 10) */
.epb-loadmore[b-cetzqgh6fz] {
    border: 1px dashed var(--vh-black-20);
    background: var(--vh-transparent);
    color: var(--vh-text-muted);
    font-size: .74rem;
    border-radius: .35rem;
    padding: .25rem;
    cursor: pointer;
}
.epb-loadmore:hover:not(:disabled)[b-cetzqgh6fz] { color: var(--vh-primary); border-color: var(--vh-primary); }

/* ===== Bulk action bar (legacy ActionsOnMultiSelected: light pill, centered,
   token-driven surface, border, radius and typography) ===== */
.epb-bulkbar[b-cetzqgh6fz] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 35px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: min(560px, 92vw);
    max-width: 92vw;
    height: 52px;
    padding: 0 30px;
    background: var(--vh-black-10);
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-pill);
    color: var(--vh-gray-90);
    font-family: var(--vh-font-primary);
    font-size: 13px;
}
.epb-bulk-count[b-cetzqgh6fz] { font-weight: 700; white-space: nowrap; }
.epb-bulk-actions[b-cetzqgh6fz] { display: flex; align-items: center; gap: 22px; }
.epb-bulk-act[b-cetzqgh6fz] {
    border: 0;
    background: var(--vh-transparent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vh-font-primary);
    font-size: 13px;
    color: var(--vh-gray-90);
    cursor: pointer;
    white-space: nowrap;
}
.epb-bulk-act:disabled[b-cetzqgh6fz] { color: var(--vh-gray-40); cursor: default; }
.epb-bulk-moveto[b-cetzqgh6fz] { position: relative; }
.epb-bulk-backdrop[b-cetzqgh6fz] { position: fixed; inset: 0; z-index: 101; }
.epb-bulk-menu[b-cetzqgh6fz] {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 0;
    z-index: 102;
    min-width: 160px;
    max-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--vh-surface);
    border-radius: var(--vh-radius);
    box-shadow: var(--vh-shadow-pop);
}
.epb-bulk-menu-item[b-cetzqgh6fz] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: var(--vh-transparent);
    padding: 12px 16px;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    color: var(--vh-gray-90);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.epb-bulk-menu-item:hover[b-cetzqgh6fz] { background: var(--vh-gray-20); }
.epb-bulk-clear[b-cetzqgh6fz] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-primary-hover);
    font-family: var(--vh-font-primary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* Deferred bulk Chat shell (was an inline style) */
.epb-chat-wrap[b-cetzqgh6fz] { display: inline-flex; }

/* ===== Reject modal reason list (legacy RejectModal isEvent) ===== */
.epb-reasons[b-cetzqgh6fz] { display: flex; flex-direction: column; gap: .35rem; max-height: 300px; overflow-y: auto; }
.epb-reason[b-cetzqgh6fz] {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .8rem;
    color: var(--vh-text-body);
    cursor: pointer;
    margin: 0;
}
.epb-reason input[b-cetzqgh6fz] { margin-top: .15rem; }

/* Reject modal comment label + validation line (were inline styles) */
.epb-reject-label[b-cetzqgh6fz] { font-size: .8rem; }
.epb-reject-validation[b-cetzqgh6fz] { font-size: .78rem; }
/* /Pages/EventPipeline/BoardFilterPanel.razor.rz.scp.css */
/* w13-boards-epca — FilterPipeline modal body (shared EP/CA). Mirrors the
   talent-pool Advanced Filters look (tp-* family) on design-system tokens. */

.epf[b-auvaw65non] { font-size: .85rem; }

.epf-label[b-auvaw65non] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--vh-gray-90);
    margin: 1rem 0 .35rem;
}
.epf-label:first-child[b-auvaw65non] { margin-top: 0; }
.epf-label.epf-sub[b-auvaw65non] { margin-top: .5rem; font-weight: 600; }

.epf-inline[b-auvaw65non] { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }

.epf-check[b-auvaw65non] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--vh-gray-90);
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}
.epf-check input[b-auvaw65non] { cursor: pointer; }
.epf-switch[b-auvaw65non] { margin-top: .45rem; display: flex; }

.epf-pair[b-auvaw65non] { display: flex; gap: .5rem; max-width: 340px; }

.epf-industry[b-auvaw65non] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .15rem .6rem;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--vh-line);
    border-radius: .35rem;
    padding: .45rem .6rem;
}
.epf-industry .epf-check[b-auvaw65non] { white-space: normal; }

/* ---- skill rows ---- */
.epf-skillrow[b-auvaw65non] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .5rem;
    border: 1px solid var(--vh-line);
    border-radius: .35rem;
    margin-bottom: .35rem;
    background: var(--vh-surface-soft);
}
.epf-skill-name[b-auvaw65non] { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.epf-years[b-auvaw65non] { display: inline-flex; align-items: center; gap: .35rem; }
.epf-years-n[b-auvaw65non] { min-width: 2.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.epf-step[b-auvaw65non] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-surface);
    border-radius: .3rem;
    width: 22px; height: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--vh-gray-90);
}
.epf-step:hover[b-auvaw65non] { background: var(--vh-gray-10); }
.epf-x[b-auvaw65non] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-danger);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 .2rem;
}

/* ---- async lookup (single-select + skills input) — lk-* twin ---- */
.epf-lkwrap[b-auvaw65non] { position: relative; }
.epf-lkmenu[b-auvaw65non] {
    position: absolute;
    z-index: 1080;          /* above the Blazorise modal body */
    top: 100%; left: 0; right: 0;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: .35rem;
    box-shadow: 0 6px 18px rgb(var(--vh-black-rgb) / .12);
    max-height: 220px;
    overflow-y: auto;
}
.epf-lkitem[b-auvaw65non] { padding: .4rem .6rem; cursor: pointer; }
.epf-lkitem:hover[b-auvaw65non] { background: var(--vh-gray-10); }
.epf-muted[b-auvaw65non] { color: var(--vh-black-40); cursor: default; }

.epf-chips[b-auvaw65non] { display: flex; flex-wrap: wrap; gap: .3rem; }
.epf-chip[b-auvaw65non] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--vh-primary-soft);
    color: var(--vh-blue-deep);
    border-radius: var(--vh-radius-pill);
    padding: .15rem .6rem;
    font-size: .8rem;
}
.epf-chip-x[b-auvaw65non] { cursor: pointer; font-weight: 700; }
/* /Pages/EventPipeline/Edit.razor.rz.scp.css */
/* Event create/edit — port of event-create-and-edit/styles, rebased on the
   design-system tokens (vh-tokens.css): --vh-surface cards, --vh-primary accents,
   --vh-input-* controls, --vh-danger/--vh-success states. */

.eved-skel[b-dxmba8jvs6] { height: 320px; border-radius: var(--vh-radius-chip); background: linear-gradient(90deg, var(--vh-black-10) 25%, var(--vh-gray-10) 37%, var(--vh-black-10) 63%); background-size: 400% 100%; animation: eved-shimmer-b-dxmba8jvs6 1.4s ease infinite; }
@keyframes eved-shimmer-b-dxmba8jvs6 { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.eved-gate[b-dxmba8jvs6] { text-align: center; padding: 3rem 1rem; color: var(--vh-gray-90); }
.eved-gate h4[b-dxmba8jvs6] { margin-bottom: 1rem; }

.eved-backdrop[b-dxmba8jvs6] { position: fixed; inset: 0; z-index: 24; }

/* layout: numbered sidebar + content (legacy Sidebar/Content) */
.eved-layout[b-dxmba8jvs6] { display: flex; gap: 1.25rem; align-items: flex-start; }
.eved-sidebar[b-dxmba8jvs6] { position: sticky; top: 1rem; min-width: 200px; display: flex; flex-direction: column; gap: .9rem; padding: 1rem .75rem; background: var(--vh-surface); border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: var(--vh-radius-chip); }
.eved-side-item[b-dxmba8jvs6] { display: flex; align-items: center; gap: .6rem; cursor: pointer; text-decoration: none; }
.eved-side-num[b-dxmba8jvs6] { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-black-10); color: var(--vh-text-muted); font-size: .8rem; font-weight: 600; }
.eved-side-num.active[b-dxmba8jvs6] { background: var(--vh-primary); color: var(--vh-on-primary); }
.eved-side-name[b-dxmba8jvs6] { font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--vh-text-muted); }
.eved-side-name.active[b-dxmba8jvs6] { color: var(--vh-text-heading); }
.eved-content[b-dxmba8jvs6] { flex: 1; min-width: 0; }

/* sections */
.eved-section[b-dxmba8jvs6] { background: var(--vh-surface); border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: var(--vh-radius-chip); padding: 1.25rem 1.4rem; margin-bottom: 1rem; }
.eved-section-title[b-dxmba8jvs6] { font-size: .85rem; font-weight: 700; letter-spacing: .05em; color: var(--vh-text-heading); margin-bottom: 1rem; }

/* fields */
.eved-field[b-dxmba8jvs6] { margin-bottom: 1rem; }
.eved-grow[b-dxmba8jvs6] { flex: 1; }
.eved-label[b-dxmba8jvs6] { display: block; font-size: .82rem; font-weight: 600; color: var(--vh-text-body); margin-bottom: .3rem; }
.eved-optional[b-dxmba8jvs6] { font-weight: 400; color: var(--vh-gray-50); font-size: .76rem; }
.eved-input[b-dxmba8jvs6] { width: 100%; border: 1px solid var(--vh-input-border); border-radius: var(--vh-input-radius); padding: .42rem .65rem; font-size: .9rem; color: var(--vh-text-body); background: var(--vh-surface); }
.eved-input:focus[b-dxmba8jvs6] { outline: none; border-color: var(--vh-input-focus); box-shadow: 0 0 0 2px rgb(var(--vh-primary-rgb) / .12); } /* ring = var(--vh-primary) @ 12% */
.eved-input.err[b-dxmba8jvs6], .eved-textarea.err[b-dxmba8jvs6], .eved-slug.err[b-dxmba8jvs6], .eved-cover.err[b-dxmba8jvs6] { border-color: var(--vh-input-error); }
.eved-textarea[b-dxmba8jvs6] { width: 100%; border: 1px solid var(--vh-input-border); border-radius: .4rem; padding: .5rem .65rem; font-size: .9rem; color: var(--vh-text-body); background: var(--vh-surface); resize: vertical; }
.eved-err[b-dxmba8jvs6] { display: flex; gap: .3rem; color: var(--vh-input-error); font-size: .78rem; margin-top: .25rem; }
.eved-err-inline[b-dxmba8jvs6] { color: var(--vh-input-error); font-size: .78rem; margin-left: .6rem; }

.eved-title-row[b-dxmba8jvs6] { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.eved-title-input[b-dxmba8jvs6] { font-size: 1.05rem; font-weight: 600; }
.eved-row2[b-dxmba8jvs6] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* slug pill (legacy SlugContainer with check icon) */
.eved-slug[b-dxmba8jvs6] { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--vh-input-border); border-radius: .4rem; padding-right: .55rem; min-width: 280px; }
.eved-slug-input[b-dxmba8jvs6] { border: 0; }
.eved-slug .eved-slug-input:focus[b-dxmba8jvs6] { box-shadow: none; border-color: var(--vh-transparent); } /* the outer .eved-slug carries the focus/error border */
.eved-slug-label[b-dxmba8jvs6] { font-size: .72rem; color: var(--vh-gray-50); background: var(--vh-black-10); border-radius: .3rem; padding: .1rem .4rem; }
.eved-slug-ok[b-dxmba8jvs6] { color: var(--vh-success); }
.eved-slug-bad[b-dxmba8jvs6] { color: var(--vh-danger); }

/* cover upload */
.eved-cover[b-dxmba8jvs6] { border: 1px dashed var(--vh-black-30); border-radius: var(--vh-radius-chip); min-height: 150px; display: flex; align-items: center; justify-content: center; padding: .8rem; }
.eved-upload[b-dxmba8jvs6] { display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0; }
.eved-upload[b-dxmba8jvs6]  input[type="file"] { display: none; }
.eved-upload-btn[b-dxmba8jvs6] { color: var(--vh-primary); font-weight: 600; font-size: .9rem; text-decoration: underline; }
.eved-upload-hint[b-dxmba8jvs6] { color: var(--vh-gray-50); font-size: .78rem; }
.eved-cover-preview[b-dxmba8jvs6] { position: relative; max-width: 480px; }
.eved-cover-preview img[b-dxmba8jvs6] { width: 100%; border-radius: .4rem; display: block; }
.eved-cover-actions[b-dxmba8jvs6] { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .35rem; }
/* Overlay chrome ON TOP OF the uploaded photo — deliberately stays light in both
   themes (true dark-mode exception: it floats over the image, not the page). */
.eved-mini-btn[b-dxmba8jvs6] { display: inline-flex; align-items: center; gap: .3rem; background: rgb(var(--vh-white-rgb) / .92); border: 1px solid var(--vh-raw-d6dde3); border-radius: .35rem; font-size: .75rem; padding: .2rem .5rem; cursor: pointer; color: var(--vh-raw-41505d); margin: 0; }
.eved-mini-btn[b-dxmba8jvs6]  input[type="file"] { display: none; }

/* date + time */
.eved-datetime[b-dxmba8jvs6] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.eved-dates[b-dxmba8jvs6] { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.eved-time-head[b-dxmba8jvs6] { display: flex; align-items: baseline; gap: .6rem; }
.eved-tz[b-dxmba8jvs6] { font-size: .74rem; color: var(--vh-gray-50); }
.eved-times[b-dxmba8jvs6] { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.eved-time-item[b-dxmba8jvs6] { display: flex; flex-direction: column; gap: .2rem; }
.eved-time-tag[b-dxmba8jvs6] { font-size: .72rem; color: var(--vh-gray-50); }
.eved-timefield[b-dxmba8jvs6] { display: flex; gap: .4rem; align-items: center; }
.eved-time-input[b-dxmba8jvs6] { width: 76px; text-align: center; }

/* Tipo 2 MULTI dropdown (button + checkbox menu — DdMulti). Single-selects use
   the shared VhDropdown component; its error ring is the ::deep rule below. */
.eved-dd[b-dxmba8jvs6] { position: relative; }
.eved-dd-btn[b-dxmba8jvs6] { display: inline-flex; width: 100%; justify-content: space-between; align-items: center; gap: .45rem; background: var(--vh-surface); border: 1px solid var(--vh-input-border); border-radius: .4rem; padding: .42rem .65rem; font-size: .88rem; color: var(--vh-text-body); cursor: pointer; }
.eved-dd-btn:hover[b-dxmba8jvs6] { background: var(--vh-gray-10); }
.eved-dd-btn i[b-dxmba8jvs6] { font-size: .6rem; color: var(--vh-gray-50); }
.eved-dd-ph[b-dxmba8jvs6] { color: var(--vh-text-placeholder); }
.eved-dd-menu[b-dxmba8jvs6] { position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 260px; overflow: auto; background: var(--vh-surface); border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: .4rem; box-shadow: 0 4px 12px rgb(var(--vh-black-rgb) / .12); padding: .3rem 0; }
.eved-dd-item[b-dxmba8jvs6] { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; font-size: .85rem; color: var(--vh-gray-90); cursor: pointer; margin: 0; width: 100%; white-space: nowrap; }
.eved-dd-item:hover[b-dxmba8jvs6] { background: var(--vh-gray-10); }
.eved-dd-item input[b-dxmba8jvs6] { margin: 0; accent-color: var(--vh-primary); }
.eved-dd-empty[b-dxmba8jvs6] { padding: .4rem .8rem; font-size: .82rem; color: var(--vh-gray-50); }

/* Error state of the shared VhDropdown fields (class passed via its Class param) */
.eved-content[b-dxmba8jvs6]  .eved-dd-err .vh-dd-btn { border-color: var(--vh-input-error); }

/* tag combo extras */
.eved-tag-row[b-dxmba8jvs6] { display: flex; align-items: center; gap: .4rem; }
.eved-tag-row[b-dxmba8jvs6]  .b-is-autocomplete { flex: 1; }
.eved-tag-opt[b-dxmba8jvs6] { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: .8rem; }
.eved-tag-del[b-dxmba8jvs6] { color: var(--vh-gray-50); }
.eved-tag-del:hover[b-dxmba8jvs6] { color: var(--vh-danger); }
.eved-tag-create[b-dxmba8jvs6] { color: var(--vh-primary); font-weight: 600; cursor: pointer; }
.eved-x[b-dxmba8jvs6] { background: none; border: 0; color: var(--vh-gray-50); font-size: 1.05rem; cursor: pointer; line-height: 1; }
.eved-x:hover[b-dxmba8jvs6] { color: var(--vh-danger); }

/* requirements */
.eved-req-row[b-dxmba8jvs6] { display: grid; grid-template-columns: 220px 1fr 30px; gap: .7rem; align-items: start; margin-bottom: .7rem; }
.eved-req-fixed[b-dxmba8jvs6] { border: 1px solid var(--vh-input-border); background: var(--vh-black-10); border-radius: .4rem; padding: .42rem .65rem; font-size: .88rem; color: var(--vh-text-body); }
.eved-req-value[b-dxmba8jvs6] { min-width: 0; }
.eved-req-disabled[b-dxmba8jvs6] { border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); background: var(--vh-gray-10); color: var(--vh-gray-40); border-radius: .4rem; padding: .42rem .65rem; font-size: .88rem; }
.eved-chips[b-dxmba8jvs6] { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.eved-chip[b-dxmba8jvs6] { display: inline-flex; align-items: center; gap: .35rem; background: var(--vh-blue-tint); color: var(--vh-blue-deep); border-radius: var(--vh-radius-pill); font-size: .78rem; padding: .15rem .6rem; }
.eved-chip a[b-dxmba8jvs6] { color: inherit; cursor: pointer; text-decoration: none; }
.eved-add-link[b-dxmba8jvs6] { background: none; border: 0; color: var(--vh-primary); font-weight: 600; font-size: .85rem; cursor: pointer; padding: .2rem 0; }
.eved-add-link:hover[b-dxmba8jvs6] { text-decoration: underline; }

/* component accordions */
.eved-acc[b-dxmba8jvs6] { border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: var(--vh-radius-chip); margin-bottom: .8rem; background: var(--vh-surface); }
.eved-acc summary[b-dxmba8jvs6] { display: flex; align-items: center; padding: .7rem 1rem; cursor: pointer; font-weight: 600; color: var(--vh-text-heading); list-style: none; }
.eved-acc summary[b-dxmba8jvs6]::-webkit-details-marker { display: none; }
.eved-acc summary[b-dxmba8jvs6]::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .65rem; color: var(--vh-gray-50); margin-left: auto; transition: transform .15s ease; }
.eved-acc[open] summary[b-dxmba8jvs6]::after { transform: rotate(180deg); }
.eved-acc-body[b-dxmba8jvs6] { padding: 0 1rem 1rem; }

/* component cards */
.eved-card[b-dxmba8jvs6] { display: flex; gap: .9rem; border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: var(--vh-radius-chip); padding: .8rem; margin-bottom: .7rem; align-items: flex-start; }
.eved-card-col[b-dxmba8jvs6] { flex-direction: column; }
.eved-card-tools[b-dxmba8jvs6] { display: flex; flex-direction: column; gap: .3rem; }
.eved-card-col .eved-card-tools[b-dxmba8jvs6] { flex-direction: row; }
.eved-card-tools button[b-dxmba8jvs6] { background: none; border: 0; color: var(--vh-gray-50); cursor: pointer; font-size: .8rem; padding: .15rem; }
.eved-card-tools button:hover:not(:disabled)[b-dxmba8jvs6] { color: var(--vh-text-body); }
.eved-card-tools button:disabled[b-dxmba8jvs6] { opacity: .35; cursor: default; }
.eved-card-img[b-dxmba8jvs6] { width: 170px; display: flex; flex-direction: column; gap: .3rem; }
.eved-img-tag[b-dxmba8jvs6] { font-size: .7rem; color: var(--vh-gray-50); }
.eved-upload-sm[b-dxmba8jvs6] { border: 1px dashed var(--vh-black-30); border-radius: .45rem; min-height: 90px; justify-content: center; display: flex; flex-direction: column; align-items: center; }
.eved-thumb[b-dxmba8jvs6] { position: relative; }
.eved-thumb img[b-dxmba8jvs6] { width: 100%; border-radius: .4rem; display: block; }
.eved-thumb-actions[b-dxmba8jvs6] { position: absolute; top: .3rem; right: .3rem; display: flex; gap: .25rem; }
.eved-card-fields[b-dxmba8jvs6] { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.eved-agenda-grid[b-dxmba8jvs6] { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; width: 100%; }
.eved-ag-speakers[b-dxmba8jvs6] { display: flex; align-items: center; gap: .7rem; width: 100%; }
.eved-ag-speakers .eved-label[b-dxmba8jvs6] { margin: 0; }
.eved-ag-speakers .eved-dd[b-dxmba8jvs6] { min-width: 240px; }

/* footer */
.eved-footer[b-dxmba8jvs6] { display: flex; justify-content: flex-end; gap: .7rem; padding: .6rem 0 2rem; }

@media (max-width: 900px) {
    .eved-layout[b-dxmba8jvs6] { flex-direction: column; }
    .eved-sidebar[b-dxmba8jvs6] { position: static; flex-direction: row; width: 100%; overflow-x: auto; }
    .eved-row2[b-dxmba8jvs6], .eved-datetime[b-dxmba8jvs6], .eved-agenda-grid[b-dxmba8jvs6] { grid-template-columns: 1fr; }
}
/* /Pages/EventPipeline/EventBoardInterviewsTab.razor.rz.scp.css */
/* Event Interviews tab (epi-) — clone of the interview-pipeline ipi- styles.
   Grid mirrors the legacy event InterviewsGrid styled-components table
   (header + rows share the 6-column template: the event variant adds the
   "Requested On" column). Colors come from the design-system tokens. */

.epi-loading[b-lh1wwtjqz5],
.epi-empty[b-lh1wwtjqz5] {
    text-align: center;
    color: var(--vh-text-muted);
    padding: 48px 0;
}

.epi-empty-icon[b-lh1wwtjqz5] { font-size: 2rem; color: var(--vh-black-40); margin-bottom: 12px; }
.epi-empty-title[b-lh1wwtjqz5] { font-weight: 600; color: var(--vh-text-heading); }

.epi-alert[b-lh1wwtjqz5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    border-radius: var(--vh-radius-md);
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: .85rem;
}

.epi-alert-close[b-lh1wwtjqz5] {
    border: 0;
    background: none;
    color: var(--vh-tonal-red-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.epi-scroll[b-lh1wwtjqz5] { overflow-x: auto; }
.epi-table[b-lh1wwtjqz5] { min-width: 1000px; padding-bottom: 24px; }

.epi-thead[b-lh1wwtjqz5],
.epi-row[b-lh1wwtjqz5] {
    display: grid;
    grid-template-columns: minmax(200px, 1.3fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(170px, 1fr) minmax(210px, 1.2fr);
    gap: 16px;
    align-items: center;
}

.epi-thead[b-lh1wwtjqz5] {
    border-bottom: 1px solid var(--vh-line);
    padding: 10px 8px;
    color: var(--vh-text-body);
    font-size: .85rem;
}

.epi-section[b-lh1wwtjqz5] { margin: 4px 0 12px; }

.epi-sec-head[b-lh1wwtjqz5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: none;
    padding: 12px 8px 6px;
    cursor: pointer;
}

.epi-sec-head:disabled[b-lh1wwtjqz5] { cursor: default; opacity: .55; }

.epi-sec-chevron[b-lh1wwtjqz5] {
    font-size: .6rem;
    color: var(--vh-text-body);
    transition: transform .15s ease;
}

.epi-sec-chevron.open[b-lh1wwtjqz5] { transform: rotate(90deg); }

.epi-sec-title[b-lh1wwtjqz5] { font-weight: 700; color: var(--vh-text-heading); font-size: .9rem; }

.epi-sec-count[b-lh1wwtjqz5] {
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius-pill);
    font-size: .72rem;
    padding: 0 7px;
    color: var(--vh-text-body);
}

.epi-row[b-lh1wwtjqz5] {
    min-height: 64px;
    padding: 6px 8px;
    border-radius: 10px;
}

.epi-row:hover[b-lh1wwtjqz5] { background: var(--vh-surface-soft); }

.epi-cand[b-lh1wwtjqz5] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.epi-cand-info[b-lh1wwtjqz5] { display: flex; flex-direction: column; min-width: 0; }

.epi-avatar[b-lh1wwtjqz5] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 42px;
}

.epi-avatar-fallback[b-lh1wwtjqz5] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vh-success);
    color: var(--vh-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex: 0 0 42px;
}

.epi-name[b-lh1wwtjqz5] {
    color: var(--vh-text-heading);
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epi-name:hover[b-lh1wwtjqz5] { color: var(--vh-primary); text-decoration: underline; }

.epi-sub[b-lh1wwtjqz5] {
    color: var(--vh-black-40);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epi-cell[b-lh1wwtjqz5] { color: var(--vh-text-body); font-size: .85rem; }

/* Status variants (legacy RequestedString / CancelledString) —
   "Waiting confirmation" is the shared .vh-pill-tonal vh-pill-tonal-amber. */
.epi-status-cancelled[b-lh1wwtjqz5] { color: var(--vh-tonal-red-text); font-size: .85rem; }
.epi-status-muted[b-lh1wwtjqz5] { color: var(--vh-text-body); font-size: .85rem; }
.epi-muted[b-lh1wwtjqz5] { color: var(--vh-text-muted); font-size: .82rem; }

.epi-actions[b-lh1wwtjqz5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Legacy OutlinedActionButton */
.epi-btn[b-lh1wwtjqz5] {
    border: 1px solid var(--vh-primary);
    color: var(--vh-primary);
    background: var(--vh-transparent);
    border-radius: var(--vh-radius);
    padding: 5px 14px;
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
}

.epi-btn:hover[b-lh1wwtjqz5] { background: var(--vh-blue-tint); }

.epi-btn:disabled[b-lh1wwtjqz5] {
    border-color: var(--vh-disabled-text);
    color: var(--vh-disabled-text);
    cursor: default;
    background: var(--vh-transparent);
}

.epi-btn-ghost[b-lh1wwtjqz5] {
    border: 0;
    background: none;
    color: var(--vh-text-muted);
    font-size: .78rem;
    cursor: pointer;
}

.epi-btn-ghost:hover[b-lh1wwtjqz5] { color: var(--vh-text-body); }

/* Inline reason prompt (legacy RenderReasonTo) */
.epi-reason[b-lh1wwtjqz5] {
    margin: 2px 8px 10px 62px;
    padding: 10px 12px;
    background: var(--vh-surface-soft);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-chip);
    max-width: 620px;
}

.epi-reason textarea[b-lh1wwtjqz5] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius);
    padding: 8px 10px;
    font-size: .85rem;
    color: var(--vh-text-body);
    resize: vertical;
    outline: none;
}

.epi-reason textarea:focus[b-lh1wwtjqz5] { border-color: var(--vh-input-focus); }

.epi-reason-actions[b-lh1wwtjqz5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.epi-error[b-lh1wwtjqz5] { color: var(--vh-danger); font-size: .8rem; margin-top: 4px; }
/* /Pages/EventPipeline/Index.razor.rz.scp.css */
/* Event Pipeline LIST — ports the legacy event-pipeline-list styled-components
   (styles.js + Header/styles.js + Card/styles.js): 385x200 banner media cards.
   Page chrome is the ABP default (design-system §12): PageHeader +
   VhFiltersCard (Status/Type dropdowns + "Add new event" CTA in the search
   row). Colors/typography come from the design-system tokens (vh-tokens.css):
   accent = var(--vh-primary), like the legacy. */

/* ---- Header: Type 2 dropdown skins live in the shared VhDropdown component
   (Components/Vh); the CTA is pinned to the filter row's right edge. ---- */
.ep-add[b-yrrdbsz539] { margin-left: auto; }

/* ---- Event card (legacy EventContainer: banner left + info right) ---- */
.ep-card[b-yrrdbsz539] { display: flex; align-items: center; background: var(--vh-surface); border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: var(--vh-radius-sm); margin-bottom: 30px; cursor: pointer; font-family: var(--vh-font-primary); transition: border-color .15s ease; }
.ep-card:hover[b-yrrdbsz539] { border-color: var(--vh-primary-hover); box-shadow: var(--vh-shadow-surface-hover); }

/* Banner — fixed 385x200 background-image block (legacy EventBannerContainer). */
.ep-banner[b-yrrdbsz539] { width: 385px; min-width: 385px; height: 200px; border-radius: 3px 0 0 3px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ep-banner-placeholder[b-yrrdbsz539] { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--vh-blue-tint), var(--vh-surface-soft)); color: var(--vh-primary); font-size: 2.2rem; }

/* Info column (legacy EventInfoContainer: 200px tall, space-evenly). */
.ep-info[b-yrrdbsz539] { display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start; flex: 1 1 auto; min-width: 0; height: 200px; padding: 0 20px; }
.ep-info-head[b-yrrdbsz539] { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ep-typeline[b-yrrdbsz539] { display: flex; align-items: center; min-width: 0; }
.ep-type[b-yrrdbsz539] { font-weight: 700; font-size: .8rem; color: var(--vh-text-heading); white-space: nowrap; }
.ep-sep[b-yrrdbsz539] { margin: 0 10px; color: var(--vh-black-40); }
.ep-date[b-yrrdbsz539] { font-size: .75rem; color: var(--vh-text-body); white-space: nowrap; }

/* Header-line options: star + ⋮ (legacy CardHeaderOptions). */
.ep-options[b-yrrdbsz539] { display: flex; align-items: center; gap: 6px; margin-right: 15px; }
.ep-iconbtn[b-yrrdbsz539] { border: 0; background: var(--vh-transparent); padding: .15rem .45rem; line-height: 1; cursor: pointer; color: var(--vh-text-muted); border-radius: .3rem; }
.ep-iconbtn:hover[b-yrrdbsz539] { background: var(--vh-black-10); color: var(--vh-text-heading); }
.ep-iconbtn:disabled[b-yrrdbsz539] { cursor: progress; opacity: .6; }
.ep-star.on[b-yrrdbsz539] { color: var(--vh-warning); }
.ep-star.on:hover[b-yrrdbsz539] { color: var(--vh-warning-hover); }

/* ⋮ dropdown (ip-menu pattern: relative wrap + absolute list over the click-catcher). */
.ep-menu[b-yrrdbsz539] { position: relative; }
.ep-menu-list[b-yrrdbsz539] { position: absolute; right: 0; top: 100%; z-index: 1045; background: var(--vh-surface); border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: .4rem; box-shadow: var(--vh-shadow-pop); min-width: 230px; max-width: 260px; padding: .25rem 0; display: flex; flex-direction: column; }
.ep-menu-list a[b-yrrdbsz539] { font-size: .8rem; padding: .4rem .85rem; white-space: nowrap; color: var(--vh-text-heading); cursor: pointer; text-decoration: none; }
.ep-menu-list a:hover[b-yrrdbsz539] { background: var(--vh-gray-10); }

/* Event name (legacy EventTitle — bold h6 in the brand color). */
.ep-name[b-yrrdbsz539] { font-weight: 700; font-size: 1.05rem; color: var(--vh-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Counters row (legacy ApplicantsContainer/ApplicantsSummary). */
.ep-counters[b-yrrdbsz539] { display: flex; flex-wrap: wrap; gap: 0 20px; width: 100%; border-top: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); padding: 20px 0 10px; }
.ep-counter[b-yrrdbsz539] { font-size: .85rem; color: var(--vh-text-body); white-space: nowrap; }

/* ---- Load more (paging) ---- */
.ep-loadmore[b-yrrdbsz539] { text-align: center; margin: .25rem 0 1.5rem; }

/* ---- Click-catcher behind the open ⋮ menu (outside-click close) ---- */
.ep-popcatch[b-yrrdbsz539] { position: fixed; inset: 0; z-index: 1040; background: var(--vh-transparent); }

/* ---- Loading skeleton (legacy Skeleton — two shimmer rows) ---- */
.ep-skel[b-yrrdbsz539] { height: 200px; border-radius: var(--vh-radius-sm); margin-bottom: 30px; background: linear-gradient(90deg, var(--vh-black-10) 25%, var(--vh-gray-10) 37%, var(--vh-black-10) 63%); background-size: 400% 100%; animation: ep-shimmer-b-yrrdbsz539 1.4s ease infinite; }
@keyframes ep-shimmer-b-yrrdbsz539 { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Responsive (legacy sd/md breakpoints: banner then counters drop) ---- */
@media (max-width: 992px) {
    .ep-banner[b-yrrdbsz539] { display: none; }
    .ep-info[b-yrrdbsz539] { padding-left: 12px; }
}

@media (max-width: 768px) {
    .ep-counter[b-yrrdbsz539] { display: none; }
    .ep-counters[b-yrrdbsz539] { padding: 10px 0 0; border-top: 0; }
}
/* /Pages/GlobalMobility/ActivityTab.razor.rz.scp.css */
/* Activity tab — legacy Tabs/Activity styles.js, mapped onto the vh tokens
   (legacy next-platform palette → nearest tokens: --vh-black-70,
   --vh-black-100, --vh-black-60, and --vh-black-20). */

.gm-a-container[b-e9ta9yri04] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    margin: 0;
    background-color: var(--vh-surface-soft);
}

/* ---- fixed day counters (only when the process started) ---- */

.gm-a-numbers[b-e9ta9yri04] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.gm-a-numbers > div[b-e9ta9yri04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 108px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-card);
    border-radius: 8px;
}

.gm-a-numbers span[b-e9ta9yri04] {
    font-family: var(--vh-font-primary);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    color: var(--vh-black-70);
}

.gm-a-numbers span.amount[b-e9ta9yri04] {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

/* ---- process timeline log ---- */

.gm-a-log-scroll[b-e9ta9yri04] {
    padding: 0 24px 50px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.gm-a-log-container[b-e9ta9yri04] {
    display: grid;
    grid-template-columns: 1fr;
}

.gm-a-title[b-e9ta9yri04] {
    padding: 12px;
    font-family: var(--vh-font-primary);
    font-size: 14px;
    color: var(--vh-black-70);
}

.gm-a-item[b-e9ta9yri04] {
    display: grid;
    grid-template-columns: 40px 1fr;
}

.gm-a-icon[b-e9ta9yri04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
}

.gm-a-icon i[b-e9ta9yri04] {
    font-size: 15px;
    color: var(--vh-black-60);
}

/* connector line below the icon (legacy .line) */
.gm-a-line[b-e9ta9yri04] {
    position: relative;
    background-color: var(--vh-black-20);
    height: 40px;
    width: 2px;
}

.gm-a-content[b-e9ta9yri04] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
}

.gm-a-name[b-e9ta9yri04] {
    font-family: var(--vh-font-primary);
    font-weight: 400;
    font-size: 16px;
    color: var(--vh-black-70);
    line-height: 150%;
}

.gm-a-date[b-e9ta9yri04] {
    margin-top: 4px;
    font-family: var(--vh-font-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: var(--vh-black-100);
    opacity: .75;
}

/* ---- loading spinner (legacy LoadingContent) ---- */

.gm-a-loading[b-e9ta9yri04] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
}

.gm-a-spinner[b-e9ta9yri04] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--vh-gray-30);
    border-top-color: var(--vh-primary);
    animation: gm-a-spin-b-e9ta9yri04 0.6s linear infinite;
    margin: 55px auto;
}

@keyframes gm-a-spin-b-e9ta9yri04 {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/GlobalMobility/DetailsTab.razor.rz.scp.css */
/* Details tab — legacy Tabs/Details styles, restyled on the vh tokens. */
.gm-details[b-r7pkizs5ws] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 24px 28px;
    gap: 22px;
}

/* ---------- timeline ---------- */
.gm-progress[b-r7pkizs5ws] {
    padding-top: 8px;
}

.gm-progress-captions[b-r7pkizs5ws],
.gm-progress-steps[b-r7pkizs5ws],
.gm-progress-dates[b-r7pkizs5ws] {
    display: grid;
    align-items: center;
}

.gm-progress-caption[b-r7pkizs5ws] {
    font-size: 10px;
    color: var(--vh-black-30);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.gm-progress-caption.active[b-r7pkizs5ws] {
    color: var(--vh-black-60);
}

.gm-progress-caption.current[b-r7pkizs5ws] {
    color: var(--vh-text-heading);
    font-weight: 700;
}

.gm-progress-flag[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gm-progress-flag img[b-r7pkizs5ws] {
    width: 40px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgb(var(--vh-black-rgb) / 20%);
}

.gm-progress-step[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
}

.gm-progress-bar[b-r7pkizs5ws] {
    position: relative;
    height: 5px;
    width: 100%;
    background: var(--vh-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Completed progress keeps the legacy danger color — nearest token is --vh-danger. */
.gm-progress-bar.active[b-r7pkizs5ws] {
    background: var(--vh-danger);
}

.gm-dot[b-r7pkizs5ws] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vh-surface);
    border: 2px solid var(--vh-black-30);
    z-index: 1;
}

.gm-progress-bar.active .gm-dot[b-r7pkizs5ws] {
    border-color: var(--vh-danger);
}

.gm-plane[b-r7pkizs5ws] {
    color: var(--vh-text-heading);
    background: var(--vh-surface);
    border-radius: 50%;
    padding: 5px;
    font-size: 13px;
    box-shadow: 0 1px 4px rgb(var(--vh-black-rgb) / 22%);
    z-index: 1;
}

.gm-noprogress[b-r7pkizs5ws] {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin-top: 10px;
}

.gm-progress-date[b-r7pkizs5ws] {
    font-size: 10px;
    color: var(--vh-black-60);
    text-align: center;
    min-height: 14px;
    margin-top: 4px;
}

/* ---------- job info ---------- */
.gm-jobdata[b-r7pkizs5ws] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--vh-black-10);
    border-radius: 8px;
    padding: 14px 16px;
}

.gm-jobdata-item[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--vh-text-heading);
}

.gm-jobdata-item i[b-r7pkizs5ws] {
    color: var(--vh-muted);
    font-size: 16px;
}

/* ---------- candidate info ---------- */
.gm-info[b-r7pkizs5ws] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gm-info-head[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.gm-info-edit[b-r7pkizs5ws] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-muted);
    cursor: pointer;
    font-size: 13px;
}

.gm-info-edit:hover[b-r7pkizs5ws] {
    color: var(--vh-text-heading);
}

.gm-saving[b-r7pkizs5ws] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--vh-muted);
}

.gm-spin-sm[b-r7pkizs5ws] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: gm-spin-b-r7pkizs5ws .8s linear infinite;
}

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

.gm-info-row[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gm-info-icon[b-r7pkizs5ws] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--vh-surface-soft);
    color: var(--vh-black-60);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 auto;
}

.gm-info-field[b-r7pkizs5ws] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.gm-info-label[b-r7pkizs5ws] {
    font-size: 11px;
    color: var(--vh-muted);
}

.gm-info-value[b-r7pkizs5ws] {
    font-size: 13px;
    color: var(--vh-text-heading);
}

/* Edit controls (.vh-input / VhDropdown / Autocomplete) keep the legacy 320px cap. */
.gm-info-field .vh-input[b-r7pkizs5ws],
.gm-ac[b-r7pkizs5ws] {
    max-width: 320px;
}

.gm-opt-empty[b-r7pkizs5ws] {
    font-size: .85rem;
    color: var(--vh-black-50);
}

/* Blazorise Autocomplete menu (citizenship) — canon popover shadow. */
.gm-ac[b-r7pkizs5ws]  .dropdown-menu {
    box-shadow: var(--vh-shadow-pop);
}

/* ---------- footer (staff) ---------- */
.gm-footer[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--vh-black-10);
    padding-top: 18px;
    margin-top: auto;
    flex-wrap: wrap;
}

.gm-follow[b-r7pkizs5ws] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-black-60);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.gm-follow:hover[b-r7pkizs5ws] {
    color: var(--vh-text-heading);
}

.gm-footer-label[b-r7pkizs5ws] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--vh-black-60);
}

.gm-footer-avatars[b-r7pkizs5ws] {
    display: inline-flex;
    align-items: center;
}

.gm-avatar-holder[b-r7pkizs5ws] {
    margin-right: -8px;
    border: 2px solid var(--vh-surface);
    border-radius: 50%;
    display: inline-flex;
}

.gm-avatar-md[b-r7pkizs5ws] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.gm-avatar-sm2[b-r7pkizs5ws] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.gm-avatar-fallback[b-r7pkizs5ws] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-black-50);
    color: var(--vh-on-primary);
    font-weight: 700;
    font-size: 12px;
}

.gm-assignee-anchor[b-r7pkizs5ws] {
    position: relative;
    margin-left: 12px;
}

.gm-add-assignee[b-r7pkizs5ws] {
    width: 34px;
    height: 34px;
    border: 1px dashed var(--vh-black-30);
    border-radius: 50%;
    background: var(--vh-surface);
    color: var(--vh-muted);
    cursor: pointer;
}

.gm-add-assignee:hover[b-r7pkizs5ws] {
    color: var(--vh-text-heading);
    border-color: var(--vh-muted);
}

.gm-assignee-menu[b-r7pkizs5ws] {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    box-shadow: var(--vh-shadow-pop);
    padding: 8px 0;
}

.gm-assignee-menu-item[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--vh-text-heading);
    padding: 7px 14px;
}

/* Outline action inside the assignee menu — primary outline built on tokens. */
.gm-edit-assignees[b-r7pkizs5ws] {
    display: block;
    width: calc(100% - 28px);
    margin: 8px 14px 4px;
    border: 1px solid var(--vh-primary);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 0;
    cursor: pointer;
}

.gm-edit-assignees:hover[b-r7pkizs5ws] {
    background: var(--vh-blue-tint);
}

.gm-d-popcatch[b-r7pkizs5ws] {
    position: fixed;
    inset: 0;
    z-index: 50;
}

/* ---------- footer (employer "Talk to us") ---------- */
.gm-footer-employer[b-r7pkizs5ws] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--vh-black-10);
    padding-top: 18px;
    margin-top: auto;
}

.gm-employer-assignee[b-r7pkizs5ws] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gm-employer-assignee-name[b-r7pkizs5ws] {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-text-heading);
}

.gm-employer-assignee-name span[b-r7pkizs5ws] {
    font-size: 12px;
    font-weight: 400;
    color: var(--vh-muted);
}
/* /Pages/GlobalMobility/EditAssigneesModal.razor.rz.scp.css */
/* Assignees modal — EditJobCollaboratorsModal visual pattern, gm- prefixed,
   restyled on the vh tokens (overlay/surface/shadow + primary confirm). */
.gm-am-backdrop[b-eg1jtrco2p] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: var(--vh-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gm-am-modal[b-eg1jtrco2p] {
    width: 420px;
    max-width: calc(100vw - 32px);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

.gm-am-head[b-eg1jtrco2p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--vh-black-10);
}

.gm-am-head h3[b-eg1jtrco2p] {
    font-size: 16px;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
}

.gm-am-close[b-eg1jtrco2p] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-muted);
    font-size: 14px;
    cursor: pointer;
}

.gm-am-body[b-eg1jtrco2p] {
    padding: 18px 20px;
    min-height: 130px;
}

.gm-am-chips[b-eg1jtrco2p] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.gm-am-chip[b-eg1jtrco2p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vh-black-10);
    border-radius: 14px;
    font-size: 12px;
    color: var(--vh-text-heading);
    padding: 3px 10px 3px 4px;
}

.gm-am-chip img[b-eg1jtrco2p],
.gm-am-avatar-fallback[b-eg1jtrco2p] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.gm-am-avatar-fallback[b-eg1jtrco2p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-black-50);
    color: var(--vh-on-primary);
    font-size: 10px;
    font-weight: 700;
}

.gm-am-chip a[b-eg1jtrco2p] {
    color: var(--vh-muted);
    cursor: pointer;
    text-decoration: none;
}

.gm-am-select[b-eg1jtrco2p] {
    position: relative;
}

/* Blazorise Autocomplete menu (Type 1) — canon popover shadow + hover. */
.gm-am-select[b-eg1jtrco2p]  .dropdown-menu {
    min-width: 220px;
    max-height: 190px;
    overflow-y: auto;
    box-shadow: var(--vh-shadow-pop);
}

.gm-am-opt-img[b-eg1jtrco2p] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: .4rem;
}

.gm-am-opt-empty[b-eg1jtrco2p] {
    font-size: .85rem;
    color: var(--vh-black-50);
}

.gm-am-foot[b-eg1jtrco2p] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--vh-black-10);
}

/* Arc spinner on currentColor — follows the utility button's text color. */
.gm-am-btnspin[b-eg1jtrco2p] {
    width: 13px;
    height: 13px;
    border: 2px solid var(--vh-transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: gm-spin-b-eg1jtrco2p .8s linear infinite;
}

@keyframes gm-spin-b-eg1jtrco2p {
    to { transform: rotate(360deg); }
}
/* /Pages/GlobalMobility/GlobalMobilityDrawer.razor.rz.scp.css */
/* Side drawer — legacy SideModal/SideModalContent styles, restyled on the vh
   tokens (surface/text/line flip automatically on the LeptonX dark theme). */
.gm-backdrop[b-blgwaxn8ma] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: var(--vh-overlay);
}

.gm-drawer[b-blgwaxn8ma] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: 560px;
    max-width: 100vw;
    background: var(--vh-surface);
    box-shadow: -8px 0 30px rgb(var(--vh-black-rgb) / 18%);
    display: flex;
    flex-direction: column;
    outline: none;
    overflow-y: auto;
}

.gm-d-loading[b-blgwaxn8ma] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.gm-spinner[b-blgwaxn8ma] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: gm-spin-b-blgwaxn8ma .8s linear infinite;
}

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

/* ---------- error panel ---------- */
.gm-d-error[b-blgwaxn8ma] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 0 40px;
    text-align: center;
}

.gm-d-error-title[b-blgwaxn8ma] {
    font-size: 18px;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.gm-d-error-subtitle[b-blgwaxn8ma] {
    font-size: 13px;
    color: var(--vh-black-60);
}

.gm-d-error button[b-blgwaxn8ma] {
    margin-top: 14px;
    border: 0;
    border-radius: var(--vh-radius-md);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 28px;
    cursor: pointer;
}

.gm-d-error button:hover[b-blgwaxn8ma] {
    background: var(--vh-primary-hover);
}

/* ---------- header ---------- */
.gm-d-header[b-blgwaxn8ma] {
    border-bottom: 1px solid var(--vh-black-10);
    padding: 20px 24px 0;
}

.gm-d-candidate[b-blgwaxn8ma] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gm-d-avatar-wrap[b-blgwaxn8ma] {
    position: relative;
    display: inline-flex;
}

.gm-d-crown[b-blgwaxn8ma] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--vh-warning);
    font-size: 14px;
    z-index: 1;
}

.gm-d-avatar[b-blgwaxn8ma] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.gm-avatar-fallback[b-blgwaxn8ma] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-black-50);
    color: var(--vh-on-primary);
    font-weight: 700;
    font-size: 20px;
}

.gm-d-identity[b-blgwaxn8ma] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.gm-d-name[b-blgwaxn8ma] {
    font-size: 17px;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.gm-d-email[b-blgwaxn8ma] {
    font-size: 13px;
    color: var(--vh-black-60);
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-d-contacts[b-blgwaxn8ma] {
    display: flex;
    gap: 8px;
}

.gm-d-contact[b-blgwaxn8ma] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--vh-black-20);
    border-radius: 50%;
    background: var(--vh-surface);
    color: var(--vh-black-60);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gm-d-contact:hover[b-blgwaxn8ma] {
    background: var(--vh-surface-soft);
}

/* ---------- tabs ---------- */
.gm-d-tabs[b-blgwaxn8ma] {
    display: flex;
    gap: 26px;
    margin-top: 18px;
}

.gm-d-tab[b-blgwaxn8ma] {
    border: 0;
    background: var(--vh-transparent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--vh-muted);
    padding: 10px 2px;
    cursor: pointer;
    border-bottom: 3px solid var(--vh-transparent);
}

/* Canon active tab (runtime-validated): --vh-primary-hover + underline. */
.gm-d-tab.on[b-blgwaxn8ma] {
    color: var(--vh-primary-hover);
    border-bottom-color: var(--vh-primary-hover);
}

@media (max-width: 640px) {
    .gm-drawer[b-blgwaxn8ma] { width: 100vw; }
}
/* /Pages/GlobalMobility/Index.razor.rz.scp.css */
/* Global Mobility ("Hires") — list page. Ports the legacy application-visa
   header + board styles into gm- classes, restyled on the vh tokens
   (design-system.md) so the LeptonX dark theme remaps them automatically. */

/* ---------- header ---------- */
/* Header: ABP-default page chrome (design-system §12) — PageHeader +
   VhFiltersCard. Quick search sits in the card's search row; the advanced
   controls (assignee / status / company / sort) live in the collapsible
   .gm-filters region; only the page's own filter skins live below. */

/* advanced-filters row inside the VhFiltersCard body */
.gm-filters[b-2jm77oit4q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    width: 100%;
}

/* quiet "Clear filters" text action — pinned to the search row's right edge */
.gm-clear[b-2jm77oit4q] {
    margin-left: auto;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-black-60);
    font: 400 13px var(--vh-font-primary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--vh-radius-sm);
    white-space: nowrap;
}

.gm-clear:hover[b-2jm77oit4q] {
    background: var(--vh-gray-10);
    color: var(--vh-black-80);
}

.gm-search[b-2jm77oit4q] {
    display: flex;
    align-items: center;
    background: var(--vh-surface);
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    padding: 2px 4px 2px 10px;
}

.gm-search-input[b-2jm77oit4q] {
    border: 0;
    outline: none;
    font-size: 13px;
    width: 160px;
    background: var(--vh-transparent);
    color: var(--vh-text-body);
}

.gm-search-input[b-2jm77oit4q]::placeholder {
    color: var(--vh-text-placeholder);
}

.gm-search-btn[b-2jm77oit4q],
.gm-search-clear[b-2jm77oit4q] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-black-60);
    cursor: pointer;
    padding: 4px 8px;
}

/* ---- Type 1 autocompletes (assignee / company) — flat filter skin, the
   InterviewPipeline recipe on tokens ---- */
.gm-ac[b-2jm77oit4q] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.gm-ac-icon[b-2jm77oit4q] {
    font-size: 13px;
    color: var(--vh-black-60);
}

.gm-ac[b-2jm77oit4q]  .form-control {
    height: 32px;
    border: 1px solid var(--vh-transparent);
    background: var(--vh-transparent);
    box-shadow: none;
    font: 600 13px/18px var(--vh-font-primary);
    color: var(--vh-black-60);
    padding: 0 6px;
    border-radius: var(--vh-radius-sm);
}

.gm-ac-assignee[b-2jm77oit4q]  .form-control { width: 110px; }
.gm-ac-company[b-2jm77oit4q]  .form-control { width: 130px; }

.gm-ac[b-2jm77oit4q]  .form-control::placeholder {
    color: var(--vh-black-60);
    opacity: 1;
}

.gm-ac[b-2jm77oit4q]  .form-control:hover { background: var(--vh-gray-10); }

.gm-ac[b-2jm77oit4q]  .form-control:focus {
    background: var(--vh-surface);
    border-color: var(--vh-input-border);
    color: var(--vh-text-body);
    font-weight: 400;
}

.gm-ac[b-2jm77oit4q]  .form-control:focus::placeholder {
    color: var(--vh-text-placeholder);
    font-weight: 400;
}

.gm-ac[b-2jm77oit4q]  .dropdown-menu {
    min-width: 240px;
    box-shadow: var(--vh-shadow-pop);
}

.gm-opt-img[b-2jm77oit4q] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: .4rem;
}

.gm-opt-empty[b-2jm77oit4q] {
    font-size: .85rem;
    color: var(--vh-black-50);
}

/* ---- VhDropdown (status / sort) — flat filter skin over the shared combo ---- */
.gm-filters[b-2jm77oit4q]  .vh-dd-btn {
    border: 0;
    background: var(--vh-transparent);
    padding: 6px 8px;
    font: 600 13px/18px var(--vh-font-primary);
    color: var(--vh-black-60);
    border-radius: var(--vh-radius-sm);
}

.gm-filters[b-2jm77oit4q]  .vh-dd-btn:hover {
    background: var(--vh-gray-10);
    color: var(--vh-text-heading);
}

.gm-filters[b-2jm77oit4q]  .vh-dd-icon {
    color: var(--vh-black-60);
    font-size: 13px;
}

.gm-filters[b-2jm77oit4q]  .vh-dd-caret {
    color: var(--vh-black-60);
}

.gm-chiprow[b-2jm77oit4q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.gm-chip[b-2jm77oit4q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vh-black-10);
    border-radius: 12px;
    font-size: 12px;
    color: var(--vh-text-heading);
    padding: 3px 10px;
}

.gm-chip a[b-2jm77oit4q] {
    color: var(--vh-muted);
    cursor: pointer;
    text-decoration: none;
}

/* ---------- board (table) ---------- */
.gm-board[b-2jm77oit4q] {
    background: var(--vh-transparent);
}

/* 9 columns (staff) — mirrors the legacy grid proportions */
.gm-board-head[b-2jm77oit4q],
.gm-row[b-2jm77oit4q] {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.6fr 1fr 1.2fr 1.3fr 1fr 1fr .7fr;
    gap: 8px;
    align-items: center;
}

/* 7 columns (employer — no company/assignees) */
.gm-board-employer .gm-board-head[b-2jm77oit4q],
.gm-board-employer .gm-row[b-2jm77oit4q] {
    grid-template-columns: 2fr 1.8fr 1fr 1.4fr 1.4fr 1.1fr .7fr;
}

.gm-board-head[b-2jm77oit4q] {
    padding: 0 16px 8px;
}

.gm-board-label[b-2jm77oit4q] {
    font-size: 12px;
    font-weight: 700;
    color: var(--vh-muted);
    text-transform: none;
}

.gm-row[b-2jm77oit4q] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.gm-row:hover[b-2jm77oit4q] {
    background: var(--vh-surface-soft);
    border-color: var(--vh-primary-hover);
    box-shadow: var(--vh-shadow-surface-hover);
}

.gm-cell[b-2jm77oit4q] {
    font-size: 13px;
    color: var(--vh-text-heading);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-wrap[b-2jm77oit4q] {
    white-space: normal;
}

.gm-cell-strong[b-2jm77oit4q] {
    font-weight: 600;
}

.gm-candidate[b-2jm77oit4q] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gm-destination[b-2jm77oit4q] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gm-flag[b-2jm77oit4q] {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.gm-avatar[b-2jm77oit4q] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.gm-avatar-fallback[b-2jm77oit4q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-black-50);
    color: var(--vh-on-primary);
    font-size: 12px;
    font-weight: 700;
}

.gm-caret[b-2jm77oit4q] {
    font-size: 10px;
}

.gm-status[b-2jm77oit4q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 14px;
    background: var(--vh-black-10);
    color: var(--vh-text-heading);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-status:hover[b-2jm77oit4q] {
    background: var(--vh-line-strong);
}

.gm-status-readonly[b-2jm77oit4q] {
    cursor: pointer; /* employer click opens the drawer */
}

.gm-assignees[b-2jm77oit4q] {
    display: flex;
    align-items: center;
}

.gm-avatar-holder[b-2jm77oit4q] {
    margin-right: -8px;
    border: 2px solid var(--vh-surface);
    border-radius: 50%;
    display: inline-flex;
}

.gm-comments[b-2jm77oit4q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--vh-black-60);
}

.gm-comments-count[b-2jm77oit4q] {
    background: var(--vh-danger);
    color: var(--vh-on-primary);
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
}

.gm-empty[b-2jm77oit4q] {
    text-align: center;
    color: var(--vh-muted);
    font-size: 14px;
    padding: 40px 0;
}

/* ---------- shared bits ---------- */
.gm-loading[b-2jm77oit4q] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.gm-spinner[b-2jm77oit4q] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: gm-spin-b-2jm77oit4q .8s linear infinite;
}

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

.gm-noaccess[b-2jm77oit4q] {
    text-align: center;
    color: var(--vh-black-60);
    font-size: 15px;
    padding: 80px 0;
}

/* Toast — legacy cogo-toast look on the canon colors (design-system.md §6). */
.gm-toast[b-2jm77oit4q] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    border-radius: 8px;
    color: var(--vh-on-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 18px;
    box-shadow: 0 8px 24px rgb(var(--vh-black-rgb) / 18%);
}

.gm-toast.success[b-2jm77oit4q] { background: var(--vh-success); }
.gm-toast.error[b-2jm77oit4q] { background: var(--vh-danger); }

@media (max-width: 992px) {
    .gm-board-head[b-2jm77oit4q] { display: none; }

    .gm-row[b-2jm77oit4q],
    .gm-board-employer .gm-row[b-2jm77oit4q] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/GlobalMobility/NotesTab.razor.rz.scp.css */
/* Notes tab — legacy Tabs/Notes styles, restyled on the vh tokens. */
.gm-notes[b-7pkkpjmjnq] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 24px 20px;
    gap: 12px;
}

.gm-notes-loading[b-7pkkpjmjnq] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.gm-spin-md[b-7pkkpjmjnq] {
    width: 22px;
    height: 22px;
    border: 3px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: gm-spin-b-7pkkpjmjnq .8s linear infinite;
}

/* White arc on the primary send button — correct in dark too. */
.gm-spin-sm[b-7pkkpjmjnq] {
    width: 13px;
    height: 13px;
    border: 2px solid rgb(var(--vh-white-rgb) / 50%);
    border-top-color: var(--vh-color-white);
    border-radius: 50%;
    display: inline-block;
    animation: gm-spin-b-7pkkpjmjnq .8s linear infinite;
}

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

/* ---------- tip (soft warning — Cobalt tonal amber trio) ---------- */
.gm-tip[b-7pkkpjmjnq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    background: var(--vh-tonal-amber-bg);
    border: 1px solid var(--vh-tonal-amber-bd);
    border-radius: 8px;
    color: var(--vh-tonal-amber-text);
    font-size: 12px;
    padding: 10px 12px;
}

.gm-tip button[b-7pkkpjmjnq] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-tonal-amber-text);
    cursor: pointer;
    font-size: 12px;
}

/* ---------- comments ---------- */
.gm-comments[b-7pkkpjmjnq] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 200px;
}

.gm-comments-empty[b-7pkkpjmjnq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    flex: 1;
    color: var(--vh-muted);
    padding: 30px 20px;
}

.gm-comments-empty i[b-7pkkpjmjnq] {
    font-size: 52px;
    color: var(--vh-black-20);
}

.gm-comments-empty p[b-7pkkpjmjnq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--vh-black-60);
    margin: 0;
}

.gm-comments-empty span[b-7pkkpjmjnq] {
    font-size: 12px;
}

.gm-msg[b-7pkkpjmjnq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
}

.gm-msg.mine[b-7pkkpjmjnq] {
    align-self: flex-end;
    align-items: flex-end;
}

.gm-msg-row[b-7pkkpjmjnq] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.gm-msg-avatar img[b-7pkkpjmjnq],
.gm-msg-avatar .gm-avatar-fallback[b-7pkkpjmjnq] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.gm-avatar-fallback[b-7pkkpjmjnq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-black-50);
    color: var(--vh-on-primary);
    font-weight: 700;
    font-size: 11px;
}

.gm-msg-bubble[b-7pkkpjmjnq] {
    background: var(--vh-surface-soft);
    border-radius: var(--vh-radius-lg);
    color: var(--vh-text-heading);
    font-size: 13px;
    padding: 9px 12px;
    overflow-wrap: anywhere;
    flex: 1;
}

.gm-msg.mine .gm-msg-bubble[b-7pkkpjmjnq] {
    background: var(--vh-blue-tint);
}

.gm-msg-bubble[b-7pkkpjmjnq]  p {
    margin: 0;
}

.gm-msg-edit[b-7pkkpjmjnq] {
    flex: 1;
    border: 1px solid var(--vh-input-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--vh-text-body);
    background: var(--vh-transparent);
    padding: 8px 10px;
    outline: none;
    resize: vertical;
}

.gm-msg-meta[b-7pkkpjmjnq] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--vh-muted);
}

.gm-msg-actions[b-7pkkpjmjnq] {
    display: inline-flex;
    gap: 10px;
}

.gm-msg-actions a[b-7pkkpjmjnq] {
    color: var(--vh-muted);
    cursor: pointer;
    text-decoration: none;
}

.gm-msg-actions a:hover[b-7pkkpjmjnq] {
    color: var(--vh-text-heading);
}

.gm-msg-actions a.strong[b-7pkkpjmjnq] {
    color: var(--vh-primary);
    font-weight: 700;
}

/* ---------- composer ---------- */
.gm-composer[b-7pkkpjmjnq] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-lg);
    padding: 8px 10px;
}

.gm-composer-input[b-7pkkpjmjnq] {
    flex: 1;
    border: 0;
    outline: none;
    resize: none;
    font-size: 13px;
    color: var(--vh-text-body);
    background: var(--vh-transparent);
}

.gm-composer-input[b-7pkkpjmjnq]::placeholder {
    color: var(--vh-text-placeholder);
}

.gm-composer-actions[b-7pkkpjmjnq] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gm-mention-btn[b-7pkkpjmjnq] {
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-black-60);
    font-weight: 700;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.gm-send-btn[b-7pkkpjmjnq] {
    border: 0;
    border-radius: var(--vh-radius-md);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    width: 34px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gm-send-btn:hover:not(:disabled)[b-7pkkpjmjnq] {
    background: var(--vh-primary-hover);
}

.gm-send-btn:disabled[b-7pkkpjmjnq] {
    opacity: .55;
    cursor: default;
}

.gm-mention[b-7pkkpjmjnq] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    box-shadow: var(--vh-shadow-pop);
    padding: 8px;
}

.gm-mention-input[b-7pkkpjmjnq] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    font-size: 13px;
    color: var(--vh-text-body);
    background: var(--vh-transparent);
    padding: 6px 8px;
    outline: none;
}

.gm-mention-input[b-7pkkpjmjnq]::placeholder {
    color: var(--vh-text-placeholder);
}

.gm-mention-list[b-7pkkpjmjnq] {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 6px;
}

.gm-mention-item[b-7pkkpjmjnq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vh-text-heading);
    padding: 6px 8px;
    border-radius: var(--vh-radius-md);
    cursor: pointer;
}

.gm-mention-item:hover[b-7pkkpjmjnq] {
    background: var(--vh-gray-10);
}

.gm-mention-item img[b-7pkkpjmjnq] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.gm-mention-type[b-7pkkpjmjnq] {
    margin-left: auto;
    font-size: 11px;
    color: var(--vh-muted);
}
/* /Pages/GlobalMobility/StatusModal.razor.rz.scp.css */
/* Update Status modal — legacy visual/statusModal, restyled on the vh tokens
   (design-system.md: modal confirm = primary, overlay/surface/shadow tokens). */
.gm-modal-backdrop[b-h6f5mgy5pi] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--vh-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* No overflow:hidden here — the status VhDropdown menu must be able to
   overhang the panel edge. */
.gm-modal[b-h6f5mgy5pi] {
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    box-shadow: var(--vh-shadow-modal);
}

.gm-modal-head[b-h6f5mgy5pi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: var(--vh-text-heading);
    padding: 16px 20px;
    border-bottom: 1px solid var(--vh-black-10);
}

.gm-modal-close[b-h6f5mgy5pi] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-muted);
    font-size: 14px;
    cursor: pointer;
}

.gm-modal-body[b-h6f5mgy5pi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 22px;
}

.gm-modal-label[b-h6f5mgy5pi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-black-60);
    margin-top: 6px;
}

/* Layout only — the button look comes from the .vh-btn-* utilities. */
.gm-modal-update[b-h6f5mgy5pi] {
    margin-top: 18px;
}

/* Arc spinner on currentColor: --vh-on-primary while enabled, disabled-text while the
   button sits in the utilities' disabled state. */
.gm-btn-spin[b-h6f5mgy5pi] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--vh-transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: gm-spin-b-h6f5mgy5pi .8s linear infinite;
}

@keyframes gm-spin-b-h6f5mgy5pi {
    to { transform: rotate(360deg); }
}
/* /Pages/GuidedTalentSearch/Brief.razor.rz.scp.css */
.gts-public-page[b-xgbm4e5oco] {
    min-height: 100%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--vh-text-body);
    background:
        radial-gradient(circle at 8% 12%, rgb(var(--vh-primary-hover-rgb) / 0.15), transparent 24rem),
        radial-gradient(circle at 94% 82%, rgb(var(--vh-secondary-rgb, 239 92 17) / 0.1), transparent 22rem),
        var(--vh-surface-soft);
    font-family: var(--vh-font-primary);
}

.gts-public-page[b-xgbm4e5oco]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -12rem;
    right: -10rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / 0.22);
    border-radius: 50%;
    box-shadow:
        0 0 0 4rem rgb(var(--vh-primary-hover-rgb) / 0.035),
        0 0 0 8rem rgb(var(--vh-primary-hover-rgb) / 0.025);
}

.gts-public-header[b-xgbm4e5oco] {
    width: min(1180px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 1.6rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gts-public-header img[b-xgbm4e5oco] {
    display: block;
    width: 154px;
    height: auto;
}

.gts-public-header > span[b-xgbm4e5oco] {
    color: var(--vh-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gts-public-main[b-xgbm4e5oco] {
    width: min(1040px, calc(100% - 3rem));
    margin: auto;
    padding: 2.5rem 0 4rem;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(34rem, 1.18fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.gts-public-intro[b-xgbm4e5oco] {
    max-width: 29rem;
}

.gts-eyebrow[b-xgbm4e5oco] {
    margin: 0 0 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--vh-primary);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gts-eyebrow span[b-xgbm4e5oco] {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(var(--vh-primary-rgb) / 0.3);
    border-radius: 50%;
    background: rgb(var(--vh-primary-rgb) / 0.07);
    letter-spacing: normal;
}

.gts-public-intro h1[b-xgbm4e5oco] {
    margin: 0;
    max-width: 9ch;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: clamp(3rem, 5.4vw, 5.2rem);
    font-weight: 600;
    line-height: 0.97;
    letter-spacing: -0.045em;
}

.gts-lede[b-xgbm4e5oco] {
    max-width: 27rem;
    margin: 1.75rem 0 0;
    color: var(--vh-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.gts-brief-card[b-xgbm4e5oco] {
    position: relative;
    border: 1px solid var(--vh-line);
    border-radius: 24px;
    background: var(--vh-surface);
    box-shadow: 0 28px 80px rgb(var(--vh-black-rgb, 0 0 0) / 0.1);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.gts-brief-card[b-xgbm4e5oco]::before {
    content: "";
    position: absolute;
    inset: 0.75rem;
    z-index: -1;
    border-radius: 24px;
    background: var(--vh-primary);
    transform: translate(0.75rem, 0.75rem);
    opacity: 0.12;
}

.gts-field[b-xgbm4e5oco] {
    display: grid;
    gap: 0.6rem;
}

.gts-field label[b-xgbm4e5oco] {
    color: var(--vh-text-heading);
    font-size: 0.88rem;
    font-weight: 700;
}

.gts-label-row[b-xgbm4e5oco],
.gts-field-note.gts-count[b-xgbm4e5oco],
.gts-action-row[b-xgbm4e5oco] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.gts-label-row > span[b-xgbm4e5oco] {
    color: var(--vh-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gts-query[b-xgbm4e5oco],
.gts-description[b-xgbm4e5oco] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: 12px;
    outline: 0;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font: inherit;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.gts-query[b-xgbm4e5oco] {
    min-height: 3.8rem;
    padding: 0.95rem 1.05rem;
    font-size: 1rem;
    font-weight: 550;
}

.gts-description[b-xgbm4e5oco] {
    min-height: 10.25rem;
    resize: vertical;
    padding: 1rem 1.05rem;
    line-height: 1.55;
}

.gts-query[b-xgbm4e5oco]::placeholder,
.gts-description[b-xgbm4e5oco]::placeholder {
    color: var(--vh-text-muted);
    opacity: 0.72;
}

.gts-query:focus[b-xgbm4e5oco],
.gts-description:focus[b-xgbm4e5oco] {
    border-color: var(--vh-primary-hover);
    box-shadow: 0 0 0 4px rgb(var(--vh-primary-hover-rgb) / 0.14);
}

.gts-field-note[b-xgbm4e5oco] {
    color: var(--vh-text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.gts-count > span[b-xgbm4e5oco] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.gts-divider[b-xgbm4e5oco] {
    margin: 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--vh-text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gts-divider[b-xgbm4e5oco]::before,
.gts-divider[b-xgbm4e5oco]::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--vh-line);
}

.gts-error[b-xgbm4e5oco] {
    margin-top: 1.2rem;
    padding: 0.75rem 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border: 1px solid rgb(var(--vh-danger-rgb, 214 48 49) / 0.28);
    border-radius: 10px;
    background: rgb(var(--vh-danger-rgb, 214 48 49) / 0.08);
    color: var(--vh-danger);
    font-size: 0.84rem;
    line-height: 1.4;
}

.gts-action-row[b-xgbm4e5oco] {
    align-items: flex-end;
    margin-top: 1.5rem;
}

.gts-action-row p[b-xgbm4e5oco] {
    max-width: 17rem;
    margin: 0;
    color: var(--vh-text-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

.gts-submit[b-xgbm4e5oco] {
    min-height: 3.25rem;
    flex: 0 0 auto;
    padding: 0.8rem 1.1rem 0.8rem 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--vh-confirm);
    color: var(--vh-on-primary);
    box-shadow: 0 10px 24px rgb(var(--vh-primary-rgb) / 0.22);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    cursor: pointer;
    transition:
        transform 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.gts-submit i[b-xgbm4e5oco] {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgb(var(--vh-white-rgb) / 0.16);
}

.gts-submit:hover:not(:disabled)[b-xgbm4e5oco] {
    transform: translateY(-2px);
    background: var(--vh-confirm-hover);
    box-shadow: 0 14px 28px rgb(var(--vh-primary-rgb) / 0.28);
}

.gts-submit:focus-visible[b-xgbm4e5oco] {
    outline: 3px solid rgb(var(--vh-primary-hover-rgb) / 0.38);
    outline-offset: 3px;
}

.gts-submit:disabled[b-xgbm4e5oco] {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}

.gts-public-footer[b-xgbm4e5oco] {
    width: min(1180px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 1.3rem 0 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--vh-text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.gts-footer-line[b-xgbm4e5oco] {
    width: 2.5rem;
    height: 1px;
    background: var(--vh-line);
}

@media (max-width: 900px) {
    .gts-public-main[b-xgbm4e5oco] {
        max-width: 42rem;
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-top: 1.5rem;
    }

    .gts-public-intro[b-xgbm4e5oco] {
        max-width: 36rem;
    }

    .gts-public-intro h1[b-xgbm4e5oco] {
        max-width: none;
        font-size: clamp(2.8rem, 10vw, 4.4rem);
    }

    .gts-lede[b-xgbm4e5oco] {
        max-width: 36rem;
    }
}

@media (max-width: 560px) {
    .gts-public-header[b-xgbm4e5oco],
    .gts-public-main[b-xgbm4e5oco],
    .gts-public-footer[b-xgbm4e5oco] {
        width: min(100% - 2rem, 42rem);
    }

    .gts-public-header[b-xgbm4e5oco] {
        padding-top: 1.1rem;
    }

    .gts-public-header img[b-xgbm4e5oco] {
        width: 132px;
    }

    .gts-public-header > span[b-xgbm4e5oco],
    .gts-action-row p[b-xgbm4e5oco] {
        display: none;
    }

    .gts-public-main[b-xgbm4e5oco] {
        padding: 1.5rem 0 2.5rem;
    }

    .gts-brief-card[b-xgbm4e5oco] {
        border-radius: 18px;
        padding: 1.25rem;
    }

    .gts-label-row[b-xgbm4e5oco],
    .gts-field-note.gts-count[b-xgbm4e5oco] {
        align-items: flex-start;
    }

    .gts-count[b-xgbm4e5oco] {
        flex-direction: column;
        gap: 0.15rem;
    }

    .gts-action-row[b-xgbm4e5oco],
    .gts-submit[b-xgbm4e5oco] {
        width: 100%;
    }

    .gts-submit[b-xgbm4e5oco] {
        justify-content: space-between;
    }

    .gts-public-footer[b-xgbm4e5oco] {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gts-query[b-xgbm4e5oco],
    .gts-description[b-xgbm4e5oco],
    .gts-submit[b-xgbm4e5oco] {
        transition: none;
    }
}
/* /Pages/GuidedTalentSearch/Index.razor.rz.scp.css */
.gts-page[b-jgv2ntngsf] {
    --gts-accent: var(--vh-primary);
    --gts-accent-bright: var(--vh-primary-hover);
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 1rem 0 4rem;
    color: var(--vh-text-body);
    font-family: var(--vh-font-primary);
}

.gts-hero[b-jgv2ntngsf] {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    border: 1px solid var(--vh-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 18%, rgb(var(--vh-primary-hover-rgb) / 0.2), transparent 18rem),
        linear-gradient(135deg, var(--vh-surface), var(--vh-surface-soft));
    box-shadow: var(--vh-shadow-surface);
}

.gts-hero[b-jgv2ntngsf]::after {
    content: "";
    position: absolute;
    top: -8rem;
    right: -5rem;
    width: 20rem;
    height: 20rem;
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / 0.2);
    border-radius: 50%;
    box-shadow:
        0 0 0 2.5rem rgb(var(--vh-primary-hover-rgb) / 0.035),
        0 0 0 5rem rgb(var(--vh-primary-hover-rgb) / 0.025);
    pointer-events: none;
}

.gts-hero > div[b-jgv2ntngsf] {
    position: relative;
    z-index: 1;
}

.gts-kicker[b-jgv2ntngsf],
.gts-results-heading p[b-jgv2ntngsf],
.gts-summary-head p[b-jgv2ntngsf] {
    margin: 0 0 0.7rem;
    color: var(--gts-accent);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gts-kicker[b-jgv2ntngsf] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.gts-kicker span[b-jgv2ntngsf] {
    width: 2rem;
    height: 2px;
    background: var(--gts-accent-bright);
}

.gts-hero h1[b-jgv2ntngsf] {
    max-width: 17ch;
    margin: 0;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: clamp(2.15rem, 4vw, 4rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.gts-hero > div > p:last-child[b-jgv2ntngsf] {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--vh-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.gts-count-block[b-jgv2ntngsf] {
    flex: 0 0 auto;
    min-width: 10rem;
    padding: 1rem 1.25rem;
    display: grid;
    border-left: 1px solid var(--vh-line);
}

.gts-count-block strong[b-jgv2ntngsf] {
    color: var(--vh-text-heading);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gts-count-block span[b-jgv2ntngsf] {
    margin-top: 0.4rem;
    color: var(--vh-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gts-loading-state[b-jgv2ntngsf] {
    min-height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid var(--vh-line);
    border-radius: 20px;
    background: var(--vh-surface);
}

.gts-loading-state div[b-jgv2ntngsf] {
    display: grid;
    gap: 0.2rem;
}

.gts-loading-state strong[b-jgv2ntngsf] {
    color: var(--vh-text-heading);
}

.gts-loading-state span[b-jgv2ntngsf] {
    color: var(--vh-text-muted);
    font-size: 0.86rem;
}

.gts-spinner[b-jgv2ntngsf] {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgb(var(--vh-primary-hover-rgb) / 0.18);
    border-top-color: var(--gts-accent-bright);
    border-radius: 50%;
    animation: gts-spin-b-jgv2ntngsf 0.8s linear infinite;
}

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

.gts-question-card[b-jgv2ntngsf] {
    position: relative;
    z-index: 5;
    margin-bottom: 1.5rem;
    padding: clamp(1rem, 1.8vw, 1.45rem);
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / 0.25);
    border-radius: 20px;
    background: var(--vh-surface);
    box-shadow: 0 18px 50px rgb(var(--vh-cobalt-shadow-rgb) / 0.08);
}

.gts-question-meta[b-jgv2ntngsf] {
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gts-question-meta > span[b-jgv2ntngsf] {
    flex: 0 0 auto;
    color: var(--vh-text-muted);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gts-progress[b-jgv2ntngsf] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
}

.gts-progress i[b-jgv2ntngsf] {
    height: 3px;
    border-radius: 99px;
    background: var(--vh-line);
}

.gts-progress i.active[b-jgv2ntngsf] {
    background: linear-gradient(90deg, var(--gts-accent), var(--gts-accent-bright));
}

.gts-question-layout[b-jgv2ntngsf] {
    display: grid;
    grid-template-columns: minmax(12rem, 0.35fr) minmax(26rem, 1.65fr);
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: start;
}

.gts-question-label[b-jgv2ntngsf] {
    margin: 0.95rem 0 0;
    color: var(--vh-text-heading);
    font-size: 0.86rem;
    font-weight: 780;
    line-height: 1.35;
}

.gts-question-control[b-jgv2ntngsf] {
    min-width: 0;
}

.gts-lookup[b-jgv2ntngsf] {
    position: relative;
}

.gts-lookup-input[b-jgv2ntngsf] {
    width: 100%;
    min-height: 3.65rem;
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--vh-input-border);
    border-radius: 12px;
    outline: 0;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.gts-lookup-input[b-jgv2ntngsf]::placeholder {
    color: var(--vh-text-muted);
    opacity: 0.72;
}

.gts-lookup-input:focus[b-jgv2ntngsf] {
    border-color: var(--gts-accent-bright);
    box-shadow: 0 0 0 4px rgb(var(--vh-primary-hover-rgb) / 0.13);
}

.gts-lookup-input:disabled[b-jgv2ntngsf] {
    background: var(--vh-surface-soft);
    cursor: not-allowed;
}

.gts-current-answer[b-jgv2ntngsf] {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / 0.28);
    border-radius: 10px;
    background: rgb(var(--vh-primary-hover-rgb) / 0.07);
}

.gts-current-answer span[b-jgv2ntngsf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--vh-text-heading);
    font-size: 0.88rem;
    font-weight: 700;
}

.gts-current-answer span i[b-jgv2ntngsf] {
    color: var(--gts-accent);
}

.gts-current-answer button[b-jgv2ntngsf],
.gts-selection-chips button[b-jgv2ntngsf] {
    border: 0;
    background: var(--vh-transparent);
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.gts-lookup-menu[b-jgv2ntngsf] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid var(--vh-line);
    border-radius: 12px;
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-pop);
}

.gts-lookup-menu button[b-jgv2ntngsf] {
    width: 100%;
    padding: 0.72rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    border-radius: 8px;
    background: var(--vh-transparent);
    color: var(--vh-text-body);
    font: inherit;
    font-size: 0.87rem;
    text-align: left;
    cursor: pointer;
}

.gts-lookup-menu button:hover[b-jgv2ntngsf],
.gts-lookup-menu button:focus-visible[b-jgv2ntngsf],
.gts-lookup-menu button.active[b-jgv2ntngsf] {
    outline: 0;
    background: var(--vh-blue-tint);
    color: var(--vh-text-heading);
}

.gts-lookup-menu button i[b-jgv2ntngsf] {
    width: 1rem;
    color: var(--gts-accent);
    text-align: center;
}

.gts-lookup-empty[b-jgv2ntngsf] {
    padding: 0.85rem;
    color: var(--vh-text-muted);
    font-size: 0.82rem;
}

.gts-selection-chips[b-jgv2ntngsf] {
    margin-bottom: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gts-selection-chips > span[b-jgv2ntngsf] {
    padding: 0.36rem 0.45rem 0.36rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--vh-tonal-blue-bd);
    border-radius: 8px;
    background: var(--vh-blue-tint);
    color: var(--vh-blue-deep);
    font-size: 0.78rem;
    font-weight: 650;
}

.gts-selection-chips button[b-jgv2ntngsf] {
    padding: 0.15rem 0.25rem;
    border-radius: 4px;
    color: var(--gts-accent);
}

.gts-selection-chips button:hover[b-jgv2ntngsf] {
    background: rgb(var(--vh-primary-hover-rgb) / 0.15);
}

.gts-question-actions[b-jgv2ntngsf] {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.gts-text-action[b-jgv2ntngsf],
.gts-next-action[b-jgv2ntngsf] {
    border: 0;
    background: var(--vh-transparent);
    font: inherit;
    cursor: pointer;
}

.gts-text-action[b-jgv2ntngsf] {
    padding: 0.7rem;
    color: var(--vh-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.gts-text-action:hover[b-jgv2ntngsf] {
    color: var(--gts-accent);
}

.gts-next-action[b-jgv2ntngsf] {
    padding: 0.68rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 9px;
    background: var(--vh-blue-tint);
    color: var(--gts-accent);
    font-size: 0.8rem;
    font-weight: 750;
}

.gts-next-action:hover[b-jgv2ntngsf] {
    background: rgb(var(--vh-primary-hover-rgb) / 0.14);
}

.gts-choice-grid[b-jgv2ntngsf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.gts-choice-grid button[b-jgv2ntngsf] {
    min-height: 4.3rem;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid var(--vh-line);
    border-radius: 11px;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.gts-choice-grid button:hover[b-jgv2ntngsf],
.gts-choice-grid button:focus-visible[b-jgv2ntngsf],
.gts-choice-grid button.selected[b-jgv2ntngsf] {
    outline: 0;
    border-color: rgb(var(--vh-primary-hover-rgb) / 0.5);
    background: var(--vh-blue-tint);
    color: var(--vh-text-heading);
    transform: translateY(-1px);
}

.gts-choice-grid button > span[b-jgv2ntngsf] {
    display: grid;
    gap: 0.15rem;
}

.gts-choice-grid strong[b-jgv2ntngsf] {
    font-size: 0.84rem;
    font-weight: 720;
}

.gts-choice-grid small[b-jgv2ntngsf] {
    color: var(--vh-text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.gts-choice-grid button > i[b-jgv2ntngsf] {
    color: var(--gts-accent);
}

.gts-choice-grid-compact[b-jgv2ntngsf] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gts-choice-grid-compact button[b-jgv2ntngsf] {
    min-height: 3.5rem;
    font-size: 0.8rem;
    font-weight: 680;
}

.gts-error[b-jgv2ntngsf],
.gts-warning[b-jgv2ntngsf] {
    margin: -0.25rem 0 1.25rem;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgb(var(--vh-danger-rgb, 214 48 49) / 0.28);
    border-radius: 10px;
    background: rgb(var(--vh-danger-rgb, 214 48 49) / 0.07);
    color: var(--vh-danger);
    font-size: 0.82rem;
}

.gts-warning[b-jgv2ntngsf] {
    border-color: var(--vh-tonal-amber-bd);
    background: var(--vh-tonal-amber-bg);
    color: var(--vh-tonal-amber-text);
}

.gts-warning span[b-jgv2ntngsf] {
    flex: 1;
}

.gts-error button[b-jgv2ntngsf] {
    margin-left: auto;
    border: 0;
    background: var(--vh-transparent);
    color: inherit;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.gts-results-layout[b-jgv2ntngsf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: 1.5rem;
    align-items: start;
}

.gts-results[b-jgv2ntngsf] {
    min-width: 0;
}

.gts-results-heading[b-jgv2ntngsf] {
    min-height: 3.5rem;
    margin-bottom: 0.8rem;
    padding: 0 0.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.gts-results-heading p[b-jgv2ntngsf] {
    margin-bottom: 0.25rem;
}

.gts-results-heading h2[b-jgv2ntngsf] {
    margin: 0;
    color: var(--vh-text-heading);
    font-size: 1.15rem;
    font-weight: 680;
}

.gts-refreshing[b-jgv2ntngsf] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--vh-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.gts-cards[b-jgv2ntngsf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gts-empty-state[b-jgv2ntngsf] {
    min-height: 20rem;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--vh-line-strong);
    border-radius: 16px;
    background: var(--vh-surface);
    text-align: center;
}

.gts-empty-state > span[b-jgv2ntngsf] {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vh-blue-tint);
    color: var(--gts-accent);
}

.gts-empty-state h3[b-jgv2ntngsf] {
    margin: 1rem 0 0.35rem;
    color: var(--vh-text-heading);
    font-size: 1.05rem;
}

.gts-empty-state p[b-jgv2ntngsf] {
    max-width: 28rem;
    margin: 0;
    color: var(--vh-text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.gts-result-skeletons[b-jgv2ntngsf] {
    display: grid;
    gap: 1rem;
}

.gts-result-skeletons > div[b-jgv2ntngsf] {
    min-height: 14rem;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 12rem 1fr;
    grid-template-rows: repeat(3, 1.2rem);
    gap: 0.8rem 1.25rem;
    border: 1px solid var(--vh-line);
    border-radius: 16px;
    background: var(--vh-surface);
}

.gts-result-skeletons span[b-jgv2ntngsf] {
    grid-row: 1 / 4;
    border-radius: 12px;
    background: var(--vh-surface-soft);
}

.gts-result-skeletons i[b-jgv2ntngsf] {
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        var(--vh-surface-soft),
        rgb(var(--vh-primary-hover-rgb) / 0.08),
        var(--vh-surface-soft));
    background-size: 200% 100%;
    animation: gts-shimmer-b-jgv2ntngsf 1.4s ease infinite;
}

@keyframes gts-shimmer-b-jgv2ntngsf {
    to { background-position: -200% 0; }
}

.gts-load-more[b-jgv2ntngsf] {
    width: 100%;
    margin-top: 1rem;
    padding: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid var(--vh-line-strong);
    border-radius: 11px;
    background: var(--vh-surface);
    color: var(--gts-accent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

.gts-load-more:hover[b-jgv2ntngsf] {
    border-color: var(--gts-accent-bright);
    background: var(--vh-blue-tint);
}

.gts-load-more:disabled[b-jgv2ntngsf] {
    cursor: wait;
    opacity: 0.65;
}

.gts-summary[b-jgv2ntngsf] {
    position: sticky;
    top: 1rem;
}

.gts-summary-card[b-jgv2ntngsf] {
    overflow: hidden;
    border: 1px solid var(--vh-line);
    border-radius: 18px;
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
}

.gts-summary-head[b-jgv2ntngsf] {
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--vh-line);
}

.gts-summary-head p[b-jgv2ntngsf] {
    margin-bottom: 0.25rem;
}

.gts-summary-head h2[b-jgv2ntngsf] {
    margin: 0;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
}

.gts-summary-head > span[b-jgv2ntngsf] {
    padding: 0.3rem 0.5rem;
    border-radius: 99px;
    background: var(--vh-blue-tint);
    color: var(--gts-accent);
    font-size: 0.66rem;
    font-weight: 750;
    white-space: nowrap;
}

.gts-brief-summary[b-jgv2ntngsf] {
    margin: 1rem 1.25rem 0;
    padding: 0.8rem;
    border-left: 3px solid var(--gts-accent-bright);
    border-radius: 0 8px 8px 0;
    background: var(--vh-surface-soft);
}

.gts-brief-summary span[b-jgv2ntngsf] {
    color: var(--vh-text-muted);
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.gts-brief-summary p[b-jgv2ntngsf] {
    margin: 0.28rem 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--vh-text-body);
    font-size: 0.77rem;
    font-weight: 620;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.gts-summary-list[b-jgv2ntngsf] {
    margin: 0;
    padding: 0.5rem 1.25rem 1rem;
}

.gts-summary-list > div[b-jgv2ntngsf] {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--vh-line);
}

.gts-summary-list > div:last-child[b-jgv2ntngsf] {
    border-bottom: 0;
}

.gts-summary-list dt[b-jgv2ntngsf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--vh-text-muted);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gts-summary-list dt button[b-jgv2ntngsf] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--gts-accent);
    font: inherit;
    font-size: 0.66rem;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.gts-summary-list dd[b-jgv2ntngsf] {
    margin: 0.3rem 0 0;
    overflow-wrap: anywhere;
    color: var(--vh-text-heading);
    font-size: 0.8rem;
    font-weight: 640;
    line-height: 1.45;
}

.gts-go-live[b-jgv2ntngsf] {
    padding: 1.25rem;
    background:
        radial-gradient(circle at 100% 0, rgb(var(--vh-primary-hover-rgb) / 0.28), var(--vh-transparent) 10rem),
        var(--vh-primary);
    color: var(--vh-color-white);
}

.gts-go-live p[b-jgv2ntngsf] {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1.45;
}

.gts-go-live a[b-jgv2ntngsf] {
    width: 100%;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 9px;
    background: var(--vh-color-white);
    color: var(--vh-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 780;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 9px 25px rgb(var(--vh-black-rgb) / 0.15);
}

.gts-go-live a:hover[b-jgv2ntngsf] {
    transform: translateY(-1px);
}

.gts-go-live > span[b-jgv2ntngsf] {
    display: block;
    margin-top: 0.7rem;
    color: rgb(var(--vh-white-rgb) / 0.72);
    font-size: 0.66rem;
    line-height: 1.4;
}

button:focus-visible[b-jgv2ntngsf] {
    outline: 3px solid rgb(var(--vh-primary-hover-rgb) / 0.32);
    outline-offset: 2px;
}

@media (max-width: 1180px) {
    .gts-results-layout[b-jgv2ntngsf] {
        grid-template-columns: minmax(0, 1fr) 19rem;
    }

    .gts-question-layout[b-jgv2ntngsf] {
        grid-template-columns: minmax(11rem, 0.4fr) minmax(22rem, 1.6fr);
        gap: 1.5rem;
    }
}

@media (max-width: 980px) {
    .gts-results-layout[b-jgv2ntngsf] {
        grid-template-columns: 1fr;
    }

    .gts-summary[b-jgv2ntngsf] {
        position: static;
        grid-row: 1;
    }

    .gts-summary-list[b-jgv2ntngsf] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 1rem;
    }

    .gts-question-layout[b-jgv2ntngsf] {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .gts-question-label[b-jgv2ntngsf] {
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .gts-page[b-jgv2ntngsf] {
        padding-top: 0.5rem;
    }

    .gts-hero[b-jgv2ntngsf] {
        align-items: flex-start;
        flex-direction: column;
    }

    .gts-count-block[b-jgv2ntngsf] {
        width: 100%;
        padding: 0.9rem 0 0;
        border-top: 1px solid var(--vh-line);
        border-left: 0;
    }

    .gts-choice-grid[b-jgv2ntngsf],
    .gts-choice-grid-compact[b-jgv2ntngsf] {
        grid-template-columns: 1fr;
    }

    .gts-summary-list[b-jgv2ntngsf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .gts-hero[b-jgv2ntngsf],
    .gts-question-card[b-jgv2ntngsf] {
        border-radius: 16px;
    }

    .gts-question-meta[b-jgv2ntngsf] {
        align-items: flex-start;
        flex-direction: column;
    }

    .gts-progress[b-jgv2ntngsf] {
        width: 100%;
    }

    .gts-question-actions[b-jgv2ntngsf] {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .gts-next-action[b-jgv2ntngsf],
    .gts-text-action[b-jgv2ntngsf] {
        justify-content: center;
        text-align: center;
    }

    .gts-summary-list[b-jgv2ntngsf] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gts-spinner[b-jgv2ntngsf],
    .gts-result-skeletons i[b-jgv2ntngsf] {
        animation: none;
    }

    .gts-choice-grid button[b-jgv2ntngsf],
    .gts-go-live a[b-jgv2ntngsf] {
        transition: none;
    }
}
/* /Pages/GuidedTalentSearch/Plans.razor.rz.scp.css */
.gts-plans-page[b-282xxjavc0] {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem) 0 4rem;
    color: var(--vh-text-body);
    font-family: var(--vh-font-primary);
}

.gts-plans-back[b-282xxjavc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--vh-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.gts-plans-back:hover[b-282xxjavc0] {
    color: var(--vh-primary);
}

.gts-plans-header[b-282xxjavc0] {
    max-width: 47rem;
    margin: clamp(2rem, 5vw, 4.5rem) auto clamp(2rem, 4vw, 3.5rem);
    text-align: center;
}

.gts-plans-header p[b-282xxjavc0] {
    margin: 0 0 0.75rem;
    color: var(--vh-primary);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gts-plans-header h1[b-282xxjavc0] {
    margin: 0;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: clamp(2.5rem, 5vw, 4.6rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.gts-plans-header span[b-282xxjavc0] {
    display: block;
    max-width: 39rem;
    margin: 1.25rem auto 0;
    color: var(--vh-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.gts-plan-grid[b-282xxjavc0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.gts-plan-card[b-282xxjavc0] {
    position: relative;
    overflow: hidden;
    min-height: 34rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vh-line);
    border-radius: 22px;
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
}

.gts-plan-card-featured[b-282xxjavc0] {
    border-color: rgb(var(--vh-primary-hover-rgb) / 0.36);
    background:
        radial-gradient(circle at 100% 0, rgb(var(--vh-primary-hover-rgb) / 0.15), transparent 20rem),
        var(--vh-surface);
}

.gts-plan-number[b-282xxjavc0] {
    position: absolute;
    top: -1.2rem;
    right: 1rem;
    color: rgb(var(--vh-primary-hover-rgb) / 0.065);
    font-family: var(--vh-font-heading);
    font-size: 8rem;
    font-weight: 650;
    line-height: 1;
    pointer-events: none;
}

.gts-plan-icon[b-282xxjavc0] {
    position: relative;
    z-index: 1;
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / 0.22);
    border-radius: 14px;
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
    font-size: 1.2rem;
}

.gts-plan-card > p[b-282xxjavc0] {
    margin: 2rem 0 0.4rem;
    color: var(--vh-primary);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gts-plan-card h2[b-282xxjavc0] {
    margin: 0;
    color: var(--vh-text-heading);
    font-family: var(--vh-font-heading);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.gts-plan-card > span[b-282xxjavc0] {
    min-height: 4.8rem;
    margin-top: 0.85rem;
    color: var(--vh-text-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.gts-plan-card ul[b-282xxjavc0] {
    margin: 2rem 0;
    padding: 1.25rem 0 0;
    display: grid;
    gap: 0.9rem;
    border-top: 1px solid var(--vh-line);
    list-style: none;
}

.gts-plan-card li[b-282xxjavc0] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--vh-text-body);
    font-size: 0.8rem;
    line-height: 1.45;
}

.gts-plan-card li i[b-282xxjavc0] {
    width: 1rem;
    margin-top: 0.15rem;
    color: var(--vh-primary);
    text-align: center;
}

.gts-plan-card button[b-282xxjavc0] {
    width: 100%;
    margin-top: auto;
    padding: 0.85rem 1rem;
    border: 1px solid var(--vh-line-strong);
    border-radius: 10px;
    background: var(--vh-surface-soft);
    color: var(--vh-text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: not-allowed;
}

.gts-plans-footer[b-282xxjavc0] {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--vh-line);
    border-radius: 12px;
    background: var(--vh-surface-soft);
}

.gts-plans-footer span[b-282xxjavc0] {
    color: var(--vh-text-muted);
    font-size: 0.75rem;
}

.gts-plans-footer button[b-282xxjavc0] {
    flex: 0 0 auto;
    padding: 0.68rem 0.9rem;
    border: 0;
    border-radius: 9px;
    background: var(--vh-primary);
    color: var(--vh-color-white);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}

.gts-plans-footer button:hover[b-282xxjavc0] {
    background: var(--vh-primary-hover);
}

@media (max-width: 720px) {
    .gts-plan-grid[b-282xxjavc0] {
        grid-template-columns: 1fr;
    }

    .gts-plan-card[b-282xxjavc0] {
        min-height: 0;
    }

    .gts-plan-card > span[b-282xxjavc0] {
        min-height: 0;
    }

    .gts-plans-footer[b-282xxjavc0] {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gts-plans-footer button[b-282xxjavc0] {
        transition: none;
    }
}
/* /Pages/InterviewPipeline/Board.razor.rz.scp.css */
/* =====================================================================
   Interview Pipeline BOARD — legacy default theme (react-platform
   interview-pipeline). Legacy colors come from the design-system tokens
   (var(--vh-*) — Documentation/design-system.md): grays/blacks, primary,
   secondary, danger, success, warning. Font Inter 14/13/12.
   App accents stay on the staff accent, consumed as var(--vh-accent-staff)
   — the token itself is promoted in vh-tokens.css
   (design-system owner), preserving today's rendering. Legacy
   SEMANTIC colors are verbatim (matching bands, pills, status colors).
   ===================================================================== */

/* ===== Skeleton (legacy visual/Skeleton — 3-column shimmer) ===== */
.ipb-skeleton[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 425px));
    gap: 12px;
    margin-top: 12px;
}
.ipb-skel-col[b-l2vsdp8clu] {
    background: var(--vh-gray-10);
    border-radius: 6px;
    padding: 0 10px 10px;
    min-height: 420px;
}
.ipb-skel-bar[b-l2vsdp8clu], .ipb-skel-card[b-l2vsdp8clu] {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--vh-gray-20) 25%, var(--vh-gray-10) 37%, var(--vh-gray-20) 63%);
    background-size: 400% 100%;
    animation: ipb-shimmer-b-l2vsdp8clu 1.4s ease infinite;
}
.ipb-skel-bar[b-l2vsdp8clu] { height: 50px; margin: 0 -10px; border-radius: 6px 6px 0 0; }
.ipb-skel-card[b-l2vsdp8clu] { height: 210px; margin-top: 12px; }

@keyframes ipb-shimmer-b-l2vsdp8clu {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ===== Page header (legacy visual/Header) ===== */
.ipb-header[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--vh-gray-30);
    font-family: var(--vh-font-primary);
}

.ipb-head-left[b-l2vsdp8clu] { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
.ipb-head-right[b-l2vsdp8clu] { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }

/* Icon-only back arrow (legacy icon-arrow-left-menu, 20px) */
.ipb-back[b-l2vsdp8clu] { color: var(--vh-gray-90); font-size: 18px; text-decoration: none; padding: 2px 6px 2px 0; }
.ipb-back:hover[b-l2vsdp8clu] { color: var(--vh-accent-staff); }

.ipb-headline-link[b-l2vsdp8clu] { text-decoration: none; min-width: 0; }
.ipb-headline[b-l2vsdp8clu] {
    font-size: 20px;
    font-weight: 700;
    color: var(--vh-gray-90);
    margin: 0;
    max-width: clamp(220px, 28vw, 430px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipb-headline-link:hover .ipb-headline[b-l2vsdp8clu] { color: var(--vh-primary); }

/* Status pill — JobStatus colours (2 Active, 0 Closed, 6 In Review, 7 Declined) */
.ipb-status[b-l2vsdp8clu] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 1rem;
    padding: 2px 9px;
    background: var(--vh-surface-soft);
    color: var(--vh-body);
    white-space: nowrap;
}
.ipb-status-s2[b-l2vsdp8clu] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); }   /* Active */
.ipb-status-s0[b-l2vsdp8clu] { background: var(--vh-gray-30); color: var(--vh-gray-90); }   /* Closed */
.ipb-status-s1[b-l2vsdp8clu] { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); }   /* On Hold */
.ipb-status-s3[b-l2vsdp8clu] { background: var(--vh-tonal-blue-bg); color: var(--vh-tonal-blue-text); }   /* Hired */
.ipb-status-s6[b-l2vsdp8clu] { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); }   /* Under Review */
.ipb-status-s7[b-l2vsdp8clu] { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); }   /* Declined */

/* ⓘ job-info dropdown (legacy StyledJobInfoMenu: 275px, 33/24 padding) */
.ipb-info[b-l2vsdp8clu] { position: relative; }
.ipb-info-btn[b-l2vsdp8clu] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-gray-60);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.ipb-info-btn:hover[b-l2vsdp8clu] { color: var(--vh-primary); }
.ipb-info-backdrop[b-l2vsdp8clu] {
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: var(--vh-transparent);
}
.ipb-info-panel[b-l2vsdp8clu] {
    position: absolute;
    top: 1.7rem;
    left: 0;
    z-index: 1040;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-sm);
    box-shadow: var(--vh-shadow-pop);
    padding: 24px;
    min-width: 275px;
    max-width: 300px;
}
.ipb-info-row[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: 24px auto;
    gap: 9px;
    align-items: center;
    font-size: 14px;
    color: var(--vh-gray-90);
    margin-bottom: 12px;
}
.ipb-info-row:last-child[b-l2vsdp8clu] { margin-bottom: 0; }
.ipb-info-row i[b-l2vsdp8clu] { text-align: center; color: var(--vh-gray-60); }
.ipb-info-skills[b-l2vsdp8clu] { display: grid; grid-template-columns: 24px auto; gap: 9px; align-items: start; }
.ipb-info-skills i[b-l2vsdp8clu] { text-align: center; color: var(--vh-gray-60); margin-top: 4px; }
.ipb-info-skillrow[b-l2vsdp8clu] { display: flex; flex-wrap: wrap; gap: 9px; }
.ipb-ats[b-l2vsdp8clu] {
    background: var(--vh-accent-staff);
    color: var(--vh-on-primary);
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    padding: 2px 6px;
    text-align: center;
}

/* Search stays on the same row as the job title and yields width before actions wrap. */
.ipb-search[b-l2vsdp8clu] { position: relative; min-width: 190px; width: clamp(190px, 20vw, 280px); display: flex; margin: 0 6px; }
.ipb-search-input[b-l2vsdp8clu] {
    width: 100%;
    height: 38px;
    font-family: inherit;
    font-size: 14px;
    color: var(--vh-gray-90);
    border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius-sm);
    outline: none;
    background: var(--vh-surface);
    box-shadow: 0 1px 2px rgb(var(--vh-black-rgb) / 6%);
    padding: 0 64px 0 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ipb-search-input[b-l2vsdp8clu]::placeholder { color: var(--vh-black-40); }
.ipb-search-input:focus[b-l2vsdp8clu] {
    border-color: var(--vh-primary);
    box-shadow: 0 0 0 3px rgb(var(--vh-primary-rgb) / 14%);
}
.ipb-search-btn[b-l2vsdp8clu] {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 28px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vh-radius-sm);
    border: 1px solid var(--vh-primary);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: 13px;
    cursor: pointer;
    transition: filter .2s ease;
}
.ipb-search-btn:hover[b-l2vsdp8clu] { filter: brightness(.9); }
.ipb-search-clear[b-l2vsdp8clu] {
    position: absolute;
    right: 41px;
    top: 5px;
    height: 28px;
    width: 26px;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-gray-60);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--vh-radius-sm);
}
.ipb-search-clear:hover[b-l2vsdp8clu] { background: var(--vh-gray-30); }

/* Flat header action buttons (legacy JobActionsContainer: 13px --vh-gray-80, icon+label) */
.ipb-hbtn[b-l2vsdp8clu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-gray-80);
    font-family: inherit;
    font-size: 13px;
    padding: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.ipb-hbtn:hover[b-l2vsdp8clu] { color: var(--vh-primary); }
.ipb-hbtn:disabled[b-l2vsdp8clu] { color: var(--vh-gray-40); cursor: default; }
.ipb-hbtn i[b-l2vsdp8clu] { font-size: 14px; }

/* Clear Filters (legacy ButtonClearFilters — renders only while the
   FilterPipeline filters are active; secondary-token text button). */
.ipb-clearfilters[b-l2vsdp8clu] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.ipb-clearfilters:hover[b-l2vsdp8clu] { text-decoration: underline; }

/* Sorting dropdown (legacy renderSortingDrowpdown) — shared VhDropdown skinned
   as a flat header button (same look as .ipb-hbtn; legacy trigger has no caret). */
.ipb-sortwrap[b-l2vsdp8clu]  .vh-dd-btn {
    border: none;
    background: var(--vh-transparent);
    padding: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--vh-gray-80);
}
.ipb-sortwrap[b-l2vsdp8clu]  .vh-dd-btn:hover { background: var(--vh-transparent); color: var(--vh-primary); }
.ipb-sortwrap[b-l2vsdp8clu]  .vh-dd-icon { font-size: 14px; color: inherit; }
.ipb-sortwrap[b-l2vsdp8clu]  .vh-dd-caret { display: none; }
.ipb-sortwrap[b-l2vsdp8clu]  .vh-dd-menu { min-width: 150px; z-index: 60; }
.ipb-sortwrap[b-l2vsdp8clu]  .vh-dd-backdrop { z-index: 59; }
.ipb-sortwrap[b-l2vsdp8clu]  .vh-dd-item { font-size: 13px; }

/* Collaborators avatar row — 30px circles, -7px overlap (legacy CollaboratorsContainer) */
.ipb-collabs-wrap[b-l2vsdp8clu] { position: relative; margin-left: 24px; }
.ipb-collabs[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    border: none;
    background: var(--vh-transparent);
    padding: 0;
    cursor: pointer;
}
.ipb-collabs.static[b-l2vsdp8clu] { cursor: default; }
.ipb-collab[b-l2vsdp8clu] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vh-black-10);
    color: var(--vh-body);
    font-weight: 600;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -7px;
    flex: 0 0 30px;
}
.ipb-collab:first-child[b-l2vsdp8clu] { margin-left: 0; }
.ipb-collab img[b-l2vsdp8clu] { width: 100%; height: 100%; object-fit: cover; }
.ipb-collab.add[b-l2vsdp8clu] { background: var(--vh-gray-30); color: var(--vh-gray-60); font-size: 12px; z-index: 2; }

/* Members dropdown (legacy StyledCollaboratorsMenu) */
.ipb-collab-menu[b-l2vsdp8clu] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-sm);
    box-shadow: 0 2px 10px rgb(var(--vh-black-rgb) / 40%);
    padding: 0 0 6px;
    min-width: 170px;
    max-width: 225px;
    max-height: 230px;
    overflow-y: auto;
}
.ipb-collab-row[b-l2vsdp8clu] { display: flex; align-items: center; gap: 9px; padding: 9px 12px 0; }
.ipb-collab-row .ipb-collab[b-l2vsdp8clu] { margin-left: 0; }
.ipb-collab-name[b-l2vsdp8clu] {
    font-size: 13px;
    color: var(--vh-gray-90);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipb-collab-empty[b-l2vsdp8clu] { font-size: 13px; color: var(--vh-gray-50); padding: 9px 12px 3px; }
.ipb-collab-edit[b-l2vsdp8clu] {
    width: 100%;
    margin-top: 8px;
    border: none;
    background: var(--vh-surface);
    color: var(--vh-primary);
    font-size: 13px;
    padding: 8px 0 4px;
    cursor: pointer;
    position: sticky;
    bottom: 0;
}
.ipb-collab-edit:hover[b-l2vsdp8clu] { color: var(--vh-primary-active); font-weight: 500; }

/* ===== Tab bar (legacy visual/Tabs) ===== */
.ipb-tabsbar[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--vh-gray-30);
    box-shadow: var(--vh-shadow-surface);
    margin-bottom: 12px;
    font-family: var(--vh-font-primary);
}
.ipb-tabs[b-l2vsdp8clu] { display: flex; align-items: center; gap: 30px; }
.ipb-tab[b-l2vsdp8clu] {
    position: relative;
    font-size: 14px;
    color: var(--vh-gray-90);
    cursor: pointer;
    padding: 8px 0 12px;
    text-decoration: none;
    white-space: nowrap;
}
.ipb-tab:hover[b-l2vsdp8clu] { color: var(--vh-accent-staff); }
.ipb-tab.active[b-l2vsdp8clu] { color: var(--vh-accent-staff); font-weight: 700; }
.ipb-tab.active[b-l2vsdp8clu]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--vh-accent-staff);
}
.ipb-tabs-right[b-l2vsdp8clu] { display: flex; align-items: center; gap: 10px; padding: 6px 0; }

/* Lightweight per-tab loading/error placeholder (also styles the stub tabs) */
.ipb-tab-loading[b-l2vsdp8clu],
.ipb-tab-content[b-l2vsdp8clu]  .ipb-tab-loading {
    text-align: center;
    color: var(--vh-gray-60);
    font-size: 14px;
    padding: 2.5rem 0;
}
.ipb-retry[b-l2vsdp8clu] { color: var(--vh-accent-staff); font-weight: 600; cursor: pointer; margin-left: .4rem; }

/* ===== Dashboard tab (legacy visual/Dashboard: EmployersData + JobStatus) ===== */
.ipb-dash[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 2rem;
}
@media (min-width: 992px) {
    .ipb-dash[b-l2vsdp8clu] { grid-template-columns: 2fr 1fr; gap: 2rem; }
}

/* EmployersData — 2-up chart cards */
.ipb-dash-cards[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 768px) {
    .ipb-dash-cards[b-l2vsdp8clu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ipb-dcard[b-l2vsdp8clu] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-surface);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    display: grid;
    gap: .9rem;
    align-content: start;
    min-height: 200px;
}
.ipb-dcard-title[b-l2vsdp8clu] { font-size: .9rem; font-weight: 700; color: var(--vh-ink); }
.ipb-dcard-head[b-l2vsdp8clu] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Legacy ActivityStatusTag / RejectedStatusTag count badges */
.ipb-dcard-tag[b-l2vsdp8clu] {
    display: inline-block;
    margin-left: .45rem;
    padding: .1rem .5rem;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    background: var(--vh-surface-soft);
    color: var(--vh-body);
    white-space: nowrap;
}
.ipb-dcard-tag.warn[b-l2vsdp8clu] { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); }

/* Empty chart state (legacy NoDataChart) */
.ipb-nodata[b-l2vsdp8clu] { display: grid; justify-items: center; gap: .8rem; padding: 1.4rem 0; }
.ipb-nodata-icon[b-l2vsdp8clu] { font-size: 2rem; color: var(--vh-line-strong); }
.ipb-nodata-label[b-l2vsdp8clu] {
    font-size: .78rem;
    color: var(--vh-body);
    text-align: center;
    width: 75%;
    line-height: 1.4;
}

/* Candidates Selected donut */
.ipb-donut[b-l2vsdp8clu] { display: flex; align-items: center; gap: 1rem; }
.ipb-donut-svg[b-l2vsdp8clu] { width: 128px; height: 128px; flex: 0 0 128px; }
/* the <text> nodes are raw-rendered (Razor reserves <text>), so they need ::deep */
.ipb-donut-svg[b-l2vsdp8clu]  .ipb-donut-total { font-size: 7px; font-weight: 700; fill: var(--vh-ink); }
.ipb-donut-legend[b-l2vsdp8clu] { display: grid; gap: .45rem; min-width: 0; flex: 1 1 auto; }
.ipb-legend-item[b-l2vsdp8clu] { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--vh-body); }
.ipb-legend-dot[b-l2vsdp8clu] { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; display: inline-block; }
.ipb-legend-label[b-l2vsdp8clu] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipb-legend-value[b-l2vsdp8clu] { font-weight: 700; color: var(--vh-ink); margin-left: auto; }

/* Activity chart (current-week bars + previous-week line) */
.ipb-activity-svg[b-l2vsdp8clu] { width: 100%; height: auto; }
.ipb-activity-svg[b-l2vsdp8clu]  .ipb-axis-label { font-size: 8px; fill: var(--vh-body); }
.ipb-chart-legend[b-l2vsdp8clu] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: .72rem;
    color: var(--vh-body);
}
.ipb-chart-legend > span[b-l2vsdp8clu] { display: inline-flex; align-items: center; gap: .35rem; }

/* Total Rejected — Reason | Column mini tabs + horizontal bars */
.ipb-minitabs[b-l2vsdp8clu] { display: flex; gap: .75rem; }
.ipb-minitab[b-l2vsdp8clu] { display: grid; justify-items: center; font-size: .74rem; color: var(--vh-body); cursor: pointer; }
.ipb-minitab.on[b-l2vsdp8clu] { color: var(--vh-primary-hover); font-weight: 700; }
.ipb-minitab.on[b-l2vsdp8clu]::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--vh-primary-hover); margin-top: 2px; }
.ipb-hbars[b-l2vsdp8clu] { display: grid; gap: .5rem; }
.ipb-hbar[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: minmax(70px, 120px) 1fr auto;
    gap: .5rem;
    align-items: center;
    font-size: .7rem;
    color: var(--vh-body);
}
.ipb-hbar-label[b-l2vsdp8clu] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipb-hbar-track[b-l2vsdp8clu] { background: var(--vh-surface-soft); border-radius: 4px; height: 12px; }
.ipb-hbar-fill[b-l2vsdp8clu] { background: var(--vh-primary-hover); border-radius: 4px; height: 12px; min-width: 2px; }
.ipb-hbar-value[b-l2vsdp8clu] { font-weight: 600; color: var(--vh-ink); }

/* Matching Rate rows */
.ipb-match-rows[b-l2vsdp8clu] { display: grid; }
.ipb-match-row[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--vh-ink);
    padding: .55rem 0;
}
.ipb-match-row + .ipb-match-row[b-l2vsdp8clu] { border-top: 1px solid var(--vh-surface-soft); }
.ipb-match-row strong[b-l2vsdp8clu] { font-weight: 700; }

/* JobStatus block (right) — 1st interview box + per-stage KPI rows */
.ipb-js[b-l2vsdp8clu] {
    background: var(--vh-surface-soft);
    border-radius: 8px;
    padding: 1.6rem;
    display: grid;
    gap: 1.6rem;
    align-content: start;
}
.ipb-js-first[b-l2vsdp8clu] { text-align: center; color: var(--vh-ink); font-size: .8rem; line-height: 1.4; }
.ipb-js-first-days[b-l2vsdp8clu] { display: block; font-size: 1.7rem; color: var(--vh-ink); line-height: 2.4rem; }
.ipb-js-sub[b-l2vsdp8clu] { font-size: .9rem; font-weight: 700; color: var(--vh-ink); margin-bottom: 1rem; }
.ipb-js-cards[b-l2vsdp8clu] { display: grid; }
.ipb-js-row[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: .8rem;
    align-items: center;
    padding: .55rem 0;
}
.ipb-js-row + .ipb-js-row[b-l2vsdp8clu] { border-top: 1px solid var(--vh-surface-soft); }
.ipb-js-icon[b-l2vsdp8clu] {
    width: 32px;
    height: 32px;
    background: var(--vh-primary-pale);
    color: var(--vh-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}
.ipb-js-label[b-l2vsdp8clu] { font-size: .78rem; color: var(--vh-ink); line-height: 1.3; }
.ipb-js-value[b-l2vsdp8clu] { font-size: .82rem; font-weight: 700; color: var(--vh-ink); }
.ipb-js-stat[b-l2vsdp8clu] { font-size: .7rem; font-weight: 600; white-space: nowrap; }
.ipb-js-stat.up[b-l2vsdp8clu] { color: var(--vh-success); }
.ipb-js-stat.down[b-l2vsdp8clu] { color: var(--vh-danger); }

/* ===== Board (legacy visual/Step) ===== */
.ipb-board[b-l2vsdp8clu] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    /* default align-items (stretch): every column paints its neutral background
       down to the board's bottom edge regardless of how few cards it holds */
    font-family: var(--vh-font-primary);
    /* Fallback only — vhIpb.fit() sets the exact px height at runtime so the
       board (and its horizontal scrollbar) ends at the fixed footbar edge and
       the page itself never scrolls vertically. */
    height: calc(100dvh - 290px);
    /* Classic (non-overlay) scrollbar — macOS overlay bars would keep the
       horizontal scrollbar invisible until a scroll gesture. */
    scrollbar-width: thin;
    scrollbar-color: var(--vh-gray-40) var(--vh-transparent);
}
/* While a bulk selection is active the fixed bulk pill floats over the bottom
   of the board — reserve room so it never covers the last cards/scrollbar. */
.ipb-board-bulk[b-l2vsdp8clu] { padding-bottom: 4.5rem; }
.ipb-board-syncing[b-l2vsdp8clu] {
    pointer-events: none;
    cursor: progress;
}
.ipb-board[b-l2vsdp8clu]::-webkit-scrollbar { height: 12px; }
.ipb-board[b-l2vsdp8clu]::-webkit-scrollbar-track { background: var(--vh-transparent); }
.ipb-board[b-l2vsdp8clu]::-webkit-scrollbar-thumb {
    background: var(--vh-gray-40);
    border-radius: 6px;
    border: 3px solid var(--vh-transparent);
    background-clip: padding-box;
}
.ipb-board[b-l2vsdp8clu]::-webkit-scrollbar-thumb:hover { background-color: var(--vh-gray-50); }

/* Column — 425px, --vh-gray-10, flat */
.ipb-col[b-l2vsdp8clu] {
    position: relative;
    flex: 0 0 425px;
    width: 425px;
    background: var(--vh-gray-10);
    display: flex;
    flex-direction: column;
    /* height comes from the board's align-items: stretch — the viewport-fitted
       board (vhIpb.fit) makes every column full-height, short content or not */
    transition: background-color .3s ease;
}
.ipb-col-fyr[b-l2vsdp8clu] { background: var(--vh-blue-tint); }                 /* "For your Review" primary tint */
.ipb-col-over[b-l2vsdp8clu] { background: var(--vh-gray-30); }                /* card drag hover (legacy --vh-gray-30) */
.ipb-col-reorder[b-l2vsdp8clu] { outline: 2px dashed var(--vh-accent-staff); outline-offset: -2px; }   /* column reorder target */

/* Blocked drop — a quiet tonal wash keeps the constraint clear without turning
   the whole column into an alarm surface. */
.ipb-col-blocked[b-l2vsdp8clu] {
    background: var(--vh-tonal-red-bg);
    box-shadow: inset 0 0 0 1px var(--vh-tonal-red-bd);
    cursor: not-allowed;
}
.ipb-col-blocked[b-l2vsdp8clu]::after {
    content: "Can't move here";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 12px;
    border: 1px solid var(--vh-tonal-red-bd);
    border-radius: var(--vh-radius-chip);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-pop);
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-tonal-red-text);
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
}
.ipb-col-blocked .ipb-col-head[b-l2vsdp8clu],
.ipb-col-blocked .ipb-col-body[b-l2vsdp8clu] { opacity: .60; pointer-events: none; }

/* Column title bar — 50px flat (no colored top border) */
.ipb-col-head[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 8px;
    gap: 2px;
}

/* Hover-revealed column tools (drag handle / pencil / select-all / + / trash) */
.ipb-col-drag[b-l2vsdp8clu] {
    color: var(--vh-gray-50);
    font-size: 14px;
    padding: 4px 6px;
    cursor: grab;
    opacity: 0;
    transition: opacity .3s ease;
}
.ipb-col-drag:active[b-l2vsdp8clu] { cursor: grabbing; }
.ipb-hover-tool[b-l2vsdp8clu] { opacity: 0; transition: opacity .3s ease; }
.ipb-col:hover .ipb-col-drag[b-l2vsdp8clu],
.ipb-col:hover .ipb-hover-tool[b-l2vsdp8clu],
.ipb-hover-tool.pinned[b-l2vsdp8clu] { opacity: 1; }

.ipb-col-titlebox[b-l2vsdp8clu] { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ipb-col-name[b-l2vsdp8clu] {
    font-size: 14px;
    color: var(--vh-gray-90);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipb-col-name.fyr[b-l2vsdp8clu] { color: var(--vh-primary); font-weight: 700; }

/* Count tag — 22px, --vh-gray-30, radius 3 (legacy StepTag) */
.ipb-col-count[b-l2vsdp8clu] {
    height: 22px;
    padding: 3px 5px;
    border-radius: 3px;
    background: var(--vh-gray-30);
    color: var(--vh-gray-90);
    font-size: 13px;
    line-height: 1.2;
    margin: 0 4px;
    flex: 0 0 auto;
}

.ipb-col-right[b-l2vsdp8clu] { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ipb-tool[b-l2vsdp8clu] { color: var(--vh-gray-50); font-size: 12px; cursor: pointer; padding: 4px 5px; }
.ipb-tool:hover[b-l2vsdp8clu] { color: var(--vh-accent-staff); }
.ipb-tool.danger:hover[b-l2vsdp8clu] { color: var(--vh-danger); }

/* Column-scoped "Select All" (hover-revealed; pinned while a selection exists) */
.ipb-selectall[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--vh-gray-80);
    margin: 0 6px 0 0;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* Inline step forms (add / delete confirm) */
.ipb-step-form[b-l2vsdp8clu] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-sm);
    padding: 8px;
    margin: 0 8px 8px;
    font-size: 13px;
    color: var(--vh-gray-90);
}
.ipb-step-form-actions[b-l2vsdp8clu] { display: flex; gap: 6px; margin-top: 6px; }
.ipb-step-form-actions .btn[b-l2vsdp8clu] { padding: 2px 8px; font-size: 12px; }

/* Legacy ColumnTypeModal: a focused, column-local editor instead of an inline
   title input/type combo competing with the column header controls. */
.ipb-configure-overlay[b-l2vsdp8clu] {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 66px 10px 16px;
    background: rgb(var(--vh-white-rgb) / 76%);
    backdrop-filter: blur(5px);
}
.ipb-configure-dialog[b-l2vsdp8clu] {
    width: 100%;
    max-width: 405px;
    max-height: calc(100% - 16px);
    overflow: visible;
    padding: 22px 44px 26px;
    border-radius: 7px;
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-pop);
    color: var(--vh-gray-90);
}
.ipb-configure-head[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.ipb-configure-head h3[b-l2vsdp8clu] {
    margin: 0;
    font-family: var(--vh-font-primary);
    font-size: 15px;
    font-weight: 700;
}
.ipb-configure-close[b-l2vsdp8clu] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-gray-80);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.ipb-configure-close:hover[b-l2vsdp8clu] { color: var(--vh-primary); }
.ipb-configure-field[b-l2vsdp8clu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--vh-gray-80);
    font-size: 14px;
}
.ipb-configure-field .form-control[b-l2vsdp8clu] { min-height: 42px; font-size: 14px; }
.ipb-configure-field[b-l2vsdp8clu]  .vh-dd-btn { min-height: 44px; font-size: 14px; }
.ipb-configure-save[b-l2vsdp8clu] {
    width: 100%;
    min-height: 40px;
    margin-top: 14px;
    border: 0;
    border-radius: 3px;
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ipb-configure-save:hover:not(:disabled)[b-l2vsdp8clu] { background: var(--vh-primary-active); }
.ipb-configure-save:disabled[b-l2vsdp8clu] { opacity: .55; cursor: not-allowed; }
.ipb-configure-delete[b-l2vsdp8clu] {
    display: block;
    margin: 22px auto 0;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-gray-60);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ipb-configure-delete:hover:not(:disabled)[b-l2vsdp8clu] { color: var(--vh-danger); }
.ipb-configure-delete:disabled[b-l2vsdp8clu] { opacity: .45; cursor: not-allowed; }
.ipb-configure-confirm[b-l2vsdp8clu] {
    margin-top: 20px;
    text-align: center;
    color: var(--vh-gray-80);
    font-size: 13px;
}
.ipb-configure-confirm > div[b-l2vsdp8clu] { display: flex; justify-content: center; gap: 10px; margin-top: 9px; }
.ipb-configure-delete-confirm[b-l2vsdp8clu],
.ipb-configure-cancel-delete[b-l2vsdp8clu] {
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ipb-configure-delete-confirm[b-l2vsdp8clu] { background: var(--vh-danger); color: var(--vh-on-primary); }
.ipb-configure-cancel-delete[b-l2vsdp8clu] { background: var(--vh-gray-20); color: var(--vh-gray-90); }

.ipb-col-body[b-l2vsdp8clu] {
    padding: 0 10px 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;         /* fill the stretched column — wheel-scroll and drop work on the empty area below the cards */
    min-height: 90px;       /* drop target even when the column is empty */
    scrollbar-width: none;  /* legacy hides the column scrollbar */
}
.ipb-col-body[b-l2vsdp8clu]::-webkit-scrollbar { display: none; }

/* ===================================================================
   Candidate card — flat content surface. Hover uses border/background;
   selected keeps its inset ring and dragging keeps its distinct tint.
   =================================================================== */
.ipb-card[b-l2vsdp8clu] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;             /* 405px inside the 425px column */
    flex-shrink: 0;          /* flex item of the scrollable col-body: never squeeze the
                                card below its natural height — a squeezed card lets
                                in-flow content (e.g. the Move menu) spill under the
                                next card (legacy cards are natural-height too) */
    min-height: 207px;
    border-radius: var(--vh-radius-card-sm);
    /* Top headroom keeps the selection frame clear of the column body's
       overflow:auto top edge. */
    margin: 6px 0 12px;
    padding: 24px 33px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);       /* LINE */
    cursor: pointer;
    user-select: none;
    box-shadow: var(--vh-shadow-surface);
    transition: border-color .25s ease, background-color .2s ease;
    font-family: var(--vh-font-primary);
}
.ipb-card.tech[b-l2vsdp8clu] { min-height: 303px; }
/* Hover: primary border and quiet surface tint, with no depth shift. */
.ipb-card:hover[b-l2vsdp8clu] {
    border-color: var(--vh-primary-hover);
    background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}
/* Selected = crisp single primary frame: 1px border + 1px INSET ring (not a 2px
   translucent OUTER ring, which read as a double border and got clipped by the
   column's overflow). Inset never clips. Mirrors the React fix. */
.ipb-card.sel[b-l2vsdp8clu] {
    border-color: var(--vh-primary-hover);
    box-shadow: inset 0 0 0 1px var(--vh-primary-hover);
}
.ipb-card.dragging[b-l2vsdp8clu] {
    background: var(--vh-blue-tint);
    border-color: var(--vh-primary-hover);
    box-shadow: var(--vh-shadow-pop);
}   /* primary tint + temporary drag elevation */
.ipb-card.syncing[b-l2vsdp8clu] {
    background: var(--vh-blue-tint);
    border-color: var(--vh-primary-lighter);
    cursor: progress;
    pointer-events: none;
}   /* optimistic destination while the server confirms the move */
.ipb-col-blocked .ipb-card[b-l2vsdp8clu] { cursor: not-allowed; }

/* Selection checkbox — top-left, revealed on hover / kept while selected */
.ipb-check[b-l2vsdp8clu] {
    position: absolute;
    top: 9px;
    left: 9px;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 3;
}
.ipb-card:hover .ipb-check[b-l2vsdp8clu], .ipb-check.pinned[b-l2vsdp8clu], .ipb-check:checked[b-l2vsdp8clu] { opacity: 1; }

/* --- Card top: 45px avatar + name 16 bold + role 13 + flag/tags --- */
.ipb-card-top[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    min-height: 60px;
    gap: 0;
}
.ipb-card-avatar[b-l2vsdp8clu] { margin-right: 15px; flex: 0 0 auto; position: relative; }

/* Realtime presence — success "online now" dot pinned to the avatar corner
   (design-concepts prototypes `.ava .on`: --vh-success + surface ring). */
.ipb-online-dot[b-l2vsdp8clu] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--vh-success);
    border: 2.5px solid var(--vh-surface);
    box-shadow: 0 1px 3px rgb(var(--vh-cobalt-shadow-rgb) / 25%);
}

.ipb-avatar[b-l2vsdp8clu] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vh-surface-soft);     /* SURFACE_SOFT (initials bg overridden inline) */
    color: var(--vh-on-primary);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Premium ring in the Cobalt primary with a soft tint halo. */
.ipb-avatar.premium[b-l2vsdp8clu] { border: 2px solid var(--vh-primary-hover); box-shadow: 0 0 0 2px var(--vh-blue-tint); }
.ipb-avatar img[b-l2vsdp8clu] { width: 100%; height: 100%; object-fit: cover; }

.ipb-card-id[b-l2vsdp8clu] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ipb-name[b-l2vsdp8clu] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--vh-ink);          /* INK */
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipb-role[b-l2vsdp8clu] {
    font-size: 13px;
    color: var(--vh-muted);          /* MUTED */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipb-card-topright[b-l2vsdp8clu] { display: flex; align-items: flex-start; gap: 12px; margin-left: 15px; flex: 0 0 auto; }
/* Candidate flags are standalone signals, not tonal-pill text. Keep their
   colors aligned with the legacy red/yellow SVGs and the other pipeline boards. */
.ipb-flag-1[b-l2vsdp8clu] { color: var(--vh-candidate-flag-red); font-size: 18px; }
.ipb-flag-2[b-l2vsdp8clu] { color: var(--vh-candidate-flag-yellow); font-size: 18px; }

/* Candidate hired status / OFFER / FINAL tags as tonal Cobalt chips. */
.ipb-tags[b-l2vsdp8clu] { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ipb-tag[b-l2vsdp8clu] {
    height: 20px;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.ipb-tag.offer[b-l2vsdp8clu] { background: var(--vh-tonal-blue-bg); color: var(--vh-tonal-blue-text); border: 1px solid var(--vh-tonal-blue-bd); } /* primary tonal */
.ipb-tag.final[b-l2vsdp8clu] { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); border: 1px solid var(--vh-tonal-amber-bd); } /* amber tonal */

/* --- Card middle rows (legacy CardMiddle: 24px icon column, 18px gap, 30px rows) --- */
.ipb-card-middle[b-l2vsdp8clu] { display: flex; flex-direction: column; margin-bottom: 14px; }

.ipb-row[b-l2vsdp8clu] {
    min-height: 30px;
    display: grid;
    grid-template-columns: 24px auto;
    gap: 18px;
    align-items: center;
}
/* Lighten the FontAwesome icons (MUTED) so the card reads calm, not busy. */
.ipb-row-icon[b-l2vsdp8clu] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vh-muted);          /* MUTED */
    font-size: 18px;
}
.ipb-row-label[b-l2vsdp8clu] { font-size: 12px; color: var(--vh-body); }   /* BODY */

/* AI MATCHING BAR — track is the Cobalt soft surface, fill is the tonal color. */
.ipb-match[b-l2vsdp8clu] {
    min-height: 30px;
    display: grid;
    grid-template-columns: 24px auto 40px;
    gap: 18px;
    align-items: center;
}
.ipb-match .ipb-row-icon[b-l2vsdp8clu] { font-size: 18px; }
.ipb-match-track[b-l2vsdp8clu] {
    height: 7px;
    border-radius: 999px;
    background: var(--vh-surface-soft);     /* SURFACE_SOFT */
    overflow: hidden;
}
.ipb-match-fill[b-l2vsdp8clu] { height: 100%; border-radius: 999px; }
.ipb-match-pct[b-l2vsdp8clu] { font-size: 12px; font-weight: 700; text-align: right; }

/* Mock row label — 7px tonal Cobalt status dot (legacy MockLabel ::before) */
.ipb-mock-label[b-l2vsdp8clu] { font-size: 12px; color: var(--vh-body); display: inline-flex; align-items: center; }
.ipb-dot[b-l2vsdp8clu] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    flex: 0 0 7px;
}

/* Skills row — soft Cobalt chips (--vh-surface-soft bg, --vh-blue-deep text, --vh-line border) */
.ipb-skills-row[b-l2vsdp8clu] {
    min-height: 30px;
    display: grid;
    grid-template-columns: 24px auto;
    gap: 18px;
    align-items: flex-start;
    padding: 12px 0;
}
.ipb-skills-icon[b-l2vsdp8clu] { margin-top: 2px; }
.ipb-fullmatch[b-l2vsdp8clu] {
    position: absolute;
    bottom: -2px;
    right: -3px;
    font-size: 10px;
    color: var(--vh-tonal-green-text);          /* success tonal */
}
.ipb-skills[b-l2vsdp8clu] { display: flex; flex-wrap: wrap; gap: 9px; }
.ipb-skill[b-l2vsdp8clu] {
    min-height: 22px;
    border-radius: 8px;
    background: var(--vh-surface-soft);     /* SURFACE_SOFT */
    border: 1px solid var(--vh-line);   /* LINE */
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vh-blue-deep);          /* deep primary */
    display: inline-flex;
    align-items: center;
}

/* Interview status pill — tonal Cobalt chip (soft bg + dark text + subtle border;
   inline style supplies the per-status bg/color/border-color). */
.ipb-int-pill[b-l2vsdp8clu] {
    min-height: 22px;
    border: 1px solid var(--vh-transparent);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: fit-content;
}
.ipb-row:has(.ipb-int-pill)[b-l2vsdp8clu] { grid-template-columns: auto auto; justify-content: start; gap: 12px; }
.ipb-int-date[b-l2vsdp8clu] { font-size: 12px; color: var(--vh-muted); }   /* MUTED */

/* --- Offer/Hired info block (legacy HiredContainer) --- */
.ipb-hired[b-l2vsdp8clu] { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; min-height: 110px; }
.ipb-hired-row[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.ipb-hired-item[b-l2vsdp8clu] {
    display: grid;
    grid-template-columns: 24px auto;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--vh-body);          /* BODY */
}
.ipb-hired-item i[b-l2vsdp8clu] { color: var(--vh-muted); font-size: 17px; text-align: center; }   /* MUTED icon */
.ipb-hired-value[b-l2vsdp8clu] { font-size: 13px; font-weight: 700; color: var(--vh-ink); text-align: right; }   /* INK */
.ipb-hired-value.link[b-l2vsdp8clu] { cursor: pointer; text-decoration: none; }
.ipb-hired-value.link:hover[b-l2vsdp8clu] { color: var(--vh-primary-hover); }   /* primary hover */

/* End-employment state (legacy UnHiredContainer) */
.ipb-unhired[b-l2vsdp8clu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 26px 0 10px;
}
.ipb-unhired > span[b-l2vsdp8clu] { font-size: 14px; line-height: 150%; color: var(--vh-body); }   /* BODY */

/* --- Footer (legacy CardBottom: border-top --vh-gray-20, single row, 55px buttons). --- */
.ipb-card-bottom[b-l2vsdp8clu] {
    margin-top: auto;
    border-top: 1px solid var(--vh-line);   /* LINE */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding-top: 14px;
    min-height: 55px;
}
.ipb-card-bottom.no-border[b-l2vsdp8clu] { border-top: none; }
.ipb-foot-left[b-l2vsdp8clu] { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
/* Middle slot — the legacy 1fr column: absorbs the spare width and centers the
   days counter; also keeps the actions pushed right when there is no counter. */
.ipb-foot-mid[b-l2vsdp8clu] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ipb-foot-actions[b-l2vsdp8clu] { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Cobalt footer buttons — small, consistent. Outline (return) by default,
   primary action (Accept / Interview) and subtle (Reject / Decline / End) variants.
   Mirrors React candidate.styles Button / PrimaryButton / ButtonReject. */
.ipb-btn[b-l2vsdp8clu] {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s ease;
}
/* Soft-outline (Return hire status) */
.ipb-btn-outline[b-l2vsdp8clu] {
    color: var(--vh-primary);          /* primary */
    background: var(--vh-surface);
    border: 1px solid var(--vh-line-strong);   /* LINE_STRONG */
}
.ipb-btn-outline:hover[b-l2vsdp8clu] { border-color: var(--vh-primary-hover); background: var(--vh-blue-tint); }
.ipb-btn-outline:disabled[b-l2vsdp8clu] {
    color: var(--vh-muted);
    border-color: var(--vh-line);
    background: var(--vh-surface-soft);
    cursor: not-allowed;
}
.ipb-btn-outline:disabled:hover[b-l2vsdp8clu] { border-color: var(--vh-line); background: var(--vh-surface-soft); }
/* Primary action (Accept, Interview) */
.ipb-btn-primary[b-l2vsdp8clu] {
    color: var(--vh-on-primary);
    border: 1px solid var(--vh-transparent);
    background: var(--vh-gradient-primary);
    box-shadow: 0 6px 14px -8px rgb(var(--vh-primary-hover-rgb) / 70%);
}
.ipb-btn-primary:hover[b-l2vsdp8clu] { filter: brightness(1.04); box-shadow: 0 10px 18px -8px rgb(var(--vh-primary-hover-rgb) / 80%); }
.ipb-btn-primary:disabled[b-l2vsdp8clu] {
    color: var(--vh-muted);
    border: 1px solid var(--vh-line);
    background: var(--vh-surface-soft);
    box-shadow: none;
    cursor: not-allowed;
}
.ipb-btn-primary:disabled:hover[b-l2vsdp8clu] { filter: none; box-shadow: none; }
/* Subtle (Reject, Decline, End employment) — quiet until hover, then danger tonal */
.ipb-btn-subtle[b-l2vsdp8clu] {
    color: var(--vh-body);          /* BODY */
    background: var(--vh-surface);
    border: 1px solid var(--vh-line-strong);
}
.ipb-btn-subtle:hover[b-l2vsdp8clu] { color: var(--vh-tonal-red-text); border-color: var(--vh-tonal-red-bd); background: var(--vh-tonal-red-bg); }
.ipb-btn-subtle:disabled[b-l2vsdp8clu] {
    color: var(--vh-muted);
    border-color: var(--vh-line);
    background: var(--vh-surface-soft);
    cursor: not-allowed;
}
.ipb-btn-subtle:disabled:hover[b-l2vsdp8clu] { color: var(--vh-muted); border-color: var(--vh-line); background: var(--vh-surface-soft); }

/* Book-a-call sits in the footer-left; let it ellipsize gracefully when tight. */
.ipb-bookacall[b-l2vsdp8clu] { min-width: 0; }

/* Render-only BOOK A CALL state line — tonal Cobalt chips (soft bg + dark text) */
.ipb-call[b-l2vsdp8clu] {
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--vh-transparent);
    padding: 3px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;            /* lets the chip ellipsize inside the flex footer */
}
.ipb-call-requested[b-l2vsdp8clu] { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); border-color: var(--vh-tonal-amber-bd); }   /* amber tonal */
.ipb-call-scheduled[b-l2vsdp8clu] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); border-color: var(--vh-tonal-green-bd); }    /* success tonal */
.ipb-call-canceled[b-l2vsdp8clu] { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); border-color: var(--vh-tonal-red-bd); }     /* danger tonal */

/* Wait — days in step (quiet muted meta) */
.ipb-wait[b-l2vsdp8clu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--vh-muted);          /* MUTED */
}
.ipb-wait i[b-l2vsdp8clu] { font-size: 13px; opacity: .8; }
.ipb-wait span[b-l2vsdp8clu] { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Read-only assignee — legacy AssigneeCandidates: a bare 24px avatar, the name
   only in the tooltip (the old avatar+name chip blew the footer width budget).
   margin-left:auto right-aligns it when it wraps to its own footer row. */
.ipb-assignee[b-l2vsdp8clu] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vh-surface-soft);     /* SURFACE_SOFT */
    color: var(--vh-body);          /* BODY */
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    margin-left: auto;
}
.ipb-assignee img[b-l2vsdp8clu] { width: 100%; height: 100%; object-fit: cover; }

/* Load-more sentinel (auto-paged by the IntersectionObserver; manual fallback) */
.ipb-loadmore[b-l2vsdp8clu] {
    flex-shrink: 0;          /* same col-body flex item rule as the cards */
    border: 1px dashed var(--vh-black-30);
    background: var(--vh-transparent);
    color: var(--vh-gray-80);
    font-family: inherit;
    font-size: 13px;
    border-radius: var(--vh-radius-sm);
    padding: 6px;
    cursor: pointer;
    margin-bottom: 10px;
}
.ipb-loadmore:hover:not(:disabled)[b-l2vsdp8clu] { color: var(--vh-primary); border-color: var(--vh-primary); }

/* ===== Bulk action pill (legacy ActionsOnMultiSelected — 678×52, radius 90) ===== */
.ipb-bulkbar[b-l2vsdp8clu] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 35px;
    z-index: 100;
    width: 678px;
    max-width: 94vw;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 37px;
    background: var(--vh-black-10);
    border: 1px solid var(--vh-black-20);
    border-radius: 90px;
    color: var(--vh-gray-90);
    font-family: var(--vh-font-primary);
    font-size: 13px;
}
.ipb-bulk-count[b-l2vsdp8clu] { font-weight: 700; white-space: nowrap; }
.ipb-bulk-actions[b-l2vsdp8clu] { display: flex; align-items: center; gap: 4px; }
.ipb-bulk-btn[b-l2vsdp8clu] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-gray-90);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 4px;
    white-space: nowrap;
}
.ipb-bulk-btn i[b-l2vsdp8clu] { margin: 0 9px; color: var(--vh-gray-80); }
.ipb-bulk-btn:hover:not(:disabled)[b-l2vsdp8clu] { color: var(--vh-primary); }
.ipb-bulk-btn:hover:not(:disabled) i[b-l2vsdp8clu] { color: var(--vh-primary); }
.ipb-bulk-btn:disabled[b-l2vsdp8clu] { color: var(--vh-black-30); cursor: not-allowed; }
.ipb-bulk-btn:disabled i[b-l2vsdp8clu] { color: var(--vh-black-30); }
.ipb-bulk-clear[b-l2vsdp8clu] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-primary-hover);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.ipb-bulk-clear:hover[b-l2vsdp8clu] { color: var(--vh-primary); }

/* "Move to" dropdown over the pill */
.ipb-bulk-backdrop[b-l2vsdp8clu] {
    position: fixed;
    inset: 0;
    z-index: 99;
    border: 0;
    background: var(--vh-transparent);
    cursor: default;
}
.ipb-bulk-movewrap[b-l2vsdp8clu] { position: relative; }
.ipb-bulk-movemenu[b-l2vsdp8clu] {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    z-index: 110;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-sm);
    box-shadow: var(--vh-shadow-pop);
    padding: 6px 0;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.ipb-bulk-movemenu a[b-l2vsdp8clu] { font-size: 14px; color: var(--vh-gray-90); cursor: pointer; padding: 10px 24px; white-space: nowrap; }
.ipb-bulk-movemenu a:hover[b-l2vsdp8clu] { background: var(--vh-gray-20); }

/* ===== Modal reason lists (decline + reject) ===== */
.ipb-reasons[b-l2vsdp8clu] { display: flex; flex-direction: column; gap: .35rem; max-height: 300px; overflow-y: auto; }
.ipb-reason[b-l2vsdp8clu] {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .8rem;
    color: var(--vh-gray-90);
    cursor: pointer;
    margin: 0;
}
.ipb-reason input[b-l2vsdp8clu] { margin-top: .15rem; }

/* ===== Calendar Settings + setup alert + BOOK A CALL (w9-calendar) ===== */

/* Tab-bar alert (legacy CalendarContainer FiAlertOctagon + --vh-orange-400 text) */
.ipb-cal-alert[b-l2vsdp8clu] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--vh-orange-400);
    font-size: .8rem;
    font-weight: 600;
    margin-right: .75rem;
    white-space: nowrap;
}

/* Calendar Settings button (legacy ButtonCalendar — primary-bordered pill) */
.ipb-calset-btn[b-l2vsdp8clu] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-primary);
    color: var(--vh-primary);
    border-radius: var(--vh-radius);
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
}
.ipb-calset-btn:hover[b-l2vsdp8clu] { background: var(--vh-blue-tint); }

/* Active BOOK A CALL — the actionable call state: rendered as a small Cobalt
   primary button (.ipb-btn .ipb-btn-primary). The flex-wrap footer guarantees it
   never collides with the days counter or the actions; busy = wait cursor. */
.ipb-bookacall:disabled[b-l2vsdp8clu] { cursor: wait; }

/* Offer modal — immigration block (legacy Salary modal) */
.ipb-offer-imm-yn[b-l2vsdp8clu] { display: flex; gap: 1.2rem; }
.ipb-offer-imm-yn label[b-l2vsdp8clu] { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--vh-gray-90); margin: 0; }
.ipb-offer-imm-yn input[b-l2vsdp8clu] { accent-color: var(--vh-primary); }
.ipb-offer-sendemail[b-l2vsdp8clu] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* =====================================================================
   SMART ACTIONS (w12-smartactions) — column ⚡ + actions panel + add modal
   (legacy SmartActions/ColumnActions + SmartActionsList + ModalAddSmartAction)
   ===================================================================== */

.ipb-boltwrap[b-l2vsdp8clu] { position: relative; display: flex; align-items: center; }

/* Legacy LightningIcon — always visible, opacity .2 when no actions */
.ipb-bolt[b-l2vsdp8clu] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-raw-f5a623);             /* legacy lightning.svg accent */
    font-size: 12px;
    padding: 4px 5px;
    cursor: pointer;
    opacity: .2;
    transition: opacity .2s;
}
.ipb-bolt.on[b-l2vsdp8clu], .ipb-bolt:hover[b-l2vsdp8clu] { opacity: 1; }

/* Anchored panel (legacy SmartActionsList StyledMenu) */
.ipb-sa-panel[b-l2vsdp8clu] {
    position: absolute;
    top: calc(100% + 8px);
    right: -6px;
    z-index: 70;
    width: 360px;
    background: var(--vh-surface);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgb(var(--vh-black-rgb) / 25%);
    padding: 6px 0 0;
    cursor: default;
}

.ipb-sa-items[b-l2vsdp8clu] { max-height: 320px; overflow-y: auto; }

.ipb-sa-item[b-l2vsdp8clu] {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--vh-gray-20);
}
.ipb-sa-item:last-child[b-l2vsdp8clu] { border-bottom: 0; }

/* Icon trio — arrow ⚡ action (legacy primary rounded squares) */
.ipb-sa-icons[b-l2vsdp8clu] { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ipb-sa-icons i[b-l2vsdp8clu] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--vh-primary-hover);        /* legacy primary-hover tone */
    color: var(--vh-on-primary);
    font-size: 12px;
}
.ipb-sa-icons i.fa-bolt[b-l2vsdp8clu] {
    width: auto;
    height: auto;
    background: var(--vh-transparent);
    color: var(--vh-raw-f5a623);
    font-size: 11px;
}

.ipb-sa-info[b-l2vsdp8clu] { font-size: 13px; color: var(--vh-gray-90); line-height: 1.45; }
.ipb-sa-info i[b-l2vsdp8clu] { color: var(--vh-gray-60); }

.ipb-sa-actions[b-l2vsdp8clu] { display: flex; justify-content: space-between; margin-top: 8px; }
.ipb-sa-actions a[b-l2vsdp8clu] { font-size: 13px; font-weight: 600; color: var(--vh-primary-hover); cursor: pointer; }
.ipb-sa-actions a.rm[b-l2vsdp8clu] { margin-left: auto; }
.ipb-sa-actions a:hover[b-l2vsdp8clu] { text-decoration: underline; }

.ipb-sa-note[b-l2vsdp8clu] { padding: 14px 16px; font-size: 13px; color: var(--vh-gray-60); }

/* Footer "+ Add Smart action" (legacy BottomContent) */
.ipb-sa-addbtn[b-l2vsdp8clu] {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--vh-gray-20);
    background: var(--vh-transparent);
    color: var(--vh-primary-hover);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 0 0 8px 8px;
}
.ipb-sa-addbtn:hover[b-l2vsdp8clu] { background: var(--vh-gray-10); }

/* Add modal — action chooser (legacy RenderListOfActions) */
.ipb-sa-chooser[b-l2vsdp8clu] { display: flex; flex-direction: column; gap: 10px; }
.ipb-sa-choice[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vh-gray-90);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: left;
}
.ipb-sa-choice:hover[b-l2vsdp8clu] { border-color: var(--vh-primary-hover); background: var(--vh-blue-tint); }
.ipb-sa-choice .ipb-sa-icons[b-l2vsdp8clu] { margin-bottom: 0; }

.ipb-sa-formhead[b-l2vsdp8clu] {
    font-size: .9rem;
    font-weight: 700;
    color: var(--vh-gray-90);
    margin-bottom: 12px;
}
.ipb-sa-formhead i[b-l2vsdp8clu] { color: var(--vh-gray-60); }

/* Email delay picker (legacy ContainerDelayTime) */
.ipb-sa-delay[b-l2vsdp8clu] { display: flex; align-items: center; gap: 6px; }
.ipb-sa-delaynum[b-l2vsdp8clu] { width: 64px; }
.ipb-sa-delayopt[b-l2vsdp8clu] {
    border: 1px solid var(--vh-gray-30);
    background: var(--vh-surface);
    color: var(--vh-gray-60);
    border-radius: var(--vh-radius-md);
    font-size: .8rem;
    padding: 5px 12px;
    cursor: pointer;
}
.ipb-sa-delayopt.on[b-l2vsdp8clu] {
    background: var(--vh-primary-hover);
    border-color: var(--vh-primary-hover);
    color: var(--vh-on-primary);
    font-weight: 600;
}

.ipb-sa-fixedrow[b-l2vsdp8clu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--vh-gray-60);
    border: 1px solid var(--vh-gray-20);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.ipb-sa-doclink[b-l2vsdp8clu] { font-size: .8rem; color: var(--vh-primary-hover); }

/* ---- Candidate profile MODAL over the board (legacy ProfileDetailModal) ----
   ExtraLarge modal hosting the full /vanhacker view; let the (tall) body scroll
   inside the modal instead of pushing the page. The modal chrome is rendered by the
   Blazorise Modal child components, so ::deep is required to reach the .modal-content
   / .modal-body that carry our pass-through classes. */
/* NOTE: the profile-modal sizing (dialog width + body max-height) lives in the GLOBAL
   sheet wwwroot/css/vh-overrides.css (.vh-profile-modal-wrap …) — Blazorise renders the
   modal in a .focus-trap outside this component's CSS scope, so ::deep can't reach it. */
/* /Pages/InterviewPipeline/BoardFilterModal.razor.rz.scp.css */
/* Board Filters modal — legacy FilterPipeline look (NewModal 700px, "Filters"
   header, scrollable sections, bottom Cancel/Apply). Visual language matches
   the other pipeline modals (EditJobCollaboratorsModal). */

.ipf-backdrop[b-xmzmf99yl8] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--vh-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ipf-modal[b-xmzmf99yl8] {
    background: var(--vh-surface);
    border-radius: 2px;               /* legacy NewModal borderRadius="2px" */
    width: 700px;                     /* legacy maxWidth="700px" */
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    box-shadow: var(--vh-shadow-modal);
}

/* ---- header ---- */
.ipf-head[b-xmzmf99yl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--vh-gray-30);
}
.ipf-title[b-xmzmf99yl8] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--vh-black-90); }
.ipf-close[b-xmzmf99yl8] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-black-50);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .35rem;
    border-radius: .35rem;
}
.ipf-close:hover[b-xmzmf99yl8] { color: var(--vh-black-90); background: var(--vh-gray-20); }

/* ---- scrollable content ---- */
.ipf-content[b-xmzmf99yl8] {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ipf-row[b-xmzmf99yl8] { display: flex; flex-direction: column; gap: .45rem; padding-top: .85rem; border-top: 1px solid var(--vh-black-10); }
.ipf-row:first-child[b-xmzmf99yl8] { border-top: 0; padding-top: 0; }
.ipf-label[b-xmzmf99yl8] { font-size: .82rem; font-weight: 700; color: var(--vh-black-90); }
.ipf-sublabel[b-xmzmf99yl8] { font-size: .78rem; color: var(--vh-gray-90); min-width: 64px; }
.ipf-sub[b-xmzmf99yl8] { display: flex; align-items: flex-start; gap: .6rem; margin-top: .3rem; }
.ipf-sub .ipf-combo-wrap[b-xmzmf99yl8] { flex: 1; }

/* ---- inputs / combos ---- */
.ipf-input[b-xmzmf99yl8] {
    width: 100%;
    border: 1px solid var(--vh-black-20);
    border-radius: 2px;
    padding: .42rem .6rem;
    font-size: .82rem;
    color: var(--vh-black-90);
    background: var(--vh-surface);
    outline: none;
}
.ipf-input:focus[b-xmzmf99yl8] { border-color: var(--vh-primary); }
.ipf-input:disabled[b-xmzmf99yl8] { background: var(--vh-surface-soft); color: var(--vh-black-40); cursor: not-allowed; }
.ipf-num[b-xmzmf99yl8] { max-width: 150px; }

.ipf-combo-wrap[b-xmzmf99yl8] { display: flex; flex-direction: column; gap: .35rem; }
.ipf-combo[b-xmzmf99yl8] { position: relative; }
.ipf-list[b-xmzmf99yl8] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius);
    box-shadow: 0 10px 24px rgb(var(--vh-raw-rgb-17-24-39) / 18%);
}
.ipf-item[b-xmzmf99yl8] { padding: .42rem .6rem; font-size: .82rem; color: var(--vh-black-90); cursor: pointer; }
.ipf-item:hover[b-xmzmf99yl8] { background: var(--vh-surface-soft); }

.ipf-spin[b-xmzmf99yl8] {
    position: absolute;
    right: .55rem;
    top: .55rem;
    width: 12px;
    height: 12px;
    border: 2px solid var(--vh-black-20);
    border-top-color: var(--vh-primary);
    border-radius: 50%;
    animation: ipf-rot-b-xmzmf99yl8 .7s linear infinite;
}
@keyframes ipf-rot-b-xmzmf99yl8 { to { transform: rotate(360deg); } }

/* ---- chips ---- */
.ipf-chips[b-xmzmf99yl8] { display: flex; flex-wrap: wrap; gap: .3rem; }
.ipf-chip[b-xmzmf99yl8] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--vh-gray-20);        /* ~react-select multiValue neutral */
    color: var(--vh-black-90);
    border-radius: 2px;
    padding: .18rem .45rem;
    font-size: .78rem;
}
.ipf-chip-x[b-xmzmf99yl8] { color: var(--vh-black-50); cursor: pointer; font-size: .72rem; line-height: 1; }
.ipf-chip-x:hover[b-xmzmf99yl8] { color: var(--vh-danger); }

/* ---- checkbox groups ---- */
.ipf-checks[b-xmzmf99yl8] { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.ipf-checks-col[b-xmzmf99yl8] { flex-direction: column; gap: .4rem; }
.ipf-check[b-xmzmf99yl8] { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--vh-black-90); cursor: pointer; }
.ipf-check input[b-xmzmf99yl8] { accent-color: var(--vh-primary); cursor: pointer; }

/* ---- skills block ---- */
.ipf-skill-head[b-xmzmf99yl8], .ipf-skill-row[b-xmzmf99yl8] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(96px, .9fr) minmax(0, 1.6fr) 34px;
    gap: .5rem;
    align-items: center;
}
.ipf-skill-head[b-xmzmf99yl8] { margin-bottom: .15rem; }
.ipf-skill-row[b-xmzmf99yl8] { margin-bottom: .35rem; }
.ipf-chip-skill[b-xmzmf99yl8] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ipf-counter[b-xmzmf99yl8] { display: inline-flex; align-items: center; border: 1px solid var(--vh-black-20); border-radius: 2px; }
.ipf-counter-btn[b-xmzmf99yl8] {
    border: 0;
    background: var(--vh-surface-soft);
    width: 26px;
    height: 28px;
    font-size: .9rem;
    color: var(--vh-black-90);
    cursor: pointer;
}
.ipf-counter-btn:hover[b-xmzmf99yl8] { background: var(--vh-blue-tint); }
.ipf-counter-num[b-xmzmf99yl8] { min-width: 30px; text-align: center; font-size: .82rem; }

.ipf-scorepick[b-xmzmf99yl8] { display: flex; flex-wrap: wrap; gap: .25rem; }
.ipf-score-btn[b-xmzmf99yl8] {
    border: 1px solid var(--vh-black-20);
    background: var(--vh-surface);
    border-radius: 2px;
    font-size: .72rem;
    padding: .2rem .4rem;
    color: var(--vh-gray-90);
    cursor: pointer;
}
.ipf-score-btn.on[b-xmzmf99yl8] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }

.ipf-del[b-xmzmf99yl8] { border: 0; background: var(--vh-transparent); color: var(--vh-black-50); cursor: pointer; padding: .25rem; }
.ipf-del:hover[b-xmzmf99yl8] { color: var(--vh-danger); }

.ipf-addskill-row[b-xmzmf99yl8] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ipf-addskill[b-xmzmf99yl8] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-primary);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: .2rem 0;
}
.ipf-addskill:hover[b-xmzmf99yl8] { text-decoration: underline; }

/* legacy MUI Switch approximation */
.ipf-switch[b-xmzmf99yl8] { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--vh-gray-90); cursor: pointer; }
.ipf-switch input[b-xmzmf99yl8] { position: absolute; opacity: 0; pointer-events: none; }
.ipf-switch-track[b-xmzmf99yl8] {
    width: 30px;
    height: 16px;
    border-radius: 8px;
    background: var(--vh-black-30);
    position: relative;
    transition: background .15s ease;
    flex: 0 0 auto;
}
.ipf-switch-track[b-xmzmf99yl8]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vh-color-white);   /* knob rides the colored track — stays fixed in both themes */
    transition: left .15s ease;
}
.ipf-switch input:checked + .ipf-switch-track[b-xmzmf99yl8] { background: var(--vh-primary); }
.ipf-switch input:checked + .ipf-switch-track[b-xmzmf99yl8]::after { left: 16px; }

/* ---- language pair ---- */
.ipf-lang[b-xmzmf99yl8] { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 576px) { .ipf-lang[b-xmzmf99yl8] { grid-template-columns: 1fr; } }

/* ---- ranges / sliders ---- */
.ipf-range[b-xmzmf99yl8] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ipf-range .ipf-sublabel[b-xmzmf99yl8] { min-width: 190px; }
.ipf-range-sep[b-xmzmf99yl8] { font-size: .78rem; color: var(--vh-black-50); }
.ipf-range-unit[b-xmzmf99yl8] { font-size: .78rem; color: var(--vh-black-50); }
.ipf-range-val[b-xmzmf99yl8] { font-size: .82rem; font-weight: 600; color: var(--vh-black-90); min-width: 26px; text-align: right; }
.ipf-slider[b-xmzmf99yl8] { flex: 1; min-width: 140px; accent-color: var(--vh-primary); }

/* ---- footer ---- */
.ipf-foot[b-xmzmf99yl8] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--vh-gray-30);
}
/* Footer buttons come from the shared .vh-btn-* utilities (vh-tokens.css). */
/* /Pages/InterviewPipeline/BoardInterviewsTab.razor.rz.scp.css */
/* Interviews tab (ipi-) — palette/spacing consistent with the board's ipb- styles.
   Grid mirrors the legacy InterviewsTable styled-components table
   (header + rows share the 5-column template). */

.ipi-loading[b-mpvd5wnrnc],
.ipi-empty[b-mpvd5wnrnc] {
    text-align: center;
    color: var(--vh-black-50);
    padding: 48px 0;
}

.ipi-empty-icon[b-mpvd5wnrnc] { font-size: 2rem; color: var(--vh-black-40); margin-bottom: 12px; }
.ipi-empty-title[b-mpvd5wnrnc] { font-weight: 600; color: var(--vh-black-90); }

.ipi-alert[b-mpvd5wnrnc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    border-radius: var(--vh-radius-md);
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: .85rem;
}

.ipi-alert-close[b-mpvd5wnrnc] {
    border: 0;
    background: none;
    color: var(--vh-tonal-red-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.ipi-scroll[b-mpvd5wnrnc] { overflow-x: auto; }
.ipi-table[b-mpvd5wnrnc] { min-width: 900px; padding-bottom: 24px; }

.ipi-thead[b-mpvd5wnrnc],
.ipi-row[b-mpvd5wnrnc] {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(130px, 1fr) minmax(140px, 1fr) minmax(180px, 1fr) minmax(220px, 1.2fr);
    gap: 16px;
    align-items: center;
}

.ipi-thead[b-mpvd5wnrnc] {
    border-bottom: 1px solid var(--vh-gray-30);
    padding: 10px 8px;
    color: var(--vh-black-70);
    font-size: .85rem;
}

.ipi-section[b-mpvd5wnrnc] { margin: 4px 0 12px; }

.ipi-sec-head[b-mpvd5wnrnc] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: none;
    padding: 12px 8px 6px;
    cursor: pointer;
}

.ipi-sec-head:disabled[b-mpvd5wnrnc] { cursor: default; opacity: .55; }

.ipi-sec-chevron[b-mpvd5wnrnc] {
    font-size: .6rem;
    color: var(--vh-black-70);
    transition: transform .15s ease;
}

.ipi-sec-chevron.open[b-mpvd5wnrnc] { transform: rotate(90deg); }

.ipi-sec-title[b-mpvd5wnrnc] { font-weight: 700; color: var(--vh-black-90); font-size: .9rem; }

.ipi-sec-count[b-mpvd5wnrnc] {
    border: 1px solid var(--vh-black-20);
    border-radius: 32px;
    font-size: .72rem;
    padding: 0 7px;
    color: var(--vh-black-70);
}

.ipi-row[b-mpvd5wnrnc] {
    min-height: 64px;
    padding: 6px 8px;
    border-radius: 10px;
}

.ipi-row:hover[b-mpvd5wnrnc] { background: var(--vh-gray-10); }

.ipi-cand[b-mpvd5wnrnc] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ipi-cand-info[b-mpvd5wnrnc] { display: flex; flex-direction: column; min-width: 0; }

.ipi-avatar[b-mpvd5wnrnc] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 42px;
}

.ipi-avatar-fallback[b-mpvd5wnrnc] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vh-success);
    color: var(--vh-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex: 0 0 42px;
}

.ipi-name[b-mpvd5wnrnc] {
    color: var(--vh-black-90);
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipi-sub[b-mpvd5wnrnc] {
    color: var(--vh-black-40);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipi-cell[b-mpvd5wnrnc] { color: var(--vh-black-70); font-size: .85rem; }

/* Status variants (legacy WaitingApprovalStatus / CancelledInfoStatus / RequestedInfoStatus) */
.ipi-pill-waiting[b-mpvd5wnrnc] {
    border: 1px solid var(--vh-black-20);
    color: var(--vh-tonal-amber-text);
    border-radius: 12px;
    padding: 1px 10px;
    font-size: .75rem;
    white-space: nowrap;
}

.ipi-status-cancelled[b-mpvd5wnrnc] { color: var(--vh-tonal-red-text); font-size: .85rem; }
.ipi-status-muted[b-mpvd5wnrnc] { color: var(--vh-black-70); font-size: .85rem; }
.ipi-muted[b-mpvd5wnrnc] { color: var(--vh-black-50); font-size: .82rem; }

.ipi-actions[b-mpvd5wnrnc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ipi-action-set[b-mpvd5wnrnc] {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}

.ipi-action-menu[b-mpvd5wnrnc] {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 5;
}

.ipi-menu-trigger[b-mpvd5wnrnc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: var(--vh-radius);
    background: var(--vh-transparent);
    color: var(--vh-black-70);
    cursor: pointer;
}

.ipi-menu-trigger:hover[b-mpvd5wnrnc],
.ipi-menu-trigger:focus-visible[b-mpvd5wnrnc] {
    background: var(--vh-gray-20);
    color: var(--vh-black-90);
    outline: none;
}

.ipi-menu-list[b-mpvd5wnrnc] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--vh-radius-sm);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-pop);
}

.ipi-menu-list button[b-mpvd5wnrnc] {
    width: 100%;
    padding: 12px 35px;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-black-90);
    font: inherit;
    font-size: .85rem;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.ipi-menu-list button:hover[b-mpvd5wnrnc],
.ipi-menu-list button:focus-visible[b-mpvd5wnrnc] {
    background: var(--vh-gray-10);
    outline: none;
}

/* Legacy OutlinedActionButton */
.ipi-btn[b-mpvd5wnrnc] {
    border: 1px solid var(--vh-accent-staff);
    color: var(--vh-accent-staff);
    background: var(--vh-transparent);
    border-radius: var(--vh-radius);
    padding: 5px 14px;
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
}

.ipi-btn:hover[b-mpvd5wnrnc] { background: var(--vh-gray-10); }

.ipi-btn:disabled[b-mpvd5wnrnc] {
    border-color: var(--vh-black-40);
    color: var(--vh-black-40);
    cursor: default;
    background: var(--vh-transparent);
}

.ipi-btn-ghost[b-mpvd5wnrnc] {
    border: 0;
    background: none;
    color: var(--vh-black-50);
    font-size: .78rem;
    cursor: pointer;
}

.ipi-btn-ghost:hover[b-mpvd5wnrnc] { color: var(--vh-black-70); }

/* Inline reason prompt (legacy RenderReasonTo) */
.ipi-reason[b-mpvd5wnrnc] {
    /* left inset = .ipi-avatar 42px + .ipi-cand gap 12px + .ipi-row padding 8px */
    margin: 2px 8px 10px calc(42px + 12px + 8px);
    padding: 10px 12px;
    background: var(--vh-gray-10);
    border: 1px solid var(--vh-gray-30);
    border-radius: 8px;
    max-width: 620px;
}

.ipi-reason textarea[b-mpvd5wnrnc] {
    width: 100%;
    border: 1px solid var(--vh-black-20);
    border-radius: var(--vh-radius);
    padding: 8px 10px;
    font-size: .85rem;
    color: var(--vh-black-70);
    resize: vertical;
    outline: none;
}

.ipi-reason textarea:focus[b-mpvd5wnrnc] { border-color: var(--vh-accent-staff); }

.ipi-reason-actions[b-mpvd5wnrnc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.ipi-error[b-mpvd5wnrnc] { color: var(--vh-tonal-red-text); font-size: .8rem; margin-top: 4px; }
/* /Pages/InterviewPipeline/BoardSummaryTab.razor.rz.scp.css */
/* ===== Summary tab (legacy visual/Summary) — ips- prefix ===== */

.ips-loading[b-4sdgkqmpp7] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* ----- EmptyContent ----- */
.ips-empty[b-4sdgkqmpp7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    margin-top: 3rem;
    gap: .25rem;
}

.ips-empty-img[b-4sdgkqmpp7] { font-size: 4rem; color: var(--vh-muted); }
.ips-empty-title[b-4sdgkqmpp7] { font-weight: 700; color: var(--vh-black-80); margin: .5rem 0 0; }
.ips-empty-desc[b-4sdgkqmpp7] { color: var(--vh-body); line-height: 24px; margin: 0; }

.ips-empty-btn[b-4sdgkqmpp7] {
    background: var(--vh-accent-staff);
    color: var(--vh-on-primary);
    border: none;
    height: 45px;
    border-radius: 120px;
    padding: 0 1.5rem;
    font-weight: 700;
    margin-top: 1.5rem;
    cursor: pointer;
}
.ips-empty-btn:hover[b-4sdgkqmpp7] { opacity: .85; }

/* ----- 3-column grid (legacy ContentContainer / Left-Middle-Right) ----- */
.ips-grid[b-4sdgkqmpp7] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: .75rem 0;
}

.ips-col[b-4sdgkqmpp7] { display: flex; flex-direction: column; gap: 1rem; }
.ips-left[b-4sdgkqmpp7], .ips-right[b-4sdgkqmpp7] { flex: 0 0 260px; min-width: 220px; }
.ips-middle[b-4sdgkqmpp7] { flex: 1 1 0; min-width: 0; }

@media (max-width: 992px) {
    .ips-grid[b-4sdgkqmpp7] { flex-direction: column; }
    .ips-left[b-4sdgkqmpp7], .ips-right[b-4sdgkqmpp7] { flex: 1 1 auto; width: 100%; }
}

/* ----- Card (legacy Components/Card) ----- */
.ips-card[b-4sdgkqmpp7] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    padding: 1rem 1.25rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    box-shadow: var(--vh-shadow-surface);
}

.ips-card-head[b-4sdgkqmpp7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.ips-head-title[b-4sdgkqmpp7] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--vh-black-90);
}
.ips-head-title i[b-4sdgkqmpp7] { color: var(--vh-accent-staff); }

.ips-line[b-4sdgkqmpp7] { height: 1px; width: 100%; background: var(--vh-line); }

.ips-card-body[b-4sdgkqmpp7] { display: flex; flex-direction: column; gap: .8rem; }

.ips-box[b-4sdgkqmpp7] { display: flex; flex-direction: column; gap: .25rem; }
.ips-row[b-4sdgkqmpp7] { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.ips-tags[b-4sdgkqmpp7] { display: flex; flex-wrap: wrap; gap: .4rem; }

.ips-label[b-4sdgkqmpp7] { font-size: .8rem; font-weight: 700; color: var(--vh-body); }

.ips-tag[b-4sdgkqmpp7] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    width: fit-content;
    border: 1px solid var(--vh-black-80);
    border-radius: 4px;
    padding: .1rem .5rem;
    font-size: .85rem;
    color: var(--vh-black-90);
}
.ips-tag.noborder[b-4sdgkqmpp7] { border: none; padding: 0; font-size: .95rem; color: var(--vh-black-80); }

/* Confidential blur (legacy blurText) */
.ips-blur[b-4sdgkqmpp7] { filter: blur(7px); user-select: none; }

/* ----- Skills pills (legacy TagSkill: main = filled, secondary = outline) ----- */
.ips-pills[b-4sdgkqmpp7] { display: flex; flex-wrap: wrap; gap: .35rem; }

.ips-skill[b-4sdgkqmpp7] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 32px;
    padding: .3rem .75rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--vh-black-80);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line-strong);
}
.ips-skill.main[b-4sdgkqmpp7] { background: var(--vh-accent-staff-soft); border-color: var(--vh-accent-staff-soft); }
.ips-skill-years[b-4sdgkqmpp7] { font-weight: 400; }

/* ----- Job Details header ----- */
.ips-jd-head[b-4sdgkqmpp7] { justify-content: space-between; flex-wrap: wrap; }

.ips-difficulty[b-4sdgkqmpp7] { margin-left: .5rem; }

.ips-jd-actions[b-4sdgkqmpp7] { display: inline-flex; align-items: center; gap: .35rem; }
.ips-jd-actions button[b-4sdgkqmpp7] {
    border: none;
    background: var(--vh-transparent);
    cursor: pointer;
    color: var(--vh-body);
    font-size: 1rem;
    padding: .2rem .35rem;
    border-radius: var(--vh-radius-md);
}
.ips-jd-actions button:hover[b-4sdgkqmpp7], .ips-jd-actions button.on[b-4sdgkqmpp7] { background: var(--vh-surface-soft); color: var(--vh-accent-staff); }
.ips-flag-red[b-4sdgkqmpp7] { color: var(--vh-danger) !important; }

/* signal strength (legacy signal low/medium/high icons) */
.ips-signal-1[b-4sdgkqmpp7] { color: var(--vh-danger); }
.ips-signal-2[b-4sdgkqmpp7] { color: var(--vh-secondary-hover); }
.ips-signal-3[b-4sdgkqmpp7] { color: var(--vh-tonal-green-text); }

/* ----- Inline panels (legacy CustomPopover) ----- */
.ips-panel[b-4sdgkqmpp7] {
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    padding: .75rem 1rem;
    background: var(--vh-surface-soft);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ips-panel-head[b-4sdgkqmpp7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--vh-black-90);
}
.ips-panel-head i[b-4sdgkqmpp7] { color: var(--vh-accent-staff); }

.ips-panel-close[b-4sdgkqmpp7] {
    margin-left: auto;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-body);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}
.ips-panel-close:hover[b-4sdgkqmpp7] { color: var(--vh-black-90); }

.ips-contact-icon[b-4sdgkqmpp7] { display: inline-flex; align-items: center; gap: .3rem; color: var(--vh-black-80); font-size: .9rem; }
.ips-contact-icon i[b-4sdgkqmpp7] { color: var(--vh-accent-staff); }

/* ----- Red flag banner (legacy FlagContainer) ----- */
.ips-redflag[b-4sdgkqmpp7] {
    background: var(--vh-tonal-red-bg);
    border-radius: var(--vh-radius-card);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
}

.ips-redflag-title[b-4sdgkqmpp7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--vh-tonal-red-text);
    font-weight: 700;
    font-size: .9rem;
}

.ips-redflag-close[b-4sdgkqmpp7] {
    margin-left: auto;
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-tonal-red-text);
    font-weight: 700;
    cursor: pointer;
}

.ips-redflag-line[b-4sdgkqmpp7] { height: 1px; width: 100%; background: var(--vh-tonal-red-text); }
.ips-redflag-msg[b-4sdgkqmpp7] { color: var(--vh-tonal-red-text); font-size: .95rem; }

/* ----- Accordions (legacy StyledAccordion) ----- */
.ips-acc[b-4sdgkqmpp7] { width: 100%; border-bottom: 1px solid var(--vh-line); }
.ips-acc:last-child[b-4sdgkqmpp7] { border-bottom: none; }

.ips-acc-head[b-4sdgkqmpp7] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--vh-transparent);
    border: none;
    cursor: pointer;
    padding: .5rem 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--vh-black-80);
}
.ips-acc-head:hover[b-4sdgkqmpp7] { color: var(--vh-accent-staff); }
.ips-acc-head i[b-4sdgkqmpp7] { color: var(--vh-muted); font-size: .8rem; }

.ips-acc-body[b-4sdgkqmpp7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .25rem 0 1rem 1.25rem;
}

.ips-acc-subtitle[b-4sdgkqmpp7] { font-weight: 700; color: var(--vh-black-80); }

/* Hiring Company */
.ips-company-name[b-4sdgkqmpp7] { display: flex; align-items: center; gap: .35rem; }
.ips-company-name a[b-4sdgkqmpp7] { color: var(--vh-primary-hover); font-weight: 700; font-size: 1.05rem; text-decoration: underline; }
.ips-fee[b-4sdgkqmpp7] { color: var(--vh-tonal-green-text); font-size: .85rem; }
.ips-company-data[b-4sdgkqmpp7] { color: var(--vh-black-80); font-size: .95rem; }
.ips-company-data a[b-4sdgkqmpp7] { color: var(--vh-primary-hover); text-decoration: underline; margin-left: .25rem; }

/* Job description / notes HTML (MarkupString content needs ::deep) */
.ips-html[b-4sdgkqmpp7] { color: var(--vh-black-80); font-size: .95rem; line-height: 150%; overflow-wrap: anywhere; }
.ips-html[b-4sdgkqmpp7]  p { margin: 0 0 .35rem; }
.ips-html[b-4sdgkqmpp7]  ul, .ips-html[b-4sdgkqmpp7]  ol { margin: 0 0 .5rem; padding-left: 1.25rem; }

/* Benefits two-column block (legacy BenefitContainer) */
.ips-benefits[b-4sdgkqmpp7] {
    display: flex;
    gap: 1rem;
    width: 100%;
    border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius-card-sm);
    padding: 1.25rem;
}

.ips-benefits-col[b-4sdgkqmpp7] { flex: 1 1 0; display: flex; flex-direction: column; gap: .75rem; }
.ips-benefits-sep[b-4sdgkqmpp7] { width: 1px; align-self: stretch; background: var(--vh-line-strong); }
.ips-benefit[b-4sdgkqmpp7] { display: inline-flex; align-items: center; gap: .5rem; color: var(--vh-body); font-size: .85rem; font-weight: 700; }
.ips-benefit i[b-4sdgkqmpp7] { color: var(--vh-accent-staff); }
.ips-nobenefits[b-4sdgkqmpp7] { color: var(--vh-muted); font-size: .85rem; font-weight: 700; }

/* Hiring process steps (legacy StepHireContainer) */
.ips-steps[b-4sdgkqmpp7] { display: flex; flex-direction: column; gap: 1rem; }
.ips-step[b-4sdgkqmpp7] { display: flex; gap: .75rem; align-items: flex-start; }

.ips-step-no[b-4sdgkqmpp7] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vh-accent-staff-soft);
    color: var(--vh-black-80);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.ips-step-body[b-4sdgkqmpp7] { display: flex; flex-direction: column; gap: .1rem; }
.ips-step-name[b-4sdgkqmpp7] { font-weight: 700; color: var(--vh-black-80); }
.ips-step-desc[b-4sdgkqmpp7] { color: var(--vh-body); font-size: .9rem; }

/* ----- Days left banner (legacy DaysLeft) ----- */
.ips-daysleft[b-4sdgkqmpp7] {
    background: var(--vh-secondary-hover);
    border: 1px solid var(--vh-secondary-hover);
    border-radius: var(--vh-radius-card);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--vh-shadow-surface);
    width: 100%;
}

.ips-daysleft-row[b-4sdgkqmpp7] { display: flex; align-items: center; gap: .5rem; color: var(--vh-raw-faf9ff); }
.ips-daysleft-row span[b-4sdgkqmpp7] { flex: 1 0 0; text-transform: uppercase; font-weight: 700; font-size: .9rem; }
.ips-info-btn[b-4sdgkqmpp7] { border: none; background: var(--vh-transparent); color: var(--vh-raw-faf9ff); cursor: pointer; font-size: 1rem; }
.ips-info-btn:hover[b-4sdgkqmpp7], .ips-info-btn.on[b-4sdgkqmpp7] { opacity: .8; }

/* ----- Salary card ----- */
.ips-salary-head[b-4sdgkqmpp7] { justify-content: space-between; }
.ips-currency[b-4sdgkqmpp7] { border-radius: 100px; }

.ips-confidential-btn[b-4sdgkqmpp7] {
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: var(--vh-radius);
    border: 1px solid var(--vh-tonal-red-text);
    background: var(--vh-danger);
    color: var(--vh-on-primary);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}
.ips-confidential-btn:hover[b-4sdgkqmpp7] { opacity: .8; }

.ips-confidential-title[b-4sdgkqmpp7] { color: var(--vh-tonal-red-text); font-weight: 700; }
.ips-confidential-msg[b-4sdgkqmpp7] { color: var(--vh-black-80); font-size: .9rem; margin: 0; }
.ips-confidential-msg b[b-4sdgkqmpp7] { color: var(--vh-tonal-red-text); }
/* /Pages/InterviewPipeline/Components/CalendarSetup/CalendarSetup.razor.rz.scp.css */
.cs-intro[b-n7yod25j09] {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vh-primary) 7%, var(--vh-transparent)), var(--vh-transparent) 48%),
        var(--vh-surface);
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(0, 1.05fr) minmax(310px, .95fr);
    min-height: 440px;
    padding: 48px;
}

.cs-intro-copy[b-n7yod25j09] { align-self: center; max-width: 560px; }
.cs-kicker[b-n7yod25j09] { align-items: center; color: var(--vh-primary); display: inline-flex; font-size: .75rem; font-weight: 800; gap: 8px; letter-spacing: .06em; margin-bottom: 16px; text-transform: uppercase; }
.cs-intro h2[b-n7yod25j09] { color: var(--vh-ink); font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 16px; }
.cs-intro p[b-n7yod25j09] { color: var(--vh-body); font-size: .95rem; line-height: 1.65; margin: 0; max-width: 540px; }
.cs-intro-points[b-n7yod25j09] { display: grid; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.cs-intro-points li[b-n7yod25j09] { align-items: center; color: var(--vh-gray-90); display: flex; font-size: .84rem; gap: 10px; }
.cs-intro-points i[b-n7yod25j09] { align-items: center; background: var(--vh-raw-e9f8ef); border-radius: 50%; color: var(--vh-success); display: inline-flex; font-size: .58rem; height: 21px; justify-content: center; width: 21px; }

.cs-ruler-preview[b-n7yod25j09] {
    align-self: center;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-surface);
    padding: 20px;
    transform: rotate(1deg);
}
.cs-ruler-head[b-n7yod25j09] { color: var(--vh-body); display: flex; font-size: .68rem; font-weight: 750; justify-content: space-between; letter-spacing: .04em; margin-bottom: 14px; text-transform: uppercase; }
.cs-ruler-preview-row[b-n7yod25j09] { align-items: center; display: grid; gap: 12px; grid-template-columns: 34px 1fr; margin: 8px 0; }
.cs-ruler-preview-row > span:first-child[b-n7yod25j09] { color: var(--vh-gray-70); font-size: .68rem; font-weight: 750; }
.cs-ruler-preview-track[b-n7yod25j09] { background: var(--vh-surface-soft); border-radius: 6px; height: 25px; overflow: hidden; position: relative; }
.cs-ruler-preview-track[b-n7yod25j09]::before, .cs-ruler-preview-track[b-n7yod25j09]::after { border-left: 1px solid var(--vh-line); content: ""; inset-block: 0; position: absolute; }
.cs-ruler-preview-track[b-n7yod25j09]::before { left: 33%; }
.cs-ruler-preview-track[b-n7yod25j09]::after { left: 66%; }
.cs-ruler-preview-row.available .cs-ruler-preview-track > span[b-n7yod25j09] { background: linear-gradient(90deg, var(--vh-primary-hover), var(--vh-primary)); border-radius: 5px; display: block; height: 100%; margin-left: 17%; width: 66%; }
.cs-ruler-preview-row.off[b-n7yod25j09] { opacity: .55; }
.cs-ruler-caption[b-n7yod25j09] { border-top: 1px solid var(--vh-line); color: var(--vh-body); font-size: .72rem; line-height: 1.45; margin-top: 16px; padding-top: 14px; }

.cs-settings[b-n7yod25j09] { box-sizing: border-box; display: grid; gap: 14px; min-height: 100%; padding: 22px; }
.cs-settings:has(> .cs-schedule)[b-n7yod25j09] { align-content: start; }
.cs-loading[b-n7yod25j09] { align-items: center; color: var(--vh-body); display: flex; gap: 16px; justify-content: center; min-height: 360px; }
.cs-loading > div[b-n7yod25j09] { display: flex; flex-direction: column; gap: 3px; }
.cs-loading strong[b-n7yod25j09] { color: var(--vh-ink); font-size: .9rem; }
.cs-loading span:last-child[b-n7yod25j09] { font-size: .78rem; }
.cs-spinner[b-n7yod25j09] { animation: cs-spin-b-n7yod25j09 .8s linear infinite; border: 3px solid var(--vh-line); border-radius: 50%; border-top-color: var(--vh-primary); height: 30px; width: 30px; }
@keyframes cs-spin-b-n7yod25j09 { to { transform: rotate(360deg); } }

.cs-notice[b-n7yod25j09] { align-items: center; background: var(--vh-surface); border: 1px solid; border-radius: 10px; display: flex; font-size: .8rem; gap: 9px; padding: 10px 12px; }
.cs-notice span[b-n7yod25j09] { flex: 1; }
.cs-notice button[b-n7yod25j09] { background: var(--vh-transparent); border: 0; color: inherit; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 4px; }
.cs-notice .cs-notice-action[b-n7yod25j09] { border: 1px solid currentColor; border-radius: var(--vh-radius-md); font-size: .68rem; font-weight: 750; min-height: 28px; padding: 4px 9px; }
.cs-notice.error[b-n7yod25j09] { background: var(--vh-danger-soft); border-color: color-mix(in srgb, var(--vh-danger) 30%, var(--vh-transparent)); color: var(--vh-danger); }
.cs-notice.success[b-n7yod25j09] { background: var(--vh-success-soft); border-color: color-mix(in srgb, var(--vh-success) 30%, var(--vh-transparent)); color: var(--vh-raw-167542); }

.cs-confirm[b-n7yod25j09] { align-items: center; background: var(--vh-blue-tint); border: 1px solid color-mix(in srgb, var(--vh-primary) 24%, var(--vh-transparent)); border-radius: var(--vh-radius-card-sm); display: grid; gap: 13px; grid-template-columns: auto 1fr auto; padding: 14px; }
.cs-confirm-icon[b-n7yod25j09] { align-items: center; background: var(--vh-surface); border-radius: 10px; color: var(--vh-primary); display: flex; height: 38px; justify-content: center; width: 38px; }
.cs-confirm-copy[b-n7yod25j09] { display: flex; flex-direction: column; gap: 2px; }
.cs-confirm-copy strong[b-n7yod25j09] { color: var(--vh-ink); font-size: .84rem; }
.cs-confirm-copy p[b-n7yod25j09] { color: var(--vh-body); font-size: .76rem; line-height: 1.45; margin: 0; }
.cs-confirm-actions[b-n7yod25j09] { display: flex; gap: 8px; }

.cs-connection[b-n7yod25j09], .cs-schedule[b-n7yod25j09] { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: 14px; padding: 18px; }
.cs-section-heading[b-n7yod25j09] { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 14px; }
.cs-section-heading h2[b-n7yod25j09] { color: var(--vh-ink); font-size: 1rem; font-weight: 750; margin: 2px 0 0; }
.cs-step[b-n7yod25j09] { color: var(--vh-primary); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cs-status[b-n7yod25j09] { align-items: center; border-radius: 999px; display: inline-flex; font-size: .68rem; font-weight: 750; gap: 7px; padding: 5px 9px; white-space: nowrap; }
.cs-status > span[b-n7yod25j09] { border-radius: 50%; height: 7px; width: 7px; }
.cs-status.connected[b-n7yod25j09] { background: var(--vh-success-soft); color: var(--vh-raw-167542); }
.cs-status.connected > span[b-n7yod25j09] { background: var(--vh-success); }
.cs-status.status-unavailable[b-n7yod25j09] { background: var(--vh-raw-fff4e5); color: var(--vh-raw-9a5b00); }
.cs-status.status-unavailable > span[b-n7yod25j09] { background: var(--vh-raw-e58a00); }
.cs-status.needs-reconnect[b-n7yod25j09] { background: var(--vh-raw-fff4e5); color: var(--vh-raw-9a5b00); }
.cs-status.needs-reconnect > span[b-n7yod25j09] { background: var(--vh-raw-e58a00); }
.cs-status.disconnected[b-n7yod25j09] { background: var(--vh-surface-soft); color: var(--vh-body); }
.cs-status.disconnected > span[b-n7yod25j09] { background: var(--vh-gray-50); }

.cs-connection-card[b-n7yod25j09] { align-items: center; background: var(--vh-surface-soft); border-radius: 11px; display: grid; gap: 13px; grid-template-columns: auto 1fr auto; padding: 13px; }
.cs-provider-mark[b-n7yod25j09] { align-items: center; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: 10px; color: var(--vh-primary); display: flex; font-size: 1rem; height: 40px; justify-content: center; width: 40px; }
.cs-provider-copy[b-n7yod25j09] { display: flex; flex-direction: column; gap: 2px; }
.cs-provider-copy strong[b-n7yod25j09] { color: var(--vh-ink); font-size: .82rem; }
.cs-provider-copy span[b-n7yod25j09] { color: var(--vh-body); font-size: .73rem; line-height: 1.4; }
.cs-provider-actions[b-n7yod25j09] { align-items: center; display: flex; gap: 12px; }

.schedule-heading[b-n7yod25j09] { align-items: end; }
.schedule-heading > div:first-child p[b-n7yod25j09] { color: var(--vh-body); font-size: .72rem; margin: 4px 0 0; }
.cs-duration[b-n7yod25j09] { border: 0; margin: 0; min-width: 0; padding: 0; }
.cs-duration legend[b-n7yod25j09] { color: var(--vh-body); font-size: .62rem; font-weight: 750; margin: 0 0 5px; text-align: right; text-transform: uppercase; }
.cs-duration-options[b-n7yod25j09] { background: var(--vh-surface-soft); border-radius: 8px; display: flex; gap: 2px; padding: 3px; }
.cs-duration-options button[b-n7yod25j09] { background: var(--vh-transparent); border: 0; border-radius: var(--vh-radius-md); color: var(--vh-body); cursor: pointer; font-size: .68rem; font-weight: 700; min-width: 38px; padding: 6px 8px; white-space: nowrap; }
.cs-duration-options button:hover[b-n7yod25j09] { color: var(--vh-primary); }
.cs-duration-options button.selected[b-n7yod25j09] { background: var(--vh-surface); box-shadow: 0 1px 4px rgb(var(--vh-raw-rgb-15-23-42) / 12%); color: var(--vh-primary); }

.cs-week[b-n7yod25j09] { border: 1px solid var(--vh-line); border-radius: 11px; overflow: hidden; }
.cs-day[b-n7yod25j09] { align-items: center; background: var(--vh-surface); border-bottom: 1px solid var(--vh-line); display: grid; gap: 12px; grid-template-columns: 108px minmax(0, 1fr) auto; min-height: 56px; padding: 9px 11px; position: relative; }
.cs-day:last-child[b-n7yod25j09] { border-bottom: 0; }
.cs-day[b-n7yod25j09]::before { background: var(--vh-primary-hover); border-radius: 0 4px 4px 0; content: ""; inset-block: 8px; left: 0; opacity: 0; position: absolute; width: 3px; }
.cs-day.active[b-n7yod25j09]::before { opacity: 1; }
.cs-day.unavailable[b-n7yod25j09] { background: color-mix(in srgb, var(--vh-surface-soft) 55%, var(--vh-surface)); }
.cs-day-label[b-n7yod25j09] { align-items: flex-start; display: flex; flex-direction: column; gap: 1px; }
.cs-day-label strong[b-n7yod25j09] { color: var(--vh-ink); font-size: .76rem; }
.cs-day-label small[b-n7yod25j09] { color: var(--vh-body); font-size: .61rem; }
.cs-ranges[b-n7yod25j09] { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.cs-range[b-n7yod25j09] { align-items: center; display: grid; gap: 8px; grid-template-columns: auto auto auto auto; position: relative; }
.cs-range.invalid[b-n7yod25j09] { margin-bottom: 18px; }
.cs-range input[type="time"][b-n7yod25j09] { background: var(--vh-surface); border: 1px solid var(--vh-line-strong); border-radius: 5px; color: var(--vh-ink); cursor: pointer; font-size: .72rem; font-variant-numeric: tabular-nums; height: 32px; padding: 3px 7px; width: 122px; }
.cs-range input[type="time"]:focus[b-n7yod25j09] { border-color: var(--vh-primary-hover); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-primary-hover) 18%, var(--vh-transparent)); outline: 0; }
.cs-range input[aria-invalid="true"][b-n7yod25j09] { border-color: var(--vh-danger); }
.cs-range-arrow[b-n7yod25j09] { color: var(--vh-gray-60); font-size: .72rem; }
.cs-range-error[b-n7yod25j09] { bottom: -20px; color: var(--vh-danger); font-size: .59rem; left: 3px; position: absolute; white-space: nowrap; }
.cs-day-actions[b-n7yod25j09] { display: flex; gap: 4px; }
.cs-icon-btn[b-n7yod25j09] { align-items: center; background: var(--vh-transparent); border: 1px solid var(--vh-transparent); border-radius: var(--vh-radius-md); color: var(--vh-body); cursor: pointer; display: inline-flex; height: 30px; justify-content: center; width: 30px; }
.cs-icon-btn:hover[b-n7yod25j09], .cs-icon-btn.selected[b-n7yod25j09] { background: var(--vh-blue-tint); color: var(--vh-primary); }
.cs-icon-btn.remove:hover[b-n7yod25j09] { background: var(--vh-danger-soft); color: var(--vh-danger); }
.cs-icon-btn:disabled[b-n7yod25j09] { cursor: not-allowed; opacity: .38; }
.cs-add-first[b-n7yod25j09] { background: var(--vh-transparent); border: 1px dashed var(--vh-line-strong); border-radius: 7px; color: var(--vh-primary); cursor: pointer; font-size: .7rem; font-weight: 700; padding: 7px 11px; }
.cs-add-first:hover[b-n7yod25j09] { background: var(--vh-blue-tint); border-color: var(--vh-primary-hover); }

.cs-copy-panel[b-n7yod25j09] { align-items: center; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: 11px; display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr) auto; margin-top: 12px; padding: 10px 12px; }
.cs-copy-heading[b-n7yod25j09] { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.cs-copy-panel strong[b-n7yod25j09] { color: var(--vh-ink); font-size: .76rem; }
.cs-copy-heading span[b-n7yod25j09] { color: var(--vh-body); font-size: .65rem; }
.cs-copy-days[b-n7yod25j09] { align-items: center; display: flex; gap: 6px 12px; min-width: 0; }
.cs-copy-days label[b-n7yod25j09] { align-items: center; cursor: pointer; display: flex; gap: 5px; min-height: 30px; padding: 2px 0; white-space: nowrap; }
.cs-copy-days input[b-n7yod25j09] { accent-color: var(--vh-primary); flex: 0 0 auto; height: 16px; margin: 0; width: 16px; }
.cs-copy-days span[b-n7yod25j09] { color: var(--vh-ink); font-size: .7rem; font-weight: 700; line-height: 1.25; }
.cs-copy-actions[b-n7yod25j09] { display: grid; gap: 8px; grid-template-columns: repeat(2, 100px); }
.cs-copy-actions .cs-btn[b-n7yod25j09] { min-height: 32px; width: 100%; }

.cs-week-warning[b-n7yod25j09] { align-items: center; background: var(--vh-raw-fff8e8); border: 1px solid var(--vh-raw-f4d58a); border-radius: var(--vh-radius-lg); color: var(--vh-raw-7a5200); display: flex; font-size: .7rem; gap: 8px; margin-top: 12px; padding: 9px 11px; }
.cs-week-warning.error[b-n7yod25j09] { background: var(--vh-danger-soft); border-color: color-mix(in srgb, var(--vh-danger) 30%, var(--vh-transparent)); color: var(--vh-danger); }

.cs-btn[b-n7yod25j09] { align-items: center; border: 1px solid var(--vh-transparent); border-radius: 7px; cursor: pointer; display: inline-flex; font-size: .76rem; font-weight: 750; gap: 7px; justify-content: center; min-height: 36px; padding: 8px 15px; }
.cs-btn.primary[b-n7yod25j09] { background: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); }
.cs-btn.primary:hover[b-n7yod25j09] { background: var(--vh-primary-active); border-color: var(--vh-primary-active); }
.cs-btn.secondary[b-n7yod25j09] { background: var(--vh-surface); border-color: var(--vh-line-strong); color: var(--vh-gray-90); }
.cs-btn.secondary:hover[b-n7yod25j09] { background: var(--vh-surface-soft); }
.cs-btn.danger[b-n7yod25j09] { background: var(--vh-danger); border-color: var(--vh-danger); color: var(--vh-on-primary); }
.cs-btn.compact[b-n7yod25j09] { font-size: .68rem; min-height: 30px; padding: 5px 10px; }
.cs-btn:disabled[b-n7yod25j09] { cursor: not-allowed; opacity: .55; }
.cs-btn-spinner[b-n7yod25j09] { animation: cs-spin-b-n7yod25j09 .75s linear infinite; border: 2px solid rgb(var(--vh-white-rgb) / 45%); border-radius: 50%; border-top-color: currentColor; display: inline-block; height: 13px; width: 13px; }
.cs-link[b-n7yod25j09] { background: var(--vh-transparent); border: 0; color: var(--vh-primary); cursor: pointer; font-size: .68rem; font-weight: 700; padding: 5px 0; }
.cs-link:hover[b-n7yod25j09] { text-decoration: underline; }
.cs-link.danger-link[b-n7yod25j09] { color: var(--vh-danger); }
.cs-footer-summary[b-n7yod25j09] { color: var(--vh-body); font-size: .7rem; margin-right: auto; }

button:focus-visible[b-n7yod25j09], input:focus-visible[b-n7yod25j09] { outline: 3px solid color-mix(in srgb, var(--vh-primary-hover) 28%, var(--vh-transparent)); outline-offset: 2px; }

@media (max-width: 980px) {
    .cs-copy-panel[b-n7yod25j09] { align-items: end; grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
    .cs-copy-heading[b-n7yod25j09] { grid-column: 1 / -1; white-space: normal; }
    .cs-copy-days[b-n7yod25j09] { display: grid; gap: 4px 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
    .cs-intro[b-n7yod25j09] { gap: 28px; grid-template-columns: 1fr; padding: 32px; }
    .cs-ruler-preview[b-n7yod25j09] { transform: none; }
    .cs-confirm[b-n7yod25j09] { grid-template-columns: auto 1fr; }
    .cs-confirm-actions[b-n7yod25j09] { grid-column: 1 / -1; justify-content: flex-end; }
    .schedule-heading[b-n7yod25j09] { align-items: flex-start; flex-direction: column; }
    .cs-duration legend[b-n7yod25j09] { text-align: left; }
    .cs-day[b-n7yod25j09] { grid-template-columns: 98px minmax(0, 1fr) auto; }
    .cs-copy-actions[b-n7yod25j09] { justify-content: flex-end; }
}

@media (max-width: 590px) {
    .cs-intro[b-n7yod25j09] { min-height: auto; padding: 26px 20px; }
    .cs-intro h2[b-n7yod25j09] { font-size: 1.7rem; }
    .cs-settings[b-n7yod25j09] { gap: 10px; padding: 10px; }
    .cs-connection[b-n7yod25j09], .cs-schedule[b-n7yod25j09] { border-radius: 11px; padding: 13px; }
    .cs-connection-card[b-n7yod25j09] { align-items: flex-start; grid-template-columns: auto 1fr; }
    .cs-provider-actions[b-n7yod25j09] { align-items: flex-start; flex-direction: column; gap: 2px; grid-column: 2; }
    .cs-section-heading[b-n7yod25j09] { gap: 10px; }
    .cs-duration-options[b-n7yod25j09] { flex-wrap: wrap; }
    .cs-duration-options button[b-n7yod25j09] { flex: 1 0 28%; }
    .cs-day[b-n7yod25j09] { align-items: start; gap: 8px; grid-template-columns: 1fr auto; padding: 11px; }
    .cs-day-label[b-n7yod25j09] { grid-column: 1; }
    .cs-day-actions[b-n7yod25j09] { grid-column: 2; grid-row: 1; }
    .cs-ranges[b-n7yod25j09] { grid-column: 1 / -1; }
    .cs-range[b-n7yod25j09] { width: 100%; }
    .cs-range input[type="time"][b-n7yod25j09] { width: 100%; }
    .cs-range label[b-n7yod25j09] { min-width: 0; width: 100%; }
    .cs-range[b-n7yod25j09] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
    .cs-range-error[b-n7yod25j09] { white-space: normal; }
    .cs-copy-days[b-n7yod25j09] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-confirm-icon[b-n7yod25j09] { display: none; }
    .cs-confirm[b-n7yod25j09] { grid-template-columns: 1fr; }
    .cs-footer-summary[b-n7yod25j09] { flex-basis: 100%; order: -1; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-spinner[b-n7yod25j09], .cs-btn-spinner[b-n7yod25j09] { animation-duration: 1.6s; }
    .cs-ruler-preview[b-n7yod25j09] { transform: none; }
}
/* /Pages/InterviewPipeline/EditJobCollaboratorsModal.razor.rz.scp.css */
/* Edit members modal — visual language matches the pipeline pages
   (Index.razor.css / Board.razor.css). Staff accents ride the
   --vh-accent-staff token; footer buttons are the shared .vh-btn-* utilities (§2). */

.ipc-modal-backdrop[b-85oi59elii] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--vh-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ipc-modal[b-85oi59elii] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: 560px;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

/* ---- header ---- */
.ipc-head[b-85oi59elii] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--vh-gray-30);
}
.ipc-title[b-85oi59elii] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--vh-black-90); }
.ipc-close[b-85oi59elii] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-black-50);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .35rem;
    border-radius: .35rem;
}
.ipc-close:hover[b-85oi59elii] { color: var(--vh-black-90); background: var(--vh-gray-20); }

/* ---- error ---- */
.ipc-error[b-85oi59elii] {
    margin: .75rem 1.25rem 0;
    padding: .5rem .7rem;
    border: 1px solid var(--vh-tonal-red-bd);
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    border-radius: .4rem;
    font-size: .8rem;
}

/* ---- form ---- */
.ipc-form[b-85oi59elii] {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.ipc-field[b-85oi59elii] { display: flex; flex-direction: column; gap: .35rem; }
.ipc-label[b-85oi59elii] { font-size: .78rem; font-weight: 600; color: var(--vh-black-70); margin: 0; }

/* selected chips */
.ipc-chips[b-85oi59elii] { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.ipc-chip[b-85oi59elii] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--vh-raw-ede9fe);
    color: var(--vh-accent-staff);
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .55rem .15rem .2rem;
    border-radius: 1rem;
}
.ipc-chip-name[b-85oi59elii] { white-space: nowrap; }
.ipc-chip-x[b-85oi59elii] {
    cursor: pointer;
    color: var(--vh-accent-staff);
    text-decoration: none;
    font-weight: 700;
    font-size: .7rem;
    line-height: 1;
}
.ipc-chip-x:hover[b-85oi59elii] { color: var(--vh-accent-staff-hover); }

/* avatar (chips + dropdown rows) */
.ipc-avatar[b-85oi59elii] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.ipc-avatar-fallback[b-85oi59elii] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-accent-staff);
    color: var(--vh-on-primary);
    font-size: .65rem;
    font-weight: 700;
}

/* search input + typeahead dropdown */
.ipc-select[b-85oi59elii] { position: relative; }
.ipc-input[b-85oi59elii] {
    width: 100%;
    font-size: .85rem;
    color: var(--vh-black-90);
    border: 1px solid var(--vh-gray-30);
    border-radius: .4rem;
    padding: .45rem .65rem;
    outline: none;
    background: var(--vh-surface);
}
.ipc-input:focus[b-85oi59elii] { border-color: var(--vh-accent-staff); box-shadow: 0 0 0 3px rgb(var(--vh-raw-rgb-109-73-203) / 12%); }
.ipc-input:disabled[b-85oi59elii] { background: var(--vh-gray-10); color: var(--vh-black-40); }

.ipc-list[b-85oi59elii] {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-gray-30);
    border-radius: .4rem;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgb(var(--vh-black-rgb) / 8%);
}
.ipc-item[b-85oi59elii] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    cursor: pointer;
    font-size: .85rem;
    color: var(--vh-black-70);
}
.ipc-item:hover[b-85oi59elii] { background: var(--vh-gray-10); }

/* input-side loading dot */
.ipc-input-spin[b-85oi59elii] {
    position: absolute;
    right: .6rem;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--vh-gray-30);
    border-top-color: var(--vh-accent-staff);
    border-radius: 50%;
    animation: ipc-rotate-b-85oi59elii .7s linear infinite;
}

/* ---- footer ---- */
.ipc-foot[b-85oi59elii] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid var(--vh-gray-30);
}
/* Footer buttons come from the shared .vh-btn-* utilities (vh-tokens.css). */
.ipc-btn-spin[b-85oi59elii] {
    width: 14px;
    height: 14px;
    border: 2px solid rgb(var(--vh-white-rgb) / 40%);
    border-top-color: var(--vh-color-white);
    border-radius: 50%;
    animation: ipc-rotate-b-85oi59elii .7s linear infinite;
}

@keyframes ipc-rotate-b-85oi59elii {
    to { transform: rotate(360deg); }
}
/* /Pages/InterviewPipeline/EditJobStatusModal.razor.rz.scp.css */
/* Edit Status modal — same visual language as the pipeline modals
   (EditJobCollaboratorsModal.razor.css), tokens from vh-tokens.css. */

.ips-modal-backdrop[b-ergoz3a3ch] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--vh-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ips-modal[b-ergoz3a3ch] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: 380px;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

/* Reason views are wider, like the legacy isLarge variant. */
.ips-modal.large[b-ergoz3a3ch] {
    width: 520px;
}

.ips-head[b-ergoz3a3ch] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 4px;
}

.ips-title[b-ergoz3a3ch] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.ips-close[b-ergoz3a3ch] {
    border: 0;
    background: none;
    font-size: 1rem;
    color: var(--vh-black-50);
    cursor: pointer;
}

.ips-subhead[b-ergoz3a3ch] {
    padding: 0 20px;
    font-size: .85rem;
    color: var(--vh-black-50);
}

.ips-error[b-ergoz3a3ch] {
    margin: 8px 20px 0;
    padding: 8px 10px;
    border-radius: var(--vh-radius-md);
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    font-size: .82rem;
}

.ips-body[b-ergoz3a3ch] {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ips-option[b-ergoz3a3ch] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: var(--vh-radius-md);
    font-size: .9rem;
    color: var(--vh-text-body);
    cursor: pointer;
}

.ips-option:hover[b-ergoz3a3ch] {
    background: var(--vh-gray-20);
}

.ips-option input[b-ergoz3a3ch] {
    accent-color: var(--vh-primary);
}

.ips-actions[b-ergoz3a3ch] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 18px;
}

.ips-btn-cancel[b-ergoz3a3ch] {
    border: 1px solid var(--vh-gray-30);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    border-radius: var(--vh-radius-md);
    padding: 7px 16px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.ips-btn-submit[b-ergoz3a3ch] {
    border: 0;
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    border-radius: var(--vh-radius-md);
    padding: 7px 16px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.ips-btn-submit:disabled[b-ergoz3a3ch] {
    opacity: .5;
    cursor: not-allowed;
}
/* /Pages/InterviewPipeline/Index.razor.rz.scp.css */
/* =====================================================================
   Interview Pipeline LISTING — structure + skin of the legacy
   interview-pipeline-list page (react-platform .../interview-pipeline-list:
   styles.js + visual/{Header,Sidebar,Chart,PipelineRevenueCard,JobList}).
   Geometry measured on vanhack.dev 2026-06-11 @1700x1100
   (/tmp/vh-explore/wave12/w12-iplisting-legacy-*.png):
   theme filter bar h64 border-bottom --vh-gray-30 → --vh-gray-10 band (pad 24 0) →
   centered max-1200 grid "auto 212px" gap 24; tabs h47 inside the cards
   column; sidebar sticky: Revenue, Last Hires, Applicants, Jobs, Activities.
   Colors are tokens (Documentation/design-system.md); component-specific
   legacy revenue-card tones use exact raw tokens for Classic parity.
   ===================================================================== */

/* ---- Page: normal LeptonX content flow; .ip-page remains the page hook. ---- */
.ip-page[b-fv9q9rinlw] { font-family: var(--vh-font-primary); }

/* ---- ABP-default page chrome (design-system §12): search + primary action
   stay visible; operational dimensions live in VhFiltersCard's advanced body. ---- */

.ip-search-wrap[b-fv9q9rinlw] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
    height: 38px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-text-placeholder);
    padding-left: 12px;
}

.ip-controls[b-fv9q9rinlw] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 18px;
    width: 100%;
}

.ip-filter-field[b-fv9q9rinlw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ip-filter-field > label[b-fv9q9rinlw] {
    margin: 0;
    color: var(--vh-text-muted);
    font: 500 12px var(--vh-font-secondary);
}

/* Flat triggers — legacy ButtonItem: no fill, h40, Inter 13 --vh-black-80, 18px icon */
.ip-flat-ic[b-fv9q9rinlw] { font-size: 16px; color: var(--vh-black-80); margin-right: 2px; }

/* Autocomplete fields (assignee/company) restyled as flat bar items; the
   Blazorise internals (menu, options) keep the bootstrap look */
.ip-assignee[b-fv9q9rinlw], .ip-company[b-fv9q9rinlw] { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--vh-input-border); border-radius: var(--vh-radius-md); background: var(--vh-surface); padding-left: 8px; }
.ip-assignee[b-fv9q9rinlw]  .form-control, .ip-company[b-fv9q9rinlw]  .form-control {
    height: 36px; border: 0; background: var(--vh-transparent); box-shadow: none;
    font: 400 13px/18px var(--vh-font-primary); color: var(--vh-black-80); padding: 0 8px; border-radius: var(--vh-radius-sm);
}
.ip-assignee[b-fv9q9rinlw]  .form-control { width: 130px; }
.ip-company[b-fv9q9rinlw]  .form-control { width: 180px; }
.ip-assignee[b-fv9q9rinlw]  .form-control::placeholder, .ip-company[b-fv9q9rinlw]  .form-control::placeholder { color: var(--vh-black-80); opacity: 1; }
.ip-assignee:hover[b-fv9q9rinlw], .ip-company:hover[b-fv9q9rinlw] { background: var(--vh-gray-10); }
.ip-assignee:focus-within[b-fv9q9rinlw], .ip-company:focus-within[b-fv9q9rinlw] { border-color: var(--vh-input-focus); }
.ip-assignee[b-fv9q9rinlw]  .form-control:focus, .ip-company[b-fv9q9rinlw]  .form-control:focus { background: var(--vh-transparent); color: var(--vh-gray-90); }
.ip-assignee[b-fv9q9rinlw]  .form-control:focus::placeholder, .ip-company[b-fv9q9rinlw]  .form-control:focus::placeholder { color: var(--vh-text-placeholder); }
.ip-assignee[b-fv9q9rinlw]  .dropdown-menu, .ip-company[b-fv9q9rinlw]  .dropdown-menu { min-width: 220px; box-shadow: var(--vh-shadow-pop); }

/* VhDropdowns use the shared ABP-form skin; only normalize their height. */
.ip-controls[b-fv9q9rinlw]  .vh-dd-btn { min-width: 160px; height: 38px; }

/* Search — Type 5a, full-width like the ABP Identity listing. */
.ip-search[b-fv9q9rinlw] { flex: 1; min-width: 0; height: 36px; border: 0; padding: 0 10px; font: 400 14px var(--vh-font-secondary); color: var(--vh-text-body); background: var(--vh-transparent); }
.ip-search[b-fv9q9rinlw]::placeholder { color: var(--vh-text-placeholder); }
.ip-search:focus[b-fv9q9rinlw] { outline: none; }
.ip-search-wrap:focus-within[b-fv9q9rinlw] { border-color: var(--vh-input-focus); box-shadow: 0 0 0 2px var(--vh-primary-soft); }

/* "Clear filters" — legacy text button (same skin as the other bar items) */
.ip-clear[b-fv9q9rinlw] { display: inline-flex; align-items: center; align-self: flex-end; height: 38px; margin-left: auto; padding: 0 10px; border: 0; background: var(--vh-transparent); font: 500 13px/18px var(--vh-font-primary); color: var(--vh-primary); cursor: pointer; border-radius: var(--vh-radius-sm); }
.ip-clear:hover[b-fv9q9rinlw] { background: var(--vh-gray-10); color: var(--vh-black-80); }
.ip-clear:disabled[b-fv9q9rinlw] { color: var(--vh-muted); cursor: default; background: var(--vh-transparent); }

/* "Post a job" — legacy PrimaryButton: h40, primary-light, radius 8, pad 0 45 */
.ip-postjob[b-fv9q9rinlw] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 22px; border-radius: var(--vh-radius-md); background: var(--vh-primary); border: 1px solid var(--vh-primary); color: var(--vh-on-primary); font: 600 13px/18px var(--vh-font-primary); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ip-postjob:hover[b-fv9q9rinlw] { color: var(--vh-on-primary); background: var(--vh-primary); border-color: var(--vh-primary); }
.ip-postjob:focus-visible[b-fv9q9rinlw] { outline: 2px solid var(--vh-input-focus); outline-offset: 2px; }
.ip-employer-actions[b-fv9q9rinlw] { display: flex; justify-content: flex-end; margin: 0 0 12px; }

/* Assignee chips (multi-selection) — design-system chip (primary-soft) */
.ip-chips[b-fv9q9rinlw] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ip-chip[b-fv9q9rinlw] { display: inline-flex; align-items: center; gap: 6px; background: var(--vh-primary-soft); border: 1px solid var(--vh-primary-hover); color: var(--vh-black-50); font: 600 12px/16px var(--vh-font-primary); padding: 2px 8px; border-radius: var(--vh-radius); }
.ip-chip a[b-fv9q9rinlw] { cursor: pointer; color: var(--vh-black-50); text-decoration: none; font-weight: 700; line-height: 1; }
.ip-chip a:hover[b-fv9q9rinlw] { color: var(--vh-black-80); }

/* Autocomplete option bits (Type 1) */
.ip-opt-img[b-fv9q9rinlw] { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-right: .4rem; }
.ip-opt-empty[b-fv9q9rinlw] { font-size: .85rem; color: var(--vh-black-50); }

/* ---- Neutral band + centered grid (legacy ContentContainer + Content) ---- */
.ip-band[b-fv9q9rinlw] { background: var(--vh-transparent); padding: 0 0 42px; min-height: calc(100vh - 170px); }
.ip-alert[b-fv9q9rinlw] { width: 100%; margin: 0 0 16px; }
.ip-grid[b-fv9q9rinlw] { display: grid; grid-template-columns: minmax(0, 1fr) 212px; gap: 24px; width: 100%; margin: 0; align-items: start; }
.ip-grid.guest[b-fv9q9rinlw] { grid-template-columns: minmax(0, 1fr); }
.ip-main[b-fv9q9rinlw] { min-width: 0; }

/* ---- Status tabs (legacy DashContainer + MUI Tabs) ---- */
.ip-tabs[b-fv9q9rinlw] { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--vh-line); margin: 10px 0 24px; }
.ip-tab[b-fv9q9rinlw] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; height: 47px; padding: 0 16px; cursor: pointer; font: 400 16px/24px var(--vh-font-primary); color: var(--vh-body); border-bottom: 2px solid var(--vh-transparent); white-space: nowrap; text-decoration: none; margin-bottom: -1px; }
.ip-tab:hover[b-fv9q9rinlw] { color: var(--vh-body); }
.ip-tab.on[b-fv9q9rinlw] { color: var(--vh-primary-hover); font-weight: 700; border-bottom-color: var(--vh-primary-hover); }
.ip-tab-count[b-fv9q9rinlw] { font: 700 12px/15px var(--vh-font-primary); color: var(--vh-body); }

/* ---- "Searching jobs..." (legacy JobList Loading) ---- */
.ip-fetching[b-fv9q9rinlw] { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10rem; }
.ip-spinner[b-fv9q9rinlw] { width: 28px; height: 28px; border: 3px solid rgb(var(--vh-primary-hover-rgb) / 25%); border-top-color: var(--vh-primary-hover); border-radius: 50%; animation: ip-spin-b-fv9q9rinlw .8s linear infinite; }
.ip-fetching-msg[b-fv9q9rinlw] { font: 400 18px/27px var(--vh-font-primary); color: var(--vh-body); }
@keyframes ip-spin-b-fv9q9rinlw { to { transform: rotate(360deg); } }

/* ---- Empty list (legacy EmptyMessage) ---- */
.ip-empty[b-fv9q9rinlw] { display: flex; flex-direction: column; justify-content: center; min-height: 345px; }
.ip-empty-title[b-fv9q9rinlw] { font: 700 22px/28px var(--vh-font-primary); color: var(--vh-black-70); }
.ip-empty-text[b-fv9q9rinlw] { font: 400 14px/21px var(--vh-font-primary); color: var(--vh-gray-90); margin: 21px 0; max-width: 70%; }
.ip-empty-cta[b-fv9q9rinlw] { width: 121px; padding: 0; }

/* ---- Initial skeleton (legacy visual/Skeleton: header bar + blocks) ---- */
.ip-skel-bar[b-fv9q9rinlw] { background: var(--vh-surface); border-bottom: 1px solid var(--vh-gray-30); padding: 18px 0; display: flex; align-items: center; gap: 12px; }
.ip-skel-bar .ip-skel-line[b-fv9q9rinlw] { flex: 1; height: 20px; margin-left: calc((100% - min(95%, 1200px)) / 2); }
.ip-skel-line[b-fv9q9rinlw] { border-radius: 4px; }
.ip-skel-dot[b-fv9q9rinlw] { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.ip-skel-dot:last-child[b-fv9q9rinlw] { margin-right: calc((100% - min(95%, 1200px)) / 2); }
.ip-skel-grid[b-fv9q9rinlw] { display: grid; grid-template-columns: minmax(0, 1fr) 212px; gap: 24px; width: 95%; max-width: 1200px; margin: 24px auto 0; }
.ip-skel-card[b-fv9q9rinlw] { height: 200px; margin-bottom: 24px; border-radius: 3px; }
.ip-skel-side[b-fv9q9rinlw] { height: 870px; border-radius: 3px; }
.ip-skel-line[b-fv9q9rinlw], .ip-skel-dot[b-fv9q9rinlw], .ip-skel-card[b-fv9q9rinlw], .ip-skel-side[b-fv9q9rinlw] {
    background: linear-gradient(90deg, var(--vh-gray-20) 25%, var(--vh-gray-10) 37%, var(--vh-gray-20) 63%);
    background-size: 400% 100%;
    animation: ip-shimmer-b-fv9q9rinlw 1.4s ease infinite;
}
@keyframes ip-shimmer-b-fv9q9rinlw { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Job card — flat content surface. Interaction is expressed by its border,
   while shadows remain reserved for the menus that float above it. ---- */
.ip-card[b-fv9q9rinlw] { display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card); background: var(--vh-surface); min-height: 220px; margin-bottom: 24px; box-shadow: var(--vh-shadow-surface); transition: border-color .2s ease, background-color .2s ease; overflow: visible; }
.ip-card:hover[b-fv9q9rinlw] { border-color: var(--vh-primary-hover); background: var(--vh-surface-soft); box-shadow: var(--vh-shadow-surface); }
.ip-card-main[b-fv9q9rinlw] { cursor: pointer; }
/* Top row — legacy Top (styles.js:54-96): company eyebrow + dates row */
.ip-card-head[b-fv9q9rinlw] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ip-card-top[b-fv9q9rinlw] { display: flex; align-items: center; flex-wrap: wrap; }
/* Company — quiet eyebrow (Cobalt MUTED), 12px, weight 700 */
.ip-card-company[b-fv9q9rinlw] { font-weight: 700; font-size: 12px; line-height: 25px; margin-right: 9px; color: var(--vh-muted); }
/* Dates — legacy DatesDiv/Posted/Updated (styles.js:98-153): caption 12px with a
   4px dot before "Posted" and a "-" before "Last activity", 9px apart; MUTED */
.ip-card-dates[b-fv9q9rinlw] { font-size: 12px; line-height: 18px; color: var(--vh-muted); }
.ip-card-dates span + span[b-fv9q9rinlw] { margin-left: 9px; }
.ip-posted[b-fv9q9rinlw]::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 7.5px; background: var(--vh-muted); margin-right: 6px; vertical-align: middle; }
.ip-updated[b-fv9q9rinlw]::before { content: '-'; display: inline-block; margin-right: 6px; vertical-align: middle; }
/* Position title — the focal point: INK 700, 18px; turns --vh-primary on card hover */
.ip-card-title[b-fv9q9rinlw] { font-weight: 700; font-size: 18px; color: var(--vh-ink); margin: 14px 0; transition: color .2s ease; }
.ip-card:hover .ip-card-title[b-fv9q9rinlw] { color: var(--vh-primary); }
.ip-pos[b-fv9q9rinlw] { font-weight: 400; font-size: .82rem; color: var(--vh-muted); }
.ip-card-right[b-fv9q9rinlw] { display: flex; align-items: center; gap: .4rem; }
.ip-card-badges[b-fv9q9rinlw] { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---- Hot toggle (flame) — moved off the /jobs card; sits left of the kebab.
   Muted when off, danger + flicker when on (mirrors the legacy /jobs flame). ---- */
@keyframes ip-flick-b-fv9q9rinlw { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.16) rotate(3deg); } }
.ip-hot[b-fv9q9rinlw] { border: 0; background: var(--vh-transparent); color: var(--vh-black-30); cursor: pointer; padding: .15rem .45rem; border-radius: 8px; line-height: 1; font-size: 15px; transition: background .15s ease, color .15s ease; }
.ip-hot:hover[b-fv9q9rinlw] { background: var(--vh-surface-soft); color: var(--vh-muted); }
.ip-hot.on[b-fv9q9rinlw] { color: var(--vh-danger-light); }
.ip-hot.on i[b-fv9q9rinlw] { display: inline-block; animation: ip-flick-b-fv9q9rinlw 1.3s ease-in-out infinite; }
.ip-hot:disabled[b-fv9q9rinlw] { cursor: progress; opacity: .6; }

/* ---- Card ⋯ menu (CSS dropdown, click toggles) — Cobalt: MUTED icon, soft-bg
   hover; menu = surface + LINE + soft shadow + radius 12px ---- */
.ip-menu[b-fv9q9rinlw] { position: relative; }
.ip-menu-btn[b-fv9q9rinlw] { cursor: pointer; color: var(--vh-muted); padding: .1rem .4rem; border: 0; background: var(--vh-transparent); border-radius: .3rem; line-height: 1; transition: background .15s ease, color .15s ease; }
.ip-menu-btn:hover[b-fv9q9rinlw] { background: var(--vh-surface-soft); color: var(--vh-ink); }
.ip-menu-list[b-fv9q9rinlw] { position: absolute; right: 0; top: 100%; z-index: 1045; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card-sm); box-shadow: var(--vh-shadow-pop); min-width: 180px; padding: .35rem 0; display: flex; flex-direction: column; }
.ip-menu-action[b-fv9q9rinlw], .ip-menu-list .ip-menu-disabled[b-fv9q9rinlw] { font-size: .8rem; padding: .4rem .85rem; white-space: nowrap; }
.ip-menu-action[b-fv9q9rinlw] { width: 100%; border: 0; background: var(--vh-transparent); color: var(--vh-ink); cursor: pointer; text-align: left; }
.ip-menu-action:hover[b-fv9q9rinlw] { background: var(--vh-surface-soft); }
.ip-menu-disabled[b-fv9q9rinlw] { color: var(--vh-black-30); cursor: not-allowed; }
/* Badges — tonal (soft bg + dark text + subtle border): neutral for Private/Guest,
   primary tonal for Talent Flow, amber tonal for Idle */
.ip-badge[b-fv9q9rinlw] { font-size: .68rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; background: var(--vh-surface-soft); color: var(--vh-body); border: 1px solid var(--vh-line); }
.ip-badge.sub[b-fv9q9rinlw] { background: var(--vh-tonal-blue-bg); color: var(--vh-tonal-blue-text); border-color: rgb(var(--vh-primary-hover-rgb) / 22%); }
.ip-badge.warn[b-fv9q9rinlw] { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); border-color: var(--vh-tonal-amber-bd); }
.ip-card-event[b-fv9q9rinlw] { margin-top: .5rem; font-size: .82rem; color: var(--vh-body); }
/* "No Interviews yet (N days)" — amber tonal stale-pipeline signal pill */
.ip-card-noint[b-fv9q9rinlw] { display: inline-flex; align-items: center; font-weight: 700; font-size: 12px; padding: 3px 12px; border-radius: 999px; background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); border: 1px solid var(--vh-tonal-amber-bd); white-space: nowrap; margin-right: calc(1rem - .4rem); }

/* Stage counts — legacy Bottom applicants row (styles.js:512-564): inline
   "number label" items with a touch more breathing room; count INK 700, label
   MUTED. Whole row stays click-to-open-board. */
.ip-stages[b-fv9q9rinlw] { display: flex; flex-wrap: wrap; align-items: center; cursor: pointer; font-size: 13px; }
.ip-stage[b-fv9q9rinlw] { margin-right: 20px; white-space: nowrap; }
.ip-stage span:first-child[b-fv9q9rinlw] { font-weight: 700; color: var(--vh-ink); }
.ip-stage span + span[b-fv9q9rinlw] { margin-left: 5px; color: var(--vh-muted); }

/* Funnel signals — legacy FunnelSignals (styles.js:226-293): BODY text row,
   12px gaps, bold label with the 16px primary filter icon */
.ip-card-signals[b-fv9q9rinlw] { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; font-size: 13px; color: var(--vh-body); }
.ip-sig-label[b-fv9q9rinlw] { display: inline-flex; align-items: center; font-weight: 700; color: var(--vh-body); }
.ip-sig-label svg[b-fv9q9rinlw] { width: 16px; height: 16px; margin-right: 6px; }
.ip-sig[b-fv9q9rinlw] { position: relative; display: inline-flex; align-items: center; color: var(--vh-body); }
.ip-sig strong[b-fv9q9rinlw] { font-weight: 700; margin: 0 4px; color: var(--vh-ink); }
/* 1x14 divider between items (styles.js:289-293) — Cobalt LINE */
.ip-sig-divider[b-fv9q9rinlw] { width: 1px; height: 14px; background: var(--vh-line); }
/* hover tooltip on an item (styles.js:263-287) */
.ip-sig-tip[b-fv9q9rinlw] { opacity: 0; visibility: hidden; position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 10; white-space: nowrap; color: var(--vh-surface); background: var(--vh-black-80); padding: 6px 10px; border-radius: var(--vh-radius); font-size: 10px; font-weight: 400; line-height: 1.3; text-align: center; pointer-events: none; transition: opacity .15s ease; }
.ip-sig:hover .ip-sig-tip[b-fv9q9rinlw] { opacity: 1; visibility: visible; }

/* ---- Potential Revenue (admin) — tonal tier box + editable High/Low pill;
   retuned to Cobalt tonal tokens: high = success tonal, low = amber tonal,
   none = neutral tonal (the "none" block below keeps the muted treatment) ---- */
.ip-rev[b-fv9q9rinlw] { display: inline-flex; align-items: center; align-self: flex-start; gap: .6rem; padding: 7px 14px 7px 7px; margin: 0 0 16px; border-radius: var(--vh-radius-card-sm); border: 1px solid var(--vh-transparent); }
.ip-rev.high[b-fv9q9rinlw] { background: var(--vh-tonal-green-bg); border-color: var(--vh-tonal-green-bd); }
.ip-rev.low[b-fv9q9rinlw] { background: var(--vh-tonal-amber-bg); border-color: var(--vh-tonal-amber-bd); }
.ip-rev-icon[b-fv9q9rinlw] { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 15px; }
.ip-rev.high .ip-rev-icon[b-fv9q9rinlw] { background: rgb(var(--vh-raw-rgb-34-197-94) / 20%); color: var(--vh-tonal-green-text); }
.ip-rev.low .ip-rev-icon[b-fv9q9rinlw] { background: rgb(var(--vh-raw-rgb-245-158-11) / 22%); color: var(--vh-tonal-amber-text); }
.ip-rev-body[b-fv9q9rinlw] { display: flex; flex-direction: column; line-height: 1.25; }
.ip-rev-label[b-fv9q9rinlw] { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; }
.ip-rev.high .ip-rev-label[b-fv9q9rinlw] { color: var(--vh-tonal-green-text); }
.ip-rev.low .ip-rev-label[b-fv9q9rinlw] { color: var(--vh-tonal-amber-text); }
/* "i" info marker — CSS-only tooltip on hover */
.ip-rev-info[b-fv9q9rinlw] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; font-size: 9px; font-style: italic; font-weight: 700; cursor: help; }
.ip-rev-tip[b-fv9q9rinlw] { opacity: 0; visibility: hidden; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 10; width: max-content; max-width: 220px; color: var(--vh-surface); background: var(--vh-black-80); padding: 6px 10px; border-radius: var(--vh-radius); font-size: 10px; font-weight: 400; font-style: normal; line-height: 1.3; text-align: center; pointer-events: none; transition: opacity .15s ease; }
.ip-rev-info:hover .ip-rev-tip[b-fv9q9rinlw] { opacity: 1; visibility: visible; }
.ip-rev-row[b-fv9q9rinlw] { display: inline-flex; align-items: center; }
.ip-rev-value[b-fv9q9rinlw] { font-size: .9rem; font-weight: 700; }
.ip-rev.high .ip-rev-value[b-fv9q9rinlw] { color: var(--vh-tonal-green-text); }
.ip-rev.low .ip-rev-value[b-fv9q9rinlw] { color: var(--vh-tonal-amber-text); }
.ip-rev-missing[b-fv9q9rinlw] { font-size: .72rem; }
.ip-rev.high .ip-rev-missing[b-fv9q9rinlw] { color: var(--vh-tonal-green-text); }
.ip-rev.low .ip-rev-missing[b-fv9q9rinlw] { color: var(--vh-tonal-amber-text); }
/* Tier pill (tonal, matches tier) + its High/Low popover */
.ip-rev-pillwrap[b-fv9q9rinlw] { position: relative; display: inline-flex; }
.ip-rev-pill[b-fv9q9rinlw] { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; }
.ip-rev.high .ip-rev-pill[b-fv9q9rinlw] { border: 1px solid var(--vh-tonal-green-bd); background: rgb(var(--vh-raw-rgb-34-197-94) / 20%); color: var(--vh-tonal-green-text); }
.ip-rev.low .ip-rev-pill[b-fv9q9rinlw] { border: 1px solid var(--vh-tonal-amber-bd); background: rgb(var(--vh-raw-rgb-245-158-11) / 22%); color: var(--vh-tonal-amber-text); }
.ip-rev-pill:disabled[b-fv9q9rinlw] { cursor: progress; opacity: .7; }
.ip-rev-caret[b-fv9q9rinlw] { font-size: 9px; }
/* Popover — Cobalt: surface + LINE + soft shadow + radius 12px */
.ip-rev-pop[b-fv9q9rinlw] { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1045; display: flex; flex-direction: column; min-width: 140px; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card-sm); box-shadow: var(--vh-shadow-pop); overflow: hidden; }
.ip-rev-pop-item[b-fv9q9rinlw] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: var(--vh-transparent); text-align: left; font-size: 12px; font-weight: 400; color: var(--vh-ink); cursor: pointer; }
.ip-rev-pop-item:hover[b-fv9q9rinlw] { background: var(--vh-surface-soft); }
.ip-rev-pop-item.on[b-fv9q9rinlw] { background: var(--vh-surface-soft); font-weight: 700; }
.ip-rev-dot[b-fv9q9rinlw] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ip-rev-dot.high[b-fv9q9rinlw] { background: var(--vh-tonal-green-text); }
.ip-rev-dot.low[b-fv9q9rinlw] { background: var(--vh-tonal-amber-text); }
.ip-rev-dot.none[b-fv9q9rinlw] { background: var(--vh-muted); }

/* "No Revenue" tier — neutral tonal, de-emphasised (excluded from totals). */
.ip-rev.none[b-fv9q9rinlw] { background: var(--vh-surface-soft); border-color: var(--vh-line); }
.ip-rev.none .ip-rev-icon[b-fv9q9rinlw] { background: var(--vh-line); color: var(--vh-muted); }
.ip-rev.none .ip-rev-label[b-fv9q9rinlw] { color: var(--vh-body); }
.ip-rev.none .ip-rev-value[b-fv9q9rinlw] { color: var(--vh-muted); }
.ip-rev.none .ip-rev-missing[b-fv9q9rinlw] { color: var(--vh-muted); }
.ip-rev.none .ip-rev-pill[b-fv9q9rinlw] { border: 1px solid var(--vh-line); background: var(--vh-line); color: var(--vh-body); }

/* Foot — legacy Bottom (styles.js:512-516): LINE top border + 14px padding-top,
   13px BODY text; counts left, collaborators right */
.ip-card-foot[b-fv9q9rinlw] { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--vh-line); padding: 14px 0 0; font-size: 13px; color: var(--vh-body); }
/* Right side — legacy LinksContainer/AvatarsContainer (styles.js:632-655) */
.ip-foot-links[b-fv9q9rinlw] { display: flex; align-items: center; justify-content: flex-end; margin-left: 24px; }

/* ---- Collaborators stack + dropdown (legacy AvatarsContainer / StyledCollaboratorsMenu) ---- */
.ip-collabs-wrap[b-fv9q9rinlw] { position: relative; margin-right: 10px; }
.ip-collabs[b-fv9q9rinlw] { display: flex; align-items: center; border: 0; background: var(--vh-transparent); padding: 0; cursor: pointer; }
.ip-collabs.static[b-fv9q9rinlw] { cursor: default; }
.ip-collab[b-fv9q9rinlw] { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--vh-surface-soft); color: var(--vh-body); font-weight: 600; font-size: .68rem; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--vh-surface); margin-left: -8px; }
.ip-collab:first-child[b-fv9q9rinlw] { margin-left: 0; }
.ip-collab img[b-fv9q9rinlw] { width: 100%; height: 100%; object-fit: cover; }
/* "+N" add control — legacy AddControl circle, always visible (admin listing) */
.ip-collab.add[b-fv9q9rinlw] { background: var(--vh-surface-soft); color: var(--vh-body); font-size: .72rem; font-weight: 700; }
.ip-collabs:hover .ip-collab.add[b-fv9q9rinlw] { background: var(--vh-primary-hover); color: var(--vh-on-primary); }
/* Dropdown — Cobalt: surface + LINE + soft shadow + radius 12px */
.ip-collab-menu[b-fv9q9rinlw] { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1045; min-width: 170px; max-width: 225px; max-height: 230px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card-sm); box-shadow: var(--vh-shadow-pop); padding-top: .25rem; }
.ip-collab-row[b-fv9q9rinlw] { display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; flex: 0 0 auto; }
.ip-collab-row .ip-collab[b-fv9q9rinlw] { margin-left: 0; flex: 0 0 auto; }
.ip-collab-name[b-fv9q9rinlw] { font-size: 13px; color: var(--vh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-collab-sep[b-fv9q9rinlw] { border-top: 1px solid var(--vh-line); margin-top: .25rem; flex: 0 0 auto; }
/* "Edit members" — sticky bottom like the legacy EditMemberButtonContainer
   (Cobalt --vh-primary, 13px) */
.ip-collab-edit[b-fv9q9rinlw] { position: sticky; bottom: 0; flex: 0 0 auto; width: 100%; border: 0; background: var(--vh-surface); padding: .55rem .75rem; font-size: 13px; font-weight: 600; color: var(--vh-primary); text-align: center; cursor: pointer; }
.ip-collab-edit:hover[b-fv9q9rinlw] { background: var(--vh-surface-soft); }

/* ---- Click-catcher behind open popups (outside-click close) ---- */
.ip-popcatch[b-fv9q9rinlw] { position: fixed; inset: 0; z-index: 1040; background: var(--vh-transparent); }

/* ---- Load more (paging — surfaced infinite scroll) ---- */
.ip-loadmore[b-fv9q9rinlw] { text-align: center; margin: 6px 0 24px; }
.ip-loadmore button[b-fv9q9rinlw] { border: 0; background: var(--vh-transparent); color: var(--vh-primary); font: 500 13px/18px var(--vh-font-primary); height: 40px; padding: 0 16px; border-radius: var(--vh-radius-sm); cursor: pointer; }
.ip-loadmore button:hover[b-fv9q9rinlw] { background: var(--vh-gray-10); }
.ip-loadmore button:disabled[b-fv9q9rinlw] { color: var(--vh-black-40); cursor: progress; }

/* =====================================================================
   Sidebar (legacy SidebarContainer: 212px, sticky, children 24px apart)
   ===================================================================== */
.ip-side[b-fv9q9rinlw] {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ip-side[b-fv9q9rinlw]::-webkit-scrollbar { width: 0; height: 0; }
.ip-side > * + *[b-fv9q9rinlw] { margin-top: 24px; }

/* Pipeline Revenue (legacy PipelineRevenueCard — exact raw tokens retained
   for Classic parity). */
.ip-rev-card[b-fv9q9rinlw] { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; padding: 16px 18px; /* spacing comes from .ip-side > * + * (24px) */ border-radius: 8px; background: var(--vh-raw-e8f1fb); border: 1px solid var(--vh-raw-b9d4f0); }
.ip-rev-card-head[b-fv9q9rinlw] { display: flex; align-items: center; gap: 10px; }
.ip-rev-card-icon[b-fv9q9rinlw] { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--vh-raw-cde0f5); color: var(--vh-raw-1b6dc1); font: 700 17px var(--vh-font-primary); }
.ip-rev-card-label[b-fv9q9rinlw] { display: inline-flex; align-items: center; gap: 5px; font: 700 13px/16px var(--vh-font-primary); color: var(--vh-raw-1b6dc1); }
.ip-rev-card-info[b-fv9q9rinlw] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--vh-raw-1b6dc1); color: var(--vh-raw-1b6dc1); font-size: 9px; font-style: italic; font-weight: 700; cursor: help; }
.ip-rev-card-tip[b-fv9q9rinlw] { opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; width: max-content; max-width: 240px; color: var(--vh-surface); background: var(--vh-black-80); padding: 6px 10px; border-radius: var(--vh-radius); font: 400 10px/1.3 var(--vh-font-primary); font-style: normal; text-align: left; pointer-events: none; transition: opacity .15s ease; }
.ip-rev-card-info:hover .ip-rev-card-tip[b-fv9q9rinlw] { opacity: 1; visibility: visible; }
.ip-rev-total[b-fv9q9rinlw] { margin-top: 8px; font: 700 22px/28px var(--vh-font-primary); color: var(--vh-raw-155a9e); }
/* High/Low sub-totals — compact, side by side (column-gap keeps them inline;
   small row-gap is just a wrap fallback). Team = success/amber; the personal
   My Revenue / My Commission sections = muted slate (.slate). */
.ip-rev-stats[b-fv9q9rinlw] { margin-top: 4px; display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; font: 600 12px/1.3 var(--vh-font-primary); }
.ip-rev-stats .high[b-fv9q9rinlw] { color: var(--vh-raw-1b8f5a); }
.ip-rev-stats .low[b-fv9q9rinlw] { color: var(--vh-raw-a87811); }
.ip-rev-stats.slate span[b-fv9q9rinlw] { color: var(--vh-body); }

/* Personal sub-sections (My Revenue / My Commission) inside the same card,
   each divided from the block above by a hairline. */
.ip-rev-section[b-fv9q9rinlw] { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vh-raw-cfe0f3); display: flex; flex-direction: column; }
.ip-rev-sublabel[b-fv9q9rinlw] { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--vh-font-primary); color: var(--vh-raw-1b6dc1); }
.ip-rev-subvalue[b-fv9q9rinlw] { margin-top: 2px; font: 700 17px/22px var(--vh-font-primary); color: var(--vh-raw-155a9e); }

/* Confidential My Commission — blurred by default (safe for screen-share),
   reveals on click. The "Click to reveal" hint overlays the blurred numbers. */
.ip-confid[b-fv9q9rinlw] { position: relative; margin-top: 2px; min-height: 24px; cursor: pointer; border-radius: 8px; outline: none; }
.ip-confid:not(.shown) .ip-confid-vals[b-fv9q9rinlw] { filter: blur(7px); user-select: none; }
.ip-confid-vals[b-fv9q9rinlw] { transition: filter .15s ease; }
.ip-confid-reveal[b-fv9q9rinlw] { position: absolute; inset: 0; display: flex; align-items: center; gap: 5px; font: 600 11px/1 var(--vh-font-primary); color: var(--vh-body); }
.ip-confid:hover .ip-confid-reveal[b-fv9q9rinlw] { color: var(--vh-raw-1b6dc1); }
.ip-confid-hide[b-fv9q9rinlw] { position: absolute; right: 0; top: 0; color: var(--vh-muted); font-size: 11px; }
.ip-confid:focus-visible[b-fv9q9rinlw] { box-shadow: 0 0 0 2px rgb(var(--vh-primary-hover-rgb) / 40%); }

/* Last Hires (legacy Chart: surface flat card h220, title top-left, primary bars
   with the value above each bar and the month label under it) */
.ip-chart-card[b-fv9q9rinlw] { background: var(--vh-surface); height: 220px; display: flex; flex-direction: column; }
.ip-chart-title[b-fv9q9rinlw] { font: 700 14px/17px var(--vh-font-primary); color: var(--vh-black-90); margin: 24px 0 0 28px; }
.ip-chart[b-fv9q9rinlw] { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 8px 16px 14px; min-height: 0; }
.ip-bar-col[b-fv9q9rinlw] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ip-bar-val[b-fv9q9rinlw] { font: 400 12px/12px var(--vh-font-primary); color: var(--vh-black-80); margin-bottom: 4px; }
.ip-bar[b-fv9q9rinlw] { width: 14px; min-height: 4px; background: var(--vh-primary-hover); border-radius: 10px; }
.ip-bar-lbl[b-fv9q9rinlw] { font: 400 12px/15px var(--vh-font-primary); color: var(--vh-black-80); margin-top: 6px; }

/* Applicants / Jobs / Activities (legacy Sidebar Containers: flat surface r3,
   pad 24, NO heading; rows = 36px icon circle + count over label, 24 apart) */
.ip-side-card[b-fv9q9rinlw] { background: var(--vh-surface); border-radius: 3px; padding: 24px; }
.ip-side-row[b-fv9q9rinlw] { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 24px; align-items: center; }
.ip-side-row + .ip-side-row[b-fv9q9rinlw] { margin-top: 24px; }
.ip-side-row.clickable[b-fv9q9rinlw] { cursor: pointer; }
.ip-side-ic[b-fv9q9rinlw] { box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; background: var(--vh-primary-pale); color: var(--vh-primary-hover); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ip-side-row.on .ip-side-ic[b-fv9q9rinlw] { border: 2px solid var(--vh-primary-hover); }
.ip-side-tx[b-fv9q9rinlw] { display: flex; flex-direction: column; font: 400 12px/16px var(--vh-font-primary); color: var(--vh-gray-90); }
.ip-side-tx b[b-fv9q9rinlw] { font: 700 14px/18px var(--vh-font-primary); color: var(--vh-gray-90); }

/* ---- Tablet/mobile (legacy sd 769px… up to lg): sidebar becomes a leading
   horizontal strip and the grid collapses to one column ---- */
@media (max-width: 991.98px) {
    .ip-grid[b-fv9q9rinlw] { display: flex; flex-direction: column; }
    .ip-side[b-fv9q9rinlw] {
        position: static;
        order: -1;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        background: var(--vh-transparent);
    }
    .ip-side > * + *[b-fv9q9rinlw] { margin-top: 0; margin-left: 24px; }
    .ip-side > *[b-fv9q9rinlw] { flex: 0 0 auto; }
    .ip-rev-card[b-fv9q9rinlw] {
        width: min(100%, 420px);
        min-height: 160px;
        justify-content: center;
    }
    .ip-side-card[b-fv9q9rinlw] { background: var(--vh-transparent); padding: 24px 0; }
    .ip-chart-card[b-fv9q9rinlw] { background: var(--vh-transparent); }
}

@media (max-width: 767.98px) {
    .ip-search-wrap[b-fv9q9rinlw] { min-width: 100%; }
    .ip-postjob[b-fv9q9rinlw] { width: 100%; }
    .ip-filter-field[b-fv9q9rinlw], .ip-assignee[b-fv9q9rinlw], .ip-company[b-fv9q9rinlw] { width: 100%; }
    .ip-assignee[b-fv9q9rinlw]  .form-control, .ip-company[b-fv9q9rinlw]  .form-control { width: 100%; }
    .ip-controls[b-fv9q9rinlw]  .vh-dd { width: 100%; }
    .ip-controls[b-fv9q9rinlw]  .vh-dd-btn { width: 100%; max-width: none; }
    .ip-clear[b-fv9q9rinlw] { width: 100%; justify-content: center; margin-left: 0; }
}

/* Dark-mode exception (design-system §11): the revenue card keeps its
   legacy-verbatim light primary raw tokens above; on dark those become a glaring
   light island, so remap the card to the dark primary-tint family. */
.lpx-theme-dark .ip-rev-card[b-fv9q9rinlw] {
    background: var(--vh-blue-tint);
    border-color: var(--vh-tonal-blue-bd);
}
.lpx-theme-dark .ip-rev-card-icon[b-fv9q9rinlw] { background: var(--vh-primary-pale); color: var(--vh-blue-deep); }
.lpx-theme-dark .ip-rev-card-label[b-fv9q9rinlw],
.lpx-theme-dark .ip-rev-card-info[b-fv9q9rinlw],
.lpx-theme-dark .ip-rev-sublabel[b-fv9q9rinlw],
.lpx-theme-dark .ip-confid:hover .ip-confid-reveal[b-fv9q9rinlw] { color: var(--vh-blue-deep); }
.lpx-theme-dark .ip-rev-card-info[b-fv9q9rinlw] { border-color: var(--vh-blue-deep); }
.lpx-theme-dark .ip-rev-total[b-fv9q9rinlw],
.lpx-theme-dark .ip-rev-subvalue[b-fv9q9rinlw] { color: var(--vh-primary-hover); }
.lpx-theme-dark .ip-rev-stats .high[b-fv9q9rinlw] { color: var(--vh-tonal-green-text); }
.lpx-theme-dark .ip-rev-stats .low[b-fv9q9rinlw] { color: var(--vh-tonal-amber-text); }
.lpx-theme-dark .ip-rev-section[b-fv9q9rinlw] { border-top-color: var(--vh-line-strong); }
/* /Pages/IntroVideo/Index.razor.rz.scp.css */
/* /intro-video — ports next-platform features/dashboard/components/IntroVideo styles.
   All colors consume vh-tokens.css (design-system.md). Legacy next-platform hexes are
   mapped to the nearest existing token (no separate --vh-* token exists for that scale):
   legacy dark-100 → --vh-black-50 · dark-200 → --vh-black-70 ·
   dark-300 → --vh-black-90 · action-400 hover → --vh-primary ·
   attention-400 → --vh-secondary · neutral-200 → --vh-surface-soft ·
   neutral-300 → --vh-line · neutral-400 → --vh-line / --vh-gray-30. */

/* Page root: normal LeptonX content flow (design-system §12) — no centered
   max-width box; the page title is the PageHeader above this container. */
.iv-page[b-sur21sbq6k] {
    width: 100%;
    padding-bottom: 40px;
    font-family: var(--vh-font-primary);
    color: var(--vh-black-70);
}

.iv-page-embedded[b-sur21sbq6k] {
    padding-bottom: 0;
}

/* ---- Header (title + subtitle over a divider, legacy --vh-gray-30) ---- */
.iv-header[b-sur21sbq6k] {
    padding: 8px 0 16px;
    border-bottom: 2px solid var(--vh-line);
}

.iv-page-embedded .iv-header[b-sur21sbq6k] {
    padding-top: 0;
}

.iv-page-embedded .iv-header .iv-title[b-sur21sbq6k] {
    margin-bottom: 4px;
}

.iv-title[b-sur21sbq6k] {
    margin: 0;
    font-family: var(--vh-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.iv-subtitle[b-sur21sbq6k] {
    margin: 0;
    font-size: 14px;
    color: var(--vh-text-muted);
}

/* ---- Loading / load error ---- */
.iv-loading[b-sur21sbq6k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 40vh;
    color: var(--vh-black-70);
}

.iv-spinner[b-sur21sbq6k] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--vh-line);
    border-top-color: var(--vh-primary-hover);
    border-radius: 50%;
    animation: iv-rotate-b-sur21sbq6k .8s linear infinite;
}

.iv-error[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--vh-danger-soft);
    background: var(--vh-danger-soft);
    color: var(--vh-danger-active);
    border-radius: 8px;
    font-size: 14px;
}

.iv-content[b-sur21sbq6k] {
    padding-top: 16px;
}

/* ---- Toolbar: tags left, action buttons right ---- */
.iv-toolbar[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.iv-tags[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Level badge — success pill; "No English" flips to outline + alert icon. */
.iv-level-badge[b-sur21sbq6k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--vh-transparent);
    border-radius: 999px;
    background: var(--vh-success);
    color: var(--vh-on-primary);
    font-size: 14px;
    cursor: default;
}

.iv-level-badge i[b-sur21sbq6k] { font-size: 13px; }

.iv-level-badge-noenglish[b-sur21sbq6k] {
    background: var(--vh-surface);
    border-color: var(--vh-black-50);
    color: var(--vh-black-50);
}

/* Latest evaluation lifecycle (no attempt, pending, processing, failed). */
.iv-lifecycle-tag[b-sur21sbq6k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border: 1px solid var(--vh-black-50);
    border-radius: 999px;
    background: var(--vh-transparent);
    color: var(--vh-black-50);
    font-size: 14px;
    font-weight: 700;
    cursor: default;
}

.iv-lifecycle-failed[b-sur21sbq6k] {
    border-color: var(--vh-danger);
    color: var(--vh-danger);
}

.iv-status-banner[b-sur21sbq6k] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--vh-primary-hover);
    background: var(--vh-primary-soft);
    border-radius: var(--vh-radius);
    color: var(--vh-text-heading);
}

.iv-status-banner > i[b-sur21sbq6k] {
    margin-top: 2px;
    color: var(--vh-primary-hover);
    font-size: 18px;
}

.iv-status-failed[b-sur21sbq6k] {
    border-color: var(--vh-danger);
    background: var(--vh-danger-soft);
    color: var(--vh-danger-active);
}

.iv-status-failed > i[b-sur21sbq6k] { color: var(--vh-danger); }

.iv-status-title[b-sur21sbq6k] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.iv-status-text[b-sur21sbq6k] {
    margin: 0;
    font-size: 14px;
}

/* Public/Private pill (legacy AvailabilityTag.tsx). */
.iv-availability-tag[b-sur21sbq6k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--vh-transparent);
    border-radius: 999px;
    background: var(--vh-primary-hover);
    color: var(--vh-on-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: default;
}

.iv-availability-tag.iv-tag-disabled[b-sur21sbq6k] {
    background: var(--vh-transparent);
    border-color: var(--vh-black-50);
    color: var(--vh-black-50);
}

/* Refresh icon button — replaces the legacy SignalR live refresh. */
.iv-refresh[b-sur21sbq6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--vh-transparent);
    color: var(--vh-black-50);
    cursor: pointer;
}

.iv-refresh:hover:not(:disabled)[b-sur21sbq6k] { background: var(--vh-surface-soft); color: var(--vh-primary-hover); }
.iv-refresh:disabled[b-sur21sbq6k] { cursor: not-allowed; opacity: .6; }

.iv-spin[b-sur21sbq6k] { animation: iv-rotate-b-sur21sbq6k .8s linear infinite; }

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

/* ---- Buttons ----
   NOTE: page-local button family kept for the legacy next-platform look
   (radius 8, --vh-primary-hover base); a follow-up could migrate to the .vh-btn-*
   utilities. Colors are fully tokenized. */
.iv-actions[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.iv-btn[b-sur21sbq6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--vh-transparent);
    font-family: var(--vh-font-primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background-color .15s, border-color .15s;
}

.iv-btn i[b-sur21sbq6k] { font-size: 15px; }

.iv-btn-outline[b-sur21sbq6k] {
    border-color: var(--vh-primary-hover);
    background: var(--vh-surface);
    color: var(--vh-primary-hover);
}

/* legacy action-400 hover → deeper brand tone */
.iv-btn-outline:hover:not(:disabled)[b-sur21sbq6k] { color: var(--vh-primary); border-color: var(--vh-primary); }

.iv-btn-solid[b-sur21sbq6k] {
    background: var(--vh-primary-hover);
    color: var(--vh-on-primary);
    font-weight: 700;
}

.iv-btn-solid:hover:not(:disabled)[b-sur21sbq6k] { background: var(--vh-primary); color: var(--vh-on-primary); }

.iv-btn-soft[b-sur21sbq6k] {
    background: var(--vh-surface-soft);
    color: var(--vh-primary-hover);
    font-weight: 700;
}

.iv-btn-soft:hover:not(:disabled)[b-sur21sbq6k] { background: var(--vh-primary-soft); }

.iv-btn-orange[b-sur21sbq6k] {
    background: var(--vh-secondary);
    color: var(--vh-on-primary);
    font-weight: 700;
}

.iv-btn-orange:hover:not(:disabled)[b-sur21sbq6k] { background: var(--vh-secondary-active); }

.iv-btn:disabled[b-sur21sbq6k] {
    border-color: var(--vh-disabled-bg);
    background: var(--vh-disabled-bg);
    color: var(--vh-disabled-text);
    cursor: not-allowed;
}

.iv-btn-square[b-sur21sbq6k] { padding: 8px 12px; }

/* ---- Outdated-video warning banner (legacy WarningDeprecatedVideo.tsx) ----
   Tonal-amber surface so the text keeps a guaranteed readable background in
   both themes (the legacy banner had no background at all). */
.iv-warning[b-sur21sbq6k] {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding: 16px;
    border: 1px solid var(--vh-warning);
    background: var(--vh-tonal-amber-bg);
    border-radius: var(--vh-radius);
}

.iv-warning > i[b-sur21sbq6k] {
    color: var(--vh-secondary);
    font-size: 18px;
    margin-top: 2px;
}

.iv-warning-title[b-sur21sbq6k] {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--vh-tonal-amber-text);
}

.iv-warning-text[b-sur21sbq6k] {
    margin: 0;
    font-size: 14px;
    color: var(--vh-tonal-amber-text);
}

/* ---- Results grid: player + feedback + speaking left, transcript right ---- */
.iv-grid[b-sur21sbq6k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
    align-items: start;
}

.iv-grid-single[b-sur21sbq6k] { grid-template-columns: 1fr; }

.iv-col[b-sur21sbq6k] { min-width: 0; }

/* ---- Player ---- */
.iv-recorded-on[b-sur21sbq6k] {
    margin: 0 0 16px;
    font-size: 14px;
}

.iv-player-card[b-sur21sbq6k] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-cobalt);
    padding: 2px;
}

.iv-player-card.iv-player-empty[b-sur21sbq6k] { padding: 40px; }

.iv-video[b-sur21sbq6k] {
    display: block;
    width: 100%;
    max-height: 340px;
    border-radius: 14px;
    background: var(--vh-media-black); /* video letterbox — intentionally theme-independent */
}

/* ---- Missing data placeholder (dashed box) ---- */
.iv-missing[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 32px;
    border: 1px dashed var(--vh-black-50);
    border-radius: var(--vh-radius-card);
    color: var(--vh-black-50);
}

.iv-missing-boxed[b-sur21sbq6k] {
    margin-top: 16px;
    padding: 16px 32px;
}

.iv-missing > i[b-sur21sbq6k] { font-size: 20px; }

.iv-missing-title[b-sur21sbq6k] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.iv-missing-text[b-sur21sbq6k] {
    margin: 0;
    font-size: 12px;
}

/* ---- Sections + cards (Feedback / Speaking performance / Transcript) ---- */
.iv-section[b-sur21sbq6k] { margin-top: 32px; }

.iv-section-first[b-sur21sbq6k] { margin-top: 0; }

.iv-section-title[b-sur21sbq6k] {
    margin: 0 0 16px;
    font-family: var(--vh-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.iv-card[b-sur21sbq6k] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    padding: 24px 28px;
}

.iv-card-head[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.iv-card-icon[b-sur21sbq6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--vh-surface-soft);
    color: var(--vh-black-50);
    font-size: 18px;
}

.iv-card-name[b-sur21sbq6k] {
    font-family: var(--vh-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--vh-black-50);
}

.iv-card-body[b-sur21sbq6k] {
    /* left inset = icon width (40px) + head gap (12px), so the body aligns under the label */
    padding: 12px 0 0 calc(40px + 12px);
}

/* Score rows: "icon Label ———— value" (Feedback level + speaking metrics). */
.iv-score-row[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.iv-score-row:last-child[b-sur21sbq6k] { margin-bottom: 0; }

.iv-score-label[b-sur21sbq6k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.iv-score-label i[b-sur21sbq6k] { font-size: 16px; }

.iv-score-line[b-sur21sbq6k] {
    flex: 1;
    height: 2px;
    margin: 0 16px;
    background: var(--vh-line);
}

.iv-score-value[b-sur21sbq6k] {
    font-size: 15px;
    font-weight: 700;
    color: var(--vh-black-70);
}

.iv-icon-green[b-sur21sbq6k] { color: var(--vh-success); }

/* Speaking performance icon tiers (legacy Performance.tsx tv variants). */
.iv-perf-super[b-sur21sbq6k] { color: var(--vh-primary-hover); }
.iv-perf-high[b-sur21sbq6k] { color: var(--vh-success); }
.iv-perf-low[b-sur21sbq6k] { color: var(--vh-secondary-hover); }

.iv-feedback-text[b-sur21sbq6k] {
    /* extra indent nesting the prose one step under the score rows — the legacy
       Feedback.tsx indents the paragraph deeper than the metric rows (pl-8 inside
       the pl-12 body); 24px keeps that nesting on the page's 8px rhythm */
    margin: 16px 0 0 24px;
    text-align: justify;
    color: var(--vh-black-70);
    font-size: 15px;
}

/* ---- Transcript card (flat bordered surface; HTML injected via MarkupString) ---- */
.iv-transcript-card[b-sur21sbq6k] {
    min-height: 120px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-cobalt);
    padding: 40px 40px 64px;
    font-size: 15px;
    line-height: 1.9;
}

/* Per-word score highlights inside the transcript HTML (legacy globals.css
   .highlight-english*). ::deep — the HTML comes in raw via MarkupString. */
.iv-transcript-card[b-sur21sbq6k]  .highlight-english {
    position: relative;
    margin: 0 2px;
    border-radius: 2px;
    background: var(--vh-secondary);
    padding: 2px 8px;
    color: var(--vh-on-primary); /* fixed action contrast — correct in both themes */
    cursor: pointer;
}

.iv-transcript-card[b-sur21sbq6k]  .highlight-english-tooltip {
    position: absolute;
    display: none;
    top: -35px;
    left: 0;
    width: max-content;
    border-radius: 2px;
    background: var(--vh-black-90);
    padding: 4px 8px;
    /* --vh-black-90 flips to near-white on dark, so pair it with --vh-surface
       (theme-aware contrast) to keep the tooltip readable in both themes */
    color: var(--vh-surface);
    font-size: 13px;
}

.iv-transcript-card[b-sur21sbq6k]  .highlight-english:hover .highlight-english-tooltip {
    display: block;
}

/* ---- Versions library (legacy ShowLibrary.tsx) ---- */
.iv-lib-head[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.iv-lib-grid[b-sur21sbq6k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.iv-lib-card[b-sur21sbq6k] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-cobalt);
    overflow: hidden;
}

.iv-lib-video[b-sur21sbq6k] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--vh-media-black); /* video letterbox — intentionally theme-independent */
}

.iv-lib-body[b-sur21sbq6k] { padding: 16px 16px 8px; }

.iv-lib-meta[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.iv-lib-date[b-sur21sbq6k] {
    font-weight: 700;
    color: var(--vh-black-70);
    font-size: 14px;
}

.iv-lib-level[b-sur21sbq6k] {
    color: var(--vh-black-70);
    font-size: 14px;
}

.iv-lib-actions[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
}

.iv-lib-delete[b-sur21sbq6k] {
    border: none;
    background: var(--vh-transparent);
    padding: 4px 0;
    color: var(--vh-danger);
    font-family: var(--vh-font-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.iv-lib-delete:disabled[b-sur21sbq6k] { color: var(--vh-disabled-text); cursor: not-allowed; }

/* Default-video star: neutral outline → warning token when default. */
.iv-lib-star[b-sur21sbq6k] {
    border: none;
    background: var(--vh-transparent);
    padding: 0;
    color: var(--vh-gray-30);
    font-size: 22px;
    cursor: pointer;
}

.iv-lib-star:hover:not(:disabled)[b-sur21sbq6k] { color: var(--vh-warning); }

.iv-lib-star-default[b-sur21sbq6k],
.iv-lib-star-default:disabled[b-sur21sbq6k] { color: var(--vh-warning-hover); cursor: default; }

.iv-lib-star:disabled:not(.iv-lib-star-default)[b-sur21sbq6k] { color: var(--vh-gray-30); cursor: not-allowed; }

/* The embedded profile card is constrained by the 732px profile column even
   on wide desktop viewports, so it cannot rely on viewport media queries. */
.iv-page-embedded .iv-toolbar[b-sur21sbq6k] {
    flex-direction: column;
    align-items: stretch;
}

.iv-page-embedded .iv-tags[b-sur21sbq6k],
.iv-page-embedded .iv-actions[b-sur21sbq6k] {
    justify-content: flex-start;
}

.iv-page-embedded .iv-grid[b-sur21sbq6k] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.iv-page-embedded .iv-section-first[b-sur21sbq6k] {
    margin-top: 32px;
}

.iv-page-embedded .iv-lib-grid[b-sur21sbq6k] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Modals (PrivateAlert + interim Record modal) ----
   Hand-rolled backdrop kept for now (no Blazorise Modal on this page yet);
   surfaces/overlay/shadow are tokenized to the canon modal spec. */
.iv-modal-backdrop[b-sur21sbq6k] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vh-overlay);
    animation: iv-fade-in-b-sur21sbq6k .15s ease;
}

.iv-modal[b-sur21sbq6k] {
    width: 90vw;
    max-width: 650px;
    max-height: 95vh;
    overflow-y: auto;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    padding: 33px;
    box-shadow: var(--vh-shadow-modal);
    font-family: var(--vh-font-primary);
}

.iv-modal-head[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.iv-modal-title[b-sur21sbq6k] {
    font-size: 20px;
    font-weight: 700;
    color: var(--vh-black-90);
}

.iv-modal-title-orange[b-sur21sbq6k] { color: var(--vh-secondary); }

.iv-modal-close[b-sur21sbq6k] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-black-70);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.iv-modal-body[b-sur21sbq6k] {
    padding-top: 24px;
    color: var(--vh-black-70);
    font-size: 16px;
}

.iv-modal-body p[b-sur21sbq6k] { margin: 0; }

.iv-modal-foot[b-sur21sbq6k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--vh-line);
}

@keyframes iv-fade-in-b-sur21sbq6k {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- Responsive: stack like the legacy mobile layout ---- */
@media (max-width: 1100px) {
    .iv-lib-grid[b-sur21sbq6k] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .iv-grid[b-sur21sbq6k] { grid-template-columns: 1fr; }

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

    .iv-tags[b-sur21sbq6k] { justify-content: center; }

    .iv-actions[b-sur21sbq6k] { justify-content: center; }

    .iv-btn[b-sur21sbq6k] { flex: 1; }

    .iv-card-body[b-sur21sbq6k] { padding-left: 0; }
}

@media (max-width: 700px) {
    .iv-lib-grid[b-sur21sbq6k] { grid-template-columns: 1fr; }
    .iv-page-embedded .iv-lib-grid[b-sur21sbq6k] { grid-template-columns: 1fr; }

    .iv-modal[b-sur21sbq6k] { padding: 20px; }
}
/* /Pages/IntroVideo/VideoRecorderModal.razor.rz.scp.css */
/* Webcam recorder modal — colors consume vh-tokens.css (design-system.md).
   Legacy next-platform hexes map to the nearest existing token, same table as
   Index.razor.css (dark-100 → --vh-black-50, dark-200 → --vh-black-70,
   neutral-200 → --vh-surface-soft, neutral-300 → --vh-line, action-400 hover → --vh-primary). */

.vrm-backdrop[b-sqd2lr8odi] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vrm-backdrop-intro[b-sqd2lr8odi] { background: var(--vh-surface-soft); }  /* legacy bg-gray-200 full screen */
.vrm-backdrop-answer[b-sqd2lr8odi] { background: rgb(var(--vh-black-rgb) / 90%); }     /* legacy MUI 0.9 media backdrop, theme-independent */

.vrm-hidden[b-sqd2lr8odi] { display: none; }

/* ---- intro shell: header + 3-column grid (24% | auto | 24%) ---- */
.vrm-shell-intro[b-sqd2lr8odi] {
    width: 100%;
    height: 100%;
    padding: 16px 40px;
    display: flex;
    flex-direction: column;
    font-family: var(--vh-font-primary);
    color: var(--vh-black-70);
}

.vrm-intro-head[b-sqd2lr8odi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vrm-intro-brand[b-sqd2lr8odi] {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: var(--vh-primary-hover); font-size: 22px;
    visibility: hidden; /* slot mirrors the legacy logo position; badge carries the icon */
}

.vrm-intro-title-wrap[b-sqd2lr8odi] { display: flex; align-items: center; gap: 12px; }

.vrm-intro-badge[b-sqd2lr8odi] {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--vh-primary-hover);
    color: var(--vh-color-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}

.vrm-intro-title[b-sqd2lr8odi] {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--vh-primary-hover);
    line-height: 1;
}

.vrm-x[b-sqd2lr8odi] {
    border: 0; background: var(--vh-transparent);
    font-size: 20px; color: var(--vh-black-70);
    cursor: pointer;
    padding: 4px;
}

.vrm-x-answer[b-sqd2lr8odi] {
    position: absolute;
    top: 10px; right: 10px;
    color: var(--vh-color-white); /* over the 0.9 media backdrop — theme-independent */
    z-index: 5;
}

.vrm-intro-grid[b-sqd2lr8odi] {
    flex: 1;
    margin-top: 24px;
    display: grid;
    grid-template-columns: 24% auto 24%;
    gap: 24px;
    min-height: 0;
}

@media (max-width: 992px) {
    .vrm-intro-grid[b-sqd2lr8odi] { grid-template-columns: 1fr; overflow-y: auto; }
    .vrm-shell-intro[b-sqd2lr8odi] { padding: 16px; overflow-y: auto; }
}

/* ---- side panels ---- */
.vrm-panel[b-sqd2lr8odi] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-cobalt);
    padding: 24px;
    overflow-y: auto;
}

.vrm-example[b-sqd2lr8odi] { margin-bottom: 20px; }
.vrm-example video[b-sqd2lr8odi] {
    width: 100%;
    border-radius: 12px;
    background: var(--vh-media-black); /* video letterbox — intentionally theme-independent */
    aspect-ratio: 16 / 9;
}
.vrm-example-title[b-sqd2lr8odi] { margin: 8px 0 0; font-weight: 700; font-size: 14px; }
.vrm-example-sub[b-sqd2lr8odi] { margin: 0; font-size: 13px; color: var(--vh-black-50); }

.vrm-tips-title[b-sqd2lr8odi] { margin: 0; font-weight: 700; font-size: 16px; }
.vrm-tips-sub[b-sqd2lr8odi] { margin: 0 0 16px; font-size: 13px; color: var(--vh-black-50); }
.vrm-tip[b-sqd2lr8odi] {
    display: flex;
    gap: 10px;
    background: var(--vh-surface-soft);
    border-radius: var(--vh-radius-card-sm);
    padding: 14px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
}
.vrm-tip i[b-sqd2lr8odi] { color: var(--vh-primary-hover); margin-top: 2px; }

/* ---- recorder stage ---- */
.vrm-stage-col[b-sqd2lr8odi] { display: flex; flex-direction: column; align-items: center; min-height: 0; padding-bottom: 8px; }

.vrm-stage[b-sqd2lr8odi] {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    /* min-height 0 (not a fixed floor) so the column never overflows the
       viewport — the controls bar must stay clickable above the cookie bar */
    min-height: 0;
    border-radius: 16px;
    background: var(--vh-media-black);
    overflow: hidden;
}

.vrm-shell-answer[b-sqd2lr8odi] {
    position: relative;
    width: min(900px, 92vw);
    background: var(--vh-surface);
    border-radius: 5px;
    padding: 0;
    box-shadow: var(--vh-shadow-modal);
}

.vrm-answer-body[b-sqd2lr8odi] { display: flex; flex-direction: column; }
.vrm-answer-body .vrm-stage[b-sqd2lr8odi] { border-radius: 5px 5px 0 0; min-height: 420px; flex: initial; height: 56vh; }
.vrm-answer-body .vrm-controls[b-sqd2lr8odi] { margin: 12px; }

.vrm-video[b-sqd2lr8odi] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--vh-media-black);
    display: block;
}

.vrm-video-live[b-sqd2lr8odi] { transform: scaleX(-1); } /* legacy Webcam mirrored */

.vrm-mask[b-sqd2lr8odi] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vrm-pill[b-sqd2lr8odi] {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    background: rgb(var(--vh-white-rgb) / 92%); /* over live video — theme-independent */
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vh-danger);
}

.vrm-pill-dot[b-sqd2lr8odi] {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--vh-danger);
    animation: vrm-blink-b-sqd2lr8odi 1s ease infinite;
}

@keyframes vrm-blink-b-sqd2lr8odi { 50% { opacity: 0.25; } }

.vrm-countdown[b-sqd2lr8odi] {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgb(var(--vh-black-rgb) / 55%); /* over live video — theme-independent */
}

.vrm-countdown span[b-sqd2lr8odi] {
    font-size: 96px;
    font-weight: 700;
    color: var(--vh-color-white);
}

.vrm-camera-error[b-sqd2lr8odi] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--vh-color-white); /* over the media stage — theme-independent */
    background: rgb(var(--vh-black-rgb) / 75%);
    font-size: 14px;
}

.vrm-camera-error i[b-sqd2lr8odi] { font-size: 28px; color: var(--vh-warning); }
.vrm-camera-error p[b-sqd2lr8odi] { margin: 0; max-width: 420px; }

/* ---- controls bar ---- */
.vrm-controls[b-sqd2lr8odi] {
    /* overlap onto the video stage — expressed once so the offset is intentional */
    --vrm-overlap: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--vh-surface);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-pop);
    padding: 12px 24px;
    margin-top: calc(-1 * var(--vrm-overlap));
    z-index: 2;
    min-height: 56px;
    max-width: 95%;
}

.vrm-record-btn[b-sqd2lr8odi] {
    display: flex; align-items: center; gap: 8px;
    border: 0;
    background: var(--vh-danger);
    color: var(--vh-color-white);
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
}

.vrm-record-btn:hover[b-sqd2lr8odi] { filter: brightness(0.95); }
.vrm-record-btn:disabled[b-sqd2lr8odi] { opacity: .55; cursor: wait; }

.vrm-record-dot[b-sqd2lr8odi] { width: 14px; height: 14px; border-radius: 50%; background: var(--vh-color-white); }

.vrm-stop-btn[b-sqd2lr8odi] {
    display: flex; align-items: center; gap: 8px;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-black-70);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
}

.vrm-stop-square[b-sqd2lr8odi] { width: 14px; height: 14px; border-radius: 3px; background: var(--vh-danger); }

.vrm-time[b-sqd2lr8odi] { font-size: 13px; font-weight: 700; min-width: 38px; }

.vrm-progress[b-sqd2lr8odi] {
    width: 260px;
    height: 10px;
    border-radius: 999px;
    background: var(--vh-line);
    overflow: hidden;
}

.vrm-progress-fill[b-sqd2lr8odi] {
    height: 100%;
    border-radius: 999px;
    background: var(--vh-primary-hover);
    transition: width .4s linear;
}

.vrm-progress-saving[b-sqd2lr8odi] { width: 100%; margin-top: 10px; }

.vrm-gear[b-sqd2lr8odi] {
    border: 0; background: var(--vh-transparent);
    font-size: 20px;
    color: var(--vh-black-70);
    cursor: pointer;
}

/* device picker — ui-combos Type 2 (button + radio menu) */
.vrm-dd[b-sqd2lr8odi] { position: relative; }

.vrm-dd-menu[b-sqd2lr8odi] {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 280px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--vh-surface);
    border-radius: 10px;
    box-shadow: var(--vh-shadow-pop);
    padding: 12px;
    z-index: 10;
}

.vrm-dd-title[b-sqd2lr8odi] {
    margin: 6px 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vh-primary-hover);
}

.vrm-dd-item[b-sqd2lr8odi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--vh-radius-md);
}

.vrm-dd-item:hover[b-sqd2lr8odi] { background: var(--vh-surface-soft); }

.vrm-dd-item input[b-sqd2lr8odi] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.vrm-dd-check[b-sqd2lr8odi] {
    margin-left: auto;
    color: var(--vh-selection-text);
    font-weight: 700;
    visibility: hidden;
}

.vrm-dd-item:has(input:checked)[b-sqd2lr8odi] {
    background: var(--vh-primary-soft);
    color: var(--vh-selection-text);
    font-weight: 600;
}

.vrm-dd-item:has(input:checked) .vrm-dd-check[b-sqd2lr8odi] { visibility: visible; }

.vrm-dd-item:has(input:focus-visible)[b-sqd2lr8odi] {
    box-shadow: inset 3px 0 0 var(--vh-input-focus);
}

.vrm-cancel-link[b-sqd2lr8odi] {
    margin-top: 16px;
    border: 0; background: var(--vh-transparent);
    color: var(--vh-black-50);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.vrm-toast[b-sqd2lr8odi] {
    margin-top: 12px;
    background: var(--vh-black-80);
    /* --vh-black-80 flips light on dark, so pair with --vh-surface
       (theme-aware contrast) to keep the toast readable in both themes */
    color: var(--vh-surface);
    font-size: 13px;
    border-radius: 8px;
    padding: 10px 16px;
}

/* ---- shared buttons ----
   NOTE: modal-local button family kept for the legacy recorder look (radius 8);
   a follow-up could migrate to the .vh-btn-* utilities. Colors are tokenized. */
.vrm-btn[b-sqd2lr8odi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--vh-transparent);
}

.vrm-btn-outline[b-sqd2lr8odi] { background: var(--vh-surface); border-color: var(--vh-primary-hover); color: var(--vh-primary-hover); }
.vrm-btn-outline:hover[b-sqd2lr8odi] { background: var(--vh-blue-tint); }
.vrm-btn-solid[b-sqd2lr8odi] { background: var(--vh-primary-hover); color: var(--vh-on-primary); }
.vrm-btn-solid:hover[b-sqd2lr8odi] { background: var(--vh-primary); } /* legacy action hover → deeper brand tone */
.vrm-btn-soft[b-sqd2lr8odi] { background: var(--vh-surface-soft); color: var(--vh-black-70); }
.vrm-btn-soft:hover[b-sqd2lr8odi] { background: var(--vh-line); }
.vrm-btn-danger[b-sqd2lr8odi] { background: var(--vh-danger-soft); color: var(--vh-danger); }
.vrm-btn-danger:hover[b-sqd2lr8odi] { background: rgb(var(--vh-raw-rgb-238-94-95) / 32%); } /* one step deeper than --vh-danger-soft */

/* ---- small dialogs (limit / discard / record-again / saving / success) ---- */
.vrm-dialog-backdrop[b-sqd2lr8odi] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: var(--vh-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vrm-dialog[b-sqd2lr8odi] {
    background: var(--vh-surface);
    border-radius: 8px;
    padding: 28px;
    width: min(440px, 92vw);
    font-family: var(--vh-font-primary);
    color: var(--vh-black-70);
    text-align: left;
}

.vrm-dialog-narrow[b-sqd2lr8odi] { width: min(360px, 92vw); text-align: center; }

.vrm-dialog-head[b-sqd2lr8odi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vrm-dialog-title[b-sqd2lr8odi] { font-size: 18px; font-weight: 700; }
.vrm-dialog-title-center[b-sqd2lr8odi] { font-size: 16px; font-weight: 700; text-align: center; margin: 10px 0 4px; }
.vrm-red[b-sqd2lr8odi] { color: var(--vh-danger); }
.vrm-green[b-sqd2lr8odi] { color: var(--vh-success); }

.vrm-dialog-text[b-sqd2lr8odi] { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.vrm-dialog-text-center[b-sqd2lr8odi] { text-align: center; color: var(--vh-black-50); }

.vrm-dialog-redirect[b-sqd2lr8odi] {
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--vh-success);
    text-align: center;
}

.vrm-dialog-foot[b-sqd2lr8odi] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--vh-line);
}

.vrm-dialog-foot-center[b-sqd2lr8odi] { justify-content: center; border-top: 0; padding-top: 4px; }

.vrm-dialog-icon[b-sqd2lr8odi] {
    width: 44px; height: 44px;
    margin: 0 auto;
    border-radius: 12px;
    background: var(--vh-surface-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}

.vrm-dialog-icon-red[b-sqd2lr8odi] { background: var(--vh-danger-soft); color: var(--vh-danger); }
.vrm-dialog-icon-green[b-sqd2lr8odi] { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); }

.vrm-spinner[b-sqd2lr8odi] {
    width: 22px; height: 22px;
    border: 3px solid var(--vh-line);
    border-top-color: var(--vh-primary-hover);
    border-radius: 50%;
    animation: vrm-rotate-b-sqd2lr8odi .8s linear infinite;
    display: inline-block;
}

@keyframes vrm-rotate-b-sqd2lr8odi { to { transform: rotate(360deg); } }
/* /Pages/Jobs/Detail.razor.rz.scp.css */
/* ======================================================================
   "Cobalt" job detail — same light, on-brand system as the /jobs board card
   (Pages/Jobs/Index.razor.css). Consumes the Cobalt tokens (vh-tokens.css):
   --vh-surface / --vh-line / --vh-ink / --vh-body / --vh-muted, action tints,
   gradient CTA, tonal status colors. Inter everywhere.
   Layout: Cobalt hero + two-column body + sticky apply rail.
   ====================================================================== */
.vh-jd[b-o5pktbudhb] {
    max-width: 1100px; margin: 0 auto;
    font-family: var(--vh-font-primary);
    color: var(--vh-body);
}
.vh-jd-loading[b-o5pktbudhb], .vh-jd-notfound[b-o5pktbudhb] { text-align: center; padding: 3rem 1rem; }
.vh-jd-notfound h2[b-o5pktbudhb] { font-size: 1.2rem; margin-bottom: 1rem; color: var(--vh-ink); }

/* ---- back link ---- */
.vh-jd-back[b-o5pktbudhb] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--vh-primary); text-decoration: none;
    margin-bottom: 14px;
}
.vh-jd-back:hover[b-o5pktbudhb] { color: var(--vh-primary-active); }
.vh-jd-back svg[b-o5pktbudhb] { display: block; }

/* ---- good-fit toast ---- */
.vh-jd-toast[b-o5pktbudhb] {
    background: var(--vh-blue-tint); border: 1px solid var(--vh-tonal-blue-bd); color: var(--vh-blue-deep);
    border-radius: var(--vh-radius-card-sm); padding: .75rem 1rem; margin-bottom: 16px; font-size: .9rem; font-weight: 500;
}

/* ---- HERO ---- */
.vh-jd-hero[b-o5pktbudhb] {
    position: relative; background: var(--vh-surface); border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    padding: 22px 26px; margin-bottom: 18px;
    box-shadow: var(--vh-shadow-surface);
}
.vh-jd-badges[b-o5pktbudhb] { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.vh-jd-tag-new[b-o5pktbudhb] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 7px; line-height: 1;
    color: var(--vh-blue-deep); background: rgb(var(--vh-primary-hover-rgb) / 12%);
}
.vh-jd-tag-new .dot[b-o5pktbudhb] { width: 6px; height: 6px; border-radius: 50%; background: var(--vh-primary-hover); }
.vh-jd-tag-closed[b-o5pktbudhb] {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 7px; line-height: 1;
    color: var(--vh-tonal-red-text); background: var(--vh-tonal-red-bg);
}
.vh-jd-hero h1[b-o5pktbudhb] {
    font-weight: 700; font-size: 27px; line-height: 1.12; letter-spacing: -.02em;
    color: var(--vh-ink); margin: 0 0 8px;
}

/* fact row */
.vh-jd-facts[b-o5pktbudhb] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px 16px;
    font-size: 13px; color: var(--vh-body); margin-bottom: 16px;
}
.vh-jd-fact[b-o5pktbudhb] { display: inline-flex; align-items: center; gap: 6px; }
.vh-jd-fact b[b-o5pktbudhb] { color: var(--vh-ink); font-weight: 700; }
.vh-jd-fact-muted[b-o5pktbudhb] { color: var(--vh-muted); }
.vh-flag[b-o5pktbudhb] { font-size: 1.05rem; line-height: 1; }

/* work-mode pill (colored by relocate). */
.vh-jd-mode-pill[b-o5pktbudhb] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 500; padding: 4px 11px 4px 9px; border-radius: 20px;
}
.vh-jd-mode-pill .mk[b-o5pktbudhb] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vh-jd-mode-remote[b-o5pktbudhb] { color: var(--vh-primary); background: rgb(var(--vh-primary-hover-rgb) / 10%); border: 1px solid var(--vh-tonal-blue-bd); }
.vh-jd-mode-relocation[b-o5pktbudhb] { color: var(--vh-tonal-amber-text); background: var(--vh-tonal-amber-bg); border: 1px solid var(--vh-tonal-amber-bd); }
.vh-jd-mode-hybrid[b-o5pktbudhb] { color: var(--vh-tonal-purple-text); background: var(--vh-tonal-purple-bg); border: 1px solid var(--vh-tonal-purple-bd); }
.vh-jd-mode-onsite[b-o5pktbudhb] { color: var(--vh-tonal-slate-text); background: var(--vh-tonal-slate-bg); border: 1px solid var(--vh-tonal-slate-bd); }
.vh-jd-visa[b-o5pktbudhb] { font-weight: 600; margin-left: 4px; color: inherit; text-decoration: underline; }

/* candidate-location required (amber) */
.vh-jd-candidate-location[b-o5pktbudhb] {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; padding: 9px 12px; border-radius: 10px;
    background: var(--vh-tonal-amber-bg); border: 1px dashed var(--vh-tonal-amber-bd); color: var(--vh-tonal-amber-text);
}
.vh-jd-candidate-location .vh-pin[b-o5pktbudhb] { display: inline-flex; flex: 0 0 auto; color: var(--vh-tonal-amber-text); }
.vh-jd-candidate-location .vh-pin svg[b-o5pktbudhb] { display: block; }
.vh-jd-candidate-location b[b-o5pktbudhb] { color: var(--vh-tonal-amber-text); font-weight: 700; }
.vh-jd-candidate-location .lbl[b-o5pktbudhb] {
    flex: 0 0 auto; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--vh-tonal-amber-text); background: rgb(var(--vh-raw-rgb-245-158-11) / 18%); border: 1px solid rgb(var(--vh-raw-rgb-245-158-11) / 40%);
    padding: 3px 7px; border-radius: 6px;
}

/* ---- closed banner ---- */
.vh-jd-unavailable[b-o5pktbudhb] {
    background: var(--vh-tonal-red-bg); border: 1px solid var(--vh-tonal-red-bd); color: var(--vh-tonal-red-text);
    border-radius: var(--vh-radius-card-sm); padding: .75rem 1rem; margin-bottom: 16px; font-size: .9rem;
}
.vh-jd-unavailable a[b-o5pktbudhb] { color: var(--vh-tonal-red-text); font-weight: 700; }

/* ---- two-column body + sticky rail ---- */
.vh-jd-grid[b-o5pktbudhb] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 992px) { .vh-jd-grid[b-o5pktbudhb] { grid-template-columns: auto; } }

/* Main column: stacked Cobalt cards with a single uniform gap (mirrors React's
   LeftWrap — the gap lives on the column, the cards carry no own margin). */
.vh-jd-main[b-o5pktbudhb] { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Body card shell (skills, about, benefits) — flush padding, no extra margin. */
.vh-jd-card[b-o5pktbudhb] {
    background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card);
    padding: 26px 28px; box-sizing: border-box;
    box-shadow: var(--vh-shadow-surface);
}
@media (max-width: 767px) { .vh-jd-card[b-o5pktbudhb] { padding: 22px 20px; } }

/* Cobalt block heading used inside each body card. */
.vh-jd-block-title[b-o5pktbudhb] {
    font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--vh-ink);
    margin: 0 0 16px;
}

/* Sub-blocks inside the skills card (must-have / nice-to-have / languages). */
.vh-jd-subblock + .vh-jd-subblock[b-o5pktbudhb] { margin-top: 22px; }

/* Skills key head (label + rule + must-have legend). */
.vh-jd-skill-key-head[b-o5pktbudhb] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vh-jd-skill-key-head .label[b-o5pktbudhb] {
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--vh-muted); white-space: nowrap;
}
.vh-jd-skill-key-head .rule[b-o5pktbudhb] { flex: 1; height: 1px; background: var(--vh-line); }
.vh-jd-skill-key-head .key[b-o5pktbudhb] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--vh-primary); white-space: nowrap;
}
.vh-jd-skill-key-head .key i[b-o5pktbudhb] {
    width: 8px; height: 8px; border-radius: 2px; display: inline-block;
    background: var(--vh-gradient-primary);
}

/* skill chips: must-have = solid primary, nice-to-have / languages = outline */
.vh-jd-chips[b-o5pktbudhb] { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-jd-skill[b-o5pktbudhb] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 9px; line-height: 1;
    color: var(--vh-blue-deep); background: var(--vh-surface-soft); border: 1px solid var(--vh-line-strong);
}
.vh-jd-skill small[b-o5pktbudhb] { color: var(--vh-muted); margin-left: .35rem; font-weight: 500; font-size: 11.5px; }
.vh-jd-skill-must[b-o5pktbudhb] {
    color: var(--vh-on-primary); border: 1px solid var(--vh-transparent);
    background: var(--vh-gradient-primary);
    box-shadow: 0 4px 12px -6px rgb(var(--vh-primary-hover-rgb) / 60%);
}
.vh-jd-skill-must small[b-o5pktbudhb] { color: rgb(var(--vh-white-rgb) / 85%); }

/* description — flush with the card padding (no stray top/bottom margin) */
.vh-jd-description[b-o5pktbudhb] { color: var(--vh-body); overflow-wrap: anywhere; }
.vh-jd-description > :first-child[b-o5pktbudhb] { margin-top: 0; }
.vh-jd-description > :last-child[b-o5pktbudhb] { margin-bottom: 0; }
.vh-jd-description p[b-o5pktbudhb], .vh-jd-description span[b-o5pktbudhb],
.vh-jd-description ul li[b-o5pktbudhb], .vh-jd-description ol li[b-o5pktbudhb] { font-size: 15px; line-height: 25px; color: var(--vh-body); }
.vh-jd-description ul[b-o5pktbudhb], .vh-jd-description ol[b-o5pktbudhb] { padding-left: 20px; }
.vh-jd-description h1[b-o5pktbudhb], .vh-jd-description h2[b-o5pktbudhb], .vh-jd-description h3[b-o5pktbudhb],
.vh-jd-description h4[b-o5pktbudhb], .vh-jd-description h5[b-o5pktbudhb], .vh-jd-description h6[b-o5pktbudhb] {
    font-weight: 700; color: var(--vh-ink); margin: 20px 0 10px;
}
.vh-jd-description h1[b-o5pktbudhb] { font-size: 22px; line-height: 30px; }
.vh-jd-description h2[b-o5pktbudhb] { font-size: 20px; line-height: 28px; }
.vh-jd-description h3[b-o5pktbudhb] { font-size: 18px; line-height: 26px; }
.vh-jd-description a[b-o5pktbudhb] { color: var(--vh-primary); text-decoration: none; }
.vh-jd-description a:hover[b-o5pktbudhb] { color: var(--vh-primary-active); }
.vh-jd-description :global(img)[b-o5pktbudhb] { max-width: 100%; }
.vh-jd-screening-note[b-o5pktbudhb] {
    margin-top: 16px; font-size: 12.5px; font-weight: 500; color: var(--vh-blue-deep);
    background: var(--vh-blue-tint); border: 1px solid rgb(var(--vh-primary-hover-rgb) / 18%);
    border-radius: 10px; padding: 9px 12px; display: inline-block;
}

/* recommended/recent headings keep the small uppercase label */
.vh-jd-recommended h3[b-o5pktbudhb] {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vh-muted);
    margin: 1.5rem 0 .6rem;
}

/* benefits */
.vh-jd-benefit-cards[b-o5pktbudhb] { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-jd-benefit[b-o5pktbudhb] {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--vh-line); border-radius: 10px;
    padding: 7px 12px; font-size: 12.5px; font-weight: 500; color: var(--vh-body); background: var(--vh-surface);
}
.vh-jd-other-benefits[b-o5pktbudhb] { margin-top: .6rem; font-size: 12.5px; color: var(--vh-muted); }

/* ---- mobile-only apply CTA (<992px the rail collapses) ---- */
/* No margin — the .vh-jd-main flex gap provides the spacing above it. */
.vh-jd-apply-bottom[b-o5pktbudhb] { display: none; }
@media (max-width: 992px) { .vh-jd-apply-bottom[b-o5pktbudhb] { display: block; } }

/* shared primary apply button (Cobalt gradient) */
.vh-jd-apply-btn[b-o5pktbudhb] {
    display: flex; width: 100%; box-sizing: border-box;
    align-items: center; justify-content: center; gap: 6px;
    font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--vh-on-primary);
    text-decoration: none; cursor: pointer; border: 0;
    padding: 13px 18px; border-radius: 10px;
    background: var(--vh-gradient-primary);
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / 70%);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vh-jd-apply-btn:hover[b-o5pktbudhb] { color: var(--vh-on-primary); transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / 85%); }
.vh-jd-apply-btn:disabled[b-o5pktbudhb] { opacity: .65; cursor: default; transform: none; box-shadow: none; }

/* ---- sticky apply rail ---- */
.vh-jd-side[b-o5pktbudhb] { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 992px) { .vh-jd-side[b-o5pktbudhb] { position: static; } }

.vh-jd-apply-card[b-o5pktbudhb] {
    background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card); padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--vh-shadow-surface);
}
.vh-jd-apply-salary[b-o5pktbudhb] {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px; border-radius: var(--vh-radius-card-sm);
    background: var(--vh-blue-tint); border: 1px solid rgb(var(--vh-primary-hover-rgb) / 18%);
}
.vh-jd-apply-salary-label[b-o5pktbudhb] {
    font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vh-muted);
}
.vh-jd-apply-salary-amount[b-o5pktbudhb] {
    font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--vh-ink);
    display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.vh-jd-apply-salary-amount .cur[b-o5pktbudhb] { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--vh-primary); }
.vh-jd-apply-salary-amount .per[b-o5pktbudhb] { font-size: 12px; font-weight: 400; color: var(--vh-muted); }

.vh-jd-applied[b-o5pktbudhb] {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--vh-tonal-green-text); font-weight: 700; font-size: 14px;
    background: var(--vh-tonal-green-bg); border: 1px solid var(--vh-tonal-green-bd);
    border-radius: 10px; padding: 12px;
}
.vh-jd-applied-check[b-o5pktbudhb] { display: inline-flex; align-items: center; color: var(--vh-tonal-green-text); }
.vh-jd-applied-check svg[b-o5pktbudhb] { display: block; }

/* screening note inside the apply rail (centered, muted) */
.vh-jd-screening-rail[b-o5pktbudhb] { font-size: 12px; color: var(--vh-muted); text-align: center; }

/* Share this job — outline secondary, "copied" flips to success */
.vh-jd-share[b-o5pktbudhb] {
    width: 100%; box-sizing: border-box; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--vh-line); font-size: 14px; font-weight: 700;
    color: var(--vh-primary); background: var(--vh-surface); padding: 11px 18px; border-radius: 10px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.vh-jd-share svg[b-o5pktbudhb] { display: block; }
.vh-jd-share:hover[b-o5pktbudhb] { background: var(--vh-blue-tint); border-color: var(--vh-primary-hover); }
.vh-jd-share.copied[b-o5pktbudhb] { color: var(--vh-tonal-green-text); background: var(--vh-tonal-green-bg); border-color: var(--vh-tonal-green-bd); }

/* Intro-video nudge — inviting primary callout + gradient CTA */
.vh-jd-introvideo[b-o5pktbudhb] {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 18px 20px; box-sizing: border-box;
    background: var(--vh-blue-tint); border: 1px solid rgb(var(--vh-primary-hover-rgb) / 22%); border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-surface);
}
.vh-jd-introvideo-head[b-o5pktbudhb] { display: flex; align-items: center; gap: 9px; }
.vh-jd-introvideo-icon[b-o5pktbudhb] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; color: var(--vh-on-primary);
    background: var(--vh-gradient-primary);
}
.vh-jd-introvideo-icon svg[b-o5pktbudhb] { display: block; }
.vh-jd-introvideo-title[b-o5pktbudhb] { font-size: 15px; font-weight: 700; color: var(--vh-ink); }
.vh-jd-introvideo-text[b-o5pktbudhb] { margin: 0; font-size: 13px; line-height: 19px; color: var(--vh-body); }
.vh-jd-introvideo-btn[b-o5pktbudhb] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box; margin-top: 2px; text-decoration: none;
    font-size: 14px; font-weight: 700; color: var(--vh-on-primary);
    background: var(--vh-gradient-primary);
    padding: 11px 18px; border-radius: 10px;
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / 70%);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vh-jd-introvideo-btn svg[b-o5pktbudhb] { display: block; }
.vh-jd-introvideo-btn:hover[b-o5pktbudhb] { color: var(--vh-on-primary); transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / 85%); }

/* Applied-successfully rail box (--vh-success) + withdraw trigger */
.vh-jd-success[b-o5pktbudhb] {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--vh-tonal-green-bd); border-radius: var(--vh-radius-card); padding: 18px 20px;
    background: var(--vh-tonal-green-bg); box-sizing: border-box;
}
.vh-jd-success-head[b-o5pktbudhb] { display: flex; align-items: center; gap: 8px; color: var(--vh-tonal-green-text); font-size: 14px; font-weight: 700; }
.vh-jd-success-check[b-o5pktbudhb] { display: inline-flex; align-items: center; color: var(--vh-tonal-green-text); }
.vh-jd-success-check svg[b-o5pktbudhb] { display: block; }
.vh-jd-success p[b-o5pktbudhb] { font-size: 13px; line-height: 20px; color: var(--vh-tonal-green-text); margin: 0; }
.vh-jd-withdraw-trigger[b-o5pktbudhb] {
    width: 100%; box-sizing: border-box; margin-top: 4px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--vh-body);
    background: var(--vh-surface); border: 1px solid var(--vh-line-strong); border-radius: 10px; padding: 11px 16px;
    transition: border-color .2s ease, color .2s ease;
}
.vh-jd-withdraw-trigger:hover[b-o5pktbudhb] { color: var(--vh-blue-deep); border-color: rgb(var(--vh-primary-hover-rgb) / 50%); }

.vh-jd-social-proof[b-o5pktbudhb] {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--vh-body);
    background: var(--vh-blue-tint); border: 1px solid rgb(var(--vh-primary-hover-rgb) / 18%);
    border-radius: var(--vh-radius-card-sm); padding: 11px 13px;
}
.vh-jd-social-proof b[b-o5pktbudhb] { color: var(--vh-ink); font-weight: 700; }
.vh-jd-social-proof .vh-jd-check[b-o5pktbudhb] { color: var(--vh-tonal-green-text); font-weight: 700; }

/* Post-apply "Verify your phone" card (Cobalt). */
.vh-jd-phone[b-o5pktbudhb] {
    border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card); padding: 18px 20px 20px; background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
}
.vh-jd-phone-head[b-o5pktbudhb] { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.vh-jd-phone-icon[b-o5pktbudhb] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; color: var(--vh-on-primary);
    background: var(--vh-gradient-primary);
}
.vh-jd-phone-icon svg[b-o5pktbudhb] { display: block; }
.vh-jd-phone-title[b-o5pktbudhb] { font-size: 15px; font-weight: 700; color: var(--vh-ink); }
.vh-jd-phone-text[b-o5pktbudhb] { margin: 0 0 14px; font-size: 13px; line-height: 19px; color: var(--vh-body); }
.vh-jd-phone-field[b-o5pktbudhb] {
    width: 100%; box-sizing: border-box; height: 44px; margin-bottom: 14px;
    font-size: 14px; color: var(--vh-ink); border: 1px solid var(--vh-line-strong); border-radius: 10px;
    padding: 0 12px; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.vh-jd-phone-field:focus[b-o5pktbudhb] { border-color: var(--vh-primary-hover); box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / 15%); }
.vh-jd-phone-code[b-o5pktbudhb] {
    width: 100%; box-sizing: border-box; height: 52px; margin-bottom: 14px;
    font-size: 22px; font-weight: 700; letter-spacing: 8px; text-align: center; color: var(--vh-ink);
    border: 1px solid var(--vh-line-strong); border-radius: 10px; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.vh-jd-phone-code[b-o5pktbudhb]::placeholder { color: var(--vh-line-strong); letter-spacing: 8px; }
.vh-jd-phone-code:focus[b-o5pktbudhb] { border-color: var(--vh-primary-hover); box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / 15%); }
.vh-jd-phone-btn[b-o5pktbudhb] {
    width: 100%; box-sizing: border-box; font-size: 14px; font-weight: 700; color: var(--vh-on-primary);
    border: 0; cursor: pointer; background: var(--vh-gradient-primary);
    padding: 12px 18px; border-radius: 10px; box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / 70%);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vh-jd-phone-btn:hover:not(:disabled)[b-o5pktbudhb] { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / 85%); }
.vh-jd-phone-btn:disabled[b-o5pktbudhb] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.vh-jd-phone-resend[b-o5pktbudhb] {
    display: block; margin: 10px auto 0; background: none; border: 0; cursor: pointer;
    font-size: 13px; color: var(--vh-muted); text-decoration: underline;
}
.vh-jd-phone-resend:hover:not(:disabled)[b-o5pktbudhb] { color: var(--vh-primary); }
.vh-jd-phone-resend:disabled[b-o5pktbudhb] { opacity: .5; cursor: not-allowed; }
.vh-jd-phone-error[b-o5pktbudhb] { margin: 8px 0; font-size: 13px; color: var(--vh-danger); }
.vh-jd-phone-success[b-o5pktbudhb] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 0; text-align: center; }
/* Icon color drives the check SVG (stroke="currentColor"). */
.vh-jd-phone-success-icon[b-o5pktbudhb] { display: inline-flex; color: var(--vh-tonal-green-text); }
.vh-jd-phone-success-icon svg[b-o5pktbudhb] { display: block; }
.vh-jd-phone-success-text[b-o5pktbudhb] { font-size: 15px; font-weight: 700; color: var(--vh-tonal-green-text); }

/* ---- recommended / recent ---- */
.vh-jd-recommended[b-o5pktbudhb] { margin-top: 2rem; }
.vh-jd-recent-head[b-o5pktbudhb] { display: flex; justify-content: space-between; align-items: baseline; }
.vh-jd-recent-head a[b-o5pktbudhb] { font-size: 12.5px; font-weight: 600; color: var(--vh-primary); text-decoration: none; }
.vh-jd-recent-head a:hover[b-o5pktbudhb] { color: var(--vh-primary-active); }
.vh-jd-minicards[b-o5pktbudhb] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.vh-jd-minicard[b-o5pktbudhb] {
    display: flex; flex-direction: column; gap: .25rem;
    border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card-sm); background: var(--vh-surface);
    padding: .85rem 1rem; text-decoration: none; color: var(--vh-ink); font-size: .85rem;
    box-shadow: var(--vh-shadow-surface);
    transition: border-color .2s ease, background-color .2s ease;
}
.vh-jd-minicard strong[b-o5pktbudhb] { font-weight: 600; font-size: 14px; color: var(--vh-ink); }
.vh-jd-minicard span[b-o5pktbudhb] { color: var(--vh-body); font-size: 12.5px; }
.vh-jd-minicard:hover[b-o5pktbudhb] {
    border-color: var(--vh-primary-hover); background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}
.vh-jd-mini-relocate[b-o5pktbudhb] { color: var(--vh-muted); font-size: 12px; }
.vh-jd-mini-salary[b-o5pktbudhb] { color: var(--vh-primary); font-weight: 700; font-size: 12.5px; }

.vh-jd-ats-footer[b-o5pktbudhb] { text-align: center; color: var(--vh-muted); font-size: .85rem; margin: 2rem 0 1rem; }

/* ======================================================================
   Cobalt modals (questions + withdraw). Token surface, header with
   title (+ optional subtitle) and a close X, scrollable body, footer with
   ghost Cancel + primary gradient. Overlay uses --vh-cobalt-shadow-rgb at 55% + blur.
   ====================================================================== */
.vh-jd-overlay[b-o5pktbudhb] {
    position: fixed; inset: 0; background: rgb(var(--vh-cobalt-shadow-rgb) / 55%);
    backdrop-filter: blur(2px); z-index: 1050;
}
.vh-jd-modal[b-o5pktbudhb] {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(600px, calc(100vw - 2.5rem)); max-height: 90vh;
    display: flex; flex-direction: column; box-sizing: border-box;
    background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card); z-index: 1060;
    box-shadow: 0 24px 60px -20px rgb(var(--vh-cobalt-shadow-rgb) / 35%);
    font-family: var(--vh-font-primary);
}
.vh-jd-modal-head[b-o5pktbudhb] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px 16px; border-bottom: 1px solid var(--vh-line);
}
.vh-jd-modal-titles[b-o5pktbudhb] { display: flex; flex-direction: column; gap: 5px; }
.vh-jd-modal-title[b-o5pktbudhb] { font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--vh-ink); }
.vh-jd-modal-subtitle[b-o5pktbudhb] { font-size: 13px; line-height: 1.4; color: var(--vh-muted); }
.vh-jd-modal-close[b-o5pktbudhb] {
    cursor: pointer; flex: 0 0 auto; margin-top: 2px; border: 0; background: none; padding: 2px;
    color: var(--vh-muted); opacity: .7; transition: opacity .2s ease, color .2s ease;
}
.vh-jd-modal-close:hover[b-o5pktbudhb] { opacity: 1; color: var(--vh-ink); }
.vh-jd-modal-close svg[b-o5pktbudhb] { display: block; }
.vh-jd-modal-body[b-o5pktbudhb] { display: flex; flex-direction: column; gap: 22px; padding: 20px 24px; overflow: auto; }
.vh-jd-modal-loading[b-o5pktbudhb] { font-size: 14px; color: var(--vh-body); }

/* questions */
.vh-jd-question[b-o5pktbudhb] { display: flex; flex-direction: column; }
.vh-jd-question-title[b-o5pktbudhb] { font-size: 14px; font-weight: 600; color: var(--vh-ink); margin-bottom: 12px; }
.vh-jd-question-title .req[b-o5pktbudhb] { color: var(--vh-secondary-hover); margin-left: 2px; }
.vh-jd-field[b-o5pktbudhb] {
    width: 100%; box-sizing: border-box; font-size: 14px; color: var(--vh-ink);
    border: 1px solid var(--vh-line-strong); border-radius: 10px; padding: 11px 13px; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.vh-jd-field[b-o5pktbudhb]::placeholder { color: var(--vh-muted); }
.vh-jd-field:focus[b-o5pktbudhb] { border-color: var(--vh-primary-hover); box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / 15%); }
.vh-jd-textarea[b-o5pktbudhb] { height: 140px; resize: none; }
.vh-jd-charcount[b-o5pktbudhb] { margin-top: 6px; font-size: 11.5px; color: var(--vh-muted); text-align: right; }
.vh-jd-video-note[b-o5pktbudhb] {
    margin: 0; font-size: 13px; color: var(--vh-tonal-amber-text);
    background: var(--vh-tonal-amber-bg); border: 1px solid var(--vh-tonal-amber-bd);
    border-radius: 10px; padding: 10px 12px;
}
.vh-jd-options[b-o5pktbudhb] { display: flex; flex-direction: column; gap: 8px; }
.vh-jd-option[b-o5pktbudhb] { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--vh-body); cursor: pointer; margin: 0; }
.vh-jd-option input[b-o5pktbudhb] { accent-color: var(--vh-primary); width: 16px; height: 16px; flex: 0 0 auto; }

.vh-jd-modal-foot[b-o5pktbudhb] {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    padding: 16px 24px 20px; border-top: 1px solid var(--vh-line);
}
.vh-jd-required-note[b-o5pktbudhb] {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vh-tonal-amber-text);
}
.vh-jd-certify[b-o5pktbudhb] {
    display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--vh-body);
    cursor: pointer; background: var(--vh-surface-soft); border: 1px solid var(--vh-line); border-radius: 10px; padding: 10px 12px;
}
.vh-jd-certify input[b-o5pktbudhb] { accent-color: var(--vh-primary); width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.vh-jd-modal-error[b-o5pktbudhb] { color: var(--vh-danger); font-size: 13px; margin: 0; }
.vh-jd-modal-actions[b-o5pktbudhb] { display: flex; justify-content: flex-end; gap: 10px; }
.vh-jd-modal-actions-foot[b-o5pktbudhb] { padding: 16px 24px 20px; border-top: 1px solid var(--vh-line); }
.vh-jd-modal-cancel[b-o5pktbudhb] {
    cursor: pointer; height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600;
    color: var(--vh-body); background: var(--vh-surface); border: 1px solid var(--vh-line-strong); border-radius: 10px;
    transition: border-color .2s ease, color .2s ease;
}
.vh-jd-modal-cancel:hover[b-o5pktbudhb] { border-color: rgb(var(--vh-primary-hover-rgb) / 50%); color: var(--vh-primary); }
.vh-jd-modal-submit[b-o5pktbudhb] {
    cursor: pointer; height: 44px; padding: 0 22px; font-size: 14px; font-weight: 700; color: var(--vh-on-primary);
    border: 0; border-radius: 10px; background: var(--vh-gradient-primary);
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / 70%);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vh-jd-modal-submit:hover:not(:disabled)[b-o5pktbudhb] { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / 85%); }
.vh-jd-modal-submit:disabled[b-o5pktbudhb] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* withdraw reasons — real radio inputs (canon §5), primary accent like the
   questions modal options. */
.vh-jd-reasons[b-o5pktbudhb] { display: flex; flex-direction: column; padding: 4px; }
.vh-jd-reason[b-o5pktbudhb] {
    display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px;
    cursor: pointer; margin: 0; transition: background .15s ease;
}
.vh-jd-reason:hover[b-o5pktbudhb] { background: var(--vh-surface-soft); }
.vh-jd-reason input[b-o5pktbudhb] { accent-color: var(--vh-primary); width: 16px; height: 16px; flex: 0 0 auto; }
.vh-jd-reason-label[b-o5pktbudhb] { font-size: 14px; color: var(--vh-body); }
.vh-jd-comments[b-o5pktbudhb] { display: flex; flex-direction: column; gap: 8px; }
.vh-jd-comments-label[b-o5pktbudhb] { font-size: 13px; font-weight: 600; color: var(--vh-ink); }
.vh-jd-comments-label .optional[b-o5pktbudhb] { font-weight: 400; color: var(--vh-muted); }
/* /Pages/Jobs/Index.razor.rz.scp.css */
/* ---- board layout — fluid, fills the LeptonX content flow (page-chrome
   standard, design-system.md §12): cards column flexes, 374px sidebar rail.
   Title comes from <PageHeader>, not a local h1. ---- */
.vh-board-content[b-dcdgt2ljkg] { display: grid; grid-template-columns: minmax(0, 1fr) 374px; gap: 20px; align-items: start; }
@media (max-width: 992px) { .vh-board-content[b-dcdgt2ljkg] { grid-template-columns: auto; } .vh-sidebar[b-dcdgt2ljkg] { display: none; } }

/* ---- search bar (not sticky: the LeptonX topbar is already sticky at top 0 /
   z-index 101, so a page-level sticky bar would slide under it) ---- */
.vh-searchbar[b-dcdgt2ljkg] {
    display: flex; align-items: stretch; gap: 0;
    background: var(--bs-body-bg, var(--vh-surface));
    border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb));
    border-radius: .5rem; padding: .5rem .75rem; margin-bottom: 1rem;
}
.vh-search-field[b-dcdgt2ljkg] { flex: 1 1 0; padding: 0 .75rem; border-right: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); min-width: 0; }
.vh-search-field:last-of-type[b-dcdgt2ljkg] { border-right: 0; }
.vh-search-field p[b-dcdgt2ljkg] { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--vh-muted); margin: 0 0 .15rem; }
.vh-search-field input[type="text"][b-dcdgt2ljkg] { width: 100%; border: 0; outline: none; background: var(--vh-transparent); font-size: .9rem; }
/* Remote/Relocate as pill toggles — same idiom as /talent-pool "Years of
   Experience" pills (.tp-yoe-pill), compact to fit the search bar row.
   (Tokenized on merge: values were the literal Cobalt hexes.) */
.vh-jobtype[b-dcdgt2ljkg] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: .1rem; }
.vh-jobtype-pill[b-dcdgt2ljkg] {
    border: 1px solid var(--vh-line-strong); background: var(--vh-surface); color: var(--vh-body);
    font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 9px;
    cursor: pointer; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}
.vh-jobtype-pill:hover[b-dcdgt2ljkg] { border-color: var(--vh-primary-hover); color: var(--vh-ink); }
.vh-jobtype-pill.on[b-dcdgt2ljkg] {
    background: var(--vh-blue-tint); border-color: rgb(var(--vh-primary-hover-rgb) / 50%); color: var(--vh-tonal-blue-text);
    box-shadow: inset 0 0 0 1px var(--vh-tonal-blue-bd);
}
[b-dcdgt2ljkg] .vh-close-reasons input { accent-color: var(--vh-primary); }
/* Legacy SearchFilter submit: plain magnifier icon, no solid box (background: none) */
.vh-search-btn[b-dcdgt2ljkg] {
    flex: 0 0 auto; width: 44px; border: 0; border-radius: .4rem; cursor: pointer;
    background: var(--vh-transparent); color: var(--vh-black-60); font-size: 1.05rem;
}
.vh-search-btn:hover[b-dcdgt2ljkg] { color: var(--vh-primary); }
.vh-search-btn:disabled[b-dcdgt2ljkg] { opacity: .6; }

/* ---- clear filters ---- */
.vh-clear-row[b-dcdgt2ljkg] { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.vh-clear-row p[b-dcdgt2ljkg] { margin: 0; color: var(--vh-muted); font-size: .9rem; }

/* ---- sections / cards list ---- */
/* Single-column list: one card per row, even vertical rhythm (Cobalt JobsGrid). */
.vh-section-title[b-dcdgt2ljkg] { font-size: 1.1rem; font-weight: 700; margin: 1rem 0 .75rem; }
.vh-cards[b-dcdgt2ljkg] { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vh-skeleton[b-dcdgt2ljkg] { padding: 2rem; color: var(--vh-muted); }
.vh-empty[b-dcdgt2ljkg] { border: 1px dashed var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: .5rem; padding: 2rem; text-align: center; }
.vh-empty h3[b-dcdgt2ljkg] { font-size: 1.05rem; font-weight: 700; }
.vh-empty p[b-dcdgt2ljkg] { color: var(--vh-muted); font-size: .9rem; }
.vh-load-more[b-dcdgt2ljkg] { text-align: center; margin: 1.25rem 0; }

/* ---- end-of-list state — primary check badge + headline + subtext ---- */
.vh-end-message[b-dcdgt2ljkg] {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 44px 16px 8px;
}
.vh-end-message .badge[b-dcdgt2ljkg] {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    margin-bottom: 6px; color: var(--vh-primary); background: var(--vh-blue-tint);
}
.vh-end-message h4[b-dcdgt2ljkg] {
    font-family: var(--vh-font-primary);
    font-size: 17px; font-weight: 700; color: var(--vh-ink); margin: 0;
}
.vh-end-message p[b-dcdgt2ljkg] {
    font-family: var(--vh-font-primary);
    font-size: 13.5px; color: var(--vh-body); margin: 0; max-width: 360px; line-height: 1.5;
}

/* ---- generic buttons ----
   .vh-btn-primary comes from the GLOBAL design-system utilities (vh-tokens.css,
   legacy var(--vh-primary)) — the old scoped copy used the LeptonX action color and won the cascade. */
[b-dcdgt2ljkg] .vh-link-btn, .vh-link-btn[b-dcdgt2ljkg] {
    background: none; border: 0; color: var(--vh-primary);
    cursor: pointer; font-size: .85rem; padding: 0; text-decoration: underline;
}

/* ---- flip card (CloseJobReason) ---- */
[b-dcdgt2ljkg] .vh-flip { perspective: 1200px; margin-bottom: 1rem; }
[b-dcdgt2ljkg] .vh-flip-inner { position: relative; transition: transform .45s; transform-style: preserve-3d; }
[b-dcdgt2ljkg] .vh-flipped .vh-flip-inner { transform: rotateY(180deg); }
[b-dcdgt2ljkg] .vh-flip-front { backface-visibility: hidden; }
[b-dcdgt2ljkg] .vh-flip-back {
    backface-visibility: hidden; transform: rotateY(180deg);
    position: absolute; inset: 0; overflow: auto;
    background: var(--bs-body-bg, var(--vh-surface)); border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb));
    border-radius: .5rem; padding: 1rem;
}
[b-dcdgt2ljkg] .vh-flip:not(.vh-flipped) .vh-flip-back { pointer-events: none; }

/* ======================================================================
   "Cobalt" job card — light, on-brand HORIZONTAL card (Main + Rail).
   Consumes the Cobalt tokens (vh-tokens.css): --vh-surface / --vh-line /
   --vh-ink / --vh-body / --vh-muted, action tints and gradient CTA.
   Site font (Inter) everywhere — hierarchy from weight/size/letter-spacing.
   ====================================================================== */
/* Entrance (fade + rise) lives on the outer wrapper; the content card itself
   remains a stable, flat surface. */
[b-dcdgt2ljkg] .vh-card-link {
    display: block; text-decoration: none; color: inherit;
    opacity: 0;
    transform: translateY(14px);
    animation: vh-rise-b-dcdgt2ljkg .6s cubic-bezier(.2,.8,.2,1) forwards;
}
[b-dcdgt2ljkg] .vh-card {
    position: relative;
    font-family: var(--vh-font-primary);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-surface);
    transition: border-color .2s ease, background-color .2s ease;
}
[b-dcdgt2ljkg] .vh-card-link:hover .vh-card {
    border-color: var(--vh-primary-hover);
    background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}
/* Hot (admin-pinned) card: danger border without decorative depth. */
[b-dcdgt2ljkg] .vh-card-hot {
    border-color: var(--vh-hot-ring);
    box-shadow: var(--vh-shadow-surface);
}
[b-dcdgt2ljkg] .vh-card-close {
    position: absolute; top: 16px; right: 16px; border: 0; background: none;
    color: var(--vh-muted); font-size: 1rem; cursor: pointer; z-index: 6;
}
[b-dcdgt2ljkg] .vh-card-close:hover { color: var(--vh-ink); }

/* Horizontal layout: Main (flexes) + Rail (fixed, left divider). */
[b-dcdgt2ljkg] .vh-card-pad {
    position: relative; z-index: 2; padding: 20px 24px;
    display: flex; align-items: stretch; gap: 26px;
}
[b-dcdgt2ljkg] .vh-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
[b-dcdgt2ljkg] .vh-card-rail {
    flex: 0 0 256px; width: 256px; display: flex; flex-direction: column;
    padding-left: 24px; border-left: 1px solid var(--vh-line);
}
@media (max-width: 680px) {
    [b-dcdgt2ljkg] .vh-card-pad { flex-direction: column; gap: 18px; }
    [b-dcdgt2ljkg] .vh-card-rail {
        flex-basis: auto; width: 100%; padding-left: 0; padding-top: 16px;
        border-left: none; border-top: 1px solid var(--vh-line);
    }
}

[b-dcdgt2ljkg] .vh-rail-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px;
}
[b-dcdgt2ljkg] .vh-rail-foot {
    margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 12px;
}

/* ---- badges ---- */
[b-dcdgt2ljkg] .vh-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
[b-dcdgt2ljkg] .vh-posted {
    font-size: 10.5px; letter-spacing: .03em; color: var(--vh-muted); white-space: nowrap;
}
/* Danger HOT pill (fixed-contrast flame + label). The pill + ordering stay on the board;
   only the admin Hot EDIT toggle moved to the interview-pipeline listing. */
[b-dcdgt2ljkg] .vh-tag-hot {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 7px; line-height: 1; color: var(--vh-on-primary);
    background: var(--vh-hot-gradient);
    box-shadow: 0 4px 12px -4px rgb(var(--vh-raw-rgb-239-68-68) / 50%);
}
[b-dcdgt2ljkg] .vh-tag-hot svg { display: block; flex-shrink: 0; animation: vh-flick-b-dcdgt2ljkg 1.3s ease-in-out infinite; }
/* Soft-blue NEW pill with a dot. */
[b-dcdgt2ljkg] .vh-tag-new {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 7px; line-height: 1;
    color: var(--vh-blue-deep); background: rgb(var(--vh-primary-hover-rgb) / 12%);
}
[b-dcdgt2ljkg] .vh-tag-new .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vh-primary-hover); animation: vh-pulse-b-dcdgt2ljkg 1.6s ease-in-out infinite; }

/* Pill micro-animations (HOT flame flickers, NEW dot pulses). */
@keyframes vh-flick-b-dcdgt2ljkg {
    0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
    50% { transform: scale(1.16) rotate(3deg); opacity: .9; }
}
@keyframes vh-pulse-b-dcdgt2ljkg {
    0%, 100% { opacity: .5; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.2); }
}
/* Card entrance — fade + rise on mount (parity with React). */
@keyframes vh-rise-b-dcdgt2ljkg {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    [b-dcdgt2ljkg] .vh-card-link { opacity: 1; transform: none; animation: none; }
}

/* ---- role eyebrow + title + location ---- */
[b-dcdgt2ljkg] .vh-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--vh-primary); margin-bottom: 7px;
}
[b-dcdgt2ljkg] .vh-card-title {
    font-weight: 600; font-size: 21px; line-height: 1.12; letter-spacing: -.015em;
    color: var(--vh-ink); margin: 0 0 8px;
}
[b-dcdgt2ljkg] .vh-card-details {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px;
    font-size: 12.5px; color: var(--vh-body); margin-bottom: 16px;
}
[b-dcdgt2ljkg] .vh-detail { display: inline-flex; align-items: center; gap: 6px; }
[b-dcdgt2ljkg] .vh-detail-label { font-size: 12.5px; color: var(--vh-body); }
[b-dcdgt2ljkg] .vh-flag { font-size: 1rem; line-height: 1; }

/* Work-mode pill — colored by relocate. */
[b-dcdgt2ljkg] .vh-mode-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 500; padding: 3px 9px 3px 8px; border-radius: 20px;
}
[b-dcdgt2ljkg] .vh-mode-pill .mk { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
[b-dcdgt2ljkg] .vh-mode-pill b { font-weight: 600; }
[b-dcdgt2ljkg] .vh-mode-remote { color: var(--vh-primary); background: rgb(var(--vh-primary-hover-rgb) / 10%); border: 1px solid var(--vh-tonal-blue-bd); }
[b-dcdgt2ljkg] .vh-mode-relocation { color: var(--vh-tonal-amber-text); background: var(--vh-tonal-amber-bg); border: 1px solid var(--vh-tonal-amber-bd); }
[b-dcdgt2ljkg] .vh-mode-hybrid { color: var(--vh-tonal-purple-text); background: var(--vh-tonal-purple-bg); border: 1px solid var(--vh-tonal-purple-bd); }
[b-dcdgt2ljkg] .vh-mode-onsite { color: var(--vh-tonal-slate-text); background: var(--vh-tonal-slate-bg); border: 1px solid var(--vh-tonal-slate-bd); }

/* ---- skills ---- */
[b-dcdgt2ljkg] .vh-skills-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--vh-muted); margin-bottom: 9px;
}
[b-dcdgt2ljkg] .vh-skills-head .rule { flex: 1; height: 1px; background: var(--vh-line); }
[b-dcdgt2ljkg] .vh-skills-head .matched-key {
    display: inline-flex; align-items: center; gap: 5px; color: var(--vh-primary); letter-spacing: .06em;
}
[b-dcdgt2ljkg] .vh-skills-head .matched-key i {
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--vh-gradient-primary);
}
[b-dcdgt2ljkg] .vh-card-skills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
/* nice-to-have = light outline chip; must-have = solid primary chip. No year tags. */
[b-dcdgt2ljkg] .vh-skill {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 9px; line-height: 1;
    color: var(--vh-body); background: var(--vh-surface-soft); border: 1px solid var(--vh-line-strong);
    transition: border-color .2s ease, color .2s ease;
}
[b-dcdgt2ljkg] .vh-card-link:hover .vh-skill:not(.vh-skill-must) { border-color: rgb(var(--vh-primary-hover-rgb) / 50%); color: var(--vh-blue-deep); }
[b-dcdgt2ljkg] .vh-skill-must {
    color: var(--vh-on-primary); font-weight: 600; border: 1px solid var(--vh-transparent);
    background: var(--vh-gradient-primary);
    box-shadow: 0 4px 12px -6px rgb(var(--vh-primary-hover-rgb) / 60%);
}

/* ---- candidate-location requirement — dashed box + AMBER REQUIRED pill ---- */
[b-dcdgt2ljkg] .vh-card-candidate-location {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; padding: 9px 11px; border-radius: 10px;
    background: var(--vh-surface-soft); border: 1px dashed var(--vh-line-strong); color: var(--vh-body); margin-bottom: 0;
}
[b-dcdgt2ljkg] .vh-card-candidate-location .vh-pin { display: inline-flex; flex: 0 0 auto; color: var(--vh-primary); }
[b-dcdgt2ljkg] .vh-card-candidate-location .vh-pin svg { display: block; }
[b-dcdgt2ljkg] .vh-card-candidate-location b { color: var(--vh-ink); font-weight: 600; }
[b-dcdgt2ljkg] .vh-card-candidate-location .lbl {
    flex: 0 0 auto; font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--vh-tonal-amber-text);
    background: var(--vh-tonal-amber-bg); border: 1px solid var(--vh-tonal-amber-bd);
    padding: 3px 7px; border-radius: 6px;
}

/* ---- salary hero ---- */
[b-dcdgt2ljkg] .vh-salary {
    position: relative; padding: 13px 15px; border-radius: var(--vh-radius-card-sm);
    background: var(--vh-blue-tint); border: 1px solid rgb(var(--vh-primary-hover-rgb) / 18%);
}
[b-dcdgt2ljkg] .vh-salary-label {
    font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--vh-muted); margin-bottom: 4px;
}
[b-dcdgt2ljkg] .vh-salary-amount {
    font-weight: 600; font-size: 23px; letter-spacing: -.02em; line-height: 1; color: var(--vh-ink);
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
[b-dcdgt2ljkg] .vh-salary-amount .cur {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--vh-primary); transform: translateY(-2px);
}
[b-dcdgt2ljkg] .vh-salary-amount .per { font-size: 12px; font-weight: 400; color: var(--vh-muted); letter-spacing: 0; }

/* ---- "View role" CTA — full-width primary button pinned to the rail bottom ---- */
[b-dcdgt2ljkg] .vh-cta {
    font-weight: 600; font-size: 13px; letter-spacing: .01em; color: var(--vh-on-primary);
    padding: 10px 16px; border-radius: 10px;
    background: var(--vh-gradient-primary);
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / 70%);
    display: flex; width: 100%; box-sizing: border-box;
    align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
[b-dcdgt2ljkg] .vh-cta svg { transition: transform .25s ease; }
[b-dcdgt2ljkg] .vh-card-link:hover .vh-cta {
    transform: translateY(-1px); filter: brightness(1.05);
    box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / 85%);
}
[b-dcdgt2ljkg] .vh-card-link:hover .vh-cta svg { transform: translateX(3px); }

/* ---- close reason form ---- */
[b-dcdgt2ljkg] .vh-close-form h4 { font-size: .95rem; font-weight: 700; }
[b-dcdgt2ljkg] .vh-close-form p { font-size: .85rem; color: var(--vh-muted); }
[b-dcdgt2ljkg] .vh-close-reasons { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
[b-dcdgt2ljkg] .vh-close-reasons label { display: flex; gap: .4rem; align-items: center; font-size: .85rem; cursor: pointer; margin: 0; }
[b-dcdgt2ljkg] .vh-close-reasons textarea { width: 100%; min-height: 70px; font-size: .85rem; border: 1px solid var(--bs-border-color); border-radius: .35rem; padding: .4rem; }
[b-dcdgt2ljkg] .vh-close-reasons.vh-error { outline: 1px solid var(--vh-input-error); border-radius: .35rem; padding: .35rem; }
[b-dcdgt2ljkg] textarea.vh-error { border-color: var(--vh-input-error); }
[b-dcdgt2ljkg] .vh-close-actions { display: flex; gap: 1rem; align-items: center; }
[b-dcdgt2ljkg] .vh-close-success { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; justify-content: center; height: 100%; }

/* ---- sidebar feed cards ---- */
.vh-sidebar[b-dcdgt2ljkg] { display: flex; flex-direction: column; gap: 16px; }
/* Legacy BannerCard CTA: text label + arrow (btnLabel / arrow-icon), not a solid button */
.vh-feed-btn[b-dcdgt2ljkg] {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--vh-primary); font-weight: 700; font-size: .85rem;
    text-decoration: none; cursor: pointer;
}
.vh-feed-btn:hover[b-dcdgt2ljkg] { color: var(--vh-primary-hover); }
.vh-feed-btn i[b-dcdgt2ljkg] { font-size: .75rem; }
.vh-feed-card[b-dcdgt2ljkg] { border: 1px solid var(--bs-border-color, var(--vh-raw-e5e7eb)); border-radius: .5rem; overflow: hidden; background: var(--bs-body-bg, var(--vh-surface)); }
.vh-feed-card img[b-dcdgt2ljkg] { width: 100%; display: block; }
.vh-feed-body[b-dcdgt2ljkg] { padding: .9rem; }
.vh-feed-body h4[b-dcdgt2ljkg] { font-size: .95rem; font-weight: 700; }
.vh-feed-body p[b-dcdgt2ljkg] { font-size: .82rem; color: var(--vh-muted); }
/* /Pages/LearningHub/Admin/CourseEditor.razor.rz.scp.css */
/* Course content editor — header bar, actions row, sections/lessons table,
   side panels (section / lesson / live) and the centered confirm modal.
   Colors consume vh-tokens (design-system.md) so the dark-mode remap applies. */

.lhe-page[b-n4d7ltwzje] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    font-family: var(--vh-font-primary);
}

.lhe-gate[b-n4d7ltwzje] {
    margin: 64px auto;
    max-width: 520px;
    text-align: center;
    font-size: 18px;
    color: var(--vh-text-body);
}

.lhe-loading[b-n4d7ltwzje] { padding: 80px; text-align: center; color: var(--vh-primary); font-size: 26px; }

/* top bar */
.lhe-topbar[b-n4d7ltwzje] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 18px;
    border-bottom: 1px solid var(--vh-line);
    margin-bottom: 18px;
}

.lhe-back[b-n4d7ltwzje] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--vh-text-body);
    font-size: 16px;
    padding: 6px;
}

.lhe-topbar-title[b-n4d7ltwzje] { font-weight: 600; color: var(--vh-text-body); }

/* head */
.lhe-head[b-n4d7ltwzje] { margin-bottom: 14px; }
.lhe-head-title-row[b-n4d7ltwzje] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lhe-title[b-n4d7ltwzje] { font-size: 24px; font-weight: 700; font-family: var(--vh-font-heading); color: var(--vh-text-heading); margin: 0; }

.lhe-edit-course[b-n4d7ltwzje] {
    background: none;
    border: 0;
    color: var(--vh-primary);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.lhe-head-sub[b-n4d7ltwzje] { color: var(--vh-text-muted); font-size: 13px; }

/* actions row */
.lhe-actions-row[b-n4d7ltwzje] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.lhe-last-update[b-n4d7ltwzje] { color: var(--vh-body); font-size: 13px; }
.lhe-actions[b-n4d7ltwzje] { display: flex; gap: 10px; }

.lhe-btn[b-n4d7ltwzje] {
    border: 0;
    border-radius: var(--vh-radius-md);
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lhe-btn:disabled[b-n4d7ltwzje] { opacity: .6; cursor: default; }
.lhe-btn-ghost[b-n4d7ltwzje] { background: var(--vh-black-10); color: var(--vh-text-body); }
.lhe-btn-publish[b-n4d7ltwzje] { background: var(--vh-success); color: var(--vh-color-white); }
.lhe-btn-publish:hover:not(:disabled)[b-n4d7ltwzje] { background: var(--vh-success-hover); }
.lhe-btn-draft[b-n4d7ltwzje] { background: var(--vh-black-10); color: var(--vh-text-body); }
.lhe-btn-danger[b-n4d7ltwzje] { background: var(--vh-danger); color: var(--vh-color-white); }
.lhe-btn-danger:hover:not(:disabled)[b-n4d7ltwzje] { background: var(--vh-danger-active); }

/* table */
.lhe-table[b-n4d7ltwzje] {
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    background: var(--vh-surface);
}

.lhe-thead[b-n4d7ltwzje] {
    display: grid;
    grid-template-columns: 150px minmax(220px, 2fr) 1.2fr .8fr 56px;
    background: var(--vh-surface-soft);
    border-bottom: 1px solid var(--vh-line);
    border-radius: 8px 8px 0 0;
}

.lhe-th[b-n4d7ltwzje] { padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--vh-body); }

.lhe-row[b-n4d7ltwzje] {
    display: grid;
    grid-template-columns: 150px minmax(220px, 2fr) 1.2fr .8fr 56px;
    border-bottom: 1px solid var(--vh-line);
    align-items: center;
    position: relative;
}

.lhe-row:last-child[b-n4d7ltwzje] { border-bottom: 0; }
.lhe-lesson-row[b-n4d7ltwzje] { background: var(--vh-surface-soft); }

.lhe-cell[b-n4d7ltwzje] { padding: 10px 12px; display: flex; align-items: center; gap: 8px; min-height: 50px; position: relative; }

.lhe-muted[b-n4d7ltwzje] { color: var(--vh-text-muted); font-size: 13px; }

.lhe-move[b-n4d7ltwzje] { display: inline-flex; flex-direction: column; }

.lhe-move-btn[b-n4d7ltwzje] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--vh-black-30);
    font-size: 10px;
    padding: 1px 4px;
}

.lhe-move-btn:hover:not(:disabled)[b-n4d7ltwzje] { color: var(--vh-primary); }
.lhe-move-btn:disabled[b-n4d7ltwzje] { opacity: .3; cursor: default; }

.lhe-add[b-n4d7ltwzje] {
    background: none;
    border: 1px dashed var(--vh-black-30);
    border-radius: var(--vh-radius-md);
    width: 26px;
    height: 26px;
    cursor: pointer;
    color: var(--vh-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lhe-chevron[b-n4d7ltwzje] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--vh-text-muted);
    transition: transform .15s ease;
}

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

.lhe-section-icon[b-n4d7ltwzje] { color: var(--vh-warning); }

.lhe-section-name[b-n4d7ltwzje] {
    background: none;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--vh-text-heading);
    font-size: 14px;
    padding: 0;
}

.lhe-section-name:hover[b-n4d7ltwzje] { color: var(--vh-primary); }

.lhe-lesson-icon[b-n4d7ltwzje] { color: var(--vh-primary); width: 18px; text-align: center; }
.lhe-lesson-name[b-n4d7ltwzje] { color: var(--vh-text-body); font-size: 14px; }
.lhe-clip[b-n4d7ltwzje] { color: var(--vh-black-30); font-size: 12px; }

.lhe-preview-link[b-n4d7ltwzje] {
    background: none;
    border: 0;
    color: var(--vh-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.lhe-dots[b-n4d7ltwzje] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--vh-text-muted);
    padding: 6px;
    border-radius: var(--vh-radius);
}

.lhe-dots:hover[b-n4d7ltwzje] { background: var(--vh-black-10); }

.lhe-popover-backdrop[b-n4d7ltwzje] {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: var(--vh-transparent);
}

.lhe-popover[b-n4d7ltwzje] {
    position: absolute;
    right: 40px;
    top: 32px;
    z-index: 30;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    box-shadow: var(--vh-shadow-pop);
    min-width: 150px;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.lhe-add-popover[b-n4d7ltwzje] { left: 12px; right: auto; top: 38px; min-width: 170px; }

.lhe-popover-item[b-n4d7ltwzje] {
    background: none;
    border: 0;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--vh-text-body);
    cursor: pointer;
    border-radius: var(--vh-radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
}

.lhe-popover-item:hover[b-n4d7ltwzje] { background: var(--vh-gray-10); }
.lhe-popover-item i[b-n4d7ltwzje] { width: 16px; text-align: center; color: var(--vh-primary); }
.lhe-popover-danger[b-n4d7ltwzje] { color: var(--vh-danger); }
.lhe-popover-danger i[b-n4d7ltwzje] { color: var(--vh-danger); }

/* ---- side panels ---- */
.lhe-overlay[b-n4d7ltwzje] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1040;
}

.lhe-panel[b-n4d7ltwzje] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 94vw;
    background: var(--vh-surface);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: var(--vh-shadow-modal);
}

.lhe-panel-head[b-n4d7ltwzje] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--vh-line);
}

.lhe-panel-title[b-n4d7ltwzje] { font-weight: 700; color: var(--vh-text-heading); display: flex; gap: 8px; align-items: center; }
.lhe-panel-close[b-n4d7ltwzje] { background: none; border: 0; cursor: pointer; color: var(--vh-text-muted); font-size: 16px; }
.lhe-panel-body[b-n4d7ltwzje] { padding: 20px; overflow-y: auto; flex: 1; }
.lhe-panel-foot[b-n4d7ltwzje] { padding: 16px 20px; border-top: 1px solid var(--vh-line); }

.lhe-label[b-n4d7ltwzje] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--vh-text-body);
    margin: 16px 0 6px;
}

.lhe-label:first-child[b-n4d7ltwzje] { margin-top: 0; }
.lhe-sublabel[b-n4d7ltwzje] { display: block; font-size: 12px; color: var(--vh-body); margin: 10px 0 6px; }
.lhe-label-error[b-n4d7ltwzje] { color: var(--vh-input-error) !important; }
.lhe-optional[b-n4d7ltwzje] { font-weight: 400; color: var(--vh-text-muted); }
.lhe-hint[b-n4d7ltwzje] { display: block; font-size: 12px; color: var(--vh-text-muted); margin-bottom: 8px; }

.lhe-input[b-n4d7ltwzje] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    padding: 9px 12px;
    font-size: 14px;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    /* native pickers (date) follow the active theme (dark indicator icon) */
    color-scheme: light dark;
}

.lhe-input:focus[b-n4d7ltwzje] { outline: 0; border-color: var(--vh-input-focus); }
.lhe-input-sm[b-n4d7ltwzje] { padding: 7px 10px; font-size: 13px; }
.lhe-textarea[b-n4d7ltwzje] { min-height: 90px; resize: vertical; }

.lhe-info-box[b-n4d7ltwzje] {
    display: flex;
    gap: 12px;
    background: var(--vh-surface-soft);
    border-radius: 8px;
    padding: 14px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--vh-body);
}

.lhe-info-box p[b-n4d7ltwzje] { margin: 4px 0 0; }
.lhe-info-icon[b-n4d7ltwzje] { color: var(--vh-primary); font-size: 20px; }

.lhe-upload-row[b-n4d7ltwzje] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

.lhe-upload-btn[b-n4d7ltwzje] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--vh-radius-md);
    border: 0;
    padding: 8px 14px;
    cursor: pointer;
    margin: 0;
}

.lhe-upload-link[b-n4d7ltwzje] { background: var(--vh-surface-soft); color: var(--vh-text-body); }

.lhe-files[b-n4d7ltwzje] { display: flex; flex-direction: column; gap: 6px; }

.lhe-file-pill[b-n4d7ltwzje] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--vh-surface-soft);
    border-radius: var(--vh-radius-md);
    padding: 6px 10px;
    font-size: 13px;
    color: var(--vh-text-body);
    width: fit-content;
    max-width: 100%;
    word-break: break-all;
}

.lhe-pill-x[b-n4d7ltwzje] { background: none; border: 0; cursor: pointer; color: var(--vh-text-muted); font-size: 15px; padding: 0 2px; }
.lhe-pill-x:hover[b-n4d7ltwzje] { color: var(--vh-danger); }

.lhe-link-draft[b-n4d7ltwzje] { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.lhe-btn-mini[b-n4d7ltwzje] {
    background: var(--vh-primary);
    color: var(--vh-color-white);
    border: 0;
    border-radius: var(--vh-radius-md);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.lhe-btn-mini-ghost[b-n4d7ltwzje] { background: var(--vh-black-10); color: var(--vh-text-body); }

.lhe-datetime-head[b-n4d7ltwzje] { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.lhe-datetime-head .lhe-label[b-n4d7ltwzje] { margin: 0; }

.lhe-tz-pill[b-n4d7ltwzje] {
    background: var(--vh-tonal-blue-bg);
    color: var(--vh-tonal-blue-text);
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 3px 8px;
}

.lhe-time-grid[b-n4d7ltwzje] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Time combos use the shared VhDropdown (ui-combos Type 2); pad the trigger
   to the panel input height so it lines up with the date input. */
.lhe-time-grid[b-n4d7ltwzje]  .vh-dd { width: 100%; }
.lhe-time-grid[b-n4d7ltwzje]  .vh-dd-btn { width: 100%; max-width: none; padding: 9px 12px; }

.lhe-confirm[b-n4d7ltwzje] {
    width: 100%;
    background: var(--vh-primary);
    border: 0;
    color: var(--vh-color-white);
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: var(--vh-radius-md);
    padding: 12px;
    cursor: pointer;
}

.lhe-confirm:disabled[b-n4d7ltwzje] { opacity: .6; cursor: default; }
.lhe-confirm:hover:not(:disabled)[b-n4d7ltwzje] { background: var(--vh-primary-hover); }

/* ---- centered confirm modal ---- */
.lhe-center-modal[b-n4d7ltwzje] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 470px;
    max-width: 94vw;
    background: var(--vh-surface);
    border-radius: 10px;
    z-index: 1050;
    padding: 20px;
    box-shadow: var(--vh-shadow-modal);
}

.lhe-center-head[b-n4d7ltwzje] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lhe-center-title[b-n4d7ltwzje] { font-size: 17px; font-weight: 700; color: var(--vh-text-heading); }

.lhe-center-course[b-n4d7ltwzje] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    font-weight: 600;
    color: var(--vh-text-body);
}

.lhe-center-course i[b-n4d7ltwzje] { color: var(--vh-primary); }

.lhe-center-desc[b-n4d7ltwzje] { font-size: 13px; color: var(--vh-body); }
.lhe-center-desc[b-n4d7ltwzje]  mark { background: var(--vh-danger-soft); color: var(--vh-danger); padding: 0 2px; }

.lhe-center-items[b-n4d7ltwzje] { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 180px; overflow-y: auto; }

.lhe-center-item[b-n4d7ltwzje] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--vh-surface-soft);
    border-radius: var(--vh-radius-md);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--vh-text-body);
}

.lhe-center-item i[b-n4d7ltwzje] { color: var(--vh-primary); }

.lhe-attention[b-n4d7ltwzje] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--vh-tonal-amber-bg);
    color: var(--vh-tonal-amber-text);
    border-radius: var(--vh-radius-md);
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0;
}

.lhe-center-buttons[b-n4d7ltwzje] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
/* /Pages/LearningHub/Admin/Index.razor.rz.scp.css */
/* Learning Hub admin dashboard — visual match for screenshots/admin/13:
   two cards, gray table header, plan/status badges, row popovers.
   Page title/search placement follows PageHeader + VhFiltersCard in the
   normal LeptonX content flow (design-system §12); colors consume vh-tokens
   so the dark-mode remap applies. */

.lha-gate[b-jum7ggj6x4] {
    margin: 64px auto;
    max-width: 520px;
    text-align: center;
    font-size: 18px;
    color: var(--vh-text-body);
}

.lha-top[b-jum7ggj6x4] { margin-bottom: 20px; }
.lha-subtitle[b-jum7ggj6x4] { color: var(--vh-text-muted); font-size: 14px; }

/* ---- cards ---- */
.lha-cards[b-jum7ggj6x4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

@media (max-width: 900px) {
    .lha-cards[b-jum7ggj6x4] { grid-template-columns: 1fr; }
}

.lha-card[b-jum7ggj6x4] {
    border-radius: 10px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 132px;
}

.lha-card-analytics[b-jum7ggj6x4] {
    /* Decorative dark-navy gradient (screenshot-derived, no --vh token yet);
       white-on-dark content keeps working on both light and dark themes. */
    background: linear-gradient(105deg, var(--vh-lh-admin-gradient-start) 0%, var(--vh-lh-admin-gradient-end) 100%);
    color: var(--vh-color-white);
}

.lha-card-create[b-jum7ggj6x4] {
    background: var(--vh-blue-tint);
    color: var(--vh-text-heading);
}

.lha-card-inner[b-jum7ggj6x4] { display: flex; flex-direction: column; gap: 6px; }
.lha-card-kicker[b-jum7ggj6x4] { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; font-weight: 600; }
.lha-card-headline[b-jum7ggj6x4] { font-size: 19px; font-weight: 700; }

.lha-card-btn[b-jum7ggj6x4] {
    margin-top: 10px;
    width: fit-content;
    border: 0;
    border-radius: var(--vh-radius-md);
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    text-decoration: none;
}

/* White text on the brand-blue button is correct in both themes. */
.lha-card-btn-light[b-jum7ggj6x4] { background: var(--vh-primary); color: var(--vh-color-white); }
.lha-card-btn-light:hover[b-jum7ggj6x4] { background: var(--vh-primary-hover); color: var(--vh-color-white); }
.lha-card-btn-primary[b-jum7ggj6x4] { background: var(--vh-primary); color: var(--vh-color-white); }
.lha-card-btn-primary:hover[b-jum7ggj6x4] { background: var(--vh-primary-hover); }
.lha-card-illustration[b-jum7ggj6x4] { font-size: 56px; color: var(--vh-primary-soft); }

/* ---- section title + search (the search box lives in the work-bar) ---- */
.lha-section-title[b-jum7ggj6x4] { font-size: 18px; font-weight: 700; font-family: var(--vh-font-heading); color: var(--vh-text-heading); margin: 0 0 14px; }

.lha-search-box[b-jum7ggj6x4] { position: relative; width: 320px; max-width: 100%; }

.lha-search-input[b-jum7ggj6x4] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    padding: 9px 36px 9px 12px;
    font-size: 14px;
    background: var(--vh-surface);
    color: var(--vh-text-body);
}

/* Canon input focus: primary border, no halo (design-system §5). */
.lha-search-input:focus[b-jum7ggj6x4] { outline: 0; border-color: var(--vh-input-focus); }

.lha-search-icon[b-jum7ggj6x4],
.lha-search-reset[b-jum7ggj6x4] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vh-text-muted);
}

.lha-search-reset[b-jum7ggj6x4] { background: none; border: 0; cursor: pointer; padding: 2px; }

/* ---- table ---- */
.lha-table[b-jum7ggj6x4] {
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    overflow: visible;
    background: var(--vh-surface);
}

.lha-thead[b-jum7ggj6x4] {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 1.4fr 1.2fr 1fr 56px;
    background: var(--vh-surface-soft);
    border-bottom: 1px solid var(--vh-line);
    border-radius: 8px 8px 0 0;
}

.lha-th[b-jum7ggj6x4] {
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--vh-body);
    text-transform: none;
}

.lha-row[b-jum7ggj6x4] {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 1.4fr 1.2fr 1fr 56px;
    border-bottom: 1px solid var(--vh-line);
    align-items: center;
    position: relative;
}

.lha-row:last-child[b-jum7ggj6x4] { border-bottom: 0; }
.lha-course-row[b-jum7ggj6x4] { background: var(--vh-surface-soft); }

.lha-cell[b-jum7ggj6x4] { padding: 12px 14px; display: flex; align-items: center; gap: 10px; min-height: 52px; position: relative; }

.lha-chevron[b-jum7ggj6x4] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--vh-text-muted);
    transition: transform .15s ease;
}

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

.lha-bundle-name[b-jum7ggj6x4] { font-weight: 600; color: var(--vh-text-heading); cursor: pointer; }
.lha-muted[b-jum7ggj6x4] { color: var(--vh-text-muted); font-size: 13px; }

.lha-course-title span[b-jum7ggj6x4] { color: var(--vh-text-body); font-size: 14px; }

.lha-thumb[b-jum7ggj6x4] {
    width: 46px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--vh-line);
    flex: none;
}

.lha-badge[b-jum7ggj6x4] {
    font-size: 12px;
    border-radius: 12px;
    padding: 4px 10px;
    font-weight: 600;
    white-space: nowrap;
}

.lha-badge-paid[b-jum7ggj6x4] { background: var(--vh-tonal-blue-bg); color: var(--vh-tonal-blue-text); }
.lha-badge-free[b-jum7ggj6x4] { background: var(--vh-tonal-green-bg); color: var(--vh-success); }

.lha-status[b-jum7ggj6x4] { font-size: 13px; font-weight: 600; }
.lha-status-draft[b-jum7ggj6x4] { color: var(--vh-warning); }
.lha-status-published[b-jum7ggj6x4] { color: var(--vh-success); }

.lha-dots[b-jum7ggj6x4] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--vh-text-muted);
    padding: 6px;
    border-radius: var(--vh-radius);
}

.lha-dots:hover[b-jum7ggj6x4] { background: var(--vh-black-10); }

.lha-popover-backdrop[b-jum7ggj6x4] {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: var(--vh-transparent);
}

.lha-popover[b-jum7ggj6x4] {
    position: absolute;
    right: 40px;
    top: 34px;
    z-index: 30;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    box-shadow: var(--vh-shadow-pop);
    min-width: 130px;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.lha-popover-item[b-jum7ggj6x4] {
    background: none;
    border: 0;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--vh-text-body);
    cursor: pointer;
    border-radius: var(--vh-radius-md);
}

.lha-popover-item:hover[b-jum7ggj6x4] { background: var(--vh-gray-10); }
.lha-popover-primary[b-jum7ggj6x4] { color: var(--vh-primary); font-weight: 600; }

.lha-loading[b-jum7ggj6x4] { padding: 40px; text-align: center; color: var(--vh-primary); font-size: 22px; }
.lha-empty[b-jum7ggj6x4] { padding: 32px; text-align: center; color: var(--vh-text-muted); }

/* ---- side panel (rename bundle) — same skin as the course form panel ---- */
.lha-overlay[b-jum7ggj6x4] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1040;
}

.lha-panel[b-jum7ggj6x4] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--vh-surface);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: var(--vh-shadow-modal);
}

.lha-panel-head[b-jum7ggj6x4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--vh-line);
}

.lha-panel-title[b-jum7ggj6x4] { font-weight: 700; color: var(--vh-text-heading); display: flex; gap: 8px; align-items: center; }
.lha-panel-close[b-jum7ggj6x4] { background: none; border: 0; cursor: pointer; color: var(--vh-text-muted); font-size: 16px; }

.lha-panel-body[b-jum7ggj6x4] { padding: 20px; overflow-y: auto; flex: 1; }

.lha-label[b-jum7ggj6x4] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-text-body);
    margin: 14px 0 6px;
}

.lha-label:first-child[b-jum7ggj6x4] { margin-top: 0; }
.lha-label-error[b-jum7ggj6x4] { color: var(--vh-input-error); }

.lha-input[b-jum7ggj6x4] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    padding: 9px 12px;
    font-size: 14px;
    background: var(--vh-surface);
    color: var(--vh-text-body);
}

.lha-input:focus[b-jum7ggj6x4] { outline: 0; border-color: var(--vh-input-focus); }

.lha-panel-foot[b-jum7ggj6x4] { padding: 16px 20px; border-top: 1px solid var(--vh-line); }

.lha-confirm[b-jum7ggj6x4] {
    width: 100%;
    background: var(--vh-primary);
    border: 0;
    color: var(--vh-color-white);
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: var(--vh-radius-md);
    padding: 12px;
    cursor: pointer;
}

.lha-confirm:disabled[b-jum7ggj6x4] { opacity: .6; cursor: default; }
.lha-confirm:hover:not(:disabled)[b-jum7ggj6x4] { background: var(--vh-primary-hover); }
/* /Pages/LearningHub/Admin/LhCourseFormPanel.razor.rz.scp.css */
/* Course Info side panel — legacy SideModal skin (slides from the right).
   Colors consume vh-tokens (design-system.md) so the dark-mode remap applies. */

.lhf-overlay[b-wh466tes3h] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    z-index: 1040;
}

.lhf-panel[b-wh466tes3h] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 94vw;
    background: var(--vh-surface);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: var(--vh-shadow-modal);
    font-family: var(--vh-font-primary);
}

.lhf-head[b-wh466tes3h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--vh-line);
}

.lhf-head-title[b-wh466tes3h] { font-weight: 700; color: var(--vh-text-heading); display: flex; gap: 8px; align-items: center; }
.lhf-close[b-wh466tes3h] { background: none; border: 0; cursor: pointer; color: var(--vh-text-muted); font-size: 16px; }

.lhf-body[b-wh466tes3h] { padding: 20px; overflow-y: auto; flex: 1; }

.lhf-label[b-wh466tes3h] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--vh-text-body);
    margin: 16px 0 6px;
}

.lhf-label:first-child[b-wh466tes3h] { margin-top: 0; }

.lhf-sublabel[b-wh466tes3h] {
    display: block;
    font-size: 12px;
    color: var(--vh-body);
    margin: 10px 0 6px;
}

.lhf-label-error[b-wh466tes3h] { color: var(--vh-input-error) !important; }

.lhf-input[b-wh466tes3h] {
    width: 100%;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    padding: 9px 12px;
    font-size: 14px;
    background: var(--vh-surface);
    color: var(--vh-text-body);
}

.lhf-input:focus[b-wh466tes3h] { outline: 0; border-color: var(--vh-input-focus); }
.lhf-input-error[b-wh466tes3h] { border-color: var(--vh-input-error) !important; }
.lhf-textarea[b-wh466tes3h] { min-height: 96px; resize: vertical; }

/* thumbnail drop area */
.lhf-thumb-drop[b-wh466tes3h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed var(--vh-black-30);
    border-radius: 8px;
    min-height: 120px;
    cursor: pointer;
    background: var(--vh-surface-soft);
    overflow: hidden;
}

.lhf-thumb-icon[b-wh466tes3h] { font-size: 26px; color: var(--vh-text-muted); }
.lhf-thumb-cta[b-wh466tes3h] { font-size: 13px; color: var(--vh-primary); font-weight: 600; }
.lhf-thumb-preview[b-wh466tes3h] { width: 100%; height: 140px; object-fit: cover; }

/* Plan combo uses the shared VhDropdown (ui-combos Type 2); stretch the
   trigger to the panel input metrics. */
.lhf-plan-dd[b-wh466tes3h]  .vh-dd { width: 100%; }
.lhf-plan-dd[b-wh466tes3h]  .vh-dd-btn { width: 100%; max-width: none; padding: 9px 12px; }

/* bundle creatable multi-select */
.lhf-bundles[b-wh466tes3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    padding: 6px 8px;
    min-height: 44px;
    background: var(--vh-surface);
}

.lhf-chip[b-wh466tes3h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--vh-primary-soft);
    color: var(--vh-text-heading);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--vh-radius);
    padding: 4px 6px;
}

.lhf-chip-x[b-wh466tes3h] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--vh-body);
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.lhf-chip-x:hover[b-wh466tes3h] { color: var(--vh-danger); }

.lhf-bundle-input[b-wh466tes3h] {
    flex: 1;
    min-width: 120px;
    border: 0;
    outline: none;
    font-size: 13px;
    padding: 4px;
    background: var(--vh-transparent);
    color: var(--vh-text-body);
}

.lhf-bundle-input[b-wh466tes3h]::placeholder { color: var(--vh-text-placeholder); }

/* Own menu skin (design-system §5) — no Bootstrap .dropdown-menu piggyback. */
.lhf-bundle-menu[b-wh466tes3h] {
    position: relative;
    display: block;
    width: 100%;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    box-shadow: var(--vh-shadow-pop);
    margin-top: 4px;
    max-height: 180px;
    overflow-y: auto;
    padding: 6px;
}

.lhf-bundle-option[b-wh466tes3h] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: var(--vh-text-body);
    border-radius: var(--vh-radius-md);
    font-size: 13px;
    padding: 8px 10px;
    cursor: pointer;
}

.lhf-bundle-option:hover[b-wh466tes3h] { background: var(--vh-gray-10); }

.lhf-bundle-create[b-wh466tes3h] { color: var(--vh-primary); font-weight: 600; }
.lhf-bundle-hint[b-wh466tes3h] { display: block; padding: 8px 10px; font-size: 12px; color: var(--vh-text-muted); }

.lhf-foot[b-wh466tes3h] { padding: 16px 20px; border-top: 1px solid var(--vh-line); }

.lhf-confirm[b-wh466tes3h] {
    width: 100%;
    background: var(--vh-primary);
    border: 0;
    color: var(--vh-color-white);
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: var(--vh-radius-md);
    padding: 12px;
    cursor: pointer;
}

.lhf-confirm:disabled[b-wh466tes3h] { opacity: .6; cursor: default; }
.lhf-confirm:hover:not(:disabled)[b-wh466tes3h] { background: var(--vh-primary-hover); }
/* /Pages/LearningHub/Course.razor.rz.scp.css */
/* Course player — ports course/styles.js + the per-type content components
   (VideoPlayer/AudioPlayer/PdfContent/LinkContent/FeedbackContent/LiveContent)
   and the two completion strips. Colors consume vh-tokens so the LeptonX dark
   theme remap applies. */

.lh-course-page[b-gnx42viq6m] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--vh-font-primary);
}

/* ---- header ---- */
.lh-course-header[b-gnx42viq6m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--vh-gray-20);
}

.lh-course-header-lead[b-gnx42viq6m] { display: flex; align-items: center; min-width: 0; }

.lh-back-arrow[b-gnx42viq6m] {
    background: none;
    border: 0;
    color: var(--vh-text-heading);
    font-size: 1.1rem;
    cursor: pointer;
    padding: .25rem;
}

.lh-course-name[b-gnx42viq6m] { padding-left: .75rem; font-size: .95rem; color: var(--vh-text-heading); }

.lh-progress[b-gnx42viq6m] { display: flex; align-items: center; }

.lh-progress-bar[b-gnx42viq6m] {
    width: 268px;
    height: 8px;
    border: 0;
    border-radius: 6px;
    background: var(--vh-black-20);
    overflow: hidden;
}

.lh-progress-bar[b-gnx42viq6m]::-webkit-progress-bar { background: var(--vh-black-20); border-radius: 6px; }

.lh-progress-bar[b-gnx42viq6m]::-webkit-progress-value {
    background: var(--vh-lh-gradient);
    border-radius: 6px;
    transition: .3s width;
}

.lh-progress-bar[b-gnx42viq6m]::-moz-progress-bar {
    background: var(--vh-lh-gradient);
    border-radius: 6px;
}

.lh-progress-label[b-gnx42viq6m] {
    padding-left: 1.125rem;
    font-size: .9rem;
    font-weight: 700;
    background: var(--vh-lh-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--vh-transparent);
    color: var(--vh-transparent);
}

/* ---- body: sidebar + lesson area ---- */
.lh-course-body[b-gnx42viq6m] {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: flex-start;
}

.lh-course-sidebar[b-gnx42viq6m] { flex: 0 0 386px; min-width: 0; }

.lh-lesson-area[b-gnx42viq6m] { flex: 1 1 auto; min-width: 0; }

@media (max-width: 992px) {
    .lh-course-sidebar[b-gnx42viq6m] { display: none; }
    .lh-course-body[b-gnx42viq6m] { margin-top: 1rem; }
}

/* ---- lesson content boxes ---- */
.lh-lesson-content[b-gnx42viq6m] { margin-bottom: 1.5rem; }

/* var(--vh-color-black) stays literal — a video letterbox must not flip on dark themes. */
.lh-video[b-gnx42viq6m] { width: 100%; max-height: 480px; border-radius: 8px; background: var(--vh-color-black); }

.lh-video-frame[b-gnx42viq6m] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--vh-color-black);
}

.lh-video-frame iframe[b-gnx42viq6m] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lh-audio-box[b-gnx42viq6m] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
    border: 1px solid var(--vh-gray-20);
    border-radius: 8px;
}

.lh-audio-box audio[b-gnx42viq6m] { width: 100%; max-width: 560px; }

.lh-document-box[b-gnx42viq6m] {
    display: flex;
    justify-content: center;
    padding: 4rem 1rem;
    border: 1px solid var(--vh-gray-20);
    border-radius: 8px;
}

.lh-open-document-btn[b-gnx42viq6m] {
    /* legacy PdfContent OpenDocumentButton: dark-neutral-40 scrim (white-on-dark
       works in both themes — deliberate literal) */
    background: rgb(var(--vh-lh-overlay-rgb) / .75);
    color: var(--vh-color-white);
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    padding: .75rem 1.75rem;
    text-decoration: none;
    transition: filter .3s ease-in-out;
}

/* anchor-qualified states beat the theme's `a` rules without !important */
a.lh-open-document-btn[b-gnx42viq6m],
a.lh-open-document-btn:hover[b-gnx42viq6m],
a.lh-open-document-btn:visited[b-gnx42viq6m] { color: var(--vh-color-white); }

.lh-open-document-btn:hover[b-gnx42viq6m] { filter: brightness(.9); }

.lh-link-box[b-gnx42viq6m] {
    padding: 3rem 1.5rem;
    border: 1px solid var(--vh-gray-20);
    border-radius: 8px;
}

.lh-link-tile[b-gnx42viq6m] {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: 1rem;
    color: var(--vh-text-heading);
}

.lh-link-tile a[b-gnx42viq6m] {
    color: var(--vh-body); /* legacy LinkTitle dark-neutral-10 var(--vh-body) ≈ Cobalt body */
    font-weight: 700;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

/* ---- feedback lesson ---- */
.lh-feedback-box[b-gnx42viq6m] {
    border: 1px solid var(--vh-gray-20);
    border-radius: 8px;
    padding: 2rem 1.5rem;
}

.lh-feedback-done strong[b-gnx42viq6m] { font-size: 1.2rem; color: var(--vh-text-heading); display: block; margin-bottom: .5rem; }
.lh-feedback-done p[b-gnx42viq6m] { font-size: .9rem; color: var(--vh-black-60); margin: 0; }

.lh-feedback-question[b-gnx42viq6m] { font-size: 1rem; font-weight: 700; color: var(--vh-text-heading); margin: 0 0 1rem; }

.lh-feedback-score[b-gnx42viq6m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.lh-feedback-edge[b-gnx42viq6m] { font-size: .8rem; color: var(--vh-text-muted); }

.lh-feedback-stars[b-gnx42viq6m] { display: flex; gap: .35rem; }

.lh-star-btn[b-gnx42viq6m] {
    background: none;
    border: 0;
    font-size: 1.5rem;
    color: var(--vh-warning);
    cursor: pointer;
    padding: .15rem;
    transition: transform .15s ease-in-out;
}

.lh-star-btn:hover[b-gnx42viq6m] { transform: scale(1.15); }

.lh-feedback-label[b-gnx42viq6m] { display: block; font-size: .9rem; font-weight: 700; color: var(--vh-text-heading); margin-bottom: .6rem; }
.lh-feedback-label span[b-gnx42viq6m] { font-weight: 400; color: var(--vh-text-muted); }

.lh-feedback-input[b-gnx42viq6m] {
    width: 100%;
    min-height: 110px;
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    padding: .75rem .9rem;
    font-size: .9rem;
    font-family: var(--vh-font-primary);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    resize: vertical;
    outline: none;
}

.lh-feedback-input:focus[b-gnx42viq6m] { border-color: var(--vh-primary-hover); }

/* ---- live lesson ---- */
.lh-live-box[b-gnx42viq6m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 320px;
    border-radius: 8px;
    background: var(--vh-lh-gradient);
}

.lh-join-btn[b-gnx42viq6m] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--vh-color-white); /* white button on the brand gradient — both themes */
    color: var(--vh-lh-indigo);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    padding: .8rem 1.75rem;
    text-decoration: none;
    transition: filter .3s ease-in-out;
}

a.lh-join-btn[b-gnx42viq6m],
a.lh-join-btn:hover[b-gnx42viq6m],
a.lh-join-btn:visited[b-gnx42viq6m] { color: var(--vh-lh-indigo); }

.lh-join-btn:hover[b-gnx42viq6m] { filter: brightness(.92); }

.lh-live-box-date[b-gnx42viq6m] { color: rgb(var(--vh-white-rgb) / .9); font-size: .9rem; font-weight: 700; }

/* ---- completion strips ---- */
.lh-complete-strip[b-gnx42viq6m],
.lh-success-strip[b-gnx42viq6m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid var(--vh-black-20);
    border-radius: 8px;
    padding: .85rem 1.5rem;
    margin-bottom: 1.5rem;
}

.lh-strip-label[b-gnx42viq6m] { font-size: .95rem; font-weight: 700; color: var(--vh-text-heading); }

.lh-complete-btn[b-gnx42viq6m] {
    /* legacy CompleteLessonAlert button: theme primary-light */
    background: var(--vh-primary-hover);
    color: var(--vh-color-white);
    border: 0;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    height: 45px;
    padding: 0 1.5rem;
    cursor: pointer;
    transition: filter .2s ease-in-out;
}

.lh-complete-btn:active[b-gnx42viq6m] { filter: brightness(.8); }

/* success-soft tint (candidate for a --vh-success-soft token); the alpha
   over var(--vh-surface) keeps working on the dark theme */
.lh-success-strip[b-gnx42viq6m] { border-color: var(--vh-success-light); background: rgb(var(--vh-success-rgb) / .08); }

.lh-success-label[b-gnx42viq6m] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--vh-success-hover);
    flex: 1 1 auto;
}

.lh-undo-btn[b-gnx42viq6m] {
    background: none;
    border: 0;
    color: var(--vh-black-60);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.lh-next-btn[b-gnx42viq6m] {
    background: var(--vh-success);
    color: var(--vh-color-white);
    border: 0;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    height: 45px;
    padding: 0 1.25rem;
    cursor: pointer;
    transition: filter .2s ease-in-out;
}

.lh-next-btn:hover[b-gnx42viq6m] { filter: brightness(.92); }

/* countdown toggle (legacy CheckBox + CheckDot pill switch) */
.lh-timer-toggle[b-gnx42viq6m] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.lh-timer-track[b-gnx42viq6m] {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 10px;
    background: var(--vh-black-30);
    transition: background .2s ease-in-out;
    flex-shrink: 0;
}

.lh-timer-track.lh-timer-on[b-gnx42viq6m] { background: var(--vh-success); }

.lh-timer-dot[b-gnx42viq6m] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vh-color-white); /* white dot on the colored track — both themes */
    transition: left .2s ease-in-out;
}

.lh-timer-on .lh-timer-dot[b-gnx42viq6m] { left: 18px; }

.lh-timer-label[b-gnx42viq6m] { font-size: .8rem; color: var(--vh-black-60); white-space: nowrap; }

/* ---- mobile tabs ---- */
.lh-tabs[b-gnx42viq6m] { display: none; }
.lh-mobile-cc[b-gnx42viq6m] { display: none; }

@media (max-width: 992px) {
    .lh-tabs[b-gnx42viq6m] {
        display: flex;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--vh-black-20);
    }

    .lh-tab[b-gnx42viq6m] {
        flex: 1;
        background: none;
        border: 0;
        border-bottom: 2px solid var(--vh-transparent);
        font-size: .85rem;
        color: var(--vh-text-heading);
        padding: .6rem 0;
        cursor: pointer;
    }

    .lh-tab-active[b-gnx42viq6m] {
        font-weight: 700;
        border-bottom-color: var(--vh-primary-hover); /* legacy activeTabStyle */
    }

    .lh-mobile-cc.lh-mobile-visible[b-gnx42viq6m] { display: block; margin-bottom: 1.5rem; }

    .lh-details-wrap[b-gnx42viq6m] { display: none; }
    .lh-details-wrap.lh-mobile-visible[b-gnx42viq6m] { display: block; }
}

/* ---- academy gate / error card ---- */
.lh-gate-card[b-gnx42viq6m] {
    max-width: 560px;
    margin: 4rem auto;
    text-align: center;
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    padding: 3rem 2rem;
}

.lh-gate-icon[b-gnx42viq6m] { font-size: 2.5rem; color: var(--vh-secondary-hover); margin-bottom: 1rem; }

.lh-gate-card h2[b-gnx42viq6m] { font-size: 1.25rem; font-weight: 700; color: var(--vh-text-heading); margin: 0 0 .5rem; }

.lh-gate-card p[b-gnx42viq6m] { font-size: .9rem; color: var(--vh-black-60); margin: 0 0 1.5rem; }

.lh-gate-btn[b-gnx42viq6m] {
    display: inline-block;
    background: var(--vh-primary-hover);
    color: var(--vh-color-white); /* white on brand blue — both themes */
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    padding: .7rem 1.5rem;
    text-decoration: none;
    margin-bottom: 1rem;
}

a.lh-gate-btn[b-gnx42viq6m],
a.lh-gate-btn:hover[b-gnx42viq6m],
a.lh-gate-btn:visited[b-gnx42viq6m] { color: var(--vh-color-white); }

.lh-gate-back[b-gnx42viq6m] {
    display: block;
    margin: 0 auto;
    background: none;
    border: 0;
    color: var(--vh-primary-hover);
    font-size: .85rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- skeleton ---- */
.lh-skel[b-gnx42viq6m] {
    background: linear-gradient(90deg, var(--vh-black-10) 25%, var(--vh-gray-10) 50%, var(--vh-black-10) 75%);
    background-size: 200% 100%;
    animation: lh-shimmer-b-gnx42viq6m 1.4s infinite;
    border-radius: 8px;
}

.lh-skel-header[b-gnx42viq6m] { height: 64px; margin-top: 1rem; }
.lh-skel-side[b-gnx42viq6m] { flex: 0 0 386px; height: 420px; }
.lh-skel-content[b-gnx42viq6m] { flex: 1; height: 420px; }

@keyframes lh-shimmer-b-gnx42viq6m {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Pages/LearningHub/Courses.razor.rz.scp.css */
/* Courses library — ports courses/styles.js + CourseList/styles.js +
   EmptyContent/styles.js. Colors consume vh-tokens so the LeptonX dark
   theme remap applies. */

.lh-page[b-y9gnot3w92] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--vh-font-primary);
}

.lh-courses-header[b-y9gnot3w92] { padding: 2rem 0 1rem; }

.lh-courses-titles[b-y9gnot3w92] { margin-bottom: 1.25rem; }

/* Legacy LH headings are Inter (next-platform screens) — color tokenized only. */
.lh-back-title[b-y9gnot3w92] {
    background: none;
    border: 0;
    padding: 0;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    cursor: pointer;
}

.lh-subtitle[b-y9gnot3w92] { font-size: .9rem; color: var(--vh-text-muted); margin: .3rem 0 0; }

.lh-library-row[b-y9gnot3w92] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

.lh-back-arrow[b-y9gnot3w92] {
    background: none;
    border: 0;
    color: var(--vh-text-heading);
    font-size: 1.1rem;
    cursor: pointer;
    padding: .25rem;
}

.lh-library-title[b-y9gnot3w92] { font-size: 1.35rem; font-weight: 700; color: var(--vh-text-heading); margin: 0; }

.lh-total-label[b-y9gnot3w92] {
    display: inline-block;
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--vh-text-muted);
}

.lh-hidden[b-y9gnot3w92] { visibility: hidden; }

/* ---- filters row ---- */
.lh-filters[b-y9gnot3w92] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.lh-search-box[b-y9gnot3w92] {
    position: relative;
    flex: 1 1 280px;
    min-width: 220px;
}

.lh-search-box input[b-y9gnot3w92] {
    width: 100%;
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    padding: .6rem 2.4rem .6rem .9rem;
    font-size: .9rem;
    outline: none;
    background: var(--vh-surface);
    color: var(--vh-text-body);
}

.lh-search-box input:focus[b-y9gnot3w92] { border-color: var(--vh-primary-hover); }

.lh-search-icon[b-y9gnot3w92] {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vh-black-40);
    pointer-events: none;
}

.lh-search-reset[b-y9gnot3w92] {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--vh-black-60);
    cursor: pointer;
    padding: .25rem;
}

.lh-filter-dd[b-y9gnot3w92] { flex: 0 0 auto; min-width: 170px; }
/* match the legacy CoursesFilterBox control (ReactSelect: verbatim radius 12
   = var(--vh-radius-card-sm), the only 12px in the token scale) */
.lh-filter-dd[b-y9gnot3w92]  .vh-dd-btn { width: 100%; border-radius: var(--vh-radius-card-sm); padding: .55rem .9rem; }

/* ---- grid (1 / 2 / 3 columns, legacy CourseList) ---- */
.lh-course-grid[b-y9gnot3w92] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem 0 2rem;
}

@media (max-width: 992px) {
    .lh-course-grid[b-y9gnot3w92] { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

@media (max-width: 576px) {
    .lh-course-grid[b-y9gnot3w92] { grid-template-columns: 1fr; }
}

/* ---- loading / empty ---- */
.lh-loading[b-y9gnot3w92] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
    color: var(--vh-primary-hover);
    font-size: 2rem;
}

.lh-empty[b-y9gnot3w92] {
    text-align: center;
    padding: 4rem 1rem;
}

.lh-empty-icon[b-y9gnot3w92] { font-size: 3rem; color: var(--vh-black-30); margin-bottom: 1rem; }

.lh-empty h3[b-y9gnot3w92] { font-size: 1.15rem; font-weight: 700; color: var(--vh-text-heading); margin: 0 0 .4rem; }

.lh-empty p[b-y9gnot3w92] { font-size: .9rem; color: var(--vh-text-muted); margin: 0; }
/* /Pages/LearningHub/Index.razor.rz.scp.css */
/* Dashboard — ports dashboard/styles.js (header grid, hero, action cards,
   bundles column, mobile-only Upgrade button). Colors consume vh-tokens so
   the LeptonX dark theme remap applies. */

.lh-page[b-xdhcomc4of] {
    /* Page chrome (design-system §12): sits on the normal LeptonX content
       flow — no centered max-width box; the dash grid below is fluid. */
    font-family: var(--vh-font-primary);
}

/* Lead-in line under the PageHeader (the h1 lives in PageHeader now). */
.lh-title-container[b-xdhcomc4of] { padding: 0 0 1.25rem; }

/* Legacy LH copy is Inter (next-platform screens), not Nunito Sans —
   the page font is kept on purpose; only the color is tokenized. */
.lh-subtitle[b-xdhcomc4of] { font-size: .9rem; color: var(--vh-text-muted); margin: 0; }

/* ---- header grid: hero (1.3fr) + action cards (1fr) ---- */
.lh-dash-grid[b-xdhcomc4of] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 992px) {
    .lh-dash-grid[b-xdhcomc4of] { grid-template-columns: 1fr; }
}

.lh-hero[b-xdhcomc4of] {
    position: relative;
    border-radius: 8px;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    background: var(--vh-lh-gradient);
}

.lh-hero-text[b-xdhcomc4of] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    width: 100%;
}

.lh-hero-tag[b-xdhcomc4of] {
    color: var(--vh-tertiary-light);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.lh-hero-title[b-xdhcomc4of] {
    color: var(--vh-color-white);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}

.lh-hero-percentage[b-xdhcomc4of] {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--vh-color-white);
    font-size: 1.5rem;
    font-weight: 700;
}

.lh-hero-percentage > span[b-xdhcomc4of] { font-size: .85rem; font-weight: 400; padding-left: .3rem; }

.lh-hero-btn[b-xdhcomc4of] {
    margin-top: 1rem;
    text-transform: uppercase;
    /* legacy StartLessonButton: theme primary-light (dashboard/styles.js) */
    background: var(--vh-primary-hover);
    color: var(--vh-color-white);
    border: 0;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    padding: .75rem 1.5rem;
    cursor: pointer;
    transition: filter .3s ease-in-out;
}

.lh-hero-btn:hover[b-xdhcomc4of] { filter: brightness(.9); }

/* ---- action cards column ---- */
.lh-dash-cards[b-xdhcomc4of] { display: flex; flex-direction: column; gap: 1.5rem; }

[b-xdhcomc4of] .lh-action-card { width: 100%; }

.lh-explore-card[b-xdhcomc4of] {
    position: relative;
    background: var(--vh-surface-soft);
    border-radius: 8px;
    padding: 1rem;
    min-height: 122px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
}

.lh-explore-title[b-xdhcomc4of] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vh-black-80);
    max-width: 85%;
}

.lh-explore-btn[b-xdhcomc4of] {
    margin-top: 1rem;
    background: var(--vh-transparent);
    /* legacy CardActionButton: outline primary, hover fills primary-light */
    border: 1px solid var(--vh-primary);
    color: var(--vh-primary);
    font-size: .85rem;
    font-weight: 700;
    padding: .55rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .3s ease-in-out, color .3s ease-in-out;
    z-index: 1;
}

.lh-explore-btn:hover[b-xdhcomc4of] {
    background: var(--vh-primary-hover);
    color: var(--vh-color-white);
}

.lh-card-corner-icon[b-xdhcomc4of] {
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    font-size: 2.4rem;
    color: var(--vh-primary-soft);
}

/* ---- bundles ---- */
.lh-bundles[b-xdhcomc4of] { display: flex; flex-direction: column; }

/* Legacy UpgradeButton is display:none from the sd breakpoint up. */
.lh-upgrade-btn[b-xdhcomc4of] {
    display: none;
    text-transform: uppercase;
    text-align: center;
    /* legacy UpgradeButton: theme primary-light */
    background: var(--vh-primary-hover);
    color: var(--vh-color-white); /* white on brand blue — both themes */
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    padding: .75rem 1.5rem;
    text-decoration: none;
}

/* anchor-qualified states beat the theme's `a` rules without !important */
a.lh-upgrade-btn[b-xdhcomc4of],
a.lh-upgrade-btn:hover[b-xdhcomc4of],
a.lh-upgrade-btn:visited[b-xdhcomc4of] { color: var(--vh-color-white); }

@media (max-width: 768px) {
    .lh-upgrade-btn[b-xdhcomc4of] { display: block; }
}

/* ---- skeleton ---- */
.lh-skel[b-xdhcomc4of] {
    background: linear-gradient(90deg, var(--vh-black-10) 25%, var(--vh-gray-10) 50%, var(--vh-black-10) 75%);
    background-size: 200% 100%;
    animation: lh-shimmer-b-xdhcomc4of 1.4s infinite;
    border-radius: 8px;
}

.lh-skel-hero[b-xdhcomc4of] { min-height: 320px; }
.lh-skel-card[b-xdhcomc4of] { height: 122px; margin-bottom: 1.5rem; }
.lh-skel-row[b-xdhcomc4of] { height: 280px; margin-top: 1rem; }

@keyframes lh-shimmer-b-xdhcomc4of {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Pages/LearningHub/LhBundleCarousel.razor.rz.scp.css */
/* Bundle carousel — ports dashboard/BundleCarousel/styles.js. Colors consume
   vh-tokens so the LeptonX dark theme remap applies. */

.lh-bundle[b-em64k93jkv] {
    /* Shared with LhCourseCard (which falls back to the same 177px) so the
       arrows stay pinned to the thumbnail middle if the height changes. */
    --lh-thumb-h: 177px;
    margin-bottom: 2rem;
}

.lh-bundle-title[b-em64k93jkv] {
    font-family: var(--vh-font-primary);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 .75rem;
}

.lh-bundle-strip-wrap[b-em64k93jkv] { position: relative; }

.lh-bundle-strip[b-em64k93jkv] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: .5rem;
    /* thin scrollbar, like the legacy webkit override */
    scrollbar-width: thin;
}

.lh-bundle-strip[b-em64k93jkv]::-webkit-scrollbar { height: 6px; }
.lh-bundle-strip[b-em64k93jkv]::-webkit-scrollbar-track { background: var(--vh-surface-soft); }
.lh-bundle-strip[b-em64k93jkv]::-webkit-scrollbar-thumb { background: var(--vh-gray-30); border-radius: 25px; }

.lh-bundle-item[b-em64k93jkv] { flex: 0 0 286px; display: flex; }
.lh-bundle-item[b-em64k93jkv]  .lh-course-card { width: 286px; }

.lh-bundle-arrow[b-em64k93jkv] {
    position: absolute;
    top: calc(var(--lh-thumb-h) / 2 - 20px); /* centred on the thumbnail */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    /* dark scrim over the course thumbnails — deliberate literal, both themes */
    background: rgb(var(--vh-fixed-light-ink-rgb) / .75);
    color: var(--vh-color-white);
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease-in-out;
}

.lh-bundle-arrow:hover[b-em64k93jkv] { background: rgb(var(--vh-fixed-light-ink-rgb) / .95); }
/* kept inside the strip so nothing overhangs the page container at 1200px */
.lh-bundle-arrow-left[b-em64k93jkv] { left: 4px; }
.lh-bundle-arrow-right[b-em64k93jkv] { right: 4px; }

@media (max-width: 768px) {
    .lh-bundle-arrow[b-em64k93jkv] { display: none; }
}
/* /Pages/LearningHub/LhCourseCard.razor.rz.scp.css */
/* Course card — ports dashboard/CourseItem/styles.js + courses/CourseItem/styles.js.
   Legacy card: white, 8px radius, 177px thumbnail, Inter type. Colors consume
   vh-tokens so the LeptonX dark theme remap applies. */

.lh-course-card[b-jh0b854ose] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    font-family: var(--vh-font-primary);
}

/* --lh-thumb-h is set by the bundle carousel wrapper so its arrows can pin
   to the thumbnail middle; standalone grids fall back to the same 177px. */
.lh-card-thumb[b-jh0b854ose] {
    position: relative;
    height: var(--lh-thumb-h, 177px);
    flex-shrink: 0;
}

.lh-card-thumb img[b-jh0b854ose] {
    width: 100%;
    height: var(--lh-thumb-h, 177px);
    object-fit: cover;
    display: block;
}

.lh-thumb-placeholder[b-jh0b854ose] {
    width: 100%;
    height: var(--lh-thumb-h, 177px);
    background: var(--vh-gray-20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lh-thumb-placeholder span[b-jh0b854ose] {
    color: var(--vh-gray-40);
    font-weight: 700;
    font-size: .9rem;
}

/* White text on the brand-orange tags is correct in both themes. */
.lh-live-tag[b-jh0b854ose] {
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    background: var(--vh-secondary-hover);
    color: var(--vh-color-white);
    font-size: .8rem;
    font-weight: 700;
    padding: .275rem .75rem;
    border-radius: 32px;
}

.lh-academy-tag[b-jh0b854ose] {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: var(--vh-secondary-hover);
    color: var(--vh-color-white);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: 32px;
}

.lh-card-title[b-jh0b854ose] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 1rem 1rem 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lh-card-description[b-jh0b854ose] {
    font-size: .85rem;
    color: var(--vh-black-60);
    margin: .5rem 1rem .75rem;
    line-height: 1.4;
    flex: 1 1 auto;
}

.lh-card-footer[b-jh0b854ose] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 0 1rem 1rem;
}

/* Legacy CourseItem StartLessonButton is a TEXT button: var(--vh-transparent),
   uppercase bold primary-light; paid/live variants use secondary-light
   (courses/CourseItem/styles.js + dashboard/CourseItem/styles.js). */
.lh-card-btn[b-jh0b854ose] {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    background: var(--vh-transparent);
    color: var(--vh-primary-hover);
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 700;
    padding: .55rem 0;
    cursor: pointer;
    text-decoration: none;
    transition: filter .3s ease-in-out;
    white-space: nowrap;
}

.lh-card-btn:hover[b-jh0b854ose] { filter: brightness(.9); }

/* Anchor-qualified states beat the theme's `a` rules without !important
   (the Upgrade variant renders as a link). */
a.lh-card-btn[b-jh0b854ose],
a.lh-card-btn:hover[b-jh0b854ose],
a.lh-card-btn:visited[b-jh0b854ose] { color: var(--vh-primary-hover); }

.lh-card-btn-upgrade[b-jh0b854ose] { color: var(--vh-secondary-hover); }

a.lh-card-btn-upgrade[b-jh0b854ose],
a.lh-card-btn-upgrade:hover[b-jh0b854ose],
a.lh-card-btn-upgrade:visited[b-jh0b854ose] { color: var(--vh-secondary-hover); }

.lh-card-btn-live[b-jh0b854ose] { color: var(--vh-secondary-hover); }

.lh-card-percentage[b-jh0b854ose] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--vh-body); /* legacy dark-neutral-10 var(--vh-body) ≈ Cobalt body */
}

.lh-card-completed[b-jh0b854ose] { color: var(--vh-success); font-size: 1.15rem; }

.lh-live-date[b-jh0b854ose] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--vh-black-60);
    text-align: right;
}
/* /Pages/LearningHub/LhCourseContent.razor.rz.scp.css */
/* Course content accordion — ports course/CourseContent/styles.js: gray module
   headers with a status strip on the left edge, lesson tiles on the card
   surface, green completed accents, focused tile highlighted. Colors consume
   vh-tokens so the LeptonX dark theme remap applies. */

.lh-cc[b-i6b721mm31] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 502px;
    font-family: var(--vh-font-primary);
    scrollbar-width: thin;
}

.lh-cc[b-i6b721mm31]::-webkit-scrollbar { width: 4px; }
.lh-cc[b-i6b721mm31]::-webkit-scrollbar-thumb { background: var(--vh-gray-30); border-radius: 25px; }

.lh-cc-module[b-i6b721mm31] { list-style: none; }

.lh-cc-module-header[b-i6b721mm31] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--vh-surface-soft);
    padding: 1.1rem 1.25rem 1.1rem 1.5rem;
    cursor: pointer;
}

/* left status strip (neutral → green when every lesson is done) */
.lh-cc-module-header[b-i6b721mm31]::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 8px;
    height: 100%;
    background: var(--vh-black-20);
}

.lh-cc-module-completed[b-i6b721mm31]::before { background: var(--vh-success); }
.lh-cc-module-completed .lh-cc-module-title[b-i6b721mm31] { color: var(--vh-success); }

.lh-cc-module-lead[b-i6b721mm31] { display: flex; flex-direction: column; min-width: 0; }

.lh-cc-module-title[b-i6b721mm31] {
    font-size: .9rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    overflow-wrap: anywhere;
}

.lh-cc-module-count[b-i6b721mm31] { font-size: .75rem; color: var(--vh-text-muted); padding-top: .25rem; }

.lh-cc-chevron[b-i6b721mm31] { color: var(--vh-black-60); transition: transform .3s ease; flex-shrink: 0; margin-left: .5rem; }
.lh-cc-chevron-open[b-i6b721mm31] { transform: rotate(180deg); }

.lh-cc-lessons[b-i6b721mm31] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

/* A fixed open max-height (not a %) so the .3s transition actually runs —
   percentage max-height resolves to none against an auto-height parent. */
.lh-cc-lessons-open[b-i6b721mm31] { max-height: 2000px; }

.lh-cc-lesson[b-i6b721mm31] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--vh-surface);
    padding: 1.2rem 1.25rem 1.2rem 1.5rem;
    cursor: pointer;
    transition: background .2s ease-in-out;
}

.lh-cc-lesson[b-i6b721mm31]::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 8px;
    height: 100%;
    background: var(--vh-surface);
    transition: background .2s ease-in-out;
}

.lh-cc-lesson-completed[b-i6b721mm31]::before { background: var(--vh-success); }
.lh-cc-lesson-completed .lh-cc-lesson-title[b-i6b721mm31] { color: var(--vh-success); }

.lh-cc-lesson-focused[b-i6b721mm31] { background: var(--vh-primary-pale); }
.lh-cc-lesson-focused[b-i6b721mm31]::before { background: var(--vh-tertiary-light); }
/* --vh-ink: dark navy on the pale-blue tile in light, near-white on dark */
.lh-cc-lesson-focused .lh-cc-lesson-title[b-i6b721mm31] { color: var(--vh-ink); }

.lh-cc-lesson-lead[b-i6b721mm31] { display: flex; flex-direction: column; min-width: 0; }

.lh-cc-lesson-title[b-i6b721mm31] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.lh-cc-lesson-subtitle[b-i6b721mm31] { font-size: .75rem; color: var(--vh-text-muted); padding-top: .4rem; }

.lh-cc-lesson-type[b-i6b721mm31] { color: var(--vh-black-60); flex-shrink: 0; margin-left: .5rem; }
.lh-cc-lesson-check[b-i6b721mm31] { color: var(--vh-success); flex-shrink: 0; margin-left: .5rem; }
/* /Pages/LearningHub/LhLessonDetails.razor.rz.scp.css */
/* Lesson details — ports course/LessonDetails/styles.js. Colors consume
   vh-tokens so the LeptonX dark theme remap applies. */

.lh-ld[b-85grq1h3yl] {
    border: 1px solid var(--vh-gray-20);
    border-radius: 8px;
    padding: 2rem;
    font-family: var(--vh-font-primary);
    display: flex;
    flex-direction: column;
}

.lh-ld-title[b-85grq1h3yl] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin-bottom: .75rem;
}

.lh-ld-live-date[b-85grq1h3yl] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 .75rem;
}

.lh-ld-live-date span[b-85grq1h3yl] { font-weight: 400; padding-left: .3rem; }

.lh-ld-label[b-85grq1h3yl] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin-bottom: .5rem;
}

.lh-ld-text[b-85grq1h3yl] {
    font-size: .88rem;
    color: var(--vh-black-60);
    line-height: 1.5;
    margin: 0 0 .5rem;
    white-space: pre-wrap;
}

.lh-ld-divider[b-85grq1h3yl] {
    border: 0;
    border-top: 1px solid var(--vh-gray-20);
    margin: 1.25rem 0;
    width: 100%;
}

.lh-ld-rating[b-85grq1h3yl] { display: flex; gap: .75rem; }

.lh-ld-rate-btn[b-85grq1h3yl] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--vh-line);
    background: var(--vh-surface);
    color: var(--vh-black-60);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s ease-in-out, color .2s ease-in-out;
}

.lh-ld-rate-btn:hover[b-85grq1h3yl] { background: var(--vh-surface-soft); }

.lh-ld-rate-active[b-85grq1h3yl] {
    /* legacy LessonDetails rate: selected fills primary-light */
    background: var(--vh-primary-hover);
    border-color: var(--vh-primary-hover);
    color: var(--vh-color-white); /* white on brand blue — both themes */
}

.lh-ld-rate-active:hover[b-85grq1h3yl] { background: var(--vh-primary-hover); }

.lh-ld-files[b-85grq1h3yl] { list-style: none; margin: 0; padding: 0; }

.lh-ld-nofiles[b-85grq1h3yl] { font-size: .85rem; color: var(--vh-text-muted); }

.lh-ld-file[b-85grq1h3yl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem .5rem;
    border-radius: 8px;
    color: var(--vh-text-heading);
    text-decoration: none;
    transition: background .2s ease-in-out;
}

.lh-ld-file:hover[b-85grq1h3yl] { background: var(--vh-surface-soft); color: var(--vh-text-heading); }

.lh-ld-file-lead[b-85grq1h3yl] { display: flex; align-items: center; gap: .9rem; min-width: 0; }

.lh-ld-file-title[b-85grq1h3yl] { font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }

.lh-ld-about[b-85grq1h3yl] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin-bottom: .75rem;
}
/* /Pages/LearningHub/LhLiveLessonsCard.razor.rz.scp.css */
/* Live lessons card — ports dashboard/LiveLessonsCard/styles.js. */

/* Legacy scheme (LiveLessonsCard/styles.js): dark-blue-200 card (var(--vh-lh-live-surface)) —
   secondary-light when live — white texts, tertiary-light header tag and a
   WHITE solid button with dark-blue-100 (var(--vh-blue-400)) text. The two dark blues
   are verbatim next-platform hexes with no --vh token yet (candidates for
   --vh-np-darkblue-200 / --vh-np-blue-400, design-system owner); the card is
   white-on-dark-blue, so it reads fine on both themes. */
.lh-live-card[b-0478tpd2db] {
    position: relative;
    background: var(--vh-lh-live-surface); /* legacy dark-blue-200 */
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 122px;
    font-family: var(--vh-font-primary);
    overflow: hidden;
}

.lh-live-card-on[b-0478tpd2db] { background: var(--vh-secondary-hover); }

.lh-live-card-body[b-0478tpd2db] { display: flex; flex-direction: column; }

.lh-live-card-header[b-0478tpd2db] {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--vh-tertiary-light);
}

.lh-live-card-on .lh-live-card-header[b-0478tpd2db] { color: var(--vh-color-white); }

.lh-live-card-title[b-0478tpd2db] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vh-color-white);
    text-transform: uppercase;
    margin-top: .25rem;
}

.lh-live-card-description[b-0478tpd2db] {
    font-size: .85rem;
    color: var(--vh-color-white);
    margin: .35rem 0 .75rem;
    max-width: 75%;
}

.lh-live-card-btn[b-0478tpd2db] {
    background: var(--vh-color-white);
    border: 0;
    color: var(--vh-blue-400); /* legacy dark-blue-100 */
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: .55rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: filter .3s ease-in-out;
    z-index: 1;
}

.lh-live-card-btn:hover[b-0478tpd2db] { filter: brightness(.9); }

.lh-live-card-on .lh-live-card-btn[b-0478tpd2db] { color: var(--vh-secondary-hover); }

.lh-card-corner-icon[b-0478tpd2db] {
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    font-size: 2.4rem;
    color: rgb(var(--vh-white-rgb) / .35);
}
/* /Pages/LearningHub/Onboarding.razor.rz.scp.css */
/* Onboarding — ports onboarding/styles.js. Brand gradient stands in for the
   legacy hero PNG; plan card mirrors ExplainingPlanItem. Colors consume
   vh-tokens so the LeptonX dark theme remap applies. */

.lh-page[b-k586h9nfln] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--vh-font-primary);
}

.lh-title-container[b-k586h9nfln] { padding: 2rem 0 1.5rem; }

/* Legacy LH headings are Inter (next-platform screens) — color tokenized only. */
.lh-title[b-k586h9nfln] {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
}

.lh-subtitle[b-k586h9nfln] {
    font-size: .9rem;
    color: var(--vh-text-muted);
    margin: .3rem 0 0;
}

.lh-onboarding-grid[b-k586h9nfln] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 992px) {
    .lh-onboarding-grid[b-k586h9nfln] { grid-template-columns: 1fr; }
}

.lh-onboarding-hero[b-k586h9nfln] {
    position: relative;
    border-radius: 8px;
    min-height: 420px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    /* Learning Hub brand gradient (course/styles.js primaryLinearGradientColor) */
    background: var(--vh-lh-gradient);
}

.lh-onboarding-hero-text[b-k586h9nfln] { display: flex; flex-direction: column; }

.lh-onboarding-icon[b-k586h9nfln] {
    font-size: 2.4rem;
    color: rgb(var(--vh-white-rgb) / .85);
    margin-bottom: 1.25rem;
}

.lh-onboarding-hero-title[b-k586h9nfln] {
    color: var(--vh-color-white);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.25;
}

.lh-get-started-btn[b-k586h9nfln] {
    text-transform: uppercase;
    background: var(--vh-color-white); /* white button on the brand gradient — both themes */
    color: var(--vh-lh-indigo);
    border: 0;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    padding: .75rem 2rem;
    cursor: pointer;
    transition: filter .3s ease-in-out;
}

.lh-get-started-btn:hover[b-k586h9nfln] { filter: brightness(.92); }
.lh-get-started-btn:disabled[b-k586h9nfln] { opacity: .6; cursor: default; }

.lh-onboarding-plans[b-k586h9nfln] { display: flex; flex-direction: column; gap: 1.5rem; }

.lh-plan-item[b-k586h9nfln] {
    background: var(--vh-surface-soft);
    border-radius: 8px;
    padding: 1.5rem;
    flex: 1;
}

.lh-plan-title[b-k586h9nfln] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin-bottom: .6rem;
}

.lh-plan-description[b-k586h9nfln] {
    font-size: .9rem;
    color: var(--vh-black-60);
    line-height: 1.5;
    margin: 0;
}
/* /Pages/MyJobs/Index.razor.rz.scp.css */
/* ======================================================================
   "Cobalt" My Jobs — mirrors the freshly redesigned React (pages/my-jobs
   Header + Content + Skeleton). Same light, on-brand system as the /jobs
   board card + /job/{id} detail, consumed through the vh-tokens Cobalt
   block (design-system.md §10): var(--vh-surface) cards, var(--vh-line)
   borders, var(--vh-body) copy, var(--vh-ink) headings, VanHack blues via
   var(--vh-primary*). Inter via var(--vh-font-primary). Dark mode comes
   free from the .lpx-theme-dark token remap — no color literals here.
   Layout (page chrome, design-system §12): PageHeader on the normal LeptonX
   content flow, then Profile Strength + 4 stat cards directly on the
   soft-surface body above single-column job cards in 4 accordion sections —
   everything left-anchored at the standard gutter, no centered max-width
   wrappers.
   ====================================================================== */

.mj-page[b-yeyhli57ev] {
    width: 100%;
    font-family: var(--vh-font-primary);
    color: var(--vh-body);
    background: var(--vh-surface-soft);
}

/* ---- dashboard area (no enclosing surface; the tiles define themselves) ---- */
.mj-band[b-yeyhli57ev] {
    width: 100%;
    box-sizing: border-box;
    background: var(--vh-transparent);
    border: 0;
}

/* Left-anchored, fills the flow — the stats start at the standard
   gutter (same left offset as the PageHeader title), not in a centered box. */
.mj-band-inner[b-yeyhli57ev] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 26px;
}

/* ---- stat-card grid ---- */
/* ---- hero row: Profile Strength card + stat grid ---- */
.mj-hero[b-yeyhli57ev] {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.mj-statgrid[b-yeyhli57ev] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    flex: 1;
    min-width: 0;
}

/* When the strength card sits beside it, the 4 stats fold into a 2×2 grid. */
.mj-statgrid-beside[b-yeyhli57ev] { grid-template-columns: repeat(2, 1fr); }

/* Profile Strength card (moved from the retired candidate dashboard sidebar).
   Same surface treatment as the stat tiles; the whole card links to /profile. */
.mj-strength[b-yeyhli57ev] {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: var(--vh-radius-card);
    background: var(--vh-color-white);
    border: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-surface);
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px);
    animation: mj-rise-b-yeyhli57ev .5s cubic-bezier(.2, .8, .2, 1) forwards;
}

.mj-strength:hover .mj-strength-edit[b-yeyhli57ev] { text-decoration: underline; }

.mj-ring[b-yeyhli57ev] { flex: 0 0 auto; }

.mj-ring-pct[b-yeyhli57ev] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mj-strength-body[b-yeyhli57ev] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mj-strength-title[b-yeyhli57ev] {
    font-weight: 700;
    font-size: 15px;
    color: var(--vh-ink);
}

.mj-strength-steps[b-yeyhli57ev] {
    font-size: 12.5px;
    color: var(--vh-muted);
}

.mj-strength-edit[b-yeyhli57ev] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-primary-hover);
}

.mj-strength-edit i[b-yeyhli57ev] { font-size: 11px; margin-left: 2px; }

/* Non-interactive display tiles (no cursor / hover / focus / active), mirrors React. */
.mj-stat[b-yeyhli57ev] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-cobalt);
    font-family: inherit;
    opacity: 0;
    transform: translateY(12px);
    animation: mj-rise-b-yeyhli57ev .5s cubic-bezier(.2, .8, .2, 1) forwards;
}

.mj-stat-tile[b-yeyhli57ev] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.mj-stat-tile svg[b-yeyhli57ev] { display: block; }

.mj-stat-body[b-yeyhli57ev] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mj-stat-count[b-yeyhli57ev] {
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.02em;
}

.mj-stat-label[b-yeyhli57ev] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vh-muted);
    white-space: nowrap;
}

/* Per-stat accent presets (brand-alpha borders/tints stay literal — no token). */
.mj-stat-blue .mj-stat-tile[b-yeyhli57ev] {
    color: var(--vh-blue-deep); background: var(--vh-blue-tint); border: 1px solid rgb(var(--vh-primary-hover-rgb) / .22);
}
.mj-stat-blue .mj-stat-count[b-yeyhli57ev] { color: var(--vh-blue-deep); }

.mj-stat-blue-deep .mj-stat-tile[b-yeyhli57ev] {
    color: var(--vh-blue-deep); background: rgb(var(--vh-primary-active-rgb) / .08); border: 1px solid rgb(var(--vh-primary-active-rgb) / .2);
}
.mj-stat-blue-deep .mj-stat-count[b-yeyhli57ev] { color: var(--vh-blue-deep); }

.mj-stat-gray .mj-stat-tile[b-yeyhli57ev] {
    color: var(--vh-black-70); background: var(--vh-black-10); border: 1px solid var(--vh-black-20);
}
.mj-stat-gray .mj-stat-count[b-yeyhli57ev] { color: var(--vh-ink); }

@keyframes mj-rise-b-yeyhli57ev { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .mj-stat[b-yeyhli57ev] { opacity: 1; transform: none; animation: none; }
}

/* ---- error alert (Cobalt, tonal red) ---- */
.mj-error[b-yeyhli57ev] {
    width: 100%;
    box-sizing: border-box;
    margin: 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--vh-tonal-red-bd);
    background: var(--vh-tonal-red-bg);
    color: var(--vh-tonal-red-text);
    border-radius: var(--vh-radius-card-sm);
    font-size: 13px;
}

.mj-error button[b-yeyhli57ev] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-tonal-red-text);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

/* ---- empty / no-results (Cobalt card) ----
   Readable max-width kept, but LEFT-anchored at the standard gutter (§12). */
.mj-nojobs[b-yeyhli57ev] {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    margin: 40px 0 96px;
    padding: 40px 36px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-cobalt);
    display: grid;
    gap: 22px;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.mj-nojobs-hi[b-yeyhli57ev] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: center;
    margin: 0;
    color: var(--vh-ink);
}

.mj-nojobs-label[b-yeyhli57ev] {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    margin: 0; /* the parent grid's justify-items centers it inside the card */
    max-width: 420px;
    color: var(--vh-body);
}

.mj-nojobs-cta[b-yeyhli57ev] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 40px;
    width: 100%;
    max-width: 255px;
    border: 0;
    border-radius: 10px;
    background: var(--vh-gradient-primary);
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / .7);
    color: var(--vh-color-white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.mj-nojobs-cta:hover[b-yeyhli57ev] {
    color: var(--vh-color-white);
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / .85);
}

/* ---- body: accordion sections on the soft surface ----
   Left-anchored, fills the flow (no centered max-width box, §12). */
.mj-body[b-yeyhli57ev] {
    width: 100%;
    box-sizing: border-box;
    padding: 28px 0 56px;
    display: grid;
    gap: 28px;
}

.mj-section[b-yeyhli57ev] {
    width: 100%;
    /* Offset so the smooth scroll from a stat card lands clear of any sticky nav. */
    scroll-margin-top: 16px;
}

.mj-section-head[b-yeyhli57ev] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: var(--vh-transparent);
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
}

.mj-section-name[b-yeyhli57ev] {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    color: var(--vh-ink);
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.mj-section-name .count[b-yeyhli57ev] { font-weight: 700; font-size: 13px; color: var(--vh-primary); }

.mj-section-arrow[b-yeyhli57ev] {
    color: var(--vh-muted);
    font-size: 13px;
    transition: transform .2s ease;
}

.mj-section-arrow.open[b-yeyhli57ev] { transform: rotate(180deg); }

.mj-section-loading[b-yeyhli57ev] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

/* Single-column card list, even vertical rhythm. */
.mj-cards[b-yeyhli57ev] { display: flex; flex-direction: column; gap: 12px; }

/* ---- flat, clickable single-column job card ----
   The entrance animation lives on the OUTER wrapper so the resting card can
   communicate interaction through its border without creating elevation. */
.mj-job-wrap[b-yeyhli57ev] {
    opacity: 0;
    transform: translateY(10px);
    animation: mj-rise-b-yeyhli57ev .45s cubic-bezier(.2, .8, .2, 1) forwards;
}

.mj-job[b-yeyhli57ev] {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    padding: 16px 18px;
    box-shadow: var(--vh-shadow-cobalt);
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.mj-job:hover[b-yeyhli57ev] {
    border-color: var(--vh-primary-hover);
    box-shadow: var(--vh-shadow-surface-hover);
}

.mj-job.active[b-yeyhli57ev] {
    border-color: var(--vh-primary-hover);
    box-shadow: inset 0 0 0 1px rgb(var(--vh-primary-hover-rgb) / .28);
}

.mj-job:focus-visible[b-yeyhli57ev] {
    outline: 2px solid var(--vh-primary-hover);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mj-job-wrap[b-yeyhli57ev] { opacity: 1; transform: none; animation: none; }
}

/* Top row: title + step + metadata on the left, categorical match gauge right. */
.mj-job-top[b-yeyhli57ev] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px;
    grid-template-areas:
        'title gauge'
        'step gauge'
        'meta gauge';
    align-items: start;
    gap: 4px 16px;
}

.mj-job-title[b-yeyhli57ev] {
    grid-area: title;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--vh-ink);
}

.mj-job-step[b-yeyhli57ev] {
    grid-area: step;
    margin-top: 2px;
}

.mj-job-step p[b-yeyhli57ev] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--vh-primary);
}

.mj-job-gauge[b-yeyhli57ev] {
    grid-area: gauge;
    align-self: center;
    justify-self: end;
}

/* Meta row: location + flag, work-mode chip, and quiet salary chip. */
.mj-job-meta[b-yeyhli57ev] {
    grid-area: meta;
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.mj-job-location[b-yeyhli57ev] { display: inline-flex; align-items: center; gap: 7px; }
.mj-job-location p[b-yeyhli57ev] { margin: 0; font-size: 12.5px; color: var(--vh-body); }

.mj-flag[b-yeyhli57ev] { width: 18px; height: 14px; object-fit: contain; border-radius: 2px; }
.mj-row-icon[b-yeyhli57ev] { width: 18px; color: var(--vh-muted); font-size: 13px; text-align: center; }

/* Work-mode chip — soft Cobalt chip. */
.mj-job-relocate[b-yeyhli57ev] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--vh-blue-deep);
    background: var(--vh-surface-soft);
    border: 1px solid var(--vh-line-strong);
    padding: 3px 10px;
    border-radius: 999px;
}

.mj-job-relocate p[b-yeyhli57ev] { margin: 0; }
.mj-relocate-icon[b-yeyhli57ev] { font-size: 11px; color: var(--vh-primary); opacity: .85; }

/* Quiet salary chip. */
.mj-meta-chip[b-yeyhli57ev] {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--vh-muted);
}

.mj-meta-chip b[b-yeyhli57ev] { color: var(--vh-body); font-weight: 600; }

.mj-meta-chip + .mj-meta-chip[b-yeyhli57ev] {
    padding-left: 14px;
    border-left: 1px solid var(--vh-line);
}

/* ---- tonal interview pills ---- */
.mj-pill[b-yeyhli57ev] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    box-sizing: border-box;
}

.mj-pill p[b-yeyhli57ev] { margin: 0; }
.mj-pill .dot[b-yeyhli57ev] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Tonal tone presets — colors come from the shared --vh-tonal-* tokens (same
   values as the .vh-pill-tonal-* utilities; kept local because the pill's
   grid placement/metrics are page-specific). Gray maps to the neutral
   black-NN ladder until a --vh-tonal-gray-* trio exists in vh-tokens.css. */
.mj-pill.green[b-yeyhli57ev] { color: var(--vh-tonal-green-text); background: var(--vh-tonal-green-bg); border: 1px solid var(--vh-tonal-green-bd); }
.mj-pill.amber[b-yeyhli57ev] { color: var(--vh-tonal-amber-text); background: var(--vh-tonal-amber-bg); border: 1px solid var(--vh-tonal-amber-bd); }
.mj-pill.red[b-yeyhli57ev] { color: var(--vh-tonal-red-text); background: var(--vh-tonal-red-bg); border: 1px solid var(--vh-tonal-red-bd); }
.mj-pill.blue[b-yeyhli57ev] { color: var(--vh-tonal-blue-text); background: var(--vh-tonal-blue-bg); border: 1px solid var(--vh-tonal-blue-bd); }
.mj-pill.gray[b-yeyhli57ev] { color: var(--vh-black-70); background: var(--vh-black-10); border: 1px solid var(--vh-black-20); }

.mj-job-bottom[b-yeyhli57ev] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--vh-line);
}

.mj-views p[b-yeyhli57ev] { margin: 0; font-size: 11.5px; color: var(--vh-muted); }

/* ---- spinner ---- */
.mj-spinner[b-yeyhli57ev] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--vh-line-strong);
    border-top-color: var(--vh-primary-hover);
    animation: mj-spin-b-yeyhli57ev .6s linear infinite;
}

.mj-spinner-sm[b-yeyhli57ev] { width: 14px; height: 14px; }

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

/* ---- skeleton (Cobalt, matches the loaded dashboard) ---- */
.mj-skel[b-yeyhli57ev] {
    background: linear-gradient(90deg, var(--vh-surface-soft) 25%, var(--vh-line-strong) 37%, var(--vh-surface-soft) 63%);
    background-size: 400% 100%;
    animation: mj-skel-pulse-b-yeyhli57ev 1.4s ease infinite;
    border-radius: 8px;
}

.mj-skel-stat[b-yeyhli57ev] { height: 76px; border-radius: var(--vh-radius-card); }
.mj-skel-strength[b-yeyhli57ev] { flex: 0 0 300px; border-radius: var(--vh-radius-card); }
.mj-skel-label[b-yeyhli57ev] { width: 200px; height: 22px; }
.mj-skel-card[b-yeyhli57ev] { width: 100%; height: 96px; border-radius: var(--vh-radius-card); }

@keyframes mj-skel-pulse-b-yeyhli57ev {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---- responsive ---- */
@media (max-width: 992px) {
    .mj-hero[b-yeyhli57ev] { flex-direction: column; }
    .mj-strength[b-yeyhli57ev], .mj-skel-strength[b-yeyhli57ev] { flex: 0 0 auto; width: 100%; }
    .mj-statgrid[b-yeyhli57ev] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .mj-statgrid[b-yeyhli57ev] { grid-template-columns: 1fr; }
    .mj-job-top[b-yeyhli57ev] {
        grid-template-columns: minmax(0, 1fr) 108px;
        grid-template-areas:
            'title gauge'
            'step gauge'
            'meta meta';
        gap: 8px;
    }
}
/* /Pages/MyJobs/MyJobsJobHeader.razor.rz.scp.css */
.mj-job-header[b-87g4v8j1mf] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px;
    padding: 20px 28px 18px;
    background: var(--vh-surface);
    border-bottom: 1px solid var(--vh-line);
    box-shadow: 0 8px 24px -24px rgb(var(--vh-cobalt-shadow-rgb) / .7);
    z-index: 4;
}

.mj-job-header-copy[b-87g4v8j1mf] {
    min-width: 0;
}

.mj-job-eyebrow[b-87g4v8j1mf] {
    display: block;
    margin-bottom: 4px;
    color: var(--vh-primary);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.mj-job-title[b-87g4v8j1mf] {
    margin: 0;
    color: var(--vh-ink);
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 750;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.mj-job-facts[b-87g4v8j1mf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 16px;
    margin-top: 10px;
}

.mj-job-fact[b-87g4v8j1mf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--vh-body);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.mj-job-fact i[b-87g4v8j1mf] {
    width: 14px;
    color: var(--vh-muted);
    font-size: 12px;
    text-align: center;
}

.mj-job-fact-muted[b-87g4v8j1mf] {
    color: var(--vh-muted);
    font-weight: 500;
}

.mj-job-flag[b-87g4v8j1mf] {
    width: 19px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.mj-job-visa[b-87g4v8j1mf] {
    color: var(--vh-tonal-amber-text);
    font-size: 11px;
    font-weight: 750;
}

.mj-job-skills[b-87g4v8j1mf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.mj-job-skill[b-87g4v8j1mf],
.mj-job-skill-more[b-87g4v8j1mf] {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    box-sizing: border-box;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.mj-job-skill.required[b-87g4v8j1mf] {
    color: var(--vh-tonal-blue-text);
    background: var(--vh-blue-tint);
    border: 1px solid var(--vh-tonal-blue-bd);
}

.mj-job-skill.nice[b-87g4v8j1mf] {
    color: var(--vh-body);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line-strong);
}

.mj-job-skill-more[b-87g4v8j1mf] {
    color: var(--vh-muted);
    background: var(--vh-surface-soft);
    border: 1px dashed var(--vh-line-strong);
}

.mj-job-header-actions[b-87g4v8j1mf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mj-job-close[b-87g4v8j1mf] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--vh-muted);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 9px;
    cursor: pointer;
    outline: none;
    font-size: 15px;
    line-height: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mj-job-close:hover[b-87g4v8j1mf] {
    color: var(--vh-ink);
    background: var(--vh-surface-soft);
    border-color: var(--vh-line-strong);
}

.mj-job-close:focus-visible[b-87g4v8j1mf],
.mj-job-details-link:focus-visible[b-87g4v8j1mf] {
    outline: 2px solid var(--vh-primary-hover);
    outline-offset: 2px;
}

.mj-job-details-link[b-87g4v8j1mf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 7px 12px;
    color: var(--vh-primary);
    background: var(--vh-blue-tint);
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / .22);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mj-job-details-link i[b-87g4v8j1mf] {
    font-size: 10px;
}

.mj-job-details-link:hover[b-87g4v8j1mf] {
    color: var(--vh-primary-active);
    background: rgb(var(--vh-primary-hover-rgb) / .16);
    border-color: var(--vh-primary-hover);
}

@media (max-width: 640px) {
    .mj-job-header[b-87g4v8j1mf] {
        gap: 12px;
        padding: 16px 18px 14px;
    }

    .mj-job-title[b-87g4v8j1mf] {
        padding-right: 4px;
        font-size: 18px;
    }

    .mj-job-facts[b-87g4v8j1mf] {
        gap: 6px 12px;
        margin-top: 8px;
    }

    .mj-job-fact[b-87g4v8j1mf] {
        font-size: 11.5px;
    }

    .mj-job-skills[b-87g4v8j1mf] {
        margin-top: 10px;
    }

    .mj-job-details-link[b-87g4v8j1mf] {
        width: 34px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .mj-job-details-link i[b-87g4v8j1mf] {
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .mj-job-header[b-87g4v8j1mf] {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .mj-job-header-actions[b-87g4v8j1mf] {
        display: grid;
    }
}
/* /Pages/MyJobs/MyJobsMatchGauge.razor.rz.scp.css */
.mj-match-gauge[b-rt9ujhjlc4] {
    --mj-needle-angle: 0deg;
    --mj-label-bg: var(--vh-surface-soft);
    --mj-label-fg: var(--vh-muted);
    width: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--vh-body);
    line-height: 1;
}

.mj-match-dial[b-rt9ujhjlc4] {
    width: 112px;
    height: auto;
    overflow: visible;
}

.mj-match-segment[b-rt9ujhjlc4] {
    fill: none;
    stroke-width: 10;
    stroke-linecap: butt;
}

.mj-match-segment[b-rt9ujhjlc4] {
    opacity: 1;
    transition: opacity .2s ease, filter .2s ease;
}

.mj-match-segment.low[b-rt9ujhjlc4] { stroke: var(--vh-danger-light); }
.mj-match-segment.medium[b-rt9ujhjlc4] { stroke: var(--vh-warning-light); }
.mj-match-segment.high[b-rt9ujhjlc4] { stroke: var(--vh-green-500); }
.mj-match-segment.strong[b-rt9ujhjlc4] { stroke: var(--vh-primary-hover); }

.level-low[b-rt9ujhjlc4] {
    --mj-needle-angle: -67.5deg;
    --mj-label-bg: var(--vh-danger);
    --mj-label-fg: var(--vh-on-primary);
}

.level-medium[b-rt9ujhjlc4] {
    --mj-needle-angle: -22.5deg;
    --mj-label-bg: var(--vh-warning-light);
    --mj-label-fg: var(--vh-ink);
}

.level-high[b-rt9ujhjlc4] {
    --mj-needle-angle: 22.5deg;
    --mj-label-bg: var(--vh-green-500);
    --mj-label-fg: var(--vh-ink);
}

.level-strong[b-rt9ujhjlc4] {
    --mj-needle-angle: 67.5deg;
    --mj-label-bg: var(--vh-primary);
    --mj-label-fg: var(--vh-on-primary);
}

.level-low .mj-match-segment.low[b-rt9ujhjlc4],
.level-medium .mj-match-segment.medium[b-rt9ujhjlc4],
.level-high .mj-match-segment.high[b-rt9ujhjlc4],
.level-strong .mj-match-segment.strong[b-rt9ujhjlc4] {
    opacity: 1;
    filter: saturate(1.18) brightness(1.02);
}

.mj-match-needle[b-rt9ujhjlc4] {
    color: var(--vh-ink);
    transform: rotate(var(--mj-needle-angle));
    transform-origin: 60px 60px;
    transition: transform .3s ease;
}

.mj-match-needle line[b-rt9ujhjlc4] {
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.mj-match-needle circle[b-rt9ujhjlc4] {
    fill: var(--vh-surface);
    stroke: currentColor;
    stroke-width: 3;
}

.level-unavailable .mj-match-segment[b-rt9ujhjlc4] { opacity: .28; }
.level-unavailable .mj-match-needle[b-rt9ujhjlc4] { display: none; }

.mj-match-caption[b-rt9ujhjlc4] {
    margin-top: -1px;
    color: var(--vh-tailwind-gray-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.mj-match-level[b-rt9ujhjlc4] {
    display: inline-flex;
    min-height: 26px;
    margin-top: 4px;
    padding: 4px 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--vh-radius-pill);
    background: var(--mj-label-bg);
    color: var(--mj-label-fg);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
}

.level-unavailable .mj-match-level[b-rt9ujhjlc4] {
    max-width: 100px;
    min-height: 0;
    padding: 0;
    background: none;
    color: var(--vh-muted);
    font-size: .68rem;
    line-height: 1.2;
    text-align: center;
}

.mj-match-gauge.large[b-rt9ujhjlc4] { width: 160px; }
.mj-match-gauge.large .mj-match-dial[b-rt9ujhjlc4] { width: 150px; }
.mj-match-gauge.large .mj-match-caption[b-rt9ujhjlc4] { font-size: .66rem; }
.mj-match-gauge.large .mj-match-level[b-rt9ujhjlc4] {
    min-height: 28px;
    padding-inline: 12px;
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .mj-match-segment[b-rt9ujhjlc4],
    .mj-match-needle[b-rt9ujhjlc4] {
        transition: none;
    }
}
/* /Pages/MyJobs/MyJobsMatchingDetails.razor.rz.scp.css */
.mj-match-details[b-r7ecaewoob] {
    display: grid;
    gap: 16px;
    width: 100%;
}

.mj-match-overview[b-r7ecaewoob],
.mj-match-empty[b-r7ecaewoob] {
    box-sizing: border-box;
    padding: 22px 24px;
}

.mj-match-overview[b-r7ecaewoob] {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}

.mj-match-summary[b-r7ecaewoob] {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / .22);
    border-radius: var(--vh-radius-card-sm);
    background: var(--vh-blue-tint);
}

.mj-match-eyebrow[b-r7ecaewoob] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--vh-blue-deep);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mj-match-summary p[b-r7ecaewoob],
.mj-match-empty p[b-r7ecaewoob] {
    margin: 0;
    color: var(--vh-body);
    font-size: .88rem;
    line-height: 1.6;
}

.mj-match-empty[b-r7ecaewoob] {
    display: flex;
    align-items: center;
    gap: 22px;
}

.mj-match-empty h5[b-r7ecaewoob],
.mj-match-analysis h5[b-r7ecaewoob] {
    margin: 0;
    color: var(--vh-ink);
    font-size: 1rem;
    font-weight: 800;
}

.mj-match-empty h5[b-r7ecaewoob] { margin-bottom: 6px; }

.mj-match-analysis[b-r7ecaewoob] {
    box-sizing: border-box;
    padding: 22px 24px;
}

.mj-match-points[b-r7ecaewoob] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.mj-match-analysis h6[b-r7ecaewoob] {
    margin: 0 0 9px;
    color: var(--vh-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mj-match-point-list[b-r7ecaewoob] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mj-match-point[b-r7ecaewoob] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    color: var(--vh-body);
    background: var(--vh-surface-soft);
    font-size: .82rem;
    line-height: 1.45;
}

.mj-match-point i[b-r7ecaewoob] {
    flex: 0 0 auto;
    margin-top: 3px;
}

.mj-match-point.positive[b-r7ecaewoob] {
    border-color: var(--vh-tonal-green-bd);
    background: rgb(var(--vh-green-500-rgb) / .1);
}

.mj-match-point.positive i[b-r7ecaewoob] { color: var(--vh-tonal-green-text); }

.mj-match-point.negative[b-r7ecaewoob] {
    border-color: var(--vh-tonal-amber-bd);
    background: rgb(var(--vh-amber-500-rgb) / .1);
}

.mj-match-point.negative i[b-r7ecaewoob] { color: var(--vh-tonal-amber-text); }

.mj-match-skills[b-r7ecaewoob] {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--vh-line);
}

.mj-match-skill[b-r7ecaewoob] {
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    background: var(--vh-surface);
}

.mj-match-skill-head[b-r7ecaewoob] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.mj-match-skill-head > strong[b-r7ecaewoob] {
    color: var(--vh-ink);
    font-size: .88rem;
}

.mj-match-skill-check[b-r7ecaewoob] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: .62rem;
}

.mj-match-skill-check.has[b-r7ecaewoob] {
    color: var(--vh-tonal-green-text);
    background: rgb(var(--vh-green-500-rgb) / .14);
}

.mj-match-skill-check.missing[b-r7ecaewoob] {
    color: var(--vh-profile-error);
    background: rgb(var(--vh-bootstrap-danger-rgb) / .12);
}

.mj-match-required[b-r7ecaewoob] {
    padding: 2px 8px;
    border: 1px solid var(--vh-tonal-amber-bd);
    border-radius: var(--vh-radius-pill);
    color: var(--vh-tonal-amber-text);
    background: var(--vh-tonal-amber-bg);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mj-match-years[b-r7ecaewoob] {
    color: var(--vh-muted);
    font-size: .72rem;
    font-weight: 600;
}

.mj-match-skill > p[b-r7ecaewoob] {
    margin: 6px 0 0 29px;
    color: var(--vh-body);
    font-size: .8rem;
    line-height: 1.5;
}

.mj-match-muted[b-r7ecaewoob] {
    margin: 0;
    color: var(--vh-muted) !important;
    font-size: .82rem !important;
}

@media (max-width: 700px) {
    .mj-match-overview[b-r7ecaewoob] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .mj-match-summary[b-r7ecaewoob] { width: 100%; }
    .mj-match-points[b-r7ecaewoob] { grid-template-columns: 1fr; }
    .mj-match-empty[b-r7ecaewoob] { flex-direction: column; text-align: center; }
}
/* /Pages/MyJobs/MyJobsSideModal.razor.rz.scp.css */
/* ======================================================================
   Cobalt my-jobs side drawer — mirrors the freshly redesigned React
   (Content/SideModal + sub-sections). Same light, on-brand system as the
   /jobs board + /job/{id} detail, consumed through the vh-tokens Cobalt
   block (design-system.md §10): var(--vh-surface) cards on a
   var(--vh-surface-soft) drawer, VanHack blues via var(--vh-primary*),
   var(--vh-line) borders, tonal status pills from the --vh-tonal-* tokens,
   a Cobalt hiring timeline. Inter via var(--vh-font-primary). Dark mode
   comes free from the .lpx-theme-dark token remap — no color literals here
   (brand-alpha glows/tints excepted; they read fine on both modes).
   ====================================================================== */

/* ---- drawer + backdrop ---- */
.mj-backdrop[b-fhy8ehu9up] {
    position: fixed;
    inset: 0;
    background: rgb(var(--vh-cobalt-shadow-rgb) / .32);
    z-index: 1050;
    cursor: pointer;
}

.mj-drawer[b-fhy8ehu9up] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 80%;
    max-width: 975px;
    background: var(--vh-surface-soft);
    z-index: 1055;
    box-shadow: -10px 0 40px -12px rgb(var(--vh-cobalt-shadow-rgb) / .28);
    outline: none;
    font-family: var(--vh-font-primary);
    color: var(--vh-body);
    animation: mj-slide-in-b-fhy8ehu9up .25s ease;
    display: flex;
    flex-direction: column;
}

@keyframes mj-slide-in-b-fhy8ehu9up {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.mj-d-loading[b-fhy8ehu9up] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mj-d-content[b-fhy8ehu9up] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--vh-surface-soft);
}

/* ---- header (title + clean close X) ---- */
.mj-d-header[b-fhy8ehu9up] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    background: var(--vh-surface);
    border-bottom: 1px solid var(--vh-line);
    z-index: 4;
}

.mj-d-header-bare[b-fhy8ehu9up] { justify-content: flex-end; }

.mj-d-close[b-fhy8ehu9up] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    border: 1px solid var(--vh-line);
    background: var(--vh-surface);
    color: var(--vh-muted);
    cursor: pointer;
    outline: none;
    font-size: 15px;
    line-height: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mj-d-close:hover[b-fhy8ehu9up] {
    background: var(--vh-surface-soft);
    border-color: var(--vh-line-strong);
    color: var(--vh-ink);
}

.mj-d-scroll[b-fhy8ehu9up] {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px 32px;
    box-sizing: border-box;
}

.mj-matching-slot[b-fhy8ehu9up] {
    width: 100%;
    margin-bottom: 20px;
}

/* Two-column body: main rail (left) + meta rail (right), collapses <992px. */
.mj-d-main[b-fhy8ehu9up] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 322px;
    gap: 20px;
    align-items: start;
}

.mj-d-left[b-fhy8ehu9up] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mj-d-right[b-fhy8ehu9up] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- shared bits ---- */
.mj-label[b-fhy8ehu9up] { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--vh-body); }

.mj-card-title[b-fhy8ehu9up] {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    color: var(--vh-ink);
    margin: 0 0 14px;
}

/* Cobalt card shell reused by every drawer block. */
.mj-card[b-fhy8ehu9up] {
    width: 100%;
    box-sizing: border-box;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    padding: 22px 24px;
    box-shadow: var(--vh-shadow-cobalt);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mj-row[b-fhy8ehu9up] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mj-row-icon[b-fhy8ehu9up] { width: 18px; color: var(--vh-muted); font-size: 14px; text-align: center; flex: 0 0 auto; }

/* ---- Job Activity (tidy stat list) ---- */
.mj-activity[b-fhy8ehu9up] { display: flex; flex-direction: column; }
.mj-activity .mj-row[b-fhy8ehu9up] { padding: 11px 0; }
.mj-activity .mj-row:first-child[b-fhy8ehu9up] { padding-top: 0; }
.mj-activity .mj-row:last-child[b-fhy8ehu9up] { padding-bottom: 0; }
.mj-activity .mj-row + .mj-row[b-fhy8ehu9up] { border-top: 1px solid var(--vh-line); }

/* ---- job not found ---- */
.mj-notfound-main[b-fhy8ehu9up] {
    flex: 1 1 auto;
    display: grid;
    align-items: center;
    justify-items: center;
    align-content: center;
    gap: 18px;
}

.mj-notfound-icon[b-fhy8ehu9up] { font-size: 64px; color: var(--vh-line-strong); }

.mj-notfound-label[b-fhy8ehu9up] {
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    margin: 0 auto;
    color: var(--vh-body);
    max-width: 80%;
}

/* ---- Closed / Keep Hacking — clean Cobalt card ---- */
.mj-compact-scroll[b-fhy8ehu9up] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mj-compact-scroll .mj-matching-slot[b-fhy8ehu9up] {
    margin-top: 20px;
    margin-bottom: 0;
}

.mj-compact-card[b-fhy8ehu9up] {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    margin: 32px auto 0;
    padding: 32px 28px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-cobalt);
    display: grid;
    gap: 12px;
    text-align: center;
    justify-items: center;
    height: fit-content;
}

.mj-compact-icon[b-fhy8ehu9up] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 4px;
    font-size: 20px;
    color: var(--vh-black-70);
    background: var(--vh-black-10);
    border: 1px solid var(--vh-black-20);
}

.mj-compact-icon-amber[b-fhy8ehu9up] {
    color: var(--vh-tonal-amber-text);
    background: var(--vh-tonal-amber-bg);
    border-color: var(--vh-tonal-amber-bd);
}

.mj-compact-subtitle[b-fhy8ehu9up] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: 0;
    color: var(--vh-ink);
}

.mj-compact-card .mj-label[b-fhy8ehu9up] { font-size: 13.5px; line-height: 1.55; }
.mj-keephacking[b-fhy8ehu9up] { max-width: 420px; justify-self: center; }
.mj-keephacking a[b-fhy8ehu9up] { color: var(--vh-primary); font-weight: 700; text-decoration: none; }
.mj-keephacking a:hover[b-fhy8ehu9up] { color: var(--vh-primary-active); }

.mj-compact-cta[b-fhy8ehu9up] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--vh-color-white);
    text-decoration: none;
    background: var(--vh-gradient-primary);
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / .7);
    padding: 12px 24px;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.mj-compact-cta:hover[b-fhy8ehu9up] {
    color: var(--vh-color-white);
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / .85);
}

/* ---- interview request cards (Cobalt) ---- */
.mj-interviews[b-fhy8ehu9up] { display: grid; gap: 12px; }

.mj-int-card[b-fhy8ehu9up] {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border-radius: var(--vh-radius-card-sm);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    box-shadow: var(--vh-shadow-surface);
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
}

/* Pending = blue-tint surface, invite to schedule. */
.mj-int-card.pending[b-fhy8ehu9up] { background: var(--vh-blue-tint); border-color: rgb(var(--vh-primary-hover-rgb) / .22); }
.mj-int-card.pending.noimage[b-fhy8ehu9up] { grid-template-columns: 1fr auto; }
/* About-to-start = green-tint surface (tonal green tokens). */
.mj-int-card.goto[b-fhy8ehu9up] { background: var(--vh-tonal-green-bg); border-color: var(--vh-tonal-green-bd); }
/* Scheduled = card surface with a small calendar icon. */
.mj-int-card.calendar[b-fhy8ehu9up] { grid-template-columns: 22px 1fr auto; }

.mj-int-logo[b-fhy8ehu9up] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    height: 44px;
    width: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.mj-int-logo img[b-fhy8ehu9up] { width: 44px; height: 44px; object-fit: cover; }
.mj-int-logo i[b-fhy8ehu9up] { font-size: 18px; color: var(--vh-muted); }

.mj-int-main[b-fhy8ehu9up] { display: grid; gap: 3px; min-width: 0; }

.mj-int-caption[b-fhy8ehu9up] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--vh-ink);
}

.mj-int-caption.dark[b-fhy8ehu9up] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vh-primary);
}

.mj-int-label[b-fhy8ehu9up] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--vh-body);
}

.mj-int-label.dark[b-fhy8ehu9up] { color: var(--vh-body); }

.mj-int-btn[b-fhy8ehu9up] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--vh-color-white);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    background: var(--vh-gradient-primary);
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / .7);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.mj-int-btn:hover[b-fhy8ehu9up] {
    color: var(--vh-color-white);
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / .85);
}

/* Go-to-interview button = success-green gradient (about to start). Glow uses
   the --vh-success rgb (39,174,96) — no alpha token exists, mirroring the
   hardcoded blue glow on .vh-btn-gradient. */
.mj-int-btn.goto[b-fhy8ehu9up] {
    color: var(--vh-color-white);
    background: linear-gradient(135deg, var(--vh-success), var(--vh-success-hover));
    box-shadow: 0 8px 18px -8px rgb(var(--vh-success-rgb) / .7);
}

.mj-int-btn.goto:hover[b-fhy8ehu9up] { box-shadow: 0 12px 24px -8px rgb(var(--vh-success-rgb) / .85); }

.mj-int-calicon[b-fhy8ehu9up] { font-size: 16px; color: var(--vh-muted); }

/* ---- AddToCalendar + ⋮ menus ---- */
.mj-cal-actions[b-fhy8ehu9up] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mj-menu-anchor[b-fhy8ehu9up] { position: relative; }

.mj-cal-btn[b-fhy8ehu9up] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vh-primary);
    background: var(--vh-blue-tint);
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / .22);
    border-radius: 999px;
    padding: 8px 14px;
    transition: background .2s ease, border-color .2s ease;
}

.mj-cal-btn:hover[b-fhy8ehu9up] { background: rgb(var(--vh-primary-hover-rgb) / .16); border-color: var(--vh-primary-hover); }
.mj-cal-btn i[b-fhy8ehu9up] { font-size: 10px; }

.mj-more-btn[b-fhy8ehu9up] {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    color: var(--vh-muted);
    cursor: pointer;
    font-size: 13px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mj-more-btn:hover[b-fhy8ehu9up] { background: var(--vh-surface-soft); border-color: var(--vh-line-strong); color: var(--vh-ink); }

.mj-menu[b-fhy8ehu9up] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    z-index: 40;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    box-shadow: var(--vh-shadow-pop);
    min-width: 160px;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}

.mj-menu.right[b-fhy8ehu9up] { left: auto; right: 0; }

.mj-menu a[b-fhy8ehu9up] {
    font-family: inherit;
    font-size: 14px;
    color: var(--vh-body);
    padding: 9px 22px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.mj-menu a:hover[b-fhy8ehu9up] { background: var(--vh-surface-soft); color: var(--vh-ink); }

.mj-menu-catch[b-fhy8ehu9up] { position: fixed; inset: 0; z-index: 30; }

/* ---- About the company ---- */
.mj-moreinfo[b-fhy8ehu9up] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: var(--vh-surface-soft);
    border: 1px solid var(--vh-line);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: var(--vh-muted);
}

.mj-company[b-fhy8ehu9up] {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: center;
}

.mj-company-logo[b-fhy8ehu9up] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    height: 48px;
    width: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mj-company-logo img[b-fhy8ehu9up] { width: 48px; height: 48px; object-fit: cover; }
.mj-company-logo i[b-fhy8ehu9up] { font-size: 22px; color: var(--vh-muted); }

.mj-company-info[b-fhy8ehu9up] { display: grid; gap: 6px; min-width: 0; }

.mj-company-name[b-fhy8ehu9up] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--vh-ink);
}

.mj-socials[b-fhy8ehu9up] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.mj-socials a[b-fhy8ehu9up] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--vh-surface-soft);
    border: 1px solid var(--vh-line);
    color: var(--vh-muted);
    font-size: 15px;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mj-socials a:hover[b-fhy8ehu9up] { background: var(--vh-blue-tint); border-color: rgb(var(--vh-primary-hover-rgb) / .4); color: var(--vh-primary); }

/* ---- Hiring process (Cobalt timeline) ---- */
.mj-hiring[b-fhy8ehu9up] {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.mj-hiring-item[b-fhy8ehu9up] {
    position: relative;
    padding-bottom: 18px;
    padding-left: 24px;
    margin-left: 6px;
    border-left: 2px solid var(--vh-line);
}

.mj-hiring-item:last-child[b-fhy8ehu9up] { border-left-color: var(--vh-transparent); padding-bottom: 0; }

.mj-hiring-item[b-fhy8ehu9up]::before {
    content: '';
    width: 14px;
    height: 14px;
    background: var(--vh-surface);
    border: 2px solid var(--vh-line-strong);
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: 0;
    box-sizing: border-box;
}

.mj-hiring-item.done[b-fhy8ehu9up] {
    border-left-color: var(--vh-tonal-green-bd);
}

.mj-hiring-item.done[b-fhy8ehu9up]::before {
    background: var(--vh-success);
    border-color: var(--vh-success);
}

.mj-hiring-item.done .mj-hiring-label[b-fhy8ehu9up] { color: var(--vh-ink); }

.mj-hiring-item.current[b-fhy8ehu9up]::before {
    background: var(--vh-surface);
    border: 3px solid var(--vh-primary-hover);
    box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / .15);
}

.mj-hiring-item.current .mj-hiring-label[b-fhy8ehu9up] { font-weight: 700; color: var(--vh-ink); }

.mj-hiring-label[b-fhy8ehu9up] { font-size: 13.5px; color: var(--vh-body); display: inline-block; }

/* ---- Withdraw button (drawer right column) ---- */
.mj-withdraw[b-fhy8ehu9up] { margin-top: 4px; }

.mj-withdraw-btn[b-fhy8ehu9up] {
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--vh-line);
    background: var(--vh-surface);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--vh-body);
    padding: 13px 18px;
    border-radius: 10px;
    outline: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mj-withdraw-btn:hover[b-fhy8ehu9up] {
    background: var(--vh-tonal-red-bg);
    border-color: var(--vh-tonal-red-bd);
    color: var(--vh-tonal-red-text);
}

/* ---- Withdraw modal (Cobalt skin; canonical overlay/shadow tokens) ---- */
.mj-w-overlay[b-fhy8ehu9up] {
    position: fixed;
    inset: 0;
    background: var(--vh-overlay);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.mj-w-modal[b-fhy8ehu9up] {
    background: var(--vh-surface);
    width: min(577px, calc(100vw - 2.5rem));
    max-height: 90vh;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: var(--vh-font-primary);
}

.mj-w-header[b-fhy8ehu9up] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--vh-line);
}

.mj-w-title[b-fhy8ehu9up] {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--vh-ink);
}

.mj-w-subtitle[b-fhy8ehu9up] {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--vh-muted);
    margin-top: 5px;
}

.mj-w-body[b-fhy8ehu9up] { overflow-y: auto; padding: 18px 24px; }

.mj-w-reasons[b-fhy8ehu9up] {
    list-style: none;
    padding: 4px;
    margin: 0;
    border: 1px solid var(--vh-transparent);
    border-radius: 8px;
    transition: border .3s ease;
}

.mj-w-reasons.error[b-fhy8ehu9up] { border-color: var(--vh-danger); }

.mj-w-reason[b-fhy8ehu9up] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}

.mj-w-reason:hover[b-fhy8ehu9up] { background: var(--vh-surface-soft); }

.mj-w-radio[b-fhy8ehu9up] {
    min-width: 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--vh-line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--vh-surface);
    transition: all .15s ease;
}

.mj-w-radio.sel[b-fhy8ehu9up] { border-color: var(--vh-primary); background: var(--vh-gradient-primary); }
.mj-w-radio-dot[b-fhy8ehu9up] { background: var(--vh-color-white); border-radius: 50%; height: 7px; width: 7px; }
.mj-w-radio-label[b-fhy8ehu9up] { font-size: 14px; color: var(--vh-body); }

.mj-w-comments[b-fhy8ehu9up] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.mj-w-comments-label[b-fhy8ehu9up] { font-size: 13px; font-weight: 600; color: var(--vh-ink); }
.mj-w-optional[b-fhy8ehu9up] { font-weight: 400; color: var(--vh-muted); }

.mj-w-comments textarea[b-fhy8ehu9up] {
    border: 1px solid var(--vh-line-strong);
    font-family: inherit;
    font-size: 14px;
    color: var(--vh-ink);
    min-height: 90px;
    max-height: 140px;
    border-radius: 10px;
    resize: none;
    padding: 11px 13px;
    outline: none;
    background: var(--vh-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.mj-w-comments textarea:focus[b-fhy8ehu9up] { border-color: var(--vh-input-focus); box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / .15); }

.mj-w-actions[b-fhy8ehu9up] {
    border-top: 1px solid var(--vh-line);
    padding: 16px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.mj-w-cancel[b-fhy8ehu9up] {
    cursor: pointer;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vh-body);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line-strong);
    border-radius: 10px;
    transition: border-color .2s ease, color .2s ease;
}

.mj-w-cancel:hover[b-fhy8ehu9up] { border-color: rgb(var(--vh-primary-hover-rgb) / .5); color: var(--vh-primary); }

.mj-w-submit[b-fhy8ehu9up] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    height: 40px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vh-color-white);
    border: 0;
    border-radius: 10px;
    background: var(--vh-gradient-primary);
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / .7);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.mj-w-submit:hover:not(:disabled)[b-fhy8ehu9up] { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / .85); }
.mj-w-submit:disabled[b-fhy8ehu9up] { cursor: not-allowed; opacity: .6; box-shadow: none; }

/* ---- spinner ---- */
.mj-spinner[b-fhy8ehu9up] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--vh-line-strong);
    border-top-color: var(--vh-primary-hover);
    animation: mj-spin-b-fhy8ehu9up .6s linear infinite;
}

.mj-spinner-lg[b-fhy8ehu9up] { width: 45px; height: 45px; border-width: 5px; }
.mj-spinner-sm[b-fhy8ehu9up] { width: 14px; height: 14px; }
/* White-on-brand spinner (gradient submit button) — stays white in dark mode. */
.mj-spinner-sm.light[b-fhy8ehu9up] { border-color: rgb(var(--vh-white-rgb) / .5); border-top-color: var(--vh-color-white); }

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

/* ---- responsive ---- */
@media (max-width: 992px) {
    .mj-drawer[b-fhy8ehu9up] { width: 100%; max-width: none; }
    .mj-d-main[b-fhy8ehu9up] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .mj-d-header[b-fhy8ehu9up] { padding: 16px 18px; }
    .mj-d-scroll[b-fhy8ehu9up] { padding: 18px 18px 28px; }
    .mj-int-card[b-fhy8ehu9up],
    .mj-int-card.goto[b-fhy8ehu9up],
    .mj-int-card.calendar[b-fhy8ehu9up] {
        grid-template-columns: 44px 1fr;
    }
    .mj-int-btn[b-fhy8ehu9up] { grid-column: 1 / -1; width: 100%; }
    .mj-cal-actions[b-fhy8ehu9up] { grid-column: 1 / -1; }
}
/* /Pages/MyJobs/PreScreeningQuestions.razor.rz.scp.css */
/* Pre-screening questions — Cobalt (mirrors SideModal/PreScreeningQuestions:
   a Cobalt card wrapping soft-surface question rows, Cobalt inputs and the
   blue-gradient Save / quiet Cancel buttons). All colors via --vh-* tokens
   so the .lpx-theme-dark remap flips the block for free. */

.mjq-container[b-3v0ydxnmw1] {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: var(--vh-font-primary);
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    padding: 22px 24px;
    box-shadow: var(--vh-shadow-cobalt);
}

.mjq-title[b-3v0ydxnmw1] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--vh-ink);
    margin-bottom: 14px;
}

.mjq-loading[b-3v0ydxnmw1] { display: flex; justify-content: center; padding: 12px 0; }

/* Each question = soft-surface row inside the card. */
.mjq-item[b-3v0ydxnmw1] {
    padding: 16px 18px;
    border-radius: var(--vh-radius-card-sm);
    background: var(--vh-surface-soft);
    border: 1px solid var(--vh-line);
    margin-bottom: 12px;
}

.mjq-item:last-child[b-3v0ydxnmw1] { margin-bottom: 0; }

.mjq-head[b-3v0ydxnmw1] {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--vh-ink);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.mjq-arrow[b-3v0ydxnmw1] {
    margin-left: auto;
    padding-left: 24px;
    font-size: 12px;
    color: var(--vh-muted);
    opacity: .7;
    transition: transform .2s;
}

/* Chevron points up when expanded — same affordance as .mj-section-arrow. */
.mjq-arrow.open[b-3v0ydxnmw1] { transform: rotate(180deg); }

.mjq-body[b-3v0ydxnmw1] {
    padding-top: 12px;
    display: grid;
    gap: 10px;
}

.mjq-note[b-3v0ydxnmw1] { margin: 0; font-size: 13px; color: var(--vh-body); font-style: italic; }

/* Video letterbox stays true black in both themes (media surface). */
.mjq-video[b-3v0ydxnmw1] {
    width: 100%;
    max-width: 420px;
    border-radius: 8px;
    background: var(--vh-color-black);
}

/* ---- video answer ---- */
.mjq-video-wrap[b-3v0ydxnmw1] { position: relative; width: 100%; max-width: 420px; }

/* Scrim over the video preview (media overlay — mode-agnostic by design). */
.mjq-upload-overlay[b-3v0ydxnmw1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgb(var(--vh-cobalt-shadow-rgb) / .6);
    border-radius: 8px;
    color: var(--vh-color-white);
    font-size: 13px;
    font-weight: 600;
}

.mjq-video-actions[b-3v0ydxnmw1] { display: flex; gap: 16px; }

.mjq-video-action[b-3v0ydxnmw1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 0;
}

.mjq-video-action:hover[b-3v0ydxnmw1] { color: var(--vh-primary); }
.mjq-video-action:disabled[b-3v0ydxnmw1] { opacity: .5; cursor: not-allowed; }

.mjq-record-btn[b-3v0ydxnmw1] {
    border: 1px solid rgb(var(--vh-primary-hover-rgb) / .35);
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
    font-size: 13px;
    font-weight: 700;
    border-radius: 9px;
    padding: 9px 16px;
    cursor: pointer;
    width: fit-content;
    transition: background .2s ease, border-color .2s ease;
}

.mjq-record-btn:hover[b-3v0ydxnmw1] { background: rgb(var(--vh-primary-hover-rgb) / .16); border-color: var(--vh-primary-hover); }

.mjq-answer[b-3v0ydxnmw1] { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--vh-body); }

/* ---- text inputs ---- */
.mjq-input[b-3v0ydxnmw1] {
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--vh-ink);
    background: var(--vh-transparent);
    border: 1px solid var(--vh-transparent);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0;
    margin: 1px;
    outline: none;
    resize: vertical;
    overflow: hidden;
}

.mjq-input.short[b-3v0ydxnmw1] { min-height: 24px; }
.mjq-input.long[b-3v0ydxnmw1] { min-height: 40px; }

.mjq-input.editing[b-3v0ydxnmw1] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    outline: 1px solid var(--vh-input-focus);
    padding: 10px 12px;
    overflow-y: auto;
}

.mjq-input.short.editing[b-3v0ydxnmw1] { height: 90px; }
.mjq-input.long.editing[b-3v0ydxnmw1] { height: 140px; }

/* ---- choice options ---- */
.mjq-options[b-3v0ydxnmw1] { display: grid; gap: 8px; }
.mjq-options.disabled[b-3v0ydxnmw1] { opacity: .75; pointer-events: none; }

.mjq-option[b-3v0ydxnmw1] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--vh-ink);
    margin: 0;
}

.mjq-options.disabled .mjq-option[b-3v0ydxnmw1] { cursor: default; }

.mjq-radio[b-3v0ydxnmw1] {
    min-width: 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--vh-line-strong);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--vh-surface);
}

.mjq-radio.sel[b-3v0ydxnmw1] { border-color: var(--vh-primary); background: var(--vh-gradient-primary); }
.mjq-radio-dot[b-3v0ydxnmw1] { width: 7px; height: 7px; border-radius: 50%; background: var(--vh-color-white); }

.mjq-check[b-3v0ydxnmw1] {
    min-width: 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--vh-line-strong);
    border-radius: var(--vh-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--vh-surface);
    color: var(--vh-color-white);
    font-size: 9px;
}

.mjq-check.sel[b-3v0ydxnmw1] { border-color: var(--vh-primary); background: var(--vh-gradient-primary); }

/* ---- actions ---- */
.mjq-actions[b-3v0ydxnmw1] {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.mjq-cancel[b-3v0ydxnmw1] {
    border: none;
    background: var(--vh-transparent);
    color: var(--vh-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
    transition: color .2s ease;
}

.mjq-cancel:hover[b-3v0ydxnmw1] { color: var(--vh-primary-active); }

/* Compact inline action — keeps the canonical default button height (h32,
   design-system.md §2) to pair with the h32 text-button Cancel beside it. */
.mjq-save[b-3v0ydxnmw1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    background: var(--vh-gradient-primary);
    color: var(--vh-color-white);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    height: 32px;
    padding: 0 16px;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / .7);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.mjq-save:hover:not(:disabled)[b-3v0ydxnmw1] { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / .85); }
.mjq-save:disabled[b-3v0ydxnmw1] { cursor: not-allowed; opacity: .6; box-shadow: none; }

/* ---- spinner ---- */
.mjq-spinner[b-3v0ydxnmw1] {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--vh-line-strong);
    border-top-color: var(--vh-primary-hover);
    animation: mjq-spin-b-3v0ydxnmw1 .6s linear infinite;
}

/* White-on-brand spinner (gradient Save button) — stays white in dark mode. */
.mjq-spinner.sm[b-3v0ydxnmw1] {
    width: 12px;
    height: 12px;
    border-color: rgb(var(--vh-white-rgb) / .5);
    border-top-color: var(--vh-color-white);
}

@keyframes mjq-spin-b-3v0ydxnmw1 { to { transform: rotate(360deg); } }
/* /Pages/NextSteps/Index.razor.rz.scp.css */
/* Next Steps page — NextSteps/index.tsx + StepItem.tsx + Tips.tsx styles,
   inherited from the retired candidate-dashboard tab.
   Legacy scale → vh tokens: dark-100/200 ≈ var(--vh-muted)/var(--vh-body),
   green-200 = var(--vh-success). Pastels pending tokens keep inline fallbacks:
   orange-400 var(--vh-orange-400), green-100 var(--vh-green-100), green-300 var(--vh-green-300), blue-400 var(--vh-blue-400). */

/* Page root: normal LeptonX content flow (design-system §12) — no centered
   max-width box; the page title is the PageHeader above this container. */
.ns-page[b-9425j133i8] {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 40px;
}

/* Progress pill + subtitle on one row (the pill used to sit next to the h1). */
.ns-head[b-9425j133i8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ns-pill[b-9425j133i8] {
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--vh-orange-400);
    color: var(--vh-color-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.ns-sub[b-9425j133i8] {
    margin: 0;
    font-size: 14px;
    color: var(--vh-muted);
}

/* ---- Step cards ---- */
.ns-steps[b-9425j133i8] {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ns-step-card[b-9425j133i8] {
    border: 1px solid var(--vh-gray-30);
    border-radius: var(--vh-radius-card-sm);
    background: var(--vh-surface);
    padding: 32px;
}

.ns-step-icon[b-9425j133i8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 2px solid var(--vh-orange-400);
    color: var(--vh-orange-400);
    font-size: 20px;
}

.ns-step-card.done .ns-step-icon[b-9425j133i8] { border-color: var(--vh-success); color: var(--vh-success); }

.ns-step-title[b-9425j133i8] {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--vh-body);
}

.ns-step-desc[b-9425j133i8] {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--vh-body);
}

.ns-step-card.done .ns-step-title[b-9425j133i8],
.ns-step-card.done .ns-step-desc[b-9425j133i8] { color: var(--vh-green-300); }

.ns-step-btn[b-9425j133i8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.ns-step-solid[b-9425j133i8] { background: var(--vh-orange-400); color: var(--vh-color-white); }
.ns-step-outline[b-9425j133i8] { border: 1px solid var(--vh-orange-400); background: var(--vh-transparent); color: var(--vh-orange-400); }
.ns-step-completed[b-9425j133i8] { background: var(--vh-green-100); color: var(--vh-success); cursor: default; }

/* CTA feedback (the legacy pills had none; subtle, token-driven) */
.ns-step-solid:hover[b-9425j133i8] { filter: brightness(1.06); }
.ns-step-outline:hover[b-9425j133i8] { background: var(--vh-secondary-soft); }
.ns-step-solid:active[b-9425j133i8],
.ns-step-outline:active[b-9425j133i8] { filter: brightness(.96); }

/* ---- Tips ---- */
.ns-tips[b-9425j133i8] { margin-top: 32px; }

.ns-tips-title[b-9425j133i8] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--vh-muted);
}

.ns-tips-sub[b-9425j133i8] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--vh-muted);
}

.ns-tips-grid[b-9425j133i8] {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ns-tip[b-9425j133i8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--vh-line-strong);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface-soft);
    padding: 32px;
}

.ns-tip p[b-9425j133i8] { margin: 0; font-size: 14px; color: var(--vh-body); }

.ns-tip-icon[b-9425j133i8] { font-size: 26px; color: var(--vh-orange-400); }

.ns-tip-link[b-9425j133i8] {
    font-weight: 700;
    color: var(--vh-blue-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Skeleton ---- */
.ns-skel[b-9425j133i8] {
    background: linear-gradient(90deg, var(--vh-skeleton-base) 25%, var(--vh-skeleton-shine) 37%, var(--vh-skeleton-base) 63%);
    background-size: 400% 100%;
    animation: ns-skel-pulse-b-9425j133i8 1.4s ease infinite;
    border-radius: 12px;
}

.ns-skel-title[b-9425j133i8] { height: 30px; width: 260px; }

.ns-skel-row[b-9425j133i8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.ns-skel-card[b-9425j133i8] { height: 240px; }

@keyframes ns-skel-pulse-b-9425j133i8 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (max-width: 992px) {
    .ns-tips-grid[b-9425j133i8] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ns-steps[b-9425j133i8],
    .ns-tips-grid[b-9425j133i8],
    .ns-skel-row[b-9425j133i8] { grid-template-columns: 1fr; }
}
/* /Pages/Onboarding/Index.razor.rz.scp.css */
/* Candidate onboarding wizard — split layout, tokens only (design-system.md).
   Legacy reference screenshots: Documentation/screens/screenshots/auth-legacy/. */

.onb-split[b-mxa71l7cfj] {
    display: flex;
    min-height: 100vh;
}

/* ---- left brand panel (color set inline per step) ---- */
.onb-side[b-mxa71l7cfj] {
    width: 430px;
    flex: 0 0 430px;
    padding: 48px 40px;
    color: var(--vh-color-white);
    transition: background-color .35s ease;
}

.onb-logo[b-mxa71l7cfj] {
    height: 40px;
    display: block;
}

.onb-tagline[b-mxa71l7cfj] {
    /* 88px logo→tagline offset measured on the legacy panel
       (legacy-onboarding-step2-linkedin.png); color inherits from .onb-side. */
    margin-top: 88px;
    max-width: 280px;
    font-family: var(--vh-font-heading);
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
}

/* ---- right content ---- */
.onb-main[b-mxa71l7cfj] {
    /* One shared form-column width: the legacy renders every field (dropdowns,
       language rows) at the same ~500px column; only the LinkedIn input is
       wider (legacy-onboarding-step2/3 screenshots). */
    --onb-field-w: 520px;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 40px 72px 24px;
    max-width: 1140px;
}

.onb-loading[b-mxa71l7cfj] {
    color: var(--vh-text-muted);
    padding: 80px 0;
}

.onb-progress[b-mxa71l7cfj] {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
}

.onb-progress-seg[b-mxa71l7cfj] {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: var(--vh-gray-30);
}

.onb-progress-seg.on[b-mxa71l7cfj] {
    /* Legacy-verbatim: active segments are dark blue-gray, NOT primary blue
       (verified on legacy-onboarding-step2/3/4 screenshots). */
    background: var(--vh-black-60);
}

.onb-body[b-mxa71l7cfj] {
    flex: 1;
}

.onb-title[b-mxa71l7cfj] {
    /* The wizard intentionally uses H5-scale (20/24) headings on <h2> elements. */
    font-family: var(--vh-font-heading);
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 16px;
}

.onb-title-gap[b-mxa71l7cfj] {
    margin-top: 40px;
}

.onb-label[b-mxa71l7cfj] {
    display: block;
    font-family: var(--vh-font-secondary);
    font-size: 14px;
    color: var(--vh-text-body);
    margin: 0 0 6px;
}

.onb-field[b-mxa71l7cfj] {
    margin-bottom: 22px;
    max-width: var(--onb-field-w);
    position: relative;
}

.onb-row[b-mxa71l7cfj] {
    display: flex;
    gap: 16px;
    max-width: var(--onb-field-w);
}

.onb-row .onb-field[b-mxa71l7cfj] {
    flex: 1;
}

.onb-field .vh-input[b-mxa71l7cfj],
.onb-row .vh-input[b-mxa71l7cfj],
.onb-linkedin .vh-input[b-mxa71l7cfj],
.onb-lang-row .vh-input[b-mxa71l7cfj] {
    width: 100%;
}

/* LinkedIn input with the round badge prefix — deliberately wider than the
   form column: the legacy renders it ~1.5x the field width
   (legacy-onboarding-step2-linkedin.png). */
.onb-linkedin[b-mxa71l7cfj] {
    position: relative;
    max-width: 760px;
    margin-bottom: 8px;
}

.onb-in-badge[b-mxa71l7cfj] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vh-primary);
    color: var(--vh-color-white); /* white-on-brand — stays var(--vh-color-white) in dark mode */
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.onb-linkedin .vh-input[b-mxa71l7cfj] {
    padding-left: 44px;
}

/* resume upload — sizing comes from vh-btn-outline-primary + vh-btn-lg */
.onb-upload[b-mxa71l7cfj] {
    gap: 8px;
    cursor: pointer;
}

.onb-upload[b-mxa71l7cfj]  input[type="file"] {
    display: none;
}

.onb-resume-name[b-mxa71l7cfj] {
    margin-left: 12px;
    color: var(--vh-success);
    font-size: 13px;
}

/* errors */
.onb-error[b-mxa71l7cfj] {
    color: var(--vh-danger);
    font-size: 12px;
    margin-top: 4px;
    font-family: var(--vh-font-secondary);
}

.onb-step-error[b-mxa71l7cfj] {
    margin-bottom: 16px;
    font-size: 13px;
}

/* footer */
.onb-footer[b-mxa71l7cfj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--vh-gray-30);
    padding-top: 18px;
    margin-top: 32px;
}

.onb-footer-slot[b-mxa71l7cfj] {
    min-width: 90px;
}

.onb-count[b-mxa71l7cfj] {
    color: var(--vh-text-muted);
    font-size: 14px;
}

/* ---- languages ---- */
.onb-lang-row[b-mxa71l7cfj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px 28px;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    max-width: var(--onb-field-w);
}

.onb-lang-del a[b-mxa71l7cfj] {
    color: var(--vh-black-40);
    cursor: pointer;
}

.onb-add-lang[b-mxa71l7cfj] {
    padding-left: 0;
}

/* ---- skills ---- */
.onb-skills-wrap[b-mxa71l7cfj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
    align-items: start;
}

.onb-skills-head[b-mxa71l7cfj] {
    border-bottom: 1px solid var(--vh-gray-30);
    padding-bottom: 10px;
}

.onb-skills-head-main[b-mxa71l7cfj] {
    display: block;
    font-size: 14px; /* body.md — matches the legacy header size (step-4 screenshot) */
    font-weight: 600;
    color: var(--vh-text-heading);
}

.onb-skills-head-sub[b-mxa71l7cfj] {
    font-size: 12px;
    color: var(--vh-text-muted);
}

.onb-skill-row[b-mxa71l7cfj] {
    display: grid;
    /* 220px dropdown column — same width as the language-row proficiency column */
    grid-template-columns: 26px 22px minmax(0, 1fr) 220px 28px;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--vh-gray-20);
}

.onb-skill-row.drag-over[b-mxa71l7cfj] {
    background: var(--vh-blue-tint);
}

.onb-drag[b-mxa71l7cfj] {
    cursor: grab;
    color: var(--vh-black-40);
}

.onb-rank[b-mxa71l7cfj] {
    font-size: 14px;
    font-weight: 600;
    color: var(--vh-text-heading);
}

.onb-skill-del a[b-mxa71l7cfj] {
    color: var(--vh-black-40);
    cursor: pointer;
}

.onb-popular[b-mxa71l7cfj] {
    background: var(--vh-gray-10);
    border-radius: var(--vh-radius-md);
    padding: 18px;
}

.onb-popular-title[b-mxa71l7cfj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--vh-text-heading);
    margin-bottom: 12px;
}

.onb-popular-chips[b-mxa71l7cfj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.onb-chip[b-mxa71l7cfj] {
    /* Legacy-verbatim white-bg outline pill (step-4 screenshot) — NOT the soft
       .vh-chip fill; surface token so it flips with the theme. */
    border: 1px solid var(--vh-primary-hover);
    color: var(--vh-primary);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-pill);
    padding: 4px 12px;
    font-size: 12px;
    font-family: var(--vh-font-secondary);
    cursor: pointer;
}

.onb-chip:hover:not(:disabled)[b-mxa71l7cfj] {
    background: var(--vh-primary-soft);
}

.onb-chip.off[b-mxa71l7cfj] {
    border-color: var(--vh-gray-30);
    color: var(--vh-gray-40);
    cursor: default;
}

/* ---- VhDropdown inside the wizard ----
   Stretch to the field width (the shared component caps the button at 320px)
   and match the shared single-line control height. */
.onb-main[b-mxa71l7cfj]  .vh-dd {
    width: 100%;
}

.onb-main[b-mxa71l7cfj]  .vh-dd-btn {
    width: 100%;
    max-width: none;
    height: var(--vh-control-height);
    font-size: 14px;
}

.onb-main[b-mxa71l7cfj]  .vh-dd-menu {
    width: 100%;
    max-width: none;
}

.onb-muted[b-mxa71l7cfj] {
    color: var(--vh-text-muted);
}

/* ---- responsive ---- */
@media (max-width: 900px) {
    .onb-split[b-mxa71l7cfj] {
        flex-direction: column;
    }

    .onb-side[b-mxa71l7cfj] {
        width: 100%;
        flex: 0 0 auto;
        padding: 24px;
    }

    .onb-tagline[b-mxa71l7cfj] {
        margin-top: 16px;
        font-size: 20px;
        line-height: 26px;
    }

    .onb-main[b-mxa71l7cfj] {
        padding: 24px;
    }

    .onb-skills-wrap[b-mxa71l7cfj] {
        grid-template-columns: 1fr;
    }

    .onb-popular[b-mxa71l7cfj] {
        order: -1;
    }

    /* Narrow screens: the proficiency/years dropdown wraps to a second line
       under the text input instead of crushing it. */
    .onb-lang-row[b-mxa71l7cfj] {
        grid-template-columns: minmax(0, 1fr) 28px;
    }

    .onb-lang-row .onb-lang-del[b-mxa71l7cfj] {
        grid-column: 2;
        grid-row: 1;
    }

    .onb-lang-row[b-mxa71l7cfj]  .vh-dd {
        grid-column: 1;
    }

    .onb-skill-row[b-mxa71l7cfj] {
        grid-template-columns: 26px 22px minmax(0, 1fr) 28px;
    }

    .onb-skill-row .onb-skill-years[b-mxa71l7cfj] {
        grid-column: 3;
        grid-row: 2;
    }
}
/* /Pages/PostAJob/Index.razor.rz.scp.css */
/* Post a Job wizard — pj- prefix. All rules are anchored on .pj-root with ::deep
   so the child step components (separate scope attributes) share one stylesheet. */

.pj-root[b-sawrtxg7wq] {
    /* Accent = canonical VanHack primary (design-system.md §1); everything
       downstream consumes the --pj-* aliases, so the whole wizard re-skins here. */
    --pj-blue: var(--vh-primary);
    --pj-blue-hover: var(--vh-primary-hover);
    /* Text over blue tints: var(--vh-primary-active) in light (= primary-active); the dark-mode
       layer lightens --vh-blue-deep for AA on the darkened tint backgrounds. */
    --pj-blue-dark: var(--vh-blue-deep);
    --pj-blue-soft: var(--vh-blue-tint);
    --pj-text: var(--vh-text-body);
    --pj-muted: var(--vh-gray-60);
    --pj-border: var(--vh-input-border);        /* form controls */
    --pj-border-strong: var(--vh-black-20);     /* structural dividers (header/stepper) */
    --pj-red: var(--vh-danger-light);
    --pj-green: var(--vh-success);
    --pj-bg: var(--vh-surface);
    --pj-header-h: 78px;                        /* sticky offsets derive from this */
    color: var(--pj-text);
    background: var(--pj-bg);
    font-family: var(--vh-font-secondary);
    min-height: 100%;
    position: relative;
}

/* ---------------- skeleton / fatal load error ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-skeleton { padding: 24px; }
.pj-root .pj-skeleton-bar[b-sawrtxg7wq],
.pj-root .pj-skeleton-block[b-sawrtxg7wq] {
    background: linear-gradient(90deg, var(--vh-surface-soft) 25%, var(--vh-line) 37%, var(--vh-surface-soft) 63%);
    background-size: 400% 100%;
    animation: pj-shimmer-b-sawrtxg7wq 1.4s ease infinite;
    border-radius: 8px;
}
.pj-root .pj-skeleton-bar[b-sawrtxg7wq] { height: 56px; margin-bottom: 24px; }
.pj-root .pj-skeleton-block[b-sawrtxg7wq] { height: 220px; margin-bottom: 16px; }
@keyframes pj-shimmer-b-sawrtxg7wq {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.pj-root .pj-load-error[b-sawrtxg7wq] {
    max-width: 560px;
    margin: 64px auto;
    text-align: center;
    display: grid;
    gap: 12px;
    justify-items: center;
}

/* ---------------- sticky header ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--pj-bg);
    border-bottom: 1px solid var(--pj-border-strong);
}
.pj-root[b-sawrtxg7wq]  .pj-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
}
.pj-root[b-sawrtxg7wq]  .pj-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: var(--pj-text);
    text-decoration: none;
}
.pj-root[b-sawrtxg7wq]  .pj-back:hover { color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-back-arrow { font-size: 18px; line-height: 1; }
.pj-root[b-sawrtxg7wq]  .pj-tabs { display: flex; gap: 28px; }
.pj-root[b-sawrtxg7wq]  .pj-tab {
    font-weight: 600;
    font-size: 15px;
    color: var(--pj-muted);
    padding: 4px 2px;
    border-bottom: 2px solid var(--vh-transparent);
}
/* Legacy active-tab treatment is the LIGHTER primary (design-system.md §9). */
.pj-root[b-sawrtxg7wq]  .pj-tab-active { color: var(--pj-blue-hover); border-bottom-color: var(--pj-blue-hover); }
.pj-root[b-sawrtxg7wq]  .pj-tab-disabled { cursor: not-allowed; opacity: .6; }
.pj-root[b-sawrtxg7wq]  .pj-header-right { min-width: 120px; display: flex; justify-content: flex-end; }

/* Buttons come from the global .vh-btn-primary utility (vh-tokens.css); the
   only local addition is the Save CTA width. */
.pj-root[b-sawrtxg7wq]  .pj-save { min-width: 110px; }

/* ---------------- layout: stepper + content ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-body {
    display: flex;
    align-items: flex-start;
    max-width: 1320px;
    margin: 0 auto;
}
.pj-root[b-sawrtxg7wq]  .pj-stepper {
    position: sticky;
    top: var(--pj-header-h);
    flex: 0 0 280px;
    padding: 32px 8px 32px 24px;
    border-right: 1px solid var(--pj-border-strong);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: calc(100vh - var(--pj-header-h));
}
.pj-root[b-sawrtxg7wq]  .pj-step {
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    padding: 10px 8px;
    cursor: pointer;
    text-align: left;
}
.pj-root[b-sawrtxg7wq]  .pj-step-circle {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--pj-border);
    color: var(--pj-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: var(--vh-surface);
}
.pj-root[b-sawrtxg7wq]  .pj-step-name {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pj-muted);
    text-transform: uppercase;
}
.pj-root[b-sawrtxg7wq]  .pj-step:hover .pj-step-name { color: var(--pj-text); }
.pj-root[b-sawrtxg7wq]  .pj-step-active .pj-step-circle { border-color: var(--pj-blue); color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-step-active .pj-step-name { color: var(--pj-blue); }

.pj-root[b-sawrtxg7wq]  .pj-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 32px 48px 120px;
    max-width: 860px;
}

/* ---------------- sections / fields ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-section { margin-bottom: 56px; scroll-margin-top: calc(var(--pj-header-h) + 6px); }
.pj-root[b-sawrtxg7wq]  #pj-skills:empty { scroll-margin-top: calc(var(--pj-header-h) + 6px); }
.pj-root[b-sawrtxg7wq]  .pj-title {
    font-family: var(--vh-font-heading);
    color: var(--vh-text-heading);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
}
.pj-root[b-sawrtxg7wq]  .pj-title-error { color: var(--pj-red); }
.pj-root[b-sawrtxg7wq]  .pj-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 9px;
    color: var(--pj-text);
}
.pj-root[b-sawrtxg7wq]  .pj-field { margin-bottom: 20px; position: relative; }
.pj-root[b-sawrtxg7wq]  .pj-subtitle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pj-root[b-sawrtxg7wq]  .pj-subtitle-row .pj-label { margin: 0; }
.pj-root[b-sawrtxg7wq]  .pj-mt { margin-top: 32px; }

.pj-root[b-sawrtxg7wq]  .pj-input,
.pj-root[b-sawrtxg7wq]  .pj-textarea {
    width: 100%;
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--pj-text);
    background: var(--vh-surface);
    outline: none;
    font-family: inherit;
}
.pj-root[b-sawrtxg7wq]  .pj-input:focus,
.pj-root[b-sawrtxg7wq]  .pj-textarea:focus { border-color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-input:disabled { background: var(--vh-input-disabled-bg); color: var(--vh-disabled-text); cursor: not-allowed; }
.pj-root[b-sawrtxg7wq]  .pj-textarea { resize: vertical; min-height: 120px; }
.pj-root[b-sawrtxg7wq]  .pj-textarea-meta { text-align: right; font-size: 12px; color: var(--pj-muted); margin-top: 4px; }

/* Fixed lists render as the shared VhDropdown (ui-combos.md Type 2) — match
   its trigger height to the 42px pj controls and mirror the error border. */
.pj-root[b-sawrtxg7wq]  .vh-dd-block .vh-dd-btn { padding-top: 11px; padding-bottom: 11px; }
.pj-root[b-sawrtxg7wq]  .pj-field-error .vh-dd-btn { border-color: var(--pj-red); }

.pj-root[b-sawrtxg7wq]  .pj-field-error .pj-input,
.pj-root[b-sawrtxg7wq]  .pj-field-error .pj-textarea,
.pj-root[b-sawrtxg7wq]  .pj-input-error,
.pj-root[b-sawrtxg7wq]  .pj-field-error .pj-ta-control { border-color: var(--pj-red); }

.pj-root[b-sawrtxg7wq]  .pj-error-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pj-red);
    font-size: 12.5px;
    margin-top: 6px;
}
.pj-root[b-sawrtxg7wq]  .pj-error-msg.pj-center { justify-content: center; }
.pj-root[b-sawrtxg7wq]  .pj-error-icon {
    flex: 0 0 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--pj-red);
    color: var(--vh-color-white);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pj-root[b-sawrtxg7wq]  .pj-muted-note { font-size: 12.5px; color: var(--pj-muted); margin-top: 6px; }

/* info box (step 1) */
.pj-root[b-sawrtxg7wq]  .pj-instructions {
    display: flex;
    gap: 14px;
    background: var(--pj-blue-soft);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.pj-root[b-sawrtxg7wq]  .pj-instructions-icon {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pj-blue);
    color: var(--vh-color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.pj-root[b-sawrtxg7wq]  .pj-instructions-title { font-weight: 700; font-size: 14px; }
.pj-root[b-sawrtxg7wq]  .pj-instructions-label { font-size: 13px; color: var(--vh-gray-90); }

/* checkbox + help bubble */
.pj-root[b-sawrtxg7wq]  .pj-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin: 0 0 20px;
    cursor: pointer;
}
.pj-root[b-sawrtxg7wq]  .pj-check input { width: 17px; height: 17px; accent-color: var(--pj-blue); cursor: pointer; }
.pj-root[b-sawrtxg7wq]  .pj-check-row { cursor: default; }
.pj-root[b-sawrtxg7wq]  .pj-check-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
.pj-root[b-sawrtxg7wq]  .pj-check-bottom { align-self: flex-end; margin-bottom: 7px; }
.pj-root[b-sawrtxg7wq]  .pj-help {
    flex: 0 0 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid var(--pj-muted);
    color: var(--pj-muted);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    text-decoration: none;
    background: none;
    padding: 0;
}
.pj-root[b-sawrtxg7wq]  .pj-help-btn { cursor: pointer; }

/* two-column rows (seniority/counter, members) */
.pj-root[b-sawrtxg7wq]  .pj-cols { display: flex; gap: 32px; margin-bottom: 20px; flex-wrap: wrap; }
.pj-root[b-sawrtxg7wq]  .pj-col { flex: 1 1 300px; min-width: 260px; }
.pj-root[b-sawrtxg7wq]  .pj-col-counter { display: flex; flex-direction: column; align-items: flex-start; }

/* counter (number of positions) */
.pj-root[b-sawrtxg7wq]  .pj-counter { display: inline-flex; align-items: center; gap: 12px; }
.pj-root[b-sawrtxg7wq]  .pj-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--pj-border);
    background: var(--vh-surface);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    color: var(--pj-text);
}
.pj-root[b-sawrtxg7wq]  .pj-counter-btn:hover { border-color: var(--pj-blue); color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-counter-value {
    min-width: 52px;
    text-align: center;
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    padding: 7px 0;
    font-weight: 600;
}

/* job type cards (Technology / General Business) */
.pj-root[b-sawrtxg7wq]  .pj-jobtype-cards { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.pj-root[b-sawrtxg7wq]  .pj-jobtype-card {
    flex: 1 1 260px;
    border: 1.5px solid var(--pj-border);
    border-radius: 8px;
    background: var(--vh-surface);
    padding: 16px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 6px;
}
.pj-root[b-sawrtxg7wq]  .pj-jobtype-card:hover { border-color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-jobtype-active { border-color: var(--pj-blue); background: var(--pj-blue-soft); }
.pj-root[b-sawrtxg7wq]  .pj-jobtype-label { font-weight: 700; font-size: 15px; }
.pj-root[b-sawrtxg7wq]  .pj-jobtype-active .pj-jobtype-label { color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-jobtype-subtitle { font-size: 12.5px; color: var(--pj-muted); }

/* generic deletable rows (skills / languages / events) */
.pj-root[b-sawrtxg7wq]  .pj-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.pj-root[b-sawrtxg7wq]  .pj-row-main { flex: 1 1 auto; min-width: 0; }
.pj-root[b-sawrtxg7wq]  .pj-skill-cols { display: flex; gap: 12px; }
.pj-root[b-sawrtxg7wq]  .pj-skill-name { flex: 1 1 auto; min-width: 0; }
.pj-root[b-sawrtxg7wq]  .pj-skill-years { flex: 0 0 170px; }
.pj-root[b-sawrtxg7wq]  .pj-delete {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--pj-muted);
    cursor: pointer;
    padding: 11px 8px;
    font-size: 15px;
}
.pj-root[b-sawrtxg7wq]  .pj-delete:hover { color: var(--pj-red); }

.pj-root[b-sawrtxg7wq]  .pj-add-btn {
    border: 1px dashed var(--pj-blue);
    background: none;
    color: var(--pj-blue);
    border-radius: var(--vh-radius-md);
    padding: 9px 16px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    margin-top: 4px;
}
.pj-root[b-sawrtxg7wq]  .pj-add-btn:hover:not(:disabled) { background: var(--pj-blue-soft); }
.pj-root[b-sawrtxg7wq]  .pj-add-btn:disabled { opacity: .5; cursor: default; }

.pj-root[b-sawrtxg7wq]  .pj-link {
    border: none;
    background: none;
    color: var(--pj-blue);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    padding: 4px 6px;
}
.pj-root[b-sawrtxg7wq]  .pj-link-strong { text-transform: uppercase; letter-spacing: .03em; }

/* ---------------- typeahead (PjTypeahead / PjTypeaheadMulti) ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-ta { position: relative; }
.pj-root[b-sawrtxg7wq]  .pj-ta-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    padding: 4px 30px 4px 8px;
    min-height: 42px;
    background: var(--vh-surface);
    position: relative;
}
.pj-root[b-sawrtxg7wq]  .pj-ta-control:focus-within { border-color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-ta-error { border-color: var(--pj-red); }
.pj-root[b-sawrtxg7wq]  .pj-ta-disabled .pj-ta-control { background: var(--vh-input-disabled-bg); }
.pj-root[b-sawrtxg7wq]  .pj-ta-input {
    flex: 1 1 120px;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 6px 4px;
    min-width: 60px;
    background: var(--vh-transparent);
    color: var(--pj-text);
}
.pj-root[b-sawrtxg7wq]  .pj-ta-caret {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pj-muted);
    font-size: 11px;
    pointer-events: none;
}
.pj-root[b-sawrtxg7wq]  .pj-ta-x {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--pj-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
}
.pj-root[b-sawrtxg7wq]  .pj-ta-x:hover { color: var(--pj-red); }
.pj-root[b-sawrtxg7wq]  .pj-ta-menu {
    position: absolute;
    z-index: 70;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--vh-surface);
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    max-height: 240px;
    overflow: auto;
    padding: 4px 0;
}
.pj-root[b-sawrtxg7wq]  .pj-ta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 14px;
}
.pj-root[b-sawrtxg7wq]  .pj-ta-item:hover,
.pj-root[b-sawrtxg7wq]  .pj-ta-item-active { background: var(--pj-blue-soft); }
.pj-root[b-sawrtxg7wq]  .pj-ta-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-root[b-sawrtxg7wq]  .pj-ta-empty { padding: 12px; color: var(--pj-muted); font-size: 13.5px; text-align: center; }
.pj-root[b-sawrtxg7wq]  .pj-ta-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pj-muted);
}
.pj-root[b-sawrtxg7wq]  .pj-ta-badge {
    background: var(--vh-black-10);
    border-radius: 2em;
    color: var(--vh-black-90);
    font-size: 12px;
    font-weight: 400;
    min-width: 18px;
    padding: 2px 8px;
    text-align: center;
}

.pj-root[b-sawrtxg7wq]  .pj-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 22px;
}
.pj-root[b-sawrtxg7wq]  .pj-avatar-fallback {
    background: var(--pj-blue);
    color: var(--vh-color-white);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pj-root[b-sawrtxg7wq]  .pj-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--vh-black-10);
    border-radius: var(--vh-radius);
    padding: 4px 8px;
    font-size: 13px;
    color: var(--vh-black-60);
    max-width: 100%;
}
.pj-root[b-sawrtxg7wq]  .pj-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-root[b-sawrtxg7wq]  .pj-chip-x { color: var(--pj-muted); cursor: pointer; font-size: 11px; text-decoration: none; }
.pj-root[b-sawrtxg7wq]  .pj-chip-x:hover { color: var(--pj-red); }

.pj-root[b-sawrtxg7wq]  .pj-spin {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--pj-border);
    border-top-color: var(--pj-blue);
    border-radius: 50%;
    animation: pj-rotate-b-sawrtxg7wq .7s linear infinite;
}
/* Save spinner rides the button's text color: the canon disabled state is
   light bg + gray text (design-system.md §2), where a white ring would vanish. */
.pj-root[b-sawrtxg7wq]  .pj-spin-light { border-color: color-mix(in srgb, currentColor 35%, var(--vh-transparent)); border-top-color: currentColor; }
@keyframes pj-rotate-b-sawrtxg7wq { to { transform: rotate(360deg); } }

/* ---------------- skills: must-have grid + popular chips ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-skills-grid { display: flex; gap: 28px; align-items: flex-start; }
.pj-root[b-sawrtxg7wq]  .pj-skills-main { flex: 1 1 auto; min-width: 0; }
.pj-root[b-sawrtxg7wq]  .pj-popular {
    flex: 0 0 220px;
    border: 1px solid var(--pj-border);
    border-radius: 8px;
    padding: 12px;
}
.pj-root[b-sawrtxg7wq]  .pj-popular-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.pj-root[b-sawrtxg7wq]  .pj-popular-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-root[b-sawrtxg7wq]  .pj-popular-chip {
    border: 1px solid var(--pj-border);
    background: var(--vh-surface);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 12.5px;
    cursor: pointer;
}
.pj-root[b-sawrtxg7wq]  .pj-popular-chip:hover { border-color: var(--pj-blue); color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-popular-selected {
    background: var(--pj-blue-soft);
    border-color: var(--pj-blue);
    color: var(--pj-blue-dark);
}
@media (max-width: 1100px) {
    .pj-root[b-sawrtxg7wq]  .pj-skills-grid { flex-direction: column; }
    .pj-root[b-sawrtxg7wq]  .pj-popular { flex: 1 1 auto; width: 100%; }
}

/* ---------------- skills query ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-query {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--vh-surface-soft);
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    padding: 10px 12px;
    margin: 16px 0 0;
    flex-wrap: wrap;
}
.pj-root[b-sawrtxg7wq]  .pj-query-label { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.pj-root[b-sawrtxg7wq]  .pj-query-result { flex: 1 1 auto; font-size: 13px; color: var(--vh-gray-90); word-break: break-word; }
.pj-root[b-sawrtxg7wq]  .pj-query-edit {
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    padding: 12px;
    margin-top: 16px;
    display: grid;
    gap: 10px;
}
.pj-root[b-sawrtxg7wq]  .pj-query-edit-head { display: flex; align-items: center; gap: 8px; }
.pj-root[b-sawrtxg7wq]  .pj-query-edit-head .pj-query-label { flex: 1 1 auto; }
.pj-root[b-sawrtxg7wq]  .pj-query-help {
    background: var(--vh-surface-soft);
    border-radius: var(--vh-radius-md);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--vh-gray-90);
}
.pj-root[b-sawrtxg7wq]  .pj-query-help ul,
.pj-root[b-sawrtxg7wq]  .pj-query-help ol { margin: 8px 0; padding-left: 20px; }
.pj-root[b-sawrtxg7wq]  .pj-query-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px dashed var(--pj-border);
    border-radius: var(--vh-radius-md);
    min-height: 44px;
    padding: 8px;
    align-items: center;
}
.pj-root[b-sawrtxg7wq]  .pj-query-placeholder { color: var(--pj-muted); font-size: 13px; }
.pj-root[b-sawrtxg7wq]  .pj-token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--vh-radius);
    padding: 4px 8px;
    font-size: 13px;
    background: var(--pj-blue-soft);
    color: var(--pj-blue-dark);
}
.pj-root[b-sawrtxg7wq]  .pj-token-op { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); font-weight: 700; }
.pj-root[b-sawrtxg7wq]  .pj-query-palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-root[b-sawrtxg7wq]  .pj-query-palette-group {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pj-muted);
    margin-right: 2px;
}
.pj-root[b-sawrtxg7wq]  .pj-token-btn {
    border: 1px solid var(--pj-border);
    background: var(--vh-surface);
    border-radius: var(--vh-radius);
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}
.pj-root[b-sawrtxg7wq]  .pj-token-btn:hover { border-color: var(--pj-blue); color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-token-btn-op { font-weight: 700; }
.pj-root[b-sawrtxg7wq]  .pj-query-errors {
    margin: 0;
    padding: 8px 12px 8px 28px;
    background: var(--vh-danger-soft);
    border-radius: var(--vh-radius-md);
    color: var(--pj-red);
    font-size: 13px;
}

/* ---------------- other requirements ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-timezone-row { display: flex; gap: 12px; margin-bottom: 24px; }
.pj-root[b-sawrtxg7wq]  .pj-isnot { flex: 0 0 120px; }
.pj-root[b-sawrtxg7wq]  .pj-timezone-regions { flex: 1 1 auto; min-width: 0; }
.pj-root[b-sawrtxg7wq]  .pj-leadership-years { max-width: 320px; }

/* ---------------- contract type / salary ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.pj-root[b-sawrtxg7wq]  .pj-card {
    flex: 0 0 calc(20% - 10px);
    min-width: 128px;
    border: 1.5px solid var(--pj-border);
    border-radius: 8px;
    background: var(--vh-surface);
    padding: 16px 10px;
    display: grid;
    justify-items: center;
    gap: 10px;
    cursor: pointer;
}
.pj-root[b-sawrtxg7wq]  .pj-card:hover { border-color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-card-active { border-color: var(--pj-blue); background: var(--pj-blue-soft); }
.pj-root[b-sawrtxg7wq]  .pj-card-icon { font-size: 22px; color: var(--pj-muted); }
.pj-root[b-sawrtxg7wq]  .pj-card-active .pj-card-icon { color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-card-label { font-size: 12.5px; font-weight: 600; text-align: center; }

.pj-root[b-sawrtxg7wq]  .pj-salary-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pj-root[b-sawrtxg7wq]  .pj-currency { flex: 0 0 220px; }
.pj-root[b-sawrtxg7wq]  .pj-salary-block { margin: 28px 0 36px; }
.pj-root[b-sawrtxg7wq]  .pj-salary-readout { font-size: 13px; color: var(--pj-muted); display: inline-block; margin-bottom: 4px; }

/* dual range slider */
.pj-root[b-sawrtxg7wq]  .pj-slider { position: relative; height: 52px; margin: 8px 6px 18px; }
.pj-root[b-sawrtxg7wq]  .pj-slider-rail {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--vh-black-20);
}
.pj-root[b-sawrtxg7wq]  .pj-slider-fill { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-slider-input {
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    margin: 0;
    height: 20px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.pj-root[b-sawrtxg7wq]  .pj-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pj-blue);
    border: 2px solid var(--vh-color-white);
    box-shadow: 0 1px 4px rgb(var(--vh-black-rgb) / .25);
    cursor: pointer;
}
.pj-root[b-sawrtxg7wq]  .pj-slider-input::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pj-blue);
    border: 2px solid var(--vh-color-white);
    box-shadow: 0 1px 4px rgb(var(--vh-black-rgb) / .25);
    cursor: pointer;
}
.pj-root[b-sawrtxg7wq]  .pj-slider-input::-moz-range-track { background: none; }
.pj-root[b-sawrtxg7wq]  .pj-slider-marks { position: absolute; top: 28px; left: 0; right: 0; height: 16px; }
.pj-root[b-sawrtxg7wq]  .pj-slider-mark {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--pj-muted);
    white-space: nowrap;
}

/* ---------------- questions ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-question {
    border: 1px solid var(--pj-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: grid;
    gap: 12px;
}
.pj-root[b-sawrtxg7wq]  .pj-question-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pj-root[b-sawrtxg7wq]  .pj-question-title { flex: 1 1 320px; min-width: 0; }
.pj-root[b-sawrtxg7wq]  .pj-question-textarea { min-height: 56px; }
.pj-root[b-sawrtxg7wq]  .pj-question-type { flex: 0 0 200px; }
.pj-root[b-sawrtxg7wq]  .pj-question-placeholder { color: var(--pj-muted); font-size: 13.5px; font-style: italic; }
.pj-root[b-sawrtxg7wq]  .pj-question-options { display: grid; gap: 8px; }
.pj-root[b-sawrtxg7wq]  .pj-question-options-title { text-align: center; font-weight: 600; font-size: 13.5px; padding: 6px 0; }
.pj-root[b-sawrtxg7wq]  .pj-option { display: flex; align-items: center; gap: 10px; }
.pj-root[b-sawrtxg7wq]  .pj-option-check input { width: 16px; height: 16px; accent-color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-option-input { flex: 1 1 auto; }
.pj-root[b-sawrtxg7wq]  .pj-option-expected { border-color: var(--pj-green); }
.pj-root[b-sawrtxg7wq]  .pj-question-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--vh-line);
    padding-top: 10px;
}
.pj-root[b-sawrtxg7wq]  .pj-question-switches { display: flex; gap: 24px; }

/* switch */
.pj-root[b-sawrtxg7wq]  .pj-switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.pj-root[b-sawrtxg7wq]  .pj-switch input { display: none; }
.pj-root[b-sawrtxg7wq]  .pj-switch-slider {
    width: 34px;
    height: 18px;
    border-radius: 10px;
    background: var(--vh-black-30);
    position: relative;
    transition: background .15s ease;
    flex: 0 0 34px;
}
.pj-root[b-sawrtxg7wq]  .pj-switch-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vh-color-white);
    transition: left .15s ease;
}
.pj-root[b-sawrtxg7wq]  .pj-switch input:checked + .pj-switch-slider { background: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-switch input:checked + .pj-switch-slider::after { left: 18px; }

/* ---------------- toast / snackbar ---------------- */

.pj-root[b-sawrtxg7wq]  .pj-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 13.5px;
}
.pj-root[b-sawrtxg7wq]  .pj-toast-error { background: var(--vh-danger-soft); border: 1px solid var(--vh-danger-light); color: var(--vh-danger); }
.pj-root[b-sawrtxg7wq]  .pj-toast-warn { background: var(--vh-tonal-amber-bg); border: 1px solid var(--vh-warning-light); color: var(--vh-tonal-amber-text); }
.pj-root[b-sawrtxg7wq]  .pj-toast-body { flex: 1 1 auto; }
.pj-root[b-sawrtxg7wq]  .pj-toast-body ul { margin: 8px 0 0; padding-left: 18px; }
.pj-root[b-sawrtxg7wq]  .pj-toast-x {
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    font-size: 13px;
    padding: 0 2px;
}

.pj-root .pj-snackbar[b-sawrtxg7wq] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 120;
    color: var(--vh-color-white);
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--vh-shadow-modal);
    animation: pj-fade-in-b-sawrtxg7wq .2s ease;
}
.pj-root .pj-snackbar-success[b-sawrtxg7wq] { background: var(--pj-green); }
.pj-root .pj-snackbar-error[b-sawrtxg7wq] { background: var(--pj-red); }
@keyframes pj-fade-in-b-sawrtxg7wq { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- location Google Places (Blazorise Autocomplete) ---------------- */
/* Blend the Blazorise Type-4 autocomplete (step 6 Location) with the pj inputs. */

.pj-root[b-sawrtxg7wq]  .pj-location .form-control {
    width: 100%;
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--pj-text);
    background: var(--vh-surface);
    height: auto;
    box-shadow: none;
}
.pj-root[b-sawrtxg7wq]  .pj-location .form-control:focus { border-color: var(--pj-blue); }
.pj-root[b-sawrtxg7wq]  .pj-field-error.pj-location .form-control { border-color: var(--pj-red); }
.pj-root[b-sawrtxg7wq]  .pj-location .dropdown-menu {
    border: 1px solid var(--pj-border);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    font-size: 14px;
}

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
    .pj-root[b-sawrtxg7wq]  .pj-stepper { display: none; }
    .pj-root[b-sawrtxg7wq]  .pj-content { padding: 24px 16px 100px; }
    .pj-root[b-sawrtxg7wq]  .pj-card { flex: 1 1 40%; }
}
/* /Pages/Presence/OnlineUsers.razor.rz.scp.css */
/* Online Users — staff presence page. Cobalt design-system look: vh-card
   surfaces, soft borders, green presence accents (prototype `.ava .on`).
   Colors/fonts come from vh-tokens.css (var(--vh-*)); card/chip/button
   anatomy comes from the shared .vh-* utilities in the markup. */

/* Header: ABP-default page chrome (design-system §12) — PageHeader + a slim
   status row (this page has no filters, so no VhFiltersCard). */

/* status row under the PageHeader — live counter left, Refresh pinned right */
.olu-statusbar[b-7jiu34mken] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--vh-font-primary);
}

/* live counter — margin-right:auto soaks the row's free space so the Refresh
   control stays pinned to the right edge */
.olu-total[b-7jiu34mken] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    font-size: 14px;
    color: var(--vh-body);
}
.olu-total b[b-7jiu34mken] { color: var(--vh-ink); }

/* pulsing "live" indicator */
.olu-live[b-7jiu34mken] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vh-success);
    box-shadow: 0 0 0 0 rgb(var(--vh-success-rgb) / .45);
    animation: olu-pulse-b-7jiu34mken 2s infinite;
}
@keyframes olu-pulse-b-7jiu34mken {
    0% { box-shadow: 0 0 0 0 rgb(var(--vh-success-rgb) / .45); }
    70% { box-shadow: 0 0 0 8px rgb(var(--vh-success-rgb) / 0); }
    100% { box-shadow: 0 0 0 0 rgb(var(--vh-success-rgb) / 0); }
}

/* ---- group ---- */
.olu-group[b-7jiu34mken] {
    margin-bottom: 24px;
    font-family: var(--vh-font-primary);
}

.olu-group-head[b-7jiu34mken] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--vh-ink);
}
.olu-group-head i[b-7jiu34mken] { color: var(--vh-muted); font-size: 13px; }
.olu-group-title[b-7jiu34mken] { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.olu-count[b-7jiu34mken] {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--vh-tonal-blue-bg);
    color: var(--vh-tonal-blue-text);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.olu-empty[b-7jiu34mken] {
    font-size: 13px;
    color: var(--vh-muted);
    background: var(--vh-surface-soft);
    border: 1px dashed var(--vh-line-strong);
    border-radius: var(--vh-radius-card-sm);
    padding: 14px 16px;
}

/* ---- cards (surface/border/shadow come from .vh-card.vh-card-sm) ---- */
.olu-grid[b-7jiu34mken] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

.olu-card[b-7jiu34mken] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.olu-ava[b-7jiu34mken] {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--vh-gradient-primary);
    color: var(--vh-color-white); /* white-on-brand — stays var(--vh-color-white) in dark mode */
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.olu-ava img[b-7jiu34mken] { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.olu-dot[b-7jiu34mken] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--vh-success);
    border: 2.5px solid var(--vh-surface);
}

.olu-id[b-7jiu34mken] { flex: 1; min-width: 0; }

/* name row: name grows + truncates, "online for Xm" pinned to the right corner
   — keeps the email line below free to span the full card width */
.olu-top[b-7jiu34mken] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.olu-name[b-7jiu34mken] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--vh-ink);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.olu-name:hover[b-7jiu34mken] { color: var(--vh-primary); }
.olu-mail[b-7jiu34mken] {
    font-size: 12px;
    color: var(--vh-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* current page — the app route the user's latest live tab reported */
.olu-url[b-7jiu34mken] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-primary);
    text-decoration: none;
    min-width: 0;
}
.olu-url i[b-7jiu34mken] { font-size: 10px; color: var(--vh-muted); flex: 0 0 auto; }
.olu-url span[b-7jiu34mken] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.olu-url:hover span[b-7jiu34mken] { text-decoration: underline; }

.olu-meta[b-7jiu34mken] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
/* chips reuse .vh-chip-soft / .vh-pill-tonal-blue; only the page tweak lives here */
.olu-chip[b-7jiu34mken] { white-space: nowrap; }

.olu-since[b-7jiu34mken] { flex: 0 0 auto; font-size: 12px; color: var(--vh-muted); font-weight: 600; white-space: nowrap; }
.olu-you[b-7jiu34mken] { margin-left: auto; font-size: 12px; color: var(--vh-muted); font-style: italic; }

/* sits at the end of the chips row, pushed to the card's right edge
   (anatomy comes from .vh-btn-xs.vh-btn-text.vh-btn-danger-text) */
.olu-reset[b-7jiu34mken] { margin-left: auto; }
/* /Pages/Profile/Index.razor.rz.scp.css */
/* /profile editor — content sits on the normal LeptonX page background (page-chrome
   standard, design-system.md §12): bordered white cards, 732px main column, left
   anchor-menu card. Shared section styles use ::deep so the child section components
   (rendered inside .pf-page) pick them up. */

.pf-page[b-xddwzi6q7h] { display: flex; gap: 1.5rem; align-items: flex-start; }

/* ---- Left anchor menu (card) ---- */
.pf-sidenav[b-xddwzi6q7h] { flex: 0 0 240px; position: sticky; top: 1rem; display: flex; flex-direction: column; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: .6rem; padding: .75rem; }
.pf-sidenav-link[b-xddwzi6q7h] { display: flex; align-items: center; gap: .8rem; padding: .65rem .5rem; font-size: .9rem; color: var(--vh-ink); cursor: pointer; text-decoration: none; border-radius: .4rem; }
.pf-sidenav-link i[b-xddwzi6q7h] { width: 18px; text-align: center; color: var(--vh-text-muted); }
.pf-sidenav-link:hover[b-xddwzi6q7h] { background: var(--vh-gray-10); }
.pf-sidenav-link:hover[b-xddwzi6q7h], .pf-sidenav-link:hover i[b-xddwzi6q7h] { color: var(--vh-primary-hover); }
@media (max-width: 991px) { .pf-sidenav[b-xddwzi6q7h] { display: none; } }

/* ---- Main column ---- */
.pf-main[b-xddwzi6q7h] { flex: 1 1 auto; max-width: 732px; display: flex; flex-direction: column; gap: 1rem; font-family: var(--vh-font-secondary); }

.pf-page[b-xddwzi6q7h]  .pf-card { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: .6rem; padding: 1.25rem 1.5rem; box-shadow: var(--vh-shadow-surface); }
.pf-page[b-xddwzi6q7h]  .pf-section { display: block; }
.pf-page[b-xddwzi6q7h]  .pf-section h5,
.pf-page[b-xddwzi6q7h]  .pf-section-title { font-family: var(--vh-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--vh-text-heading); margin: 0 0 .55rem; }

/* ---- Field primitives shared by every section ---- */
.pf-page[b-xddwzi6q7h]  .pf-field { margin-bottom: 1.1rem; position: relative; }
.pf-page[b-xddwzi6q7h]  .pf-label { display: block; font-size: .86rem; font-weight: 500; color: var(--vh-text-body); margin-bottom: .35rem; }
.pf-page[b-xddwzi6q7h]  .pf-hint { font-size: .76rem; color: var(--vh-text-muted); margin-top: .25rem; }
.pf-page[b-xddwzi6q7h]  .pf-error { font-size: .78rem; color: var(--vh-danger); margin-top: .3rem; }
.pf-page[b-xddwzi6q7h]  .pf-muted { font-size: .8rem; color: var(--vh-text-muted); }
.pf-page[b-xddwzi6q7h]  .pf-link { color: var(--vh-primary-hover); cursor: pointer; text-decoration: none; font-weight: 600; font-size: .88rem; }
.pf-page[b-xddwzi6q7h]  .pf-link:hover { text-decoration: underline; }
.pf-page[b-xddwzi6q7h]  .pf-savemark { position: absolute; right: .2rem; top: 0; font-size: .75rem; }
.pf-page[b-xddwzi6q7h]  .pf-savemark.ok { color: var(--vh-success); }
.pf-page[b-xddwzi6q7h]  .pf-savemark.busy { color: var(--vh-text-muted); }
.pf-page[b-xddwzi6q7h]  .pf-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.pf-page[b-xddwzi6q7h]  .pf-row > * { flex: 1 1 240px; min-width: 0; }
.pf-page[b-xddwzi6q7h]  .pf-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--vh-text-body); cursor: pointer; }
.pf-page[b-xddwzi6q7h]  .pf-check input { accent-color: var(--vh-primary); }
.pf-page[b-xddwzi6q7h]  .pf-radio-group { display: flex; gap: 1.25rem; align-items: center; }
.pf-page[b-xddwzi6q7h]  .pf-radio { display: flex; align-items: center; gap: .35rem; font-size: .88rem; cursor: pointer; }
.pf-page[b-xddwzi6q7h]  .pf-radio input { accent-color: var(--vh-primary); }
.pf-page[b-xddwzi6q7h]  .pf-loading { color: var(--vh-text-muted); font-size: .85rem; padding: .5rem 0; }

/* Profile forms mix Blazorise Autocomplete, the shared VhDropdown and legacy
   input utilities. Keep their widths contextual, but give every single-line
   field the same vertical contract in both visual designs. */
.pf-page[b-xddwzi6q7h]  input.form-control,
.pf-page[b-xddwzi6q7h]  select.form-control,
.pf-page[b-xddwzi6q7h]  .vh-input:not(textarea),
.pf-page[b-xddwzi6q7h]  .pfm-input:not(textarea),
.pf-page[b-xddwzi6q7h]  .vh-dd-btn {
    box-sizing: border-box;
    height: var(--vh-control-height);
    min-height: var(--vh-control-height);
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    line-height: 20px;
}

/* ---- Avatar card ---- */
.pf-avatar-card[b-xddwzi6q7h] { display: flex; flex-direction: column; align-items: center; padding: 1.5rem; }
.pf-avatar-wrap[b-xddwzi6q7h] { position: relative; width: 96px; height: 96px; }
.pf-avatar[b-xddwzi6q7h] { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.pf-avatar-initials[b-xddwzi6q7h] { display: flex; align-items: center; justify-content: center; background: var(--vh-blue-tint); color: var(--vh-primary-active); font-size: 2rem; font-weight: 700; }
.pf-avatar-camera[b-xddwzi6q7h] { position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--vh-surface); border: 1px solid var(--vh-line-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--vh-black-60); }
.pf-avatar-camera:hover[b-xddwzi6q7h] { color: var(--vh-primary-hover); }
.pf-name-inline[b-xddwzi6q7h] { width: min(100%, 30rem); margin-top: .9rem; align-items: flex-start; }
.pf-avatar-card .pf-name-inline .pf-field[b-xddwzi6q7h] { flex: 1 1 180px; min-width: 0; margin-bottom: 0; text-align: left; }
.pf-name-input[b-xddwzi6q7h] { width: 100%; }
.pf-name-feedback[b-xddwzi6q7h] { min-height: 1.15rem; margin-top: .25rem; line-height: 1.15rem; }
.pf-avatar-card .pf-name-feedback .pf-error[b-xddwzi6q7h],
.pf-avatar-card .pf-name-feedback .pf-muted[b-xddwzi6q7h],
.pf-avatar-card .pf-name-feedback .pf-success[b-xddwzi6q7h] { margin-top: 0; }
.pf-email[b-xddwzi6q7h] { font-size: .85rem; color: var(--vh-text-muted); }
.pf-email-status[b-xddwzi6q7h] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .35rem;
    font-size: .75rem;
    font-weight: 600;
}
.pf-email-status.verified[b-xddwzi6q7h] { color: var(--vh-green-600); }
.pf-email-status.unverified[b-xddwzi6q7h] { color: var(--vh-amber-700); }

/* ---- Tech switch + confirm ---- */
.pf-techswitch[b-xddwzi6q7h] { display: flex; align-items: center; gap: .6rem; }
.pf-techswitch-label[b-xddwzi6q7h] { font-size: .9rem; color: var(--vh-text-body); }
.pf-switch[b-xddwzi6q7h] { position: relative; display: inline-block; width: 40px; height: 22px; margin: 0; }
.pf-switch input[b-xddwzi6q7h] { opacity: 0; width: 0; height: 0; }
.pf-switch-slider[b-xddwzi6q7h] { position: absolute; inset: 0; background: var(--vh-black-30); border-radius: 22px; cursor: pointer; transition: .15s; }
.pf-switch-slider[b-xddwzi6q7h]::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: var(--vh-surface); border-radius: 50%; transition: .15s; }
.pf-switch input:checked + .pf-switch-slider[b-xddwzi6q7h] { background: var(--vh-primary-hover); }
.pf-switch input:checked + .pf-switch-slider[b-xddwzi6q7h]::before { transform: translateX(18px); }
.pf-tech-confirm-text[b-xddwzi6q7h] { font-size: .88rem; color: var(--vh-text-body); line-height: 1.5; }
.pf-tech-confirm-actions[b-xddwzi6q7h] { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }

/* ---- Embedded Intro Video experience ---- */
.pf-page[b-xddwzi6q7h]  .pf-intro-video-card {
    display: block;
    min-width: 0;
    overflow: hidden;
}

/* ---- Modals (custom overlay, shared with sections via ::deep) ---- */
/* z-index 1060: above the theme's modal layer (1055) — same convention as
   VhDropdown's vh-dd-modal modifier. */
.pf-page[b-xddwzi6q7h]  .pf-overlay, .pf-overlay[b-xddwzi6q7h] { position: fixed; inset: 0; background: var(--vh-overlay); z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pf-page[b-xddwzi6q7h]  .pf-modal, .pf-modal[b-xddwzi6q7h] { background: var(--vh-surface); border-radius: var(--vh-radius-lg); box-shadow: var(--vh-shadow-modal); width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; padding: 1.25rem 1.5rem; }
.pf-page[b-xddwzi6q7h]  .pf-modal-head, .pf-modal-head[b-xddwzi6q7h] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.pf-page[b-xddwzi6q7h]  .pf-modal-head h5, .pf-modal-head h5[b-xddwzi6q7h] { margin: 0; font-weight: 700; color: var(--vh-text-heading); }
.pf-page[b-xddwzi6q7h]  .pf-modal-close, .pf-modal-close[b-xddwzi6q7h] { cursor: pointer; color: var(--vh-text-muted); font-size: 1rem; text-decoration: none; }
.pf-page[b-xddwzi6q7h]  .pf-modal-close:hover, .pf-modal-close:hover[b-xddwzi6q7h] { color: var(--vh-text-heading); }
.pf-modal-footnote[b-xddwzi6q7h] { margin-top: .6rem; }

.pf-name-form[b-xddwzi6q7h] { display: flex; gap: 1rem; flex-wrap: wrap; }
.pf-name-form .pf-field[b-xddwzi6q7h] { flex: 1 1 0; margin-bottom: 0; }

/* ---- Crop modal (legacy VHImgCrop, image max-height 350; width standardized
   on the 732px wide-modal / .pf-main column — legacy had an accidental 730) ---- */
.pf-crop-modal[b-xddwzi6q7h] { max-width: 732px; }
.pf-crop-body[b-xddwzi6q7h] { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pf-crop-stage[b-xddwzi6q7h] { max-width: 100%; }
.pf-crop-stage img[b-xddwzi6q7h] { display: block; max-width: 100%; max-height: 350px; }
.pf-crop-save[b-xddwzi6q7h] { min-width: 140px; }
.pf-success[b-xddwzi6q7h] { font-size: .78rem; color: var(--vh-success); margin-top: .3rem; }
/* /Pages/Profile/ProfileEducationSection.razor.rz.scp.css */
/* Education + Licenses section — `pf-` prefix consistent with the profile shell. */

/* Card chrome (bg/border/radius/shadow/padding) comes from the shared
   `.pf-page ::deep .pf-card` in Index.razor.css — only layout here. */
.pf-card[b-3fl5sfo2t1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-loading[b-3fl5sfo2t1],
.pf-empty[b-3fl5sfo2t1] { color: var(--vh-text-muted); font-size: .9rem; }

.pf-section-error[b-3fl5sfo2t1] {
    padding: .5rem .7rem;
    border: 1px solid var(--vh-danger-light);
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
    border-radius: .4rem;
    font-size: .8rem;
}

.pf-block[b-3fl5sfo2t1] { display: flex; flex-direction: column; gap: .75rem; }
.pf-block-gap[b-3fl5sfo2t1] { margin-top: 1.5rem; }

.pf-subtitle[b-3fl5sfo2t1] { font-weight: 700; color: var(--vh-text-heading); font-size: .95rem; }

/* degreeType immediate-save select */
.pf-degree[b-3fl5sfo2t1] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-width: 50%;
    min-width: 260px;
}
.pf-caption[b-3fl5sfo2t1] { font-size: .78rem; font-weight: 600; color: var(--vh-text-muted); margin: 0; }
.pf-inline-error[b-3fl5sfo2t1] { color: var(--vh-danger); font-size: .74rem; }

/* list entries (education + licenses) */
.pf-entry[b-3fl5sfo2t1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.pf-entry-main[b-3fl5sfo2t1] { display: flex; flex-direction: column; gap: .15rem; }

.pf-item-title[b-3fl5sfo2t1] {
    color: var(--vh-primary-hover);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
}
.pf-item-title:hover[b-3fl5sfo2t1] { text-decoration: underline; }

.pf-item-sub[b-3fl5sfo2t1] { color: var(--vh-text-body); font-size: .8rem; }
.pf-dates[b-3fl5sfo2t1] { color: var(--vh-text-body); font-size: .75rem; white-space: nowrap; }

.pf-actions[b-3fl5sfo2t1] { display: flex; }
/* /Pages/Profile/ProfileExperienceSection.razor.rz.scp.css */
/* Experience section — `pf-` prefix consistent with the profile shell cards. */

/* Card chrome (bg/border/radius/shadow/padding) comes from the shared
   `.pf-page ::deep .pf-card` in Index.razor.css — only layout here. */
.pf-card[b-iokg91xu44] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-loading[b-iokg91xu44],
.pf-empty[b-iokg91xu44] { color: var(--vh-text-muted); font-size: .9rem; }

.pf-section-error[b-iokg91xu44] {
    padding: .5rem .7rem;
    border: 1px solid var(--vh-danger-light);
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
    border-radius: .4rem;
    font-size: .8rem;
}

.pf-exp[b-iokg91xu44] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.pf-exp + .pf-exp[b-iokg91xu44] { border-top: 1px solid var(--vh-line); padding-top: 1rem; }

.pf-item-title[b-iokg91xu44] {
    color: var(--vh-primary-hover);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
}
.pf-item-title:hover[b-iokg91xu44] { text-decoration: underline; }

.pf-item-sub[b-iokg91xu44] { color: var(--vh-text-body); font-size: .8rem; }

.pf-role[b-iokg91xu44] {
    margin: .5rem 0 0 .35rem;
    padding-left: .85rem;
    border-left: 2px solid var(--vh-black-20);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.pf-role-head[b-iokg91xu44] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.pf-role-title[b-iokg91xu44] { font-weight: 600; color: var(--vh-text-heading); font-size: .88rem; }
.pf-dates[b-iokg91xu44] { color: var(--vh-text-body); font-size: .75rem; white-space: nowrap; }
.pf-role-desc[b-iokg91xu44] { color: var(--vh-text-body); font-size: .83rem; }

/* skill chips use the global .vh-chip utility (legacy vh-os Chips) */
.pf-chips[b-iokg91xu44] { display: flex; flex-wrap: wrap; gap: .3rem; }

.pf-actions[b-iokg91xu44] { display: flex; }
/* /Pages/Profile/ProfileGeneralSection.razor.rz.scp.css */
/* General section specifics (shared pf-* primitives live in Index.razor.css). */
.pf-phone-head[b-zog42xq82b] { display: flex; align-items: center; justify-content: space-between; }
.pf-phone-head .pf-label[b-zog42xq82b] { margin-bottom: 0; }
.pf-verified[b-zog42xq82b] { color: var(--vh-success); font-size: .8rem; font-weight: 600; }
.pf-verify-row[b-zog42xq82b] { display: flex; align-items: center; margin-top: .4rem; flex-wrap: wrap; }
.pf-link-button[b-zog42xq82b] { appearance: none; background: none; border: 0; padding: 0; font: inherit; }
.pf-link-button:disabled[b-zog42xq82b] { cursor: not-allowed; opacity: .65; text-decoration: none; }
.pf-verification-status[b-zog42xq82b] { color: var(--vh-success); font-size: .85rem; font-weight: 600; margin-top: .4rem; }

.pf-code-modal[b-zog42xq82b] { max-width: 500px; }
.pf-icon-button[b-zog42xq82b] { appearance: none; background: none; border: 0; padding: .25rem; }
.pf-icon-button:disabled[b-zog42xq82b] { cursor: not-allowed; opacity: .65; }
.pf-code-body[b-zog42xq82b] { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: .5rem 0 1rem; }
.pf-code-text[b-zog42xq82b] { font-size: .95rem; color: var(--vh-black-90); text-align: center; }
.pf-code-input[b-zog42xq82b] { max-width: 160px; text-align: center; letter-spacing: .4rem; font-size: 1.2rem; }
.pf-code-submit[b-zog42xq82b] { min-width: 170px; }
.pf-code-resend[b-zog42xq82b] { font-size: .82rem; }
/* /Pages/Profile/ProfileLanguagesSection.razor.rz.scp.css */
/* Languages rows. */
.pf-lang-error[b-ps8aku2ilh] { margin-bottom: .6rem; }
.pf-lang-row[b-ps8aku2ilh] { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--vh-line); }
.pf-lang-row:last-of-type[b-ps8aku2ilh] { border-bottom: none; }
.pf-lang-select[b-ps8aku2ilh] { flex: 1 1 auto; min-width: 0; }
.pf-lang-level[b-ps8aku2ilh] { flex: 0 0 200px; }
.pf-lang-delete[b-ps8aku2ilh] { flex: 0 0 20px; text-align: center; }
.pf-lang-delete a[b-ps8aku2ilh] { color: var(--vh-black-40); cursor: pointer; }
.pf-lang-delete a:hover[b-ps8aku2ilh] { color: var(--vh-danger); }
.pf-lang-add[b-ps8aku2ilh] { display: inline-block; margin-top: .8rem; }
@media (max-width: 575px) { .pf-lang-level[b-ps8aku2ilh] { flex: 0 0 130px; } }
/* /Pages/Profile/ProfileModalShell.razor.rz.scp.css */
/* Profile modals — legacy visual language via design-system tokens
   (vh-os Modal: overlay .75, radius-lg; Button-New primary SAVE var(--vh-primary);
   Input/Simple borders). Prefix `pfm-`. Field-level rules are ::deep so
   they reach content projected by the concrete modals. */

/* z-index 1060: above the theme's modal layer (1055) — same convention as
   VhDropdown's vh-dd-modal modifier. */
.pfm-backdrop[b-wen3508ucq] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: var(--vh-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.pfm-modal[b-wen3508ucq] {
    background: var(--vh-surface);
    border-radius: var(--vh-radius-lg);
    width: 732px;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: var(--vh-shadow-modal);
    display: flex;
    flex-direction: column;
}

/* ---- header ---- */
.pfm-head[b-wen3508ucq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--vh-gray-30);
}
.pfm-head-text[b-wen3508ucq] { display: flex; flex-direction: column; gap: .35rem; }
.pfm-title[b-wen3508ucq] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--vh-text-heading); font-family: var(--vh-font-heading); }
.pfm-subtitle[b-wen3508ucq] { margin: 0; font-size: .8rem; color: var(--vh-text-muted); }
.pfm-close[b-wen3508ucq] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-text-muted);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .35rem;
    border-radius: .35rem;
}
.pfm-close:hover[b-wen3508ucq] { color: var(--vh-text-heading); background: var(--vh-gray-10); }

/* ---- API error banner ---- */
.pfm-error[b-wen3508ucq] {
    margin: .75rem 1.25rem 0;
    padding: .5rem .7rem;
    border: 1px solid var(--vh-danger-light);
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
    border-radius: .4rem;
    font-size: .8rem;
}

/* ---- body ---- */
.pfm-body[b-wen3508ucq] {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

/* ---- footer (Delete left / Save right, legacy layout) ---- */
.pfm-foot[b-wen3508ucq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid var(--vh-gray-30);
}
.pfm-foot-left[b-wen3508ucq] { display: flex; align-items: center; }
.pfm-delete[b-wen3508ucq] {
    color: var(--vh-text-muted);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.pfm-delete:hover[b-wen3508ucq] { color: var(--vh-danger); }
.pfm-delete.pfm-disabled[b-wen3508ucq] { opacity: .6; cursor: default; }

/* Save button = global .vh-btn-primary + .vh-btn-lg utilities (design-system §2);
   only the busy spinner is local. */
.pfm-btn-spin[b-wen3508ucq] {
    width: 14px;
    height: 14px;
    border: 2px solid rgb(var(--vh-white-rgb) / .4);
    border-top-color: var(--vh-color-white);
    border-radius: 50%;
    animation: pfm-rotate-b-wen3508ucq .7s linear infinite;
}

@keyframes pfm-rotate-b-wen3508ucq {
    to { transform: rotate(360deg); }
}

/* ================= projected field content (::deep) ================= */

[b-wen3508ucq] .pfm-grid { display: flex; flex-wrap: wrap; gap: .9rem; }
[b-wen3508ucq] .pfm-col-6 { flex: 1 1 calc(50% - .45rem); min-width: 240px; }

[b-wen3508ucq] .pfm-field { display: flex; flex-direction: column; gap: .35rem; }
[b-wen3508ucq] .pfm-label { font-size: .78rem; font-weight: 600; color: var(--vh-text-body); margin: 0; }

[b-wen3508ucq] .pfm-input {
    width: 100%;
    font-family: var(--vh-font-secondary);
    font-size: 14px;
    color: var(--vh-text-body);
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-input-radius);
    padding: .45rem .65rem;
    outline: none;
    background: var(--vh-surface);
    box-sizing: border-box;
}
[b-wen3508ucq] .pfm-input::placeholder { color: var(--vh-text-placeholder); }
[b-wen3508ucq] .pfm-input:focus { border-color: var(--vh-input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-primary) 12%, var(--vh-transparent)); }
[b-wen3508ucq] .pfm-input:disabled { background: var(--vh-input-disabled-bg); color: var(--vh-gray-40); }

[b-wen3508ucq] .pfm-textarea { resize: vertical; min-height: 110px; font-family: inherit; }

[b-wen3508ucq] .pfm-field-error { color: var(--vh-danger); font-size: .74rem; }

[b-wen3508ucq] .pfm-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--vh-text-body);
    cursor: pointer;
}
[b-wen3508ucq] .pfm-check input { accent-color: var(--vh-primary); }

/* role block separators in the experience modal */
[b-wen3508ucq] .pfm-role {
    border-top: 1px dashed var(--vh-gray-30);
    padding-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

[b-wen3508ucq] .pfm-add-role {
    color: var(--vh-primary);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
}
[b-wen3508ucq] .pfm-add-role:hover { text-decoration: underline; }

/* read-only skill chips use the global .vh-chip utility (legacy vh-os Chips) */
[b-wen3508ucq] .pfm-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
/* /Pages/Profile/ProfileRelocationSection.razor.rz.scp.css */
/* Relocation section specifics. */
.pf-half[b-y9h4mzlzhg] { max-width: 50%; }
@media (max-width: 767px) { .pf-half[b-y9h4mzlzhg] { max-width: 100%; } }

.pf-target-row[b-y9h4mzlzhg] { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; max-width: 600px; }
.pf-target-rank[b-y9h4mzlzhg] { flex: 0 0 32px; font-size: .85rem; color: var(--vh-text-muted); }
.pf-target-select[b-y9h4mzlzhg] { flex: 1 1 auto; min-width: 0; }
.pf-target-delete[b-y9h4mzlzhg] { flex: 0 0 20px; text-align: center; }
.pf-target-delete a[b-y9h4mzlzhg] { color: var(--vh-black-40); cursor: pointer; }
.pf-target-delete a:hover[b-y9h4mzlzhg] { color: var(--vh-danger); }

.pf-passport-input[b-y9h4mzlzhg] { max-width: 170px; }
.pf-company-checks[b-y9h4mzlzhg] { display: flex; gap: 1.1rem; flex-wrap: wrap; }
/* /Pages/Profile/ProfileSideProjectsSection.razor.rz.scp.css */
/* Side Projects section — `pf-` prefix consistent with the profile shell. */

.pf-helper[b-0kdzglwgpf] { color: var(--vh-text-muted); font-size: .85rem; margin: 0 0 .75rem; }

/* Card chrome (bg/border/radius/shadow/padding) comes from the shared
   `.pf-page ::deep .pf-card` in Index.razor.css — only layout here. */
.pf-card[b-0kdzglwgpf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-loading[b-0kdzglwgpf],
.pf-empty[b-0kdzglwgpf] { color: var(--vh-text-muted); font-size: .9rem; }

.pf-section-error[b-0kdzglwgpf] {
    padding: .5rem .7rem;
    border: 1px solid var(--vh-danger-light);
    background: var(--vh-danger-soft);
    color: var(--vh-danger);
    border-radius: .4rem;
    font-size: .8rem;
}

.pf-entry[b-0kdzglwgpf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.pf-entry-main[b-0kdzglwgpf] { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.pf-item-title[b-0kdzglwgpf] {
    color: var(--vh-primary-hover);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
}
.pf-item-title:hover[b-0kdzglwgpf] { text-decoration: underline; }

.pf-item-sub[b-0kdzglwgpf] { color: var(--vh-text-body); font-size: .83rem; }

.pf-link[b-0kdzglwgpf] {
    color: var(--vh-primary-hover);
    font-size: .8rem;
    text-decoration: none;
    word-break: break-all;
    align-self: flex-start;
}
.pf-link:hover[b-0kdzglwgpf] { text-decoration: underline; }

.pf-dates[b-0kdzglwgpf] { color: var(--vh-text-body); font-size: .75rem; white-space: nowrap; }

.pf-actions[b-0kdzglwgpf] { display: flex; }
/* /Pages/Profile/ProfileSkillsSection.razor.rz.scp.css */
/* Skill slot rows (top-3 + 5 secondary). */
.pf-skill-group[b-mjwvdz34s9] { margin-top: 1.6rem; }
.pf-skill-group-title[b-mjwvdz34s9] { font-weight: 600; color: var(--vh-text-heading); font-size: .95rem; }
.pf-skill-row[b-mjwvdz34s9] { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.pf-skill-rank[b-mjwvdz34s9] { flex: 0 0 28px; font-size: .85rem; color: var(--vh-text-muted); }
.pf-skill-select[b-mjwvdz34s9] { flex: 1 1 auto; min-width: 0; }
.pf-skill-years[b-mjwvdz34s9] { flex: 0 0 150px; }
.pf-skill-clear[b-mjwvdz34s9] { flex: 0 0 16px; text-align: center; }
.pf-skill-clear a[b-mjwvdz34s9] { color: var(--vh-black-40); font-size: 1.1rem; line-height: 1; cursor: pointer; text-decoration: none; }
.pf-skill-clear a:hover[b-mjwvdz34s9] { color: var(--vh-danger); }
/* /Pages/Profile/ProfileSocialSection.razor.rz.scp.css */
/* Resume & Social Profile specifics. */
.pf-resume[b-z1f315vtk6] { display: flex; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; }
.pf-resume-error[b-z1f315vtk6] { margin-bottom: .6rem; }
/* legacy ResumeLabel (Social/styles.js): SOLID primary, white bold Roboto, radius 3 */
.pf-upload-btn[b-z1f315vtk6] { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; background: var(--vh-primary); color: var(--vh-color-white); font-family: var(--vh-font-secondary); font-weight: 700; font-size: .82rem; letter-spacing: .03em; border-radius: var(--vh-radius-sm); padding: .55rem 1rem; cursor: pointer; margin: 0; }
.pf-upload-btn:hover[b-z1f315vtk6] { background: var(--vh-primary-hover); }
.pf-upload-btn[b-z1f315vtk6]  input[type=file] { display: none; }
.pf-resume-pending[b-z1f315vtk6] { margin-left: .7rem; font-size: .85rem; color: var(--vh-text-body); }

.pf-resume-current[b-z1f315vtk6] { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--vh-text-heading); }
.pf-resume-word[b-z1f315vtk6] { font-weight: 600; }
.pf-resume-link[b-z1f315vtk6] { color: var(--vh-primary); text-decoration: none; word-break: break-all; }
.pf-resume-link:hover[b-z1f315vtk6] { text-decoration: underline; }
.pf-resume-delete[b-z1f315vtk6] { cursor: pointer; color: var(--vh-text-heading); font-weight: 700; text-decoration: none; padding: 0 .3rem; }
.pf-resume-delete:hover[b-z1f315vtk6] { color: var(--vh-danger); }

.pf-social-field[b-z1f315vtk6] { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.pf-social-icon[b-z1f315vtk6] { flex: 0 0 26px; text-align: center; color: var(--vh-text-body); font-size: 1.15rem; }
/* input + its validation error share a column so the error aligns naturally */
.pf-social-input[b-z1f315vtk6] { flex: 1 1 auto; min-width: 0; }

.pf-replace-dialog[b-z1f315vtk6] { max-width: 480px; position: relative; }
.pf-replace-close[b-z1f315vtk6] { position: absolute; top: .8rem; right: 1rem; }
.pf-replace-title[b-z1f315vtk6] { font-weight: 700; color: var(--vh-text-heading); margin-bottom: .8rem; }
.pf-replace-msg[b-z1f315vtk6] { font-size: .9rem; color: var(--vh-text-body); }
.pf-replace-note[b-z1f315vtk6] { font-size: .8rem; color: var(--vh-text-muted); }
.pf-replace-actions[b-z1f315vtk6] { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }

/* legacy DialogButtonSecondary: white, gray-30 border, gray-90 text */
.pf-dialog-secondary[b-z1f315vtk6] { background: var(--vh-surface); border-color: var(--vh-gray-30); color: var(--vh-text-body); }
.pf-dialog-secondary:hover[b-z1f315vtk6] { background: var(--vh-gray-10); }
/* /Pages/RedesignDesignSystem/Index.razor.rz.scp.css */
/* /design-system/redesign — visual review layout only. Product primitives
   continue to come from vh-tokens.css and the root-scoped Redesign mapping. */

.rds-page[b-bcprsn7q6u] {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 18px 0 64px;
    color: var(--vh-text-body);
    font-family: var(--vh-font-primary);
}

.rds-loader[b-bcprsn7q6u],
.rds-private[b-bcprsn7q6u] {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rds-spinner[b-bcprsn7q6u] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--vh-line);
    border-top-color: var(--vh-primary);
    border-radius: var(--vh-radius-pill);
    animation: rds-spin-b-bcprsn7q6u .8s linear infinite;
}

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

.rds-private[b-bcprsn7q6u] {
    flex-direction: column;
    gap: 12px;
    color: var(--vh-text-muted);
}

.rds-private i[b-bcprsn7q6u] { font-size: 24px; }
.rds-private p[b-bcprsn7q6u] { margin: 0; }

.rds-header[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: end;
    gap: 32px;
    padding: 28px 30px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background:
        radial-gradient(circle at 92% 12%, var(--vh-rd-primary-soft), var(--vh-transparent) 38%),
        var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
}

.rds-eyebrow[b-bcprsn7q6u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--vh-primary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rds-dot[b-bcprsn7q6u] {
    width: 8px;
    height: 8px;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-primary);
    box-shadow: 0 0 0 4px var(--vh-rd-primary-soft);
}

.rds-header h1[b-bcprsn7q6u] {
    margin: 0 0 10px;
    color: var(--vh-text-heading);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.12;
    font-weight: 600;
}

.rds-header p[b-bcprsn7q6u] {
    max-width: 720px;
    margin: 0;
    color: var(--vh-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.rds-header code[b-bcprsn7q6u] {
    padding: 1px 5px;
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface-soft);
    color: var(--vh-primary);
    font-size: 12px;
}

.rds-brief[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rds-brief span[b-bcprsn7q6u] {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface-soft);
    color: var(--vh-text-body);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

.rds-compare[b-bcprsn7q6u] {
    position: sticky;
    top: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 12px;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: color-mix(in srgb, var(--vh-surface) 94%, var(--vh-transparent));
    box-shadow: var(--vh-shadow-pop);
    backdrop-filter: blur(14px);
}

.rds-compare-copy[b-bcprsn7q6u] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: max-content;
}

.rds-compare-copy strong[b-bcprsn7q6u] {
    color: var(--vh-text-heading);
    font-size: 13px;
}

.rds-compare-copy span[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-size: 11px;
}

.rds-compare-links[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

.rds-compare-links a[b-bcprsn7q6u] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.rds-compare-links a:hover[b-bcprsn7q6u] {
    border-color: var(--vh-primary);
    color: var(--vh-primary);
}

.rds-compare-links a:is(.active, [aria-current="page"])[b-bcprsn7q6u] {
    border-color: color-mix(in srgb, var(--vh-primary) 35%, var(--vh-line));
    background: var(--vh-rd-primary-soft);
    color: var(--vh-primary);
}

.rds-toc[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 18px 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.rds-toc[b-bcprsn7q6u]::-webkit-scrollbar { display: none; }

.rds-toc a[b-bcprsn7q6u] {
    padding: 4px 0;
    color: var(--vh-text-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.rds-toc a:hover[b-bcprsn7q6u] { color: var(--vh-primary); }

.rds-section[b-bcprsn7q6u] {
    scroll-margin-top: 88px;
    padding-top: 46px;
}

.rds-section-heading[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: minmax(150px, .34fr) minmax(280px, .66fr);
    column-gap: 24px;
    margin-bottom: 18px;
}

.rds-section-heading > span[b-bcprsn7q6u] {
    grid-row: 1 / span 2;
    padding-top: 5px;
    color: var(--vh-primary);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rds-section-heading h2[b-bcprsn7q6u] {
    margin: 0;
    color: var(--vh-text-heading);
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
}

.rds-section-heading p[b-bcprsn7q6u] {
    margin: 5px 0 0;
    color: var(--vh-text-muted);
    font-size: 14px;
    line-height: 20px;
}

.rds-foundation-grid[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.rds-specimen[b-bcprsn7q6u] {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
}

.rds-palette-card[b-bcprsn7q6u] { grid-column: span 2; }

.rds-geometry-card[b-bcprsn7q6u] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    column-gap: 20px;
}

.rds-geometry-card .rds-specimen-title[b-bcprsn7q6u] { grid-column: 1 / -1; }

.rds-specimen-title[b-bcprsn7q6u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.rds-specimen-title h3[b-bcprsn7q6u] {
    margin: 0;
    color: var(--vh-text-heading);
    font-size: 16px;
    line-height: 22px;
    font-weight: 650;
}

.rds-specimen-title > span[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: right;
}

.rds-key-colors[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.rds-swatch[b-bcprsn7q6u] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rds-swatch-block[b-bcprsn7q6u] {
    height: 64px;
    margin-bottom: 5px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
}

.rds-swatch strong[b-bcprsn7q6u] {
    color: var(--vh-text-body);
    font-size: 12px;
}

.rds-swatch code[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-size: 11px;
}

.rds-slate-scale[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 3px;
    margin-top: 26px;
}

.rds-slate-scale > div[b-bcprsn7q6u] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.rds-slate-scale span[b-bcprsn7q6u] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--vh-line);
    border-radius: 3px;
}

.rds-slate-scale small[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-size: 9px;
}

.rds-display-sample[b-bcprsn7q6u] {
    margin: 4px 0 14px;
    color: var(--vh-text-heading);
    font-family: var(--vh-rd-font-display);
    font-size: 25px;
    line-height: 31px;
    font-weight: 600;
}

.rds-type-row[b-bcprsn7q6u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vh-line);
}

.rds-type-row strong[b-bcprsn7q6u] { color: var(--vh-text-body); font-size: 12px; }
.rds-type-row span[b-bcprsn7q6u],
.rds-type-meta[b-bcprsn7q6u] { color: var(--vh-text-muted); font-size: 11px; }

.rds-body-sample[b-bcprsn7q6u] {
    margin: 12px 0 5px;
    color: var(--vh-text-body);
    font-size: 14px;
    line-height: 21px;
}

.rds-radius-row[b-bcprsn7q6u],
.rds-surface-row[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rds-radius-row > span[b-bcprsn7q6u] {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--vh-primary);
    background: var(--vh-rd-primary-soft);
    color: var(--vh-primary);
    font-size: 13px;
    font-weight: 700;
}

.rds-radius-row small[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-size: 10px;
    font-weight: 500;
}

.rds-radius-control[b-bcprsn7q6u] { border-radius: var(--vh-rd-radius-control); }
.rds-radius-card[b-bcprsn7q6u] { border-radius: var(--vh-rd-radius-card); }
.rds-radius-pill[b-bcprsn7q6u] { border-radius: var(--vh-rd-radius-pill); }

.rds-surface-row[b-bcprsn7q6u] {
    margin-top: 0;
}

.rds-surface-row > span[b-bcprsn7q6u] {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font-size: 11px;
}

.rds-surface-row strong[b-bcprsn7q6u] {
    color: var(--vh-text-heading);
    font-size: 12px;
}

.rds-surface-row small[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-size: 10px;
}

.rds-surface-flat[b-bcprsn7q6u] { box-shadow: var(--vh-shadow-surface); }
.rds-surface-popover[b-bcprsn7q6u] { box-shadow: var(--vh-shadow-pop); }
.rds-surface-modal[b-bcprsn7q6u] { box-shadow: var(--vh-shadow-modal); }

.rds-action-row[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rds-icon-button[b-bcprsn7q6u] {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-text-muted);
    cursor: pointer;
}

.rds-icon-button:hover[b-bcprsn7q6u] {
    border-color: var(--vh-primary);
    background: var(--vh-rd-primary-soft);
    color: var(--vh-primary);
}

.rds-state-specimen[b-bcprsn7q6u] { margin-top: 14px; }

.rds-state-rail[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.rds-state-cell[b-bcprsn7q6u] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface-soft);
    color: var(--vh-text-body);
    font-size: 12px;
    font-style: normal;
}

.rds-state-cell > small:first-child[b-bcprsn7q6u] {
    margin-bottom: 4px;
    color: var(--vh-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rds-state-cell > span[b-bcprsn7q6u] { font-weight: 600; }

.rds-state-cell em[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--vh-danger);
    font-size: 11px;
    font-style: normal;
}

.rds-button-rail .rds-state-cell[b-bcprsn7q6u] { justify-content: space-between; }
.rds-button-rail button[b-bcprsn7q6u] { width: 100%; }

.rds-force-hover[b-bcprsn7q6u] {
    background-color: var(--vh-primary-hover) !important;
    border-color: var(--vh-primary-hover) !important;
}

.rds-force-focus[b-bcprsn7q6u] {
    outline: 2px solid var(--vh-primary) !important;
    outline-offset: 2px;
}

.rds-force-input-focus[b-bcprsn7q6u] {
    border-color: var(--vh-input-focus) !important;
    box-shadow: 0 0 0 3px var(--vh-rd-primary-ring) !important;
}

.rds-button-spinner[b-bcprsn7q6u] {
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: var(--vh-transparent);
    border-radius: var(--vh-radius-pill);
    animation: rds-spin-b-bcprsn7q6u .7s linear infinite;
}

.rds-fields-grid[b-bcprsn7q6u],
.rds-data-grid[b-bcprsn7q6u],
.rds-feedback-grid[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.rds-field[b-bcprsn7q6u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    color: var(--vh-text-body);
    font-size: 13px;
    font-weight: 600;
}

.rds-field:first-of-type[b-bcprsn7q6u] { margin-top: 0; }

.rds-field > span[b-bcprsn7q6u] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rds-field > span small[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-weight: 400;
}

.rds-textarea[b-bcprsn7q6u] { min-height: 82px; resize: vertical; }

.rds-omnibox[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid var(--vh-input-border);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
}

.rds-omnibox:focus-within[b-bcprsn7q6u] {
    border-color: var(--vh-primary);
    box-shadow: 0 0 0 3px var(--vh-rd-primary-ring);
}

.rds-omnibox > i[b-bcprsn7q6u] {
    margin-left: 8px;
    color: var(--vh-primary);
}

.rds-omnibox .vh-input[b-bcprsn7q6u] {
    min-width: 0;
    border: 0;
    box-shadow: none;
}

.rds-omnibox .vh-input:focus[b-bcprsn7q6u] { border: 0; box-shadow: none; }

.rds-search-field[b-bcprsn7q6u] { position: relative; }
.rds-search-field i[b-bcprsn7q6u] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vh-text-muted);
    pointer-events: none;
}
.rds-search-field .vh-input[b-bcprsn7q6u] { padding-left: 34px; }

.rds-combo-grid[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rds-combo-grid[b-bcprsn7q6u]  .vh-dd-btn { min-height: 40px; }

.rds-checks[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
}

.rds-checks[b-bcprsn7q6u]  .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-left: 0;
    min-height: 0;
    color: var(--vh-text-body);
    font-size: 13px;
}

.rds-checks[b-bcprsn7q6u]  .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    float: none;
    flex: none;
}

.rds-chip-row[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rds-chip-row .vh-chip button[b-bcprsn7q6u] {
    padding: 0;
    border: 0;
    background: var(--vh-transparent);
    color: inherit;
    line-height: 1;
}

.rds-avatar-row[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.rds-avatar[b-bcprsn7q6u] {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-primary);
    color: var(--vh-on-primary);
    font-size: 13px;
    font-weight: 700;
}

.rds-avatar-sm[b-bcprsn7q6u] { width: 28px; height: 28px; font-size: 10px; }
.rds-avatar-lg[b-bcprsn7q6u] { width: 52px; height: 52px; font-size: 16px; }

.rds-match[b-bcprsn7q6u] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid var(--vh-tonal-green-bd);
    border-radius: var(--vh-radius-pill);
    background: var(--vh-tonal-green-bg);
    color: var(--vh-tonal-green-text);
    font-size: 11px;
    font-weight: 700;
}

.rds-progress-label[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    color: var(--vh-text-muted);
    font-size: 12px;
}

.rds-progress-label strong[b-bcprsn7q6u] { color: var(--vh-text-heading); }

.rds-progress[b-bcprsn7q6u] {
    height: 8px;
    overflow: hidden;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-surface-soft);
}

.rds-progress span[b-bcprsn7q6u] {
    display: block;
    width: 76%;
    height: 100%;
    border-radius: inherit;
    background: var(--vh-primary);
}

.rds-table-wrap[b-bcprsn7q6u] { margin-top: 14px; overflow: hidden; }
.rds-table[b-bcprsn7q6u] { margin: 0; font-size: 13px; }
.rds-table th[b-bcprsn7q6u] { white-space: nowrap; }
.rds-table td[b-bcprsn7q6u] { vertical-align: middle; }
.rds-table td:first-child strong[b-bcprsn7q6u],
.rds-table td:first-child small[b-bcprsn7q6u] { display: block; }
.rds-table td:first-child small[b-bcprsn7q6u] { color: var(--vh-text-muted); font-size: 11px; }
.rds-table td:last-child[b-bcprsn7q6u] { text-align: right; }

.rds-pagination[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--vh-line);
    color: var(--vh-text-muted);
    font-size: 12px;
}

.rds-pagination > div[b-bcprsn7q6u] { display: flex; gap: 4px; }

.rds-page-button[b-bcprsn7q6u] {
    min-width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0 8px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    background: var(--vh-surface);
    color: var(--vh-text-muted);
    font-size: 12px;
}

.rds-page-button:hover:not(:disabled)[b-bcprsn7q6u],
.rds-page-button.active[b-bcprsn7q6u] {
    border-color: var(--vh-primary);
    background: var(--vh-rd-primary-soft);
    color: var(--vh-primary);
}

.rds-page-button:disabled[b-bcprsn7q6u] { opacity: .45; }

.rds-tabs[b-bcprsn7q6u] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--vh-line);
}

.rds-tabs button[b-bcprsn7q6u] {
    position: relative;
    padding: 9px 11px;
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.rds-tabs button[b-bcprsn7q6u]::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: var(--vh-radius-pill);
    background: var(--vh-transparent);
}

.rds-tabs button:hover[b-bcprsn7q6u],
.rds-tabs button.active[b-bcprsn7q6u] { color: var(--vh-primary); }
.rds-tabs button.active[b-bcprsn7q6u]::after { background: var(--vh-primary); }

.rds-tab-panel[b-bcprsn7q6u] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px 10px 2px;
}

.rds-tab-panel strong[b-bcprsn7q6u] { color: var(--vh-text-heading); font-size: 13px; }
.rds-tab-panel span[b-bcprsn7q6u] { color: var(--vh-text-muted); font-size: 12px; }

.rds-alert[b-bcprsn7q6u] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-md);
    font-size: 12px;
}

.rds-alert + .rds-alert[b-bcprsn7q6u] { margin-top: 8px; }
.rds-alert > i[b-bcprsn7q6u] { margin-top: 2px; }
.rds-alert > span[b-bcprsn7q6u] { display: flex; flex-direction: column; gap: 1px; }
.rds-alert strong[b-bcprsn7q6u] { color: var(--vh-text-heading); }
.rds-alert-info[b-bcprsn7q6u] { background: var(--vh-rd-primary-soft); color: var(--vh-primary); }
.rds-alert-success[b-bcprsn7q6u] { background: var(--vh-success-soft); color: var(--vh-success); }
.rds-alert-danger[b-bcprsn7q6u] { background: var(--vh-error-soft); color: var(--vh-error-ink); }

.rds-feedback-grid + .rds-specimen[b-bcprsn7q6u] { margin-top: 14px; }
.rds-modal-copy[b-bcprsn7q6u] { margin: 0 0 14px; color: var(--vh-text-muted); font-size: 14px; line-height: 21px; }

.rds-product-frame[b-bcprsn7q6u] {
    overflow: hidden;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface-soft);
    box-shadow: var(--vh-shadow-surface);
}

.rds-product-toolbar[b-bcprsn7q6u] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--vh-line);
    background: var(--vh-surface);
}

.rds-product-kicker[b-bcprsn7q6u] {
    color: var(--vh-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rds-product-toolbar h3[b-bcprsn7q6u] {
    margin: 2px 0 1px;
    color: var(--vh-text-heading);
    font-size: 18px;
    font-weight: 650;
}

.rds-product-toolbar p[b-bcprsn7q6u] {
    margin: 0;
    color: var(--vh-text-muted);
    font-size: 12px;
}

.rds-candidate-row[b-bcprsn7q6u] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 16px;
    padding: 16px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    background: var(--vh-surface);
    box-shadow: var(--vh-shadow-surface);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.rds-candidate-row:hover[b-bcprsn7q6u] {
    border-color: color-mix(in srgb, var(--vh-primary) 36%, var(--vh-line));
    background: color-mix(in srgb, var(--vh-surface) 94%, var(--vh-rd-primary-soft));
}

.rds-candidate-copy[b-bcprsn7q6u] { min-width: 0; }

.rds-candidate-copy > div[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rds-candidate-copy h3[b-bcprsn7q6u] {
    margin: 0;
    color: var(--vh-text-heading);
    font-size: 16px;
    font-weight: 700;
}

.rds-signal[b-bcprsn7q6u] {
    color: var(--vh-success);
    font-size: 11px;
    font-weight: 600;
}

.rds-candidate-copy p[b-bcprsn7q6u] {
    margin: 4px 0 1px;
    overflow: hidden;
    color: var(--vh-text-body);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rds-candidate-copy > span[b-bcprsn7q6u] {
    color: var(--vh-text-muted);
    font-size: 11px;
}

.rds-candidate-actions[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rds-footer[b-bcprsn7q6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--vh-line);
    color: var(--vh-text-muted);
    font-size: 12px;
}

.rds-footer a[b-bcprsn7q6u] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--vh-primary);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 980px) {
    .rds-header[b-bcprsn7q6u] { grid-template-columns: 1fr; }
    .rds-brief[b-bcprsn7q6u] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rds-foundation-grid[b-bcprsn7q6u] { grid-template-columns: 1fr; }
    .rds-palette-card[b-bcprsn7q6u],
    .rds-geometry-card[b-bcprsn7q6u] { grid-column: auto; }
    .rds-geometry-card[b-bcprsn7q6u] { display: block; }
    .rds-geometry-card .rds-surface-row[b-bcprsn7q6u] { margin-top: 14px; }
    .rds-fields-grid[b-bcprsn7q6u],
    .rds-data-grid[b-bcprsn7q6u],
    .rds-feedback-grid[b-bcprsn7q6u] { grid-template-columns: 1fr; }
    .rds-product-toolbar[b-bcprsn7q6u] { align-items: flex-start; flex-direction: column; }
    .rds-candidate-row[b-bcprsn7q6u] { grid-template-columns: auto minmax(0, 1fr); }
    .rds-candidate-actions[b-bcprsn7q6u] { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 760px) {
    .rds-page[b-bcprsn7q6u] { padding-top: 8px; }
    .rds-header[b-bcprsn7q6u] { padding: 22px 18px; }
    .rds-brief[b-bcprsn7q6u] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rds-compare[b-bcprsn7q6u] { position: static; align-items: flex-start; flex-direction: column; }
    .rds-compare-copy[b-bcprsn7q6u] { min-width: 0; }
    .rds-compare-links[b-bcprsn7q6u] { justify-content: flex-start; }
    .rds-section[b-bcprsn7q6u] { padding-top: 36px; }
    .rds-section-heading[b-bcprsn7q6u] { display: block; }
    .rds-section-heading > span[b-bcprsn7q6u] { display: block; margin-bottom: 6px; }
    .rds-key-colors[b-bcprsn7q6u] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rds-slate-scale[b-bcprsn7q6u] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .rds-combo-grid[b-bcprsn7q6u] { grid-template-columns: 1fr; }
    .rds-table-wrap[b-bcprsn7q6u] { overflow-x: auto; }
    .rds-table[b-bcprsn7q6u] { min-width: 680px; }
    .rds-product-toolbar[b-bcprsn7q6u] { padding: 16px; }
    .rds-candidate-row[b-bcprsn7q6u] { margin: 10px; padding: 14px; }
    .rds-candidate-actions[b-bcprsn7q6u] { justify-content: stretch; flex-wrap: wrap; }
    .rds-candidate-actions .vh-btn-primary[b-bcprsn7q6u] { flex: 1 1 170px; }
    .rds-footer[b-bcprsn7q6u] { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .rds-spinner[b-bcprsn7q6u],
    .rds-button-spinner[b-bcprsn7q6u] { animation: none; }
    .rds-candidate-row[b-bcprsn7q6u] { transition: none; }
}
/* /Pages/Referral/Index.razor.rz.scp.css */
/* Referral program page — rf- prefix. Restyled 2026-07-10 onto the Cobalt app
   language: ONE gradient moment (the hero banner card); every other section is
   a --vh-surface card / tonal panel on the normal page background, so the page
   reads as part of the app instead of a pasted landing page. Legacy reference
   (blue full-page slab): screenshots/admin/11-referral.png. */

.rf-page[b-4r8vx9rdxd] {
    /* Legacy next-platform body font (Tailwind font-sans = Inter). */
    font-family: var(--vh-font-primary);
    /* Page chrome (design-system §12): normal LeptonX flow, fluid root.
       Vertical rhythm between sections comes from this gap alone. */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2.5rem;
}

/* Canon heading font (design-system.md §3). */
.rf-page h1[b-4r8vx9rdxd],
.rf-page h2[b-4r8vx9rdxd],
.rf-page h3[b-4r8vx9rdxd],
.rf-page h4[b-4r8vx9rdxd] {
    font-family: var(--vh-font-heading);
}

/* ---------------- Hero ---------------- */

.rf-hero[b-4r8vx9rdxd] {
    /* The page's single gradient moment — a contained banner card (same idiom
       as the Learning Hub course banner), not a page-wide backdrop. */
    background: linear-gradient(135deg, var(--vh-primary) 0%, var(--vh-primary-hover) 55%, var(--vh-blue-sky) 100%);
    padding: 2.5rem;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card);
    color: var(--vh-color-white);
    box-shadow: var(--vh-shadow-cobalt);
}

/* .rf-hero-card is now a plain content wrapper — the frosted glass sub-card
   read as a landing page, not an app surface. Inner max-widths keep the copy
   readable, left-anchored (§12). */

.rf-hero-title[b-4r8vx9rdxd] {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    max-width: 40rem;
    color: var(--vh-color-white);
    margin: 0 0 1rem;
}

.rf-hero-text[b-4r8vx9rdxd] {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 44rem;
    margin: 0 0 0.75rem;
    color: rgb(var(--vh-white-rgb) / 0.92);
}

.rf-hero-note[b-4r8vx9rdxd] {
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

.rf-hero-note-link[b-4r8vx9rdxd] {
    color: var(--vh-color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
    padding-left: 0.25rem;
}

.rf-hero-note-link:hover[b-4r8vx9rdxd] {
    color: var(--vh-blue-20);
}

/* Invite link + share row */

.rf-invite-row[b-4r8vx9rdxd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.rf-invite-input[b-4r8vx9rdxd] {
    display: flex;
    align-items: center;
    /* White pill on the brand gradient — stays white in both themes. */
    background: var(--vh-color-white);
    border-radius: 999px;
    padding: 0.4rem 0.4rem 0.4rem 1.25rem;
    height: 60px;
    flex: 1 1 380px;
    max-width: 36rem;
}

.rf-invite-input input[b-4r8vx9rdxd] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    /* Pinned light-mode --vh-text-body: sits in the white pill on the brand
       gradient, so it must NOT flip on the dark theme. */
    color: var(--vh-fixed-light-body);
    background: var(--vh-transparent);
}

.rf-copy-btn[b-4r8vx9rdxd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: 999px;
    background: var(--vh-primary-hover);
    color: var(--vh-color-white);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.rf-copy-btn:hover[b-4r8vx9rdxd] {
    background: var(--vh-primary);
}

/* Share circles + popover */

.rf-share[b-4r8vx9rdxd] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rf-share-circle[b-4r8vx9rdxd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    /* Translucent white on the brand gradient (replaces the off-token legacy
       cyan var(--vh-referral-cyan)) — same treatment in both themes. */
    background: rgb(var(--vh-white-rgb) / 0.16);
    border: 1px solid rgb(var(--vh-white-rgb) / 0.28);
    color: var(--vh-color-white);
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.rf-share-circle:hover[b-4r8vx9rdxd] {
    background: rgb(var(--vh-white-rgb) / 0.3);
    color: var(--vh-color-white);
}

.rf-share-more[b-4r8vx9rdxd] {
    position: relative;
}

.rf-share-popover[b-4r8vx9rdxd] {
    position: absolute;
    top: 0;
    left: calc(100% + 0.5rem);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-pop);
    overflow: hidden;
    z-index: 30;
    min-width: 8rem;
}

.rf-share-popover a[b-4r8vx9rdxd] {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--vh-text-body);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.rf-share-popover a:hover[b-4r8vx9rdxd] {
    background: var(--vh-gray-10);
}

/* ---------------- How it works ---------------- */

.rf-howworks[b-4r8vx9rdxd] {
    /* Standard app surface card (matches .pf-card / admin cards). */
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    box-shadow: var(--vh-shadow-cobalt);
    padding: 2rem;
    color: var(--vh-text-body);
    scroll-margin-top: 5rem;
}

.rf-howworks-grid[b-4r8vx9rdxd] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
}

.rf-howworks-left[b-4r8vx9rdxd] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.rf-howworks-title[b-4r8vx9rdxd] {
    /* Section-heading scale (matches "Track your referred contacts"). */
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
}

/* The CDN collage carries white doodles drawn for a blue backdrop — a tonal
   panel keeps them visible on the white card (flips dark via --vh-blue-tint). */
.rf-howworks-img[b-4r8vx9rdxd] {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    background: var(--vh-blue-tint);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.rf-switch-row[b-4r8vx9rdxd] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.rf-switch-label[b-4r8vx9rdxd] {
    font-size: 1.05rem;
    font-weight: 700;
    /* On the white card the app accent is blue (the legacy yellow active was
       a contrast device for the blue slab). */
    color: var(--vh-text-muted);
    transition: color 0.3s;
}

.rf-switch-label.rf-active[b-4r8vx9rdxd] {
    color: var(--vh-primary-hover);
}

.rf-switch[b-4r8vx9rdxd] {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: var(--vh-gray-30);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s;
}

.rf-switch.rf-switch-on[b-4r8vx9rdxd] {
    background: var(--vh-primary);
}

.rf-switch-thumb[b-4r8vx9rdxd] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vh-color-white);
    box-shadow: 0 1px 2px rgb(var(--vh-cobalt-shadow-rgb) / 0.2);
    transition: transform 0.25s;
}

.rf-switch-on .rf-switch-thumb[b-4r8vx9rdxd] {
    transform: translateX(22px);
}

.rf-howworks-subtitle[b-4r8vx9rdxd] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 1.5rem;
}

.rf-howworks-cards[b-4r8vx9rdxd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rf-howworks-card[b-4r8vx9rdxd] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.rf-howworks-card:last-child[b-4r8vx9rdxd] {
    margin-bottom: 0;
}

.rf-howworks-icon[b-4r8vx9rdxd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    /* Standard tonal chip: blue tint bg + brand icon. */
    background: var(--vh-blue-tint);
    color: var(--vh-primary-hover);
}

.rf-howworks-card h4[b-4r8vx9rdxd] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 0.4rem;
}

.rf-howworks-card p[b-4r8vx9rdxd] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--vh-text-body);
    margin: 0;
}

/* Employer-only bonus cards */

.rf-bonus-row[b-4r8vx9rdxd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
}

.rf-bonus-card[b-4r8vx9rdxd] {
    flex: 1 1 320px;
    /* Tonal panel inside the surface card (was frosted glass on the slab). */
    background: var(--vh-blue-tint);
    border-radius: var(--vh-radius-card-sm);
    padding: 1.75rem 1.5rem;
    text-align: left;
}

.rf-bonus-card h4[b-4r8vx9rdxd] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 0.5rem;
}

.rf-bonus-card p[b-4r8vx9rdxd] {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--vh-text-body);
    margin: 0;
}

/* ---------------- Track your referred contacts ---------------- */

.rf-track-header[b-4r8vx9rdxd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rf-track-header h2[b-4r8vx9rdxd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
    scroll-margin-top: 5rem;
}

.rf-track-toggle[b-4r8vx9rdxd] {
    display: flex;
    gap: 0.75rem;
}

.rf-toggle-btn[b-4r8vx9rdxd] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: none;
    border-radius: 999px;
    background: var(--vh-transparent);
    color: var(--vh-text-muted);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.rf-toggle-btn:hover[b-4r8vx9rdxd] {
    background: var(--vh-gray-10);
}

.rf-toggle-btn.rf-toggle-active[b-4r8vx9rdxd] {
    background: var(--vh-blue-tint);
    color: var(--vh-primary-hover);
}

/* Table — standard surface card like the admin grids. */

.rf-table[b-4r8vx9rdxd] {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    box-shadow: var(--vh-shadow-cobalt);
    padding: 0.25rem 1.25rem;
}

.rf-table-head[b-4r8vx9rdxd],
.rf-table-row[b-4r8vx9rdxd] {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
    align-items: center;
    min-height: 3rem;
}

.rf-table-head[b-4r8vx9rdxd] {
    border-bottom: 1px solid var(--vh-line);
}

.rf-table-row[b-4r8vx9rdxd] {
    border-bottom: 1px solid var(--vh-line);
    transition: background 0.15s;
}

.rf-table-row:last-child[b-4r8vx9rdxd] {
    border-bottom: none;
}

.rf-table-row:hover[b-4r8vx9rdxd] {
    background: var(--vh-gray-10);
}

.rf-th[b-4r8vx9rdxd] {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: var(--vh-text-heading);
    font-size: 0.95rem;
    background: var(--vh-transparent);
    border: none;
    padding: 0;
    text-align: left;
}

.rf-th-sortable[b-4r8vx9rdxd] {
    cursor: pointer;
}

.rf-sort-arrow[b-4r8vx9rdxd] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

.rf-td[b-4r8vx9rdxd] {
    font-size: 0.875rem;
    color: var(--vh-text-body);
    padding-right: 0.75rem;
}

.rf-truncate[b-4r8vx9rdxd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-table-empty[b-4r8vx9rdxd] {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.rf-table-empty h3[b-4r8vx9rdxd] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0;
}

.rf-table-empty p[b-4r8vx9rdxd] {
    color: var(--vh-text-body);
    margin: 0;
}

.rf-table-loading[b-4r8vx9rdxd] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vh-gray-40);
}

/* Pagination */

.rf-pagination[b-4r8vx9rdxd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.75rem;
}

.rf-page-btn[b-4r8vx9rdxd] {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--vh-gray-30);
    border-radius: 8px;
    background: var(--vh-surface);
    color: var(--vh-text-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}

.rf-page-btn:hover:not(:disabled)[b-4r8vx9rdxd] {
    background: var(--vh-gray-10);
}

.rf-page-btn:disabled[b-4r8vx9rdxd] {
    opacity: 0.4;
    cursor: default;
}

.rf-page-btn.rf-page-active[b-4r8vx9rdxd] {
    background: var(--vh-primary-hover);
    border-color: var(--vh-primary-hover);
    color: var(--vh-color-white);
    font-weight: 700;
}

/* ---------------- Testimonials ---------------- */

.rf-testimonials-title[b-4r8vx9rdxd] {
    /* Left-aligned like every other section heading in the app. */
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 1.5rem;
}

/* Talent variant — 3 quote cards (legacy swiper, 3-up desktop / 1-up mobile;
   CSS columns + snap scroll keep the behaviour without the carousel JS). */

.rf-testimonial-row[b-4r8vx9rdxd] {
    display: flex;
    gap: 1.25rem;
}

.rf-testimonial-card[b-4r8vx9rdxd] {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem;
    /* Standard surface card (was a borderless padded block). */
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-radius-card-sm);
    box-shadow: var(--vh-shadow-cobalt);
}

.rf-quote-img[b-4r8vx9rdxd] {
    width: 44px;
    height: 44px;
    object-fit: contain;
    align-self: flex-start;
}

.rf-testimonial-text[b-4r8vx9rdxd] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--vh-text-body);
    margin: 0;
    flex: 1;
}

.rf-testimonial-author[b-4r8vx9rdxd] {
    display: flex;
    align-items: center;
}

.rf-testimonial-author img[b-4r8vx9rdxd] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.rf-testimonial-author div[b-4r8vx9rdxd] {
    display: flex;
    flex-direction: column;
    margin-left: 1.5rem;
}

.rf-testimonial-author strong[b-4r8vx9rdxd] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vh-text-heading);
}

.rf-testimonial-author span[b-4r8vx9rdxd] {
    font-size: 0.9rem;
    color: var(--vh-text-body);
}

/* Employer variant — case-study videos + tip cards */

.rf-video-grid[b-4r8vx9rdxd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.rf-video[b-4r8vx9rdxd] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    /* Video letterbox — stays dark in both themes (shows behind thumbnails). */
    background: var(--vh-color-black);
}

.rf-video iframe[b-4r8vx9rdxd] {
    width: 100%;
    height: 100%;
    border: 0;
}

.rf-video-light[b-4r8vx9rdxd] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: var(--vh-transparent);
    cursor: pointer;
}

.rf-video-thumb[b-4r8vx9rdxd] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.rf-video-overlay[b-4r8vx9rdxd] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 1rem 1.5rem;
    background: linear-gradient(180deg, rgb(var(--vh-black-rgb) / 0) 40%, rgb(var(--vh-black-rgb) / 0.55) 100%);
}

.rf-video-logo[b-4r8vx9rdxd] {
    height: 5rem;
    width: 10rem;
    object-fit: contain;
}

.rf-video-caption[b-4r8vx9rdxd] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
    color: var(--vh-color-white);
}

.rf-video-caption i[b-4r8vx9rdxd] {
    font-size: 2rem;
    flex: 0 0 auto;
}

.rf-video-caption span[b-4r8vx9rdxd] {
    font-size: 1.15rem;
    font-weight: 700;
    text-align: left;
}

.rf-tip-row[b-4r8vx9rdxd] {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 4rem 0 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.rf-tip-card[b-4r8vx9rdxd] {
    flex: 1 1 0;
    min-width: 260px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 300px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 0.5rem;
    padding: 2rem 0.75rem;
    text-align: center;
}

.rf-tip-card img[b-4r8vx9rdxd] {
    width: 100px;
    height: 24px;
    object-fit: contain;
}

.rf-tip-title[b-4r8vx9rdxd] {
    font-size: 0.85rem;
    color: var(--vh-body);
}

.rf-tip-description[b-4r8vx9rdxd] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--vh-ink);
    margin: 0;
    padding: 0 0.5rem;
}

.rf-tip-owner[b-4r8vx9rdxd] {
    font-size: 0.85rem;
    color: var(--vh-body);
}

.rf-tip-highlight[b-4r8vx9rdxd] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vh-primary-hover);
}

.rf-tip-cta[b-4r8vx9rdxd] {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.rf-tip-cta a[b-4r8vx9rdxd] {
    display: inline-block;
    border: 2px solid var(--vh-primary-hover);
    border-radius: 999px;
    color: var(--vh-primary-hover);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.7rem 1.6rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.rf-tip-cta a:hover[b-4r8vx9rdxd] {
    background: var(--vh-primary-hover);
    color: var(--vh-color-white);
}

/* ---------------- FAQ ---------------- */

.rf-faq[b-4r8vx9rdxd] {
    /* Readable Q&A column — max-width kept but LEFT-anchored (§12), heading
       and tabs left-aligned like every other section. */
    max-width: 880px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.rf-faq h2[b-4r8vx9rdxd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vh-text-heading);
    margin: 0 0 1.25rem;
}

.rf-faq-tabs[b-4r8vx9rdxd] {
    display: flex;
    margin-bottom: 1rem;
}

.rf-faq-tab[b-4r8vx9rdxd] {
    border: none;
    background: var(--vh-transparent);
    border-bottom: 2px solid var(--vh-gray-30);
    color: var(--vh-text-muted);
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.rf-faq-tab.rf-faq-tab-active[b-4r8vx9rdxd] {
    color: var(--vh-primary-hover);
    font-weight: 700;
    border-bottom-color: var(--vh-primary-hover);
}

.rf-faq-list[b-4r8vx9rdxd] {
    width: 100%;
}

.rf-faq-item[b-4r8vx9rdxd] {
    border-bottom: 1px solid var(--vh-line);
}

.rf-faq-question[b-4r8vx9rdxd] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--vh-transparent);
    border: none;
    padding: 1.25rem 0;
    cursor: pointer;
    text-align: left;
}

.rf-faq-question h3[b-4r8vx9rdxd] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vh-black-80);
    margin: 0;
}

.rf-faq-question i[b-4r8vx9rdxd] {
    transition: transform 0.25s ease;
    color: var(--vh-text-body);
}

.rf-faq-chevron-open[b-4r8vx9rdxd] {
    transform: rotate(-180deg);
}

.rf-faq-answer[b-4r8vx9rdxd] {
    padding: 0 0 1.75rem;
    color: var(--vh-text-body);
    font-size: 0.95rem;
    line-height: 1.6;
}

.rf-faq-footnote[b-4r8vx9rdxd] {
    margin: 2rem 0 1rem;
    font-size: 0.85rem;
    color: var(--vh-text-muted);
    align-self: flex-start;
}

/* Links inside MarkupString FAQ answers (::deep — scoped CSS doesn't reach
   raw markup otherwise). */

.rf-faq-answer[b-4r8vx9rdxd]  .rf-link,
.rf-faq-answer[b-4r8vx9rdxd]  a {
    color: var(--vh-primary-hover);
    text-decoration: none;
}

.rf-faq-answer[b-4r8vx9rdxd]  a:hover {
    color: var(--vh-primary);
}

.rf-faq-answer[b-4r8vx9rdxd]  .rf-faq-small {
    font-size: 0.85rem;
    color: var(--vh-text-muted);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
    .rf-howworks-grid[b-4r8vx9rdxd] {
        grid-template-columns: 1fr;
    }

    /* Legacy stacks the quote cards (swiper 1-up) and the videos on mobile. */
    .rf-testimonial-row[b-4r8vx9rdxd] {
        flex-direction: column;
    }

    .rf-video-grid[b-4r8vx9rdxd] {
        grid-template-columns: 1fr;
    }

    .rf-hero[b-4r8vx9rdxd] {
        padding: 1.75rem 1.25rem;
    }

    .rf-hero-title[b-4r8vx9rdxd] {
        font-size: 1.5rem;
    }

    .rf-howworks[b-4r8vx9rdxd] {
        padding: 1.5rem 1.25rem;
    }

    .rf-table-head[b-4r8vx9rdxd],
    .rf-table-row[b-4r8vx9rdxd] {
        grid-template-columns: 1fr 1fr;
    }

    /* Legacy hides Sign up / Status / Reward on mobile. */
    .rf-th-desktop[b-4r8vx9rdxd] {
        display: none;
    }
}
/* /Pages/Referral/Welcome.razor.rz.scp.css */
/* Public welcome-referral landing — rf- prefix, same hero treatment as the
   /referral page (shared values duplicated because Blazor CSS isolation is
   per-component). */

.rf-page[b-1ilei94zw6] {
    max-width: 1200px;
    margin: 0 auto;
    /* Legacy next-platform body font (Tailwind font-sans = Inter). */
    font-family: var(--vh-font-primary);
}

/* Canon heading font (design-system.md §3). */
.rf-page h1[b-1ilei94zw6],
.rf-page h2[b-1ilei94zw6],
.rf-page h3[b-1ilei94zw6],
.rf-page h4[b-1ilei94zw6] {
    font-family: var(--vh-font-heading);
}

.rf-hero[b-1ilei94zw6] {
    background: linear-gradient(135deg, var(--vh-primary) 0%, var(--vh-primary-hover) 55%, var(--vh-blue-sky) 100%);
    padding: 2.5rem 1.5rem 3rem;
    border-radius: var(--vh-radius-card);
}

.rf-hero-card[b-1ilei94zw6] {
    max-width: 1080px;
    margin: 0 auto;
    background: rgb(var(--vh-white-rgb) / 0.12);
    backdrop-filter: blur(21px);
    border: 1px solid rgb(var(--vh-white-rgb) / .24);
    border-radius: 24px;
    box-shadow: var(--vh-shadow-surface);
    padding: 3rem;
    color: var(--vh-color-white);
}

.rf-welcome-card[b-1ilei94zw6] {
    padding: 4rem 4.5rem 5.5rem;
}

.rf-welcome-grid[b-1ilei94zw6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
}

.rf-welcome-copy[b-1ilei94zw6] {
    max-width: 36rem;
}

.rf-welcome-title[b-1ilei94zw6] {
    /* Legacy text-5xl = 2.25rem (next-platform font-sizes.js). */
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--vh-color-white);
    margin: 0 0 1rem;
}

.rf-underline[b-1ilei94zw6] {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.rf-hero-text[b-1ilei94zw6] {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

.rf-join-btn[b-1ilei94zw6] {
    display: inline-block;
    margin-top: 1.5rem;
    border-radius: 120px;
    /* Canon secondary CTA (legacy bg-orange-400 = next-platform var(--vh-orange-400),
       closest token --vh-secondary; hover follows the .vh-btn-secondary
       progression). */
    background: var(--vh-secondary);
    color: var(--vh-color-white);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.8rem 1.6rem;
    text-decoration: none;
    transition: background 0.2s;
}

.rf-join-btn:hover[b-1ilei94zw6] {
    background: var(--vh-secondary-hover);
    color: var(--vh-color-white);
}

/* Avatar + profile card */

.rf-welcome-profile[b-1ilei94zw6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.rf-avatar-ring[b-1ilei94zw6] {
    width: 222px;
    height: 222px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--vh-blue-sky), var(--vh-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-avatar-img[b-1ilei94zw6] {
    width: 205px;
    height: 205px;
    border-radius: 50%;
    object-fit: cover;
}

.rf-avatar-initials[b-1ilei94zw6] {
    width: 205px;
    height: 205px;
    border-radius: 50%;
    background: var(--vh-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: var(--vh-primary-hover);
}

.rf-profile-card[b-1ilei94zw6] {
    /* In normal flow with a negative overlap onto the avatar ring (instead of
       the old absolute top:70% + fixed padding reservation) so a long
       description pushes the layout down rather than overflowing. */
    position: relative;
    margin-top: -4rem;
    width: 236px;
    /* White card on the brand gradient — stays light in both themes, so its
       neutral inks below are pinned to the light-mode token values. */
    background: var(--vh-color-white);
    border-radius: 11px;
    padding: 1rem 1.5rem;
    color: var(--vh-fixed-light-ink); /* pinned light-mode --vh-text-heading */
}

.rf-profile-flag[b-1ilei94zw6] {
    position: absolute;
    top: 0;
    left: -1.75rem;
}

.rf-profile-flag img[b-1ilei94zw6] {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    object-fit: cover;
    clip-path: circle(35%);
}

.rf-profile-globe[b-1ilei94zw6] {
    font-size: 42px;
    color: var(--vh-primary-hover);
}

.rf-profile-name[b-1ilei94zw6] {
    color: var(--vh-primary-hover);
    line-height: 19px;
}

.rf-profile-description[b-1ilei94zw6] {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--vh-fixed-light-body); /* pinned light-mode --vh-text-body (white card, see above) */
    margin: 0;
}

.rf-profile-footer[b-1ilei94zw6] {
    margin: 0;
}

.rf-profile-footer-bold[b-1ilei94zw6] {
    font-size: 0.875rem;
    font-weight: 700;
}

.rf-profile-footer-pill[b-1ilei94zw6] {
    width: fit-content;
    border: 1px solid var(--vh-fixed-light-line); /* pinned light-mode --vh-gray-30 (white card) */
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    font-size: 11px;
    color: var(--vh-fixed-light-muted); /* pinned light-mode --vh-text-muted (white card) */
}

/* Skeletons */

.rf-skel[b-1ilei94zw6] {
    border-radius: 12px;
    background: rgb(var(--vh-white-rgb) / 0.3);
    animation: rf-pulse-b-1ilei94zw6 1.4s ease-in-out infinite;
}

.rf-skel-title[b-1ilei94zw6] {
    height: 3.5rem;
    width: 100%;
    max-width: 32rem;
    margin-bottom: 1rem;
}

.rf-skel-sub[b-1ilei94zw6] {
    height: 2rem;
    width: 80%;
    max-width: 26rem;
}

.rf-skel-avatar[b-1ilei94zw6] {
    height: 205px;
    width: 205px;
    border-radius: 50%;
}

@keyframes rf-pulse-b-1ilei94zw6 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Why Vanhack */

.rf-howworks[b-1ilei94zw6] {
    max-width: 1080px;
    margin: 4rem auto 1rem;
    color: var(--vh-color-white);
}

.rf-howworks-title[b-1ilei94zw6] {
    /* Legacy text-4xl = 2rem (next-platform font-sizes.js). */
    font-size: 2rem;
    font-weight: 700;
    color: var(--vh-color-white);
}

.rf-why-title[b-1ilei94zw6] {
    margin-bottom: 2rem;
}

.rf-howworks-cards[b-1ilei94zw6] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rf-why-cards[b-1ilei94zw6] {
    max-width: 44rem;
}

.rf-howworks-card[b-1ilei94zw6] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.rf-howworks-card:last-child[b-1ilei94zw6] {
    margin-bottom: 0;
}

.rf-howworks-icon[b-1ilei94zw6] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--vh-color-white);
}

.rf-why-icon-green[b-1ilei94zw6] {
    /* Legacy bg-green-200 = next-platform var(--vh-success) = --vh-success. */
    background: var(--vh-success);
}

.rf-why-icon-yellow[b-1ilei94zw6] {
    /* Legacy bg-yellow-300 = next-platform var(--vh-warning-light) ≈ --vh-warning-light. */
    background: var(--vh-warning-light);
}

.rf-howworks-card h4[b-1ilei94zw6] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--vh-color-white);
    margin: 0;
    line-height: 1.4;
}

/* Join community banner */

.rf-join-banner[b-1ilei94zw6] {
    max-width: 1080px;
    margin: 4rem auto;
    border-radius: var(--vh-radius-card-sm);
    /* Legacy JoinCommunityBanner.tsx: from-tertiary-100 via-var(--vh-primary) to-blue-300
       — all three stops have exact tokens. */
    background: linear-gradient(to top right, var(--vh-tertiary-light), var(--vh-primary), var(--vh-primary-hover));
    color: var(--vh-color-white);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 2.5rem;
}

.rf-join-banner p[b-1ilei94zw6] {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.rf-join-btn-outline[b-1ilei94zw6] {
    border: 2px solid var(--vh-color-white);
    /* Verbatim legacy (JoinCommunityBanner.tsx from-[var(--vh-referral-warm-start)] to-[var(--vh-referral-warm-end)]) —
       no --vh-gradient-* token holds this yet; registering it is pending with
       the design-system owner. */
    background: linear-gradient(to right, var(--vh-referral-warm-start), var(--vh-referral-warm-end));
    margin-top: 0;
}

/* Responsive */

@media (max-width: 900px) {
    .rf-welcome-card[b-1ilei94zw6] {
        padding: 2rem 1.5rem;
    }

    .rf-welcome-grid[b-1ilei94zw6] {
        flex-direction: column;
        align-items: center;
    }

    .rf-welcome-title[b-1ilei94zw6] {
        font-size: 1.8rem;
    }

    .rf-join-banner[b-1ilei94zw6] {
        text-align: center;
        justify-content: center;
    }
}
/* /Pages/Sourcing/SourcedCandidates.razor.rz.scp.css */
/* Sourced Candidates — staff sourcing tracker. Cobalt system via tokens +
   utilities (.vh-card / .vh-chip-soft / .vh-pill-tonal-*): white cards in a
   single-column stack like the talent-pool card, each with an applications
   block (company — job title + AI matching score pill). Entrance animation
   rides the outer wrapper so .vh-card-lift's hover translate stays free
   (the split technique from the talent-pool card). */

/* Header: ABP-default page chrome (design-system §12) — PageHeader +
   VhFiltersCard ("Invited by" combo + invited counter in the search row);
   below are only the page's own skins. */

/* invited counter — margin-left:auto pins it to the filter row's right edge */
.sc-total[b-uqhang2gwe] { margin-left: auto; font-size: 14.5px; color: var(--vh-body); }
.sc-total b[b-uqhang2gwe] { color: var(--vh-ink); }

.sc-cards[b-uqhang2gwe] { display: flex; flex-direction: column; gap: 16px; }

.sc-outer[b-uqhang2gwe] {
    opacity: 0;
    transform: translateY(14px);
    animation: sc-rise-b-uqhang2gwe .5s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes sc-rise-b-uqhang2gwe { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .sc-outer[b-uqhang2gwe] { opacity: 1; transform: none; animation: none; }
}

.sc-card[b-uqhang2gwe] {
    padding: 18px;
    font-family: var(--vh-font-primary);
}

/* ---- candidate block ---- */
.sc-main[b-uqhang2gwe] { display: flex; gap: 16px; }

.sc-ava[b-uqhang2gwe] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary-active));
    color: var(--vh-color-white);
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -8px rgb(var(--vh-primary-hover-rgb) / .6);
    cursor: pointer;
}
.sc-ava img[b-uqhang2gwe] { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* realtime presence — green "online now" dot pinned to the avatar circle
   (same treatment as the talent-pool / online-users cards) */
.sc-online-dot[b-uqhang2gwe] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vh-green-500);
    border: 2.5px solid var(--vh-color-white);
    box-shadow: 0 1px 3px rgb(var(--vh-cobalt-shadow-rgb) / .3);
}

.sc-body[b-uqhang2gwe] { flex: 1; min-width: 0; }
.sc-head[b-uqhang2gwe] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sc-name[b-uqhang2gwe] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--vh-ink);
    text-decoration: none;
}
.sc-name:hover[b-uqhang2gwe] { color: var(--vh-primary); }

.sc-eyebrow[b-uqhang2gwe] { margin-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--vh-primary); }

.sc-signals[b-uqhang2gwe] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sc-signals b[b-uqhang2gwe] { color: var(--vh-ink); font-weight: 600; }

.sc-skills[b-uqhang2gwe] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.sc-skill[b-uqhang2gwe] {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: var(--vh-radius-chip);
    white-space: nowrap;
    color: var(--vh-primary-active);
    background: var(--vh-surface-soft);
    border: 1px solid var(--vh-line);
}
.sc-skill-more[b-uqhang2gwe] { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--vh-muted); padding: 4px 6px; }

/* ---- applications block ---- */
.sc-apps[b-uqhang2gwe] { margin-top: 16px; }

.sc-apps-head[b-uqhang2gwe] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sc-apps-head .label[b-uqhang2gwe] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vh-muted);
    white-space: nowrap;
}
.sc-apps-head .rule[b-uqhang2gwe] { flex: 1; height: 1px; background: var(--vh-line); }
.sc-apps-count[b-uqhang2gwe] {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--vh-blue-tint);
    color: var(--vh-primary-active);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sc-apps-empty[b-uqhang2gwe] { font-size: 12.5px; color: var(--vh-muted); font-style: italic; padding: 4px 0; }

/* each row is a link into the job's interview pipeline (new tab) */
.sc-app[b-uqhang2gwe] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    border-bottom: 1px solid var(--vh-surface-soft);
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.sc-app:hover[b-uqhang2gwe] { background: var(--vh-blue-tint); color: inherit; text-decoration: none; }
.sc-app:hover .sc-app-co[b-uqhang2gwe] { color: var(--vh-primary); }
.sc-app:last-child[b-uqhang2gwe] { border-bottom: 0; }
.sc-app-co[b-uqhang2gwe] { font-size: 13px; font-weight: 700; color: var(--vh-ink); white-space: nowrap; }
.sc-app-dash[b-uqhang2gwe] { color: var(--vh-muted); flex: 0 0 auto; }
.sc-app-title[b-uqhang2gwe] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--vh-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* score pill: tonal utility supplies the palette; here only the row layout */
.sc-score[b-uqhang2gwe] { flex: 0 0 auto; min-width: 52px; justify-content: center; }
.sc-score-na[b-uqhang2gwe] { color: var(--vh-muted); background: var(--vh-surface-soft); border-color: var(--vh-line); }

/* ---- empty state (dashed muted panel — the established convention) ---- */
.sc-empty[b-uqhang2gwe] {
    font-size: 13px;
    color: var(--vh-muted);
    background: var(--vh-surface-soft);
    border: 1px dashed var(--vh-line-strong);
    border-radius: var(--vh-radius-card-sm);
    padding: 14px 16px;
}
/* /Pages/TalentPool/Detail.razor.rz.scp.css */
.vhp-public-loading[b-to3u3elrb3],
.vhp-public-state[b-to3u3elrb3] {
    max-width: 760px;
    margin: 4rem auto;
    padding: 2.5rem;
    text-align: center;
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: 1rem;
}

.vhp-public-state h1[b-to3u3elrb3] {
    margin-bottom: .75rem;
    font-size: 1.75rem;
}

.vhp-public-state p[b-to3u3elrb3] {
    margin-bottom: 1.5rem;
    color: var(--vh-text-muted);
}
/* /Pages/TalentPool/Index.razor.rz.scp.css */
.tp-cards[b-ldtv42ir9r] { display: flex; flex-direction: column; gap: 16px; }

/* ---- filters ---- */
.tp-f-label[b-ldtv42ir9r] { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: var(--vh-tailwind-gray-500); margin-bottom: .35rem; }
.tp-inline[b-ldtv42ir9r] { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.tp-twocol[b-ldtv42ir9r] { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; }
/* Sidebar checks stack one per line (user direction 2026-07-08); the modal's
   .tp-inline groups stay inline. */
.tp-check[b-ldtv42ir9r] { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; margin: .15rem 0; }
.tp-inline .tp-check[b-ldtv42ir9r] { display: inline-flex; margin: .1rem 0; }
.tp-check input[b-ldtv42ir9r] { cursor: pointer; }

/* ======================================================================
   Top filter bar (Cobalt) — Skills (must-have) + Years of Experience.
   Mirrors the legacy top bar, simplified to two fields (user direction
   2026-07-08). Same card language as the /jobs board + talent cards.
   ====================================================================== */
.tp-topbar[b-ldtv42ir9r] {
    display: flex; align-items: stretch; gap: 18px;
    background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card);
    box-shadow: var(--vh-shadow-surface);
    padding: 16px 18px; margin-bottom: 16px;
    font-family: var(--vh-font-primary);
}
.tp-topbar-field[b-ldtv42ir9r] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tp-topbar-skills[b-ldtv42ir9r] { flex: 1 1 auto; }
.tp-topbar-yoe[b-ldtv42ir9r] { flex: 0 0 auto; }
.tp-topbar-label[b-ldtv42ir9r] {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--vh-muted); margin: 0;
}
.tp-topbar-divider[b-ldtv42ir9r] { width: 1px; background: var(--vh-line); align-self: stretch; margin: 2px 0; }

/* skills multi-select (chips + inline search; dropdown reuses .lk-menu) */
.tp-ms[b-ldtv42ir9r] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-height: 40px; padding: 5px 8px;
    border: 1px solid var(--vh-line-strong); border-radius: 10px; background: var(--vh-surface);
}
.tp-ms:focus-within[b-ldtv42ir9r] { border-color: var(--vh-primary-hover); box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / .15); }
.tp-ms-chip[b-ldtv42ir9r] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-weight: 600; color: var(--vh-blue-deep);
    background: var(--vh-blue-tint); border: 1px solid var(--vh-tonal-blue-bd);
    padding: 3px 4px 3px 10px; border-radius: 8px; white-space: nowrap;
}
.tp-ms-x[b-ldtv42ir9r] {
    border: 0; background: var(--vh-transparent); color: var(--vh-primary); cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 5px;
}
.tp-ms-x:hover[b-ldtv42ir9r] { background: rgb(var(--vh-primary-hover-rgb) / .18); }
.tp-ms-input[b-ldtv42ir9r] {
    flex: 1; min-width: 120px; border: 0; outline: 0; background: var(--vh-transparent);
    font-size: 14px; color: var(--vh-ink); padding: 4px 2px;
}
.tp-ms-input[b-ldtv42ir9r]::placeholder { color: var(--vh-muted); }

/* years-of-experience pills (multi-select) */
.tp-yoe-pills[b-ldtv42ir9r] { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-yoe-pill[b-ldtv42ir9r] {
    border: 1px solid var(--vh-line-strong); background: var(--vh-surface); color: var(--vh-body);
    font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px;
    cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.tp-yoe-pill:hover[b-ldtv42ir9r] { border-color: var(--vh-primary-hover); color: var(--vh-ink); }
.tp-yoe-pill.on[b-ldtv42ir9r] {
    background: var(--vh-blue-tint); border-color: rgb(var(--vh-primary-hover-rgb) / .5); color: var(--vh-blue-deep);
    box-shadow: inset 0 0 0 1px rgb(var(--vh-primary-hover-rgb) / .3);
}

/* gradient search button */
.tp-topbar-search[b-ldtv42ir9r] {
    flex: 0 0 auto; align-self: flex-end;
    width: 46px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, var(--vh-primary-hover), var(--vh-primary)); color: var(--vh-color-white);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / .7);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.tp-topbar-search:hover[b-ldtv42ir9r] { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgb(var(--vh-primary-hover-rgb) / .85); }
.tp-topbar-search:disabled[b-ldtv42ir9r] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

@media (max-width: 900px) {
    .tp-topbar[b-ldtv42ir9r] { flex-direction: column; align-items: stretch; gap: 14px; }
    .tp-topbar-divider[b-ldtv42ir9r] { display: none; }
    .tp-topbar-search[b-ldtv42ir9r] { align-self: stretch; width: 100%; }
}

/* ---- inline lookup (skills search in modal) ---- */
.lk-wrap[b-ldtv42ir9r] { position: relative; }
.lk-menu[b-ldtv42ir9r] { position: absolute; z-index: 1080; left: 0; right: 0; background: var(--vh-surface); border: 1px solid var(--bs-border-color, var(--vh-tailwind-gray-200)); border-radius: .4rem; box-shadow: 0 6px 20px rgb(var(--vh-black-rgb) / .12); max-height: 220px; overflow: auto; margin-top: 2px; }
.lk-item[b-ldtv42ir9r] { padding: .4rem .6rem; cursor: pointer; font-size: .88rem; }
.lk-item:hover[b-ldtv42ir9r] { background: var(--vh-profile-list-hover); }
.lk-muted[b-ldtv42ir9r] { color: var(--vh-profile-meta-muted); cursor: default; }

/* ---- results toolbar + Choose a List selector ---- */
.tp-results-toolbar[b-ldtv42ir9r] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 4px;
}
.tp-results-actions[b-ldtv42ir9r] {
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
}
.tp-toolbar-action[b-ldtv42ir9r] {
    border: 0;
    background: var(--vh-transparent);
    color: var(--vh-body);
    padding: 7px 0;
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
}
.tp-toolbar-action:hover[b-ldtv42ir9r] { color: var(--vh-primary); }
.tp-toolbar-action:focus-visible[b-ldtv42ir9r] {
    outline: 2px solid var(--vh-primary-hover);
    outline-offset: 3px;
    border-radius: 2px;
}
.tp-toolbar-action:disabled[b-ldtv42ir9r] { color: var(--vh-muted); cursor: default; opacity: .65; }
.tp-counter strong[b-ldtv42ir9r] { color: var(--vh-ink); }
.tp-scope-link[b-ldtv42ir9r] { color: var(--vh-primary); font-weight: 600; cursor: pointer; text-decoration: none; }
.tp-scope-link:hover[b-ldtv42ir9r] { text-decoration: underline; }
.tp-list-group[b-ldtv42ir9r] { border: 1px solid var(--bs-border-color, var(--vh-tailwind-gray-200)); border-radius: .4rem; overflow: hidden; }
.tp-list-item[b-ldtv42ir9r] { padding: .55rem .75rem; cursor: pointer; font-size: .9rem; border-bottom: 1px solid var(--bs-border-color, var(--vh-tailwind-gray-200)); }
.tp-list-item:last-child[b-ldtv42ir9r] { border-bottom: 0; }
.tp-list-item:hover[b-ldtv42ir9r] { background: var(--vh-profile-list-hover); }
.tp-list-author[b-ldtv42ir9r] { color: var(--vh-profile-meta-muted); font-size: .75rem; margin-top: .1rem; }

@media (max-width: 640px) {
    .tp-results-toolbar[b-ldtv42ir9r] {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 12px !important;
    }
    .tp-results-actions[b-ldtv42ir9r] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/TalentPool/LookupMultiSelect.razor.rz.scp.css */
.lk-wrap[b-l7jmehvxko] { position: relative; }
.lk-chips[b-l7jmehvxko] { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
/* Selected chips use the global .vh-chip utility (design-system §6). */
.lk-x[b-l7jmehvxko] { cursor: pointer; font-weight: 700; line-height: 1; }
.lk-input[b-l7jmehvxko] { width: 100%; }
/* Transparent backdrop — closes the menu on outside click (VhDropdown pattern);
   sits above Blazorise modals (z 1055) like the menu itself. */
.lk-backdrop[b-l7jmehvxko] { position: fixed; inset: 0; z-index: 1079; }
.lk-menu[b-l7jmehvxko] { position: absolute; z-index: 1080; left: 0; right: 0; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: .4rem; box-shadow: var(--vh-shadow-pop); max-height: 220px; overflow: auto; margin-top: 2px; }
.lk-item[b-l7jmehvxko] { padding: .4rem .6rem; cursor: pointer; font-size: .88rem; }
.lk-item:hover[b-l7jmehvxko] { background: var(--vh-blue-tint); }
.lk-muted[b-l7jmehvxko] { color: var(--vh-muted); cursor: default; }
/* /Pages/TalentPool/PublicCandidateProfileView.razor.rz.scp.css */
.vhp-public-actionbar[b-kgmmryyn9s] {
    justify-content: flex-start;
}

.vhp-public-locked-action[b-kgmmryyn9s] {
    cursor: not-allowed;
    opacity: .62;
}

.vhp-public-action-lock[b-kgmmryyn9s] {
    font-size: .68rem;
}

.vhp-public-calendly-wrap[b-kgmmryyn9s] {
    width: 100%;
}

.vhp-public-calendly[b-kgmmryyn9s] {
    display: block;
    width: 100%;
    border: 0;
}

@media (max-width: 767.98px) {
    .vhp-public-actionbar .vhp-spacer[b-kgmmryyn9s] {
        display: none;
    }

    .vhp-public-calendly[b-kgmmryyn9s] {
        height: 70vh;
    }
}
/* /Pages/TalentPool/TalentPoolBulkMessageModal.razor.rz.scp.css */
.tp-bulk-title[b-whu8ysd4au] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.tp-bulk-title > span[b-whu8ysd4au] {
    color: var(--vh-muted);
    font-size: .78rem;
}

.tp-bulk-step[b-whu8ysd4au] {
    min-height: 290px;
}

.tp-bulk-text[b-whu8ysd4au] {
    min-height: 230px;
    resize: vertical;
}

.tp-bulk-recipient-controls[b-whu8ysd4au] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vh-line);
}

.tp-bulk-check-all[b-whu8ysd4au] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.tp-bulk-preset[b-whu8ysd4au] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vh-muted);
    font-size: .8rem;
}

.tp-bulk-preset select[b-whu8ysd4au] {
    min-width: 190px;
}

.tp-bulk-custom[b-whu8ysd4au] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.tp-bulk-custom input[b-whu8ysd4au] {
    max-width: 120px;
}

.tp-bulk-list-head[b-whu8ysd4au] {
    display: flex;
    justify-content: space-between;
    padding: 16px 2px 8px;
    color: var(--vh-muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tp-bulk-list[b-whu8ysd4au] {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--vh-line);
    border-radius: 10px;
}

.tp-bulk-candidate[b-whu8ysd4au] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--vh-line);
    cursor: pointer;
}

.tp-bulk-candidate:last-child[b-whu8ysd4au] {
    border-bottom: 0;
}

.tp-bulk-candidate:hover[b-whu8ysd4au] {
    background: var(--vh-surface-soft);
}

.tp-bulk-avatar[b-whu8ysd4au] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--vh-blue-tint);
    color: var(--vh-primary);
    font-size: .7rem;
    font-weight: 700;
}

.tp-bulk-avatar img[b-whu8ysd4au] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-bulk-loading[b-whu8ysd4au] {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vh-muted);
}

.tp-bulk-empty[b-whu8ysd4au] {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--vh-muted);
    text-align: center;
}

.tp-bulk-load-more[b-whu8ysd4au] {
    display: block;
    margin: 8px auto 0;
}

.tp-bulk-total[b-whu8ysd4au] {
    margin-top: 8px;
    color: var(--vh-muted);
    font-size: .75rem;
    text-align: right;
}

.tp-bulk-confirm[b-whu8ysd4au] {
    color: var(--vh-tonal-green-text);
}

.tp-bulk-preview[b-whu8ysd4au] {
    min-height: 200px;
    padding: 16px;
    border: 1px solid var(--vh-line);
    border-radius: 10px;
    background: var(--vh-surface-soft);
    color: var(--vh-body);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .tp-bulk-title[b-whu8ysd4au],
    .tp-bulk-recipient-controls[b-whu8ysd4au],
    .tp-bulk-preset[b-whu8ysd4au] {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-bulk-preset select[b-whu8ysd4au] {
        min-width: 0;
        width: 100%;
    }
}