@import '_content/JobBoardAdmin.Shared/JobBoardAdmin.Shared.bundle.scp.css';

/* /Components/CandidatePreviewCard.razor.rz.scp.css */
/* gh #1322 — candidate preview card. Sits inside the recruiter search pane and
   the application detail. Built on the design-system tokens so it reads as part
   of the existing .cv__ / .cs__ family; the one bold element is the "Who's
   looking" demand panel in layer 2. */

.cpc[b-dn3m125u10] {
    display: flex;
    flex-direction: column;
    gap: var(--jb-space-md, 16px);
    padding: var(--jb-space-lg, 24px);
    background: var(--jb-color-surface-card, #fff);
    border: 1px solid var(--jb-color-border-subtle, #e2e8f0);
    border-radius: var(--jb-radius-lg, 8px);
    box-shadow: var(--jb-shadow-sm);
    color: var(--jb-color-text-primary, #0f172a);
}

/* ---- Layer 1 : scan card ---------------------------------------------- */

.cpc__top[b-dn3m125u10] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--jb-space-sm, 12px);
    align-items: start;
}

.cpc__avatar[b-dn3m125u10] {
    width: 44px;
    height: 44px;
    border-radius: var(--jb-radius-pill, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--jb-text-weight-bold, 700);
    font-size: var(--jb-text-body-sm, 0.875rem);
    color: var(--jb-color-brand-primary, #0E7C7B);
    background: color-mix(in srgb, var(--jb-color-brand-primary, #0E7C7B) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--jb-color-brand-primary, #0E7C7B) 24%, transparent);
}

.cpc__name-row[b-dn3m125u10] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-xs, 8px);
    flex-wrap: wrap;
}

.cpc__name[b-dn3m125u10] {
    font-size: var(--jb-text-heading-sm, 1.125rem);
    font-weight: var(--jb-text-weight-semibold, 600);
    line-height: var(--jb-text-leading-tight, 1.25);
}

.cpc__lock[b-dn3m125u10],
.cpc__unlocked[b-dn3m125u10] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    font-weight: var(--jb-text-weight-semibold, 600);
    padding: 1px 8px;
    border-radius: var(--jb-radius-pill, 9999px);
    white-space: nowrap;
}

.cpc__lock[b-dn3m125u10] {
    color: var(--jb-color-status-warning, #ca8a04);
    background: var(--jb-color-status-warning-bg, #fef9c3);
}

.cpc__unlocked[b-dn3m125u10] {
    color: var(--jb-color-status-success, #16a34a);
    background: var(--jb-color-status-success-bg, #dcfce7);
}

.cpc__headline[b-dn3m125u10] {
    margin-top: 2px;
    font-size: var(--jb-text-body-sm, 0.875rem);
    color: var(--jb-color-text-secondary, #475569);
}

.cpc__meta[b-dn3m125u10] {
    margin-top: var(--jb-space-2xs, 4px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--jb-space-xs, 8px);
    font-size: var(--jb-text-body-xs, 0.75rem);
    color: var(--jb-color-text-muted, #64748b);
}

.cpc__meta-item[b-dn3m125u10] { display: inline-flex; align-items: center; gap: 4px; }
.cpc__meta-updated[b-dn3m125u10] { margin-left: auto; }

/* Facts — compact label/value rows */
.cpc__facts[b-dn3m125u10] {
    display: flex;
    flex-direction: column;
    gap: var(--jb-space-xs, 8px);
    margin: 0;
    padding-top: var(--jb-space-sm, 12px);
    border-top: 1px solid var(--jb-color-border-subtle, #e2e8f0);
}

.cpc__fact[b-dn3m125u10] {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--jb-space-sm, 12px);
    align-items: baseline;
}

.cpc__fact dt[b-dn3m125u10] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--jb-color-text-muted, #64748b);
    font-weight: var(--jb-text-weight-medium, 500);
}

.cpc__fact dd[b-dn3m125u10] {
    margin: 0;
    font-size: var(--jb-text-body-sm, 0.875rem);
    color: var(--jb-color-text-primary, #0f172a);
}

.cpc__chips[b-dn3m125u10] { display: flex; flex-wrap: wrap; gap: 6px; }

.cpc__chip[b-dn3m125u10] {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: var(--jb-radius-pill, 9999px);
    font-size: var(--jb-text-body-xs, 0.75rem);
    background: var(--jb-color-surface-sunken, #f1f5f9);
    border: 1px solid var(--jb-color-border-subtle, #e2e8f0);
    color: var(--jb-color-text-secondary, #475569);
}

.cpc__trail[b-dn3m125u10] { display: flex; flex-direction: column; gap: 4px; }

.cpc__trail-item[b-dn3m125u10] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--jb-text-body-sm, 0.875rem);
}

.cpc__trail-role[b-dn3m125u10] { font-weight: var(--jb-text-weight-medium, 500); }
.cpc__trail-at[b-dn3m125u10] { color: var(--jb-color-text-secondary, #475569); }
.cpc__trail-years[b-dn3m125u10] {
    margin-left: auto;
    font-size: var(--jb-text-body-xs, 0.75rem);
    color: var(--jb-color-text-muted, #64748b);
    white-space: nowrap;
}

/* Contact */
.cpc__contact[b-dn3m125u10] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--jb-space-sm, 12px);
    border-radius: var(--jb-radius-md, 4px);
    background: var(--jb-color-surface-sunken, #f1f5f9);
}

.cpc__contact-row[b-dn3m125u10] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--jb-text-body-sm, 0.875rem);
    color: var(--jb-color-text-primary, #0f172a);
    text-decoration: none;
}
a.cpc__contact-row:hover[b-dn3m125u10] { color: var(--jb-color-brand-primary, #0E7C7B); text-decoration: underline; }

.cpc__contact--masked .cpc__contact-row[b-dn3m125u10] { color: var(--jb-color-text-muted, #64748b); letter-spacing: 0.06em; }
.cpc__contact-hint[b-dn3m125u10] { font-style: italic; letter-spacing: normal; font-size: var(--jb-text-body-xs, 0.75rem); }

/* Actions */
.cpc__actions[b-dn3m125u10] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-xs, 8px);
}

.cpc__btn[b-dn3m125u10] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: var(--jb-text-body-sm, 0.875rem);
    font-weight: var(--jb-text-weight-medium, 500);
    padding: 7px 14px;
    border-radius: var(--jb-radius-md, 4px);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.cpc__btn--primary[b-dn3m125u10] {
    background: var(--jb-color-brand-primary, #0E7C7B);
    color: #fff;
}
.cpc__btn--primary:hover[b-dn3m125u10] { background: var(--jb-color-brand-primary-hover, #0B6362); }
.cpc__btn--primary:disabled[b-dn3m125u10] { opacity: 0.6; cursor: default; }

.cpc__btn--ghost[b-dn3m125u10] {
    background: transparent;
    color: var(--jb-color-text-secondary, #475569);
    border-color: var(--jb-color-border-default, #cbd5e1);
}
.cpc__btn--ghost:hover[b-dn3m125u10] { background: var(--jb-color-surface-sunken, #f1f5f9); }

.cpc__expand[b-dn3m125u10] { margin-left: auto; }
.cpc__expand-chevron[b-dn3m125u10] { transition: transform 160ms ease; }
.cpc__expand-chevron--up[b-dn3m125u10] { transform: rotate(180deg); }

.cpc__btn:focus-visible[b-dn3m125u10] {
    outline: 2px solid var(--jb-color-focus, #FFD23F);
    outline-offset: 2px;
}

/* ---- Layer 2 : deep panel (animated reveal) --------------------------- */

.cpc__deep[b-dn3m125u10] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms ease;
}
.cpc__deep--open[b-dn3m125u10] { grid-template-rows: 1fr; }

.cpc__deep-inner[b-dn3m125u10] {
    overflow: hidden;
    min-height: 0;
}
.cpc__deep--open .cpc__deep-inner[b-dn3m125u10] {
    display: flex;
    flex-direction: column;
    gap: var(--jb-space-md, 16px);
    padding-top: var(--jb-space-md, 16px);
    border-top: 1px solid var(--jb-color-border-subtle, #e2e8f0);
}

/* SIGNATURE — "Who's looking" demand panel */
.cpc__demand[b-dn3m125u10] {
    padding: var(--jb-space-md, 16px);
    border-radius: var(--jb-radius-lg, 8px);
    background: var(--jb-color-surface-sunken, #f1f5f9);
    border: 1px solid var(--jb-color-border-subtle, #e2e8f0);
}

.cpc__demand-head[b-dn3m125u10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--jb-space-sm, 12px);
}

.cpc__demand-title[b-dn3m125u10] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--jb-text-weight-semibold, 600);
    color: var(--jb-color-text-secondary, #475569);
}

.cpc__demand-flag[b-dn3m125u10] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    font-weight: var(--jb-text-weight-semibold, 600);
    color: var(--jb-color-brand-accent-hover, #D97E07);
    background: color-mix(in srgb, var(--jb-color-brand-accent, #F59E0B) 16%, transparent);
    padding: 1px 8px;
    border-radius: var(--jb-radius-pill, 9999px);
}

.cpc__demand-empty[b-dn3m125u10] {
    margin: 0;
    font-size: var(--jb-text-body-sm, 0.875rem);
    color: var(--jb-color-text-muted, #64748b);
}

.cpc__demand-body[b-dn3m125u10] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--jb-space-lg, 24px);
    align-items: center;
}

.cpc__demand-figure[b-dn3m125u10] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.cpc__demand-total[b-dn3m125u10] {
    font-size: 2rem;
    font-weight: var(--jb-text-weight-bold, 700);
    color: var(--jb-color-brand-primary, #0E7C7B);
    font-variant-numeric: tabular-nums;
}

.cpc__demand-total-label[b-dn3m125u10] {
    margin-top: 4px;
    font-size: var(--jb-text-body-xs, 0.75rem);
    color: var(--jb-color-text-muted, #64748b);
}

.cpc__demand-split[b-dn3m125u10] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.cpc__demand-bar[b-dn3m125u10] {
    display: flex;
    height: 10px;
    border-radius: var(--jb-radius-pill, 9999px);
    overflow: hidden;
    background: var(--jb-color-border-subtle, #e2e8f0);
}
.cpc__demand-bar-team[b-dn3m125u10] { background: var(--jb-color-brand-primary, #0E7C7B); }
.cpc__demand-bar-others[b-dn3m125u10] { background: var(--jb-color-brand-accent, #F59E0B); }

.cpc__demand-legend[b-dn3m125u10] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jb-space-md, 16px);
    font-size: var(--jb-text-body-xs, 0.75rem);
    color: var(--jb-color-text-secondary, #475569);
}
.cpc__demand-leg[b-dn3m125u10] { display: inline-flex; align-items: center; gap: 6px; }

.cpc__dot[b-dn3m125u10] { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cpc__dot--team[b-dn3m125u10] { background: var(--jb-color-brand-primary, #0E7C7B); }
.cpc__dot--others[b-dn3m125u10] { background: var(--jb-color-brand-accent, #F59E0B); }

.cpc__demand-you[b-dn3m125u10] {
    margin-top: var(--jb-space-sm, 12px);
    padding-top: var(--jb-space-sm, 12px);
    border-top: 1px solid var(--jb-color-border-subtle, #e2e8f0);
    font-size: var(--jb-text-body-xs, 0.75rem);
    color: var(--jb-color-text-muted, #64748b);
}

/* Stats grid */
.cpc__stats[b-dn3m125u10] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--jb-space-sm, 12px);
    margin: 0;
}

.cpc__stat[b-dn3m125u10] { display: flex; flex-direction: column; gap: 2px; }
.cpc__stat dt[b-dn3m125u10] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--jb-color-text-muted, #64748b);
}
.cpc__stat dd[b-dn3m125u10] {
    margin: 0;
    font-size: var(--jb-text-body-sm, 0.875rem);
    font-weight: var(--jb-text-weight-medium, 500);
    color: var(--jb-color-text-primary, #0f172a);
}

/* Qualifications */
.cpc__quals-head[b-dn3m125u10] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--jb-color-text-muted, #64748b);
    margin-bottom: 6px;
}
.cpc__quals-list[b-dn3m125u10] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cpc__qual[b-dn3m125u10] {
    display: flex;
    align-items: baseline;
    gap: var(--jb-space-sm, 12px);
    font-size: var(--jb-text-body-sm, 0.875rem);
}
.cpc__qual-main[b-dn3m125u10] { flex: 1; }
.cpc__qual-year[b-dn3m125u10] { color: var(--jb-color-text-muted, #64748b); font-size: var(--jb-text-body-xs, 0.75rem); }

/* Skeleton */
.cpc--skeleton[b-dn3m125u10] { flex-direction: row; align-items: center; gap: var(--jb-space-sm, 12px); }
.cpc__sk[b-dn3m125u10] { background: var(--jb-color-surface-sunken, #f1f5f9); border-radius: var(--jb-radius-md, 4px); }
.cpc__sk--avatar[b-dn3m125u10] { width: 44px; height: 44px; border-radius: 50%; }
.cpc__sk-lines[b-dn3m125u10] { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cpc__sk--line[b-dn3m125u10] { height: 12px; }
.cpc__sk--short[b-dn3m125u10] { width: 60%; }

/* Quality floor */
@media (max-width: 520px) {
    .cpc__stats[b-dn3m125u10] { grid-template-columns: 1fr; }
    .cpc__demand-body[b-dn3m125u10] { grid-template-columns: 1fr; gap: var(--jb-space-sm, 12px); }
}

@media (prefers-reduced-motion: reduce) {
    .cpc__deep[b-dn3m125u10] { transition: none; }
    .cpc__expand-chevron[b-dn3m125u10] { transition: none; }
}
/* /Components/DataTable.razor.rz.scp.css */
.jb-datatable[b-r1yjp7hp04] {
    overflow-x: auto;
    background: var(--jb-color-surface-card);
}

.jb-datatable__table[b-r1yjp7hp04] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--jb-text-body-sm);
}

.jb-datatable__table[b-r1yjp7hp04]  th {
    text-align: left;
    padding: var(--jb-space-sm) var(--jb-space-md);
    background: var(--jb-color-surface-sunken);
    color: var(--jb-color-text-secondary);
    font-weight: var(--jb-text-weight-semibold);
    text-transform: uppercase;
    font-size: var(--jb-text-body-xs);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--jb-color-border-default);
    position: sticky;
    top: 0;
    z-index: var(--jb-z-sticky);
}

.jb-datatable__table[b-r1yjp7hp04]  td {
    padding: var(--jb-space-sm) var(--jb-space-md);
    border-bottom: 1px solid var(--jb-color-border-subtle);
    color: var(--jb-color-text-primary);
}

.jb-datatable__row--clickable[b-r1yjp7hp04],
.jb-datatable__row--clickable[b-r1yjp7hp04]  td,
.jb-datatable__row--clickable[b-r1yjp7hp04]  td * {
    cursor: pointer;
}
.jb-datatable__row--clickable:hover[b-r1yjp7hp04] {
    background: var(--jb-color-surface-hover);
}

.jb-datatable__empty[b-r1yjp7hp04] {
    text-align: center;
    padding: var(--jb-space-2xl) !important;
    color: var(--jb-color-text-muted);
}
/* /Components/NotificationBell.razor.rz.scp.css */
.bell[b-oq3dnp5ezz] {
    position: relative;
    display: inline-flex;
}

/* Transparent click-outside catcher, below the panel. Mirrors UserMenu. */
.bell__backdrop[b-oq3dnp5ezz] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: var(--jb-z-overlay, 300);
}

.bell__trigger[b-oq3dnp5ezz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--jb-color-text-muted, #6b7280);
    cursor: pointer;
    transition: box-shadow 120ms ease, color 120ms ease;
}

.bell__trigger:hover[b-oq3dnp5ezz],
.bell__trigger:focus-visible[b-oq3dnp5ezz] {
    outline: none;
    color: var(--jb-color-text, #111827);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jb-color-brand-primary) 25%, transparent);
}

.bell__icon[b-oq3dnp5ezz] {
    width: 20px;
    height: 20px;
}

.bell__badge[b-oq3dnp5ezz] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--jb-color-status-danger, #dc2626);
    color: #ffffff;
    font-size: 10px;
    font-weight: var(--jb-text-weight-semibold, 600);
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--jb-color-surface, #ffffff);
}

.bell__panel[b-oq3dnp5ezz] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--jb-color-surface, #ffffff);
    border: 1px solid var(--jb-color-border-subtle, #e5e7eb);
    border-radius: var(--jb-radius-md, 8px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 6px 0;
    z-index: 1000;
    animation: bell-fade-b-oq3dnp5ezz 120ms ease;
}

@keyframes bell-fade-b-oq3dnp5ezz {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bell__head[b-oq3dnp5ezz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--jb-color-border-subtle, #e5e7eb);
    margin-bottom: 6px;
}

.bell__title[b-oq3dnp5ezz] {
    font-size: 13px;
    font-weight: var(--jb-text-weight-semibold, 600);
    color: var(--jb-color-text, #111827);
}

.bell__markall[b-oq3dnp5ezz] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--jb-color-brand-primary, #0E7C7B);
    cursor: pointer;
}

.bell__markall:hover[b-oq3dnp5ezz] { text-decoration: underline; }

.bell__empty[b-oq3dnp5ezz] {
    padding: 18px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--jb-color-text-muted, #6b7280);
}

.bell__list[b-oq3dnp5ezz] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.bell__item[b-oq3dnp5ezz] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}

.bell__item:hover[b-oq3dnp5ezz],
.bell__item:focus-visible[b-oq3dnp5ezz] {
    background: var(--jb-color-surface-alt, #f3f4f6);
    outline: none;
}

.bell__item-dot[b-oq3dnp5ezz] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--jb-color-brand-primary, #0E7C7B);
}

.bell__item-body[b-oq3dnp5ezz] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bell__item-title[b-oq3dnp5ezz] {
    font-size: 13px;
    font-weight: var(--jb-text-weight-semibold, 600);
    color: var(--jb-color-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bell__item-snippet[b-oq3dnp5ezz] {
    font-size: 12px;
    color: var(--jb-color-text-muted, #6b7280);
}

.bell__item-time[b-oq3dnp5ezz] {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--jb-color-text-muted, #9ca3af);
    white-space: nowrap;
}
/* /Components/OnlineMatchAlerts.razor.rz.scp.css */
.oma[b-69wll9e136] {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.oma__toast[b-69wll9e136] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jb-space-md);
    padding: var(--jb-space-sm) var(--jb-space-md);
    background: var(--jb-color-surface-card, #fff);
    border: 1px solid var(--jb-color-border-subtle, #e5e7eb);
    border-left: 4px solid var(--jb-color-success, #16a34a);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.oma__body[b-69wll9e136] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.oma__body p[b-69wll9e136] {
    margin: 2px 0 0;
}

.oma__dot[b-69wll9e136] {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--jb-color-success, #16a34a);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .5);
    animation: oma-pulse-b-69wll9e136 1.8s infinite;
}

@keyframes oma-pulse-b-69wll9e136 {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
/* /Components/ProfileViewsCard.razor.rz.scp.css */
/* gh #1676 — candidate "Who's viewed your profile" widget. Reuses the
   recruiter demand-panel language (teal = direct employers, amber = agencies)
   on the candidate side, built from design-system tokens. */

.pvc[b-eozuaysp7y] { display: flex; flex-direction: column; gap: var(--jb-space-lg, 24px); }

.pvc__empty[b-eozuaysp7y] { margin: 0; }

.pvc__top[b-eozuaysp7y] { display: flex; align-items: baseline; gap: var(--jb-space-sm, 12px); }

.pvc__total[b-eozuaysp7y] { display: flex; align-items: baseline; gap: var(--jb-space-xs, 8px); }
.pvc__total-num[b-eozuaysp7y] {
    font-size: 2.25rem;
    font-weight: var(--jb-text-weight-bold, 700);
    color: var(--jb-color-brand-primary, #0E7C7B);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pvc__total-label[b-eozuaysp7y] { font-size: var(--jb-text-body-sm, 0.875rem); color: var(--jb-color-text-muted, #64748b); }

/* Split bar + cells */
.pvc__split[b-eozuaysp7y] { display: flex; flex-direction: column; gap: var(--jb-space-md, 16px); }

.pvc__bar[b-eozuaysp7y] {
    display: flex;
    height: 12px;
    border-radius: var(--jb-radius-pill, 9999px);
    overflow: hidden;
    background: var(--jb-color-border-subtle, #e2e8f0);
}
.pvc__bar-companies[b-eozuaysp7y] { background: var(--jb-color-brand-primary, #0E7C7B); }
.pvc__bar-agencies[b-eozuaysp7y] { background: var(--jb-color-brand-accent, #F59E0B); }

.pvc__split-cells[b-eozuaysp7y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--jb-space-md, 16px);
}

.pvc__cell[b-eozuaysp7y] { display: flex; gap: var(--jb-space-xs, 8px); align-items: flex-start; }
.pvc__dot[b-eozuaysp7y] { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.pvc__dot--companies[b-eozuaysp7y] { background: var(--jb-color-brand-primary, #0E7C7B); }
.pvc__dot--agencies[b-eozuaysp7y] { background: var(--jb-color-brand-accent, #F59E0B); }

.pvc__cell-num[b-eozuaysp7y] {
    font-size: var(--jb-text-heading-sm, 1.125rem);
    font-weight: var(--jb-text-weight-semibold, 600);
    color: var(--jb-color-text-primary, #0f172a);
    line-height: 1.1;
}
.pvc__cell-label[b-eozuaysp7y] { font-size: var(--jb-text-body-sm, 0.875rem); color: var(--jb-color-text-secondary, #475569); }
.pvc__cell-sub[b-eozuaysp7y] { font-size: var(--jb-text-body-xs, 0.75rem); color: var(--jb-color-text-muted, #64748b); }

/* Recency trend */
.pvc__trend[b-eozuaysp7y] { display: flex; flex-direction: column; gap: var(--jb-space-xs, 8px); }
.pvc__trend-head[b-eozuaysp7y] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--jb-text-weight-semibold, 600);
    color: var(--jb-color-text-muted, #64748b);
}
.pvc__buckets[b-eozuaysp7y] { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--jb-space-xs, 8px); }
.pvc__bucket[b-eozuaysp7y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--jb-space-sm, 12px);
    background: var(--jb-color-surface-sunken, #f1f5f9);
    border-radius: var(--jb-radius-md, 4px);
    text-align: center;
}
.pvc__bucket-num[b-eozuaysp7y] {
    font-size: var(--jb-text-heading-sm, 1.125rem);
    font-weight: var(--jb-text-weight-bold, 700);
    color: var(--jb-color-text-primary, #0f172a);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pvc__bucket-label[b-eozuaysp7y] {
    font-size: var(--jb-text-body-xs, 0.75rem);
    color: var(--jb-color-text-muted, #64748b);
}

@media (max-width: 520px) {
    .pvc__buckets[b-eozuaysp7y] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/SponsoredBanner.razor.rz.scp.css */
.sponsored[b-qbuabmc85m] {
    max-width: 1200px;
    margin: var(--jb-space-xl) auto;
    padding: 0 var(--jb-space-xl);
}

.sponsored__link[b-qbuabmc85m] {
    position: relative;
    display: block;
    border-radius: var(--jb-radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transition: transform 200ms var(--jb-motion-easing-standard),
                box-shadow 200ms var(--jb-motion-easing-standard);
}
.sponsored__link:hover[b-qbuabmc85m] {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.sponsored__img[b-qbuabmc85m] {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.sponsored__tag[b-qbuabmc85m] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--jb-radius-pill);
    backdrop-filter: blur(2px);
}
/* /Components/UserMenu.razor.rz.scp.css */
.user-menu[b-w8jwji74h5] {
    position: relative;
    display: inline-flex;
}

/* Click-outside backdrop. Fully transparent — its job is just to
   catch any click outside the panel and close the menu. Must sit
   below the panel (which sits above this) so the panel is still
   interactive while the rest of the page is consumed. */
.user-menu__backdrop[b-w8jwji74h5] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: var(--jb-z-overlay, 300);
}

.user-menu__trigger[b-w8jwji74h5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: box-shadow 120ms ease;
}

.user-menu__trigger:hover[b-w8jwji74h5],
.user-menu__trigger:focus-visible[b-w8jwji74h5] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jb-color-brand-primary) 25%, transparent);
}

.user-menu__avatar[b-w8jwji74h5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--jb-color-brand-primary, #0E7C7B);
    color: #ffffff;
    font-size: 13px;
    font-weight: var(--jb-text-weight-semibold, 600);
    letter-spacing: 0.5px;
    user-select: none;
}

.user-menu__panel[b-w8jwji74h5] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--jb-color-surface, #ffffff);
    border: 1px solid var(--jb-color-border-subtle, #e5e7eb);
    border-radius: var(--jb-radius-md, 8px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 6px 0;
    z-index: 1000;
    animation: user-menu-fade-b-w8jwji74h5 120ms ease;
}

@keyframes user-menu-fade-b-w8jwji74h5 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.user-menu__identity[b-w8jwji74h5] {
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--jb-color-border-subtle, #e5e7eb);
    margin-bottom: 6px;
}

.user-menu__identity-name[b-w8jwji74h5] {
    font-size: 13px;
    font-weight: var(--jb-text-weight-semibold, 600);
    color: var(--jb-color-text, #111827);
    word-break: break-all;
}

.user-menu__identity-role[b-w8jwji74h5] {
    font-size: 11px;
    color: var(--jb-color-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.user-menu__item[b-w8jwji74h5] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    font-size: 13px;
    color: var(--jb-color-text, #111827);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.user-menu__item:hover[b-w8jwji74h5],
.user-menu__item:focus-visible[b-w8jwji74h5] {
    background: var(--jb-color-surface-alt, #f3f4f6);
    outline: none;
}

.user-menu__theme-row[b-w8jwji74h5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--jb-color-border-subtle);
    border-bottom: 1px solid var(--jb-color-border-subtle);
    margin: 4px 0;
}

.user-menu__theme-label[b-w8jwji74h5] {
    font-size: 13px;
    /* Match the surrounding menu items (text-primary), not the muted
       secondary tone — the row reads as a regular menu entry that
       happens to host the toggle, not a sub-section caption. */
    color: var(--jb-color-text-primary, #111827);
}

.user-menu__item--danger[b-w8jwji74h5] {
    color: var(--jb-color-status-danger, #b91c1c);
}

.user-menu__item--danger:hover[b-w8jwji74h5] {
    background: color-mix(in srgb, var(--jb-color-status-danger, #b91c1c) 8%, transparent);
}
/* /Layout/AuthenticatedShellLayout.razor.rz.scp.css */
.shell[b-y46vh1etb3] {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.shell__sidebar[b-y46vh1etb3] {
    background: var(--jb-color-neutral-900);
    color: var(--jb-color-text-inverse);
    border-right: 1px solid var(--jb-color-border-default);
    position: relative;
}

/* Role-specific sidebar accent stripe */
.shell--admin .shell__sidebar[b-y46vh1etb3]::after { background: var(--jb-color-brand-primary); }
.shell--sales .shell__sidebar[b-y46vh1etb3]::after { background: #6366F1; /* indigo */ }
.shell--employer .shell__sidebar[b-y46vh1etb3]::after { background: #0284C7; /* sky */ }
.shell--agency .shell__sidebar[b-y46vh1etb3]::after { background: #DC2626; /* red */ }

.shell__sidebar[b-y46vh1etb3]::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3px;
}

.shell__main[b-y46vh1etb3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shell__topbar[b-y46vh1etb3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--jb-space-lg);
    background: var(--jb-color-surface-card);
    border-bottom: 1px solid var(--jb-color-border-subtle);
    box-shadow: var(--jb-shadow-sm);
    position: sticky;
    top: 0;
    /* See CandidatePortalLayout — bump above --jb-z-sticky so the
       UserMenu dropdown wins over in-page sticky DataTable heads. */
    z-index: var(--jb-z-popover);
}

.shell__area-label[b-y46vh1etb3] {
    font-size: var(--jb-text-body-sm);
    color: var(--jb-color-text-secondary);
    font-weight: var(--jb-text-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shell__user[b-y46vh1etb3] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-md);
}

.shell__user-email[b-y46vh1etb3] {
    font-size: var(--jb-text-body-sm);
    color: var(--jb-color-text-secondary);
}

.shell__content[b-y46vh1etb3] {
    flex: 1;
    padding: var(--jb-space-xl);
    max-width: 100%;
    overflow-x: auto;
}
/* tabindex=-1 is for programmatic focus from the skip-link only —
   don't show a focus ring around the whole content area when it
   receives focus from <a href="#main-content">. */
.shell__content:focus[b-y46vh1etb3] { outline: none; }

/* Skip-to-content link styling moved into the <SkipToMain/> component. */

/* Hamburger button — visible on every viewport. On mobile it toggles
   the off-canvas sidebar; on desktop it collapses the sidebar so the
   recruiter can give a dense page (e.g. CV search) the full width.
   Three-stripe CSS icon so we don't need an icon library. */
.shell__hamburger[b-y46vh1etb3] {
    display: inline-flex;
    background: transparent;
    border: 0;
    padding: 8px;
    margin-right: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.shell__hamburger:hover[b-y46vh1etb3] { background: var(--jb-color-surface-sunken, #f3f4f6); border-radius: 6px; }
.shell__hamburger span[b-y46vh1etb3] {
    display: block;
    height: 2px;
    width: 22px;
    background: var(--jb-color-text-primary, #111);
    border-radius: 1px;
    transition: transform 200ms, opacity 200ms;
}

.shell__backdrop[b-y46vh1etb3] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 90;
}

/* Desktop-only collapse — squeeze the sidebar to zero width so the
   content area gets the whole row. The grid template is the only thing
   that changes; the sidebar element keeps its layout role and slides
   back in when the user toggles again. Transition runs on both columns
   so the swap is smooth either direction. */
.shell[b-y46vh1etb3] { transition: grid-template-columns 200ms ease; }
.shell--collapsed[b-y46vh1etb3] { grid-template-columns: 0 1fr; }
.shell--collapsed .shell__sidebar[b-y46vh1etb3] { overflow: hidden; visibility: hidden; }

@media (max-width: 768px) {
    .shell[b-y46vh1etb3] { grid-template-columns: 1fr; }
    /* On mobile the desktop-collapse class is meaningless — the sidebar is
       off-canvas regardless. Reset visibility so toggling the desktop
       state via the same hamburger doesn't accidentally hide the
       off-canvas drawer. */
    .shell--collapsed .shell__sidebar[b-y46vh1etb3] { visibility: visible; }

    /* Off-canvas sidebar — lives offscreen to the left by default, slides
       in when .shell--menu-open is applied. Fixed positioning so it floats
       above content without relayout. */
    .shell__sidebar[b-y46vh1etb3] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        z-index: 100;
        overflow-y: auto;
    }
    .shell--menu-open .shell__sidebar[b-y46vh1etb3] { transform: translateX(0); }
    .shell--menu-open .shell__backdrop[b-y46vh1etb3] { display: block; }
}
/* /Layout/CandidatePortalLayout.razor.rz.scp.css */
.shell[b-02ynvq4zy5] {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.shell__sidebar[b-02ynvq4zy5] {
    background: var(--jb-color-neutral-900);
    color: var(--jb-color-text-inverse);
    border-right: 1px solid var(--jb-color-border-default);
    position: relative;
}

/* Role-specific sidebar accent stripe */
.shell--admin .shell__sidebar[b-02ynvq4zy5]::after { background: var(--jb-color-brand-primary); }
.shell--sales .shell__sidebar[b-02ynvq4zy5]::after { background: #6366F1; /* indigo */ }
.shell--employer .shell__sidebar[b-02ynvq4zy5]::after { background: #0284C7; /* sky */ }
.shell--agency .shell__sidebar[b-02ynvq4zy5]::after { background: #DC2626; /* red */ }
.shell--candidate .shell__sidebar[b-02ynvq4zy5]::after { background: var(--jb-color-brand-primary); }

.shell__sidebar[b-02ynvq4zy5]::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3px;
}

.shell__main[b-02ynvq4zy5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shell__topbar[b-02ynvq4zy5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--jb-space-lg);
    background: var(--jb-color-surface-card);
    border-bottom: 1px solid var(--jb-color-border-subtle);
    box-shadow: var(--jb-shadow-sm);
    position: sticky;
    top: 0;
    /* Above any in-page sticky header (DataTable, etc.). The user-menu
       dropdown lives inside this stacking context — without a bump
       above --jb-z-sticky, the DataTable's sticky thead and the menu
       panel both end up at z-index 200 globally and the later DOM
       element wins, occluding "Sign out". */
    z-index: var(--jb-z-popover);
}

.shell__area-label[b-02ynvq4zy5] {
    font-size: var(--jb-text-body-sm);
    color: var(--jb-color-text-secondary);
    font-weight: var(--jb-text-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shell__user[b-02ynvq4zy5] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-md);
}

.shell__user-email[b-02ynvq4zy5] {
    font-size: var(--jb-text-body-sm);
    color: var(--jb-color-text-secondary);
}

.shell__content[b-02ynvq4zy5] {
    flex: 1;
    padding: var(--jb-space-xl);
    max-width: 100%;
    overflow-x: auto;
}

/* Hamburger button — desktop-hidden, shown <768px. Three-stripe CSS icon
   so we don't need an icon library. */
.shell__hamburger[b-02ynvq4zy5] {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    margin-right: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.shell__hamburger span[b-02ynvq4zy5] {
    display: block;
    height: 2px;
    width: 22px;
    background: var(--jb-color-text-primary, #111);
    border-radius: 1px;
    transition: transform 200ms, opacity 200ms;
}

.shell__backdrop[b-02ynvq4zy5] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 90;
}

@media (max-width: 768px) {
    .shell[b-02ynvq4zy5] { grid-template-columns: 1fr; }

    /* Off-canvas sidebar — lives offscreen to the left by default, slides
       in when .shell--menu-open is applied. Fixed positioning so it floats
       above content without relayout. */
    .shell__sidebar[b-02ynvq4zy5] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        z-index: 100;
        overflow-y: auto;
    }
    .shell--menu-open .shell__sidebar[b-02ynvq4zy5] { transform: translateX(0); }
    .shell--menu-open .shell__backdrop[b-02ynvq4zy5] { display: block; }

    .shell__hamburger[b-02ynvq4zy5] { display: inline-flex; }
}
/* /Layout/EmployerPortalLayout.razor.rz.scp.css */
.shell[b-plhg6jar6p] {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.shell__sidebar[b-plhg6jar6p] {
    background: var(--jb-color-neutral-900);
    color: var(--jb-color-text-inverse);
    border-right: 1px solid var(--jb-color-border-default);
    position: relative;
}

/* Role-specific sidebar accent stripe */
.shell--admin .shell__sidebar[b-plhg6jar6p]::after { background: var(--jb-color-brand-primary); }
.shell--sales .shell__sidebar[b-plhg6jar6p]::after { background: #6366F1; /* indigo */ }
.shell--employer .shell__sidebar[b-plhg6jar6p]::after { background: #0284C7; /* sky */ }
.shell--agency .shell__sidebar[b-plhg6jar6p]::after { background: #DC2626; /* red */ }

.shell__sidebar[b-plhg6jar6p]::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3px;
}

.shell__main[b-plhg6jar6p] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shell__topbar[b-plhg6jar6p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--jb-space-lg);
    background: var(--jb-color-surface-card);
    border-bottom: 1px solid var(--jb-color-border-subtle);
    box-shadow: var(--jb-shadow-sm);
    position: sticky;
    top: 0;
    /* See CandidatePortalLayout — bump above --jb-z-sticky so the
       UserMenu dropdown wins over in-page sticky DataTable heads. */
    z-index: var(--jb-z-popover);
}

.shell__area-label[b-plhg6jar6p] {
    font-size: var(--jb-text-body-sm);
    color: var(--jb-color-text-secondary);
    font-weight: var(--jb-text-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shell__user[b-plhg6jar6p] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-md);
}

.shell__user-email[b-plhg6jar6p] {
    font-size: var(--jb-text-body-sm);
    color: var(--jb-color-text-secondary);
}

.shell__content[b-plhg6jar6p] {
    flex: 1;
    padding: var(--jb-space-xl);
    max-width: 100%;
    overflow-x: auto;
}

/* Hamburger button — visible on every viewport. On mobile it toggles
   the off-canvas sidebar; on desktop it collapses the sidebar so the
   recruiter can give a dense page (e.g. CV search) the full width. */
.shell__hamburger[b-plhg6jar6p] {
    display: inline-flex;
    background: transparent;
    border: 0;
    padding: 8px;
    margin-right: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.shell__hamburger:hover[b-plhg6jar6p] { background: var(--jb-color-surface-sunken, #f3f4f6); border-radius: 6px; }
.shell__hamburger span[b-plhg6jar6p] {
    display: block;
    height: 2px;
    width: 22px;
    background: var(--jb-color-text-primary, #111);
    border-radius: 1px;
    transition: transform 200ms, opacity 200ms;
}

.shell__backdrop[b-plhg6jar6p] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 90;
}

/* Desktop-only collapse — squeeze the sidebar to zero width so the
   content gets the whole row. CV search and other dense pages benefit
   most. The sidebar element keeps its layout role and slides back in
   when the user toggles again. */
.shell[b-plhg6jar6p] { transition: grid-template-columns 200ms ease; }
.shell--collapsed[b-plhg6jar6p] { grid-template-columns: 0 1fr; }
.shell--collapsed .shell__sidebar[b-plhg6jar6p] { overflow: hidden; visibility: hidden; }

@media (max-width: 768px) {
    .shell[b-plhg6jar6p] { grid-template-columns: 1fr; }
    /* On mobile the desktop-collapse class is meaningless — the sidebar is
       off-canvas regardless. Reset visibility so toggling the desktop
       state via the same hamburger doesn't accidentally hide the
       off-canvas drawer. */
    .shell--collapsed .shell__sidebar[b-plhg6jar6p] { visibility: visible; }

    /* Off-canvas sidebar — lives offscreen to the left by default, slides
       in when .shell--menu-open is applied. Fixed positioning so it floats
       above content without relayout. */
    .shell__sidebar[b-plhg6jar6p] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        z-index: 100;
        overflow-y: auto;
    }
    .shell--menu-open .shell__sidebar[b-plhg6jar6p] { transform: translateX(0); }
    .shell--menu-open .shell__backdrop[b-plhg6jar6p] { display: block; }
}
/* /Layout/PublicLayout.razor.rz.scp.css */
.public[b-5v76otuyd2] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--jb-color-surface-canvas);
}

/* ───────── Header ───────── */
.public__header[b-5v76otuyd2] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-xl);
    padding: 0 var(--jb-space-xl);
    height: 72px;
    background: var(--jb-color-surface-card);
    border-bottom: 1px solid var(--jb-color-border-subtle);
    position: sticky;
    top: 0;
    z-index: var(--jb-z-sticky);
}

.public__brand[b-5v76otuyd2] {
    display: inline-flex;
    align-items: center;
    gap: var(--jb-space-sm);
    color: var(--jb-color-text-primary);
    text-decoration: none;
    font-size: var(--jb-text-heading-sm);
    font-weight: var(--jb-text-weight-bold);
}
.public__brand:hover[b-5v76otuyd2] { text-decoration: none; }

.public__brand-mark[b-5v76otuyd2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-weight: var(--jb-text-weight-bold);
}

/* Buyer-supplied logo when Branding:LogoUrl is set. Constrained to the
   header height so a buyer can hand over a wide wordmark without
   breaking the layout. */
.public__brand-logo[b-5v76otuyd2] {
    height: 36px;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

/* Demo-mode banner. Yellow strip across the top, sticky above the
   header, hidden in production by an empty Branding:DemoBanner. */
.public__demo-banner[b-5v76otuyd2] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FEF3C7;
    color: #92400E;
    border-bottom: 1px solid #F59E0B;
    padding: 6px var(--jb-space-md);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
}

.public__nav[b-5v76otuyd2] {
    display: flex;
    gap: var(--jb-space-lg);
    flex: 1;
    margin-left: var(--jb-space-xl);
}

.public__nav a[b-5v76otuyd2] {
    color: var(--jb-color-text-secondary);
    text-decoration: none;
    font-size: var(--jb-text-body-sm);
    font-weight: var(--jb-text-weight-medium);
    padding: var(--jb-space-xs) 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--jb-motion-duration-fast) var(--jb-motion-easing-standard);
}
.public__nav a:hover[b-5v76otuyd2] {
    color: var(--jb-color-text-primary);
    border-bottom-color: var(--jb-color-brand-primary);
    text-decoration: none;
}

.public__actions[b-5v76otuyd2] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-md);
}

.public__signin[b-5v76otuyd2] {
    color: var(--jb-color-text-primary);
    font-size: var(--jb-text-body-sm);
    font-weight: var(--jb-text-weight-medium);
    text-decoration: none;
}
.public__signin:hover[b-5v76otuyd2] { color: var(--jb-color-brand-primary); text-decoration: none; }

.public__cta[b-5v76otuyd2] {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-size: var(--jb-text-body-sm);
    font-weight: var(--jb-text-weight-semibold);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--jb-motion-duration-fast) var(--jb-motion-easing-standard),
                transform var(--jb-motion-duration-fast) var(--jb-motion-easing-standard),
                box-shadow var(--jb-motion-duration-fast) var(--jb-motion-easing-standard);
}
.public__cta:hover[b-5v76otuyd2] {
    background: var(--jb-color-brand-primary-hover);
    color: var(--jb-color-text-inverse);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.28);
}

/* ───────── Main ───────── */
.public__main[b-5v76otuyd2] { flex: 1; }
.public__main:focus[b-5v76otuyd2] { outline: none; }   /* tabindex=-1 is for programmatic focus from skip-link only */

/* Skip-to-content link styling moved into the <SkipToMain/> component. */

/* ───────── Footer ───────── */
.public__footer[b-5v76otuyd2] {
    background: var(--jb-color-neutral-900);
    color: var(--jb-color-neutral-200);
    padding: var(--jb-space-2xl) var(--jb-space-xl) var(--jb-space-lg);
    margin-top: var(--jb-space-3xl);
}

.public__footer-grid[b-5v76otuyd2] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--jb-space-xl);
    padding-bottom: var(--jb-space-xl);
    border-bottom: 1px solid var(--jb-color-neutral-800);
}

.public__footer-brand[b-5v76otuyd2] {
    font-size: var(--jb-text-heading-md);
    font-weight: var(--jb-text-weight-bold);
    color: var(--jb-color-text-inverse);
    margin-bottom: var(--jb-space-xs);
}

.public__footer-grid h4[b-5v76otuyd2] {
    font-size: var(--jb-text-body-sm);
    font-weight: var(--jb-text-weight-semibold);
    color: var(--jb-color-text-inverse);
    margin-bottom: var(--jb-space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.public__footer-grid a[b-5v76otuyd2] {
    display: block;
    color: var(--jb-color-neutral-300);
    font-size: var(--jb-text-body-sm);
    padding: var(--jb-space-3xs) 0;
    text-decoration: none;
}
.public__footer-grid a:hover[b-5v76otuyd2] { color: var(--jb-color-text-inverse); text-decoration: underline; }

.public__footer-trust[b-5v76otuyd2] {
    max-width: 1200px;
    margin: var(--jb-space-lg) auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--jb-space-sm);
    padding-bottom: var(--jb-space-md);
    border-bottom: 1px solid var(--jb-color-neutral-800);
}

.public__trust-badge[b-5v76otuyd2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--jb-color-neutral-700, #374151);
    border-radius: var(--jb-radius-pill);
    background: rgba(255, 255, 255, 0.03);
    color: var(--jb-color-neutral-300);
    font-size: 11px;
    font-weight: var(--jb-text-weight-medium);
    letter-spacing: 0.02em;
    cursor: help;
}
.public__trust-badge svg[b-5v76otuyd2] { color: var(--jb-color-brand-primary, #14b8a6); flex-shrink: 0; }

.public__footer-meta[b-5v76otuyd2] {
    max-width: 1200px;
    margin: var(--jb-space-md) auto 0;
    display: flex;
    justify-content: space-between;
    font-size: var(--jb-text-body-xs);
    color: var(--jb-color-neutral-400);
}

@media (max-width: 900px) {
    .public__footer-grid[b-5v76otuyd2] { grid-template-columns: 1fr 1fr; }
    .public__nav[b-5v76otuyd2] { display: none; }
}

@media (max-width: 600px) {
    .public__cta[b-5v76otuyd2] { display: none; }
    .public__signin[b-5v76otuyd2] { display: none; }
}
/* /Layout/RoleNav.razor.rz.scp.css */
.nav[b-c8ynr1p911] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--jb-space-lg) 0;
}

.nav__brand[b-c8ynr1p911] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-sm);
    padding: 0 var(--jb-space-lg) var(--jb-space-lg);
    border-bottom: 1px solid var(--jb-color-neutral-800);
    margin-bottom: var(--jb-space-md);
}

.nav__brand-mark[b-c8ynr1p911] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-weight: var(--jb-text-weight-bold);
    font-size: var(--jb-text-body-sm);
}

.nav__brand-name[b-c8ynr1p911] {
    font-size: var(--jb-text-body-md);
    font-weight: var(--jb-text-weight-semibold);
    color: var(--jb-color-text-inverse);
}

.nav__sections[b-c8ynr1p911] {
    display: flex;
    flex-direction: column;
    gap: var(--jb-space-lg);
    padding: 0 var(--jb-space-sm);
    flex: 1;
}

.nav__section[b-c8ynr1p911] {
    display: flex;
    flex-direction: column;
    gap: var(--jb-space-3xs);
}

.nav__section--footer[b-c8ynr1p911] {
    margin-top: auto;
    padding-top: var(--jb-space-lg);
    border-top: 1px solid var(--jb-color-neutral-800);
}

.nav__section-title[b-c8ynr1p911] {
    padding: var(--jb-space-xs) var(--jb-space-md);
    font-size: var(--jb-text-body-xs);
    font-weight: var(--jb-text-weight-semibold);
    color: var(--jb-color-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-c8ynr1p911] .nav__link {
    display: block;
    padding: var(--jb-space-xs) var(--jb-space-md);
    border-radius: var(--jb-radius-md);
    color: var(--jb-color-neutral-200);
    font-size: var(--jb-text-body-sm);
    font-weight: var(--jb-text-weight-medium);
    text-decoration: none;
    transition: background var(--jb-motion-duration-fast) var(--jb-motion-easing-standard);
}

[b-c8ynr1p911] .nav__link:hover {
    background: var(--jb-color-neutral-800);
    color: var(--jb-color-text-inverse);
    text-decoration: none;
}

[b-c8ynr1p911] .nav__link.active {
    background: color-mix(in srgb, var(--jb-color-brand-primary) 20%, transparent);
    color: var(--jb-color-text-inverse);
}

[b-c8ynr1p911] .nav__badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: var(--jb-color-status-warning, #F59E0B);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 18px;
    vertical-align: middle;
}
/* /Pages/Candidate/Profile.razor.rz.scp.css */
.profile[b-0q9jwp3x5h] { display: flex; flex-direction: column; gap: var(--jb-space-md); }

.profile__head[b-0q9jwp3x5h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--jb-space-md);
    margin-bottom: var(--jb-space-md);
}

.profile__progress[b-0q9jwp3x5h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jb-space-2xs);
}

.profile__progress-ring[b-0q9jwp3x5h] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
        conic-gradient(var(--jb-color-brand-primary) calc(var(--pct, 0%) * 1), var(--jb-color-neutral-200) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.profile__progress-ring[b-0q9jwp3x5h]::before {
    content: "";
    width: 48px; height: 48px;
    background: var(--jb-color-surface-card);
    border-radius: 50%;
    position: absolute;
}
.profile__progress-ring span[b-0q9jwp3x5h] {
    position: relative;
    font-size: var(--jb-text-body-sm);
    font-weight: var(--jb-text-weight-semibold);
    color: var(--jb-color-text-primary);
}

.profile__row[b-0q9jwp3x5h] { display: grid; grid-template-columns: 1fr; gap: var(--jb-space-md); }
.profile__row--3[b-0q9jwp3x5h] { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 700px) {
    .profile__row--3[b-0q9jwp3x5h] { grid-template-columns: 1fr; }
}

.profile__field[b-0q9jwp3x5h] {
    display: flex;
    flex-direction: column;
    gap: var(--jb-space-2xs);
    margin-bottom: var(--jb-space-md);
}
.profile__field:last-child[b-0q9jwp3x5h] { margin-bottom: 0; }
.profile__field label[b-0q9jwp3x5h] {
    font-size: var(--jb-text-body-sm);
    font-weight: var(--jb-text-weight-medium);
    color: var(--jb-color-text-secondary);
}
.profile__field[b-0q9jwp3x5h]  input,
.profile__field[b-0q9jwp3x5h]  textarea,
.profile__field[b-0q9jwp3x5h]  select {
    padding: var(--jb-space-xs) var(--jb-space-sm);
    font-size: var(--jb-text-body-md);
    font-family: var(--jb-font-family-sans);
    border: 1px solid var(--jb-color-border-default);
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-surface-card);
    color: var(--jb-color-text-primary);
    width: 100%;
}
.profile__field[b-0q9jwp3x5h]  input:focus,
.profile__field[b-0q9jwp3x5h]  textarea:focus,
.profile__field[b-0q9jwp3x5h]  select:focus {
    outline: none;
    border-color: var(--jb-color-border-focus);
    box-shadow: var(--jb-shadow-focus);
}
.profile__field[b-0q9jwp3x5h]  input:disabled { background: var(--jb-color-neutral-100); color: var(--jb-color-text-muted); }

.profile__actions[b-0q9jwp3x5h] { display: flex; justify-content: flex-end; }
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* Auth-page shell — see Login.razor.css for rationale (Blazor-scoped CSS
 * is content-hashed into JobBoardAdmin.styles.css, which auto-busts the
 * browser cache on every deploy; plain wwwroot CSS doesn't). */
.login[b-eh0kw6p5ft] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--jb-space-lg);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--jb-color-brand-primary) 10%, transparent), transparent 50%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--jb-color-brand-accent) 8%, transparent), transparent 50%),
        var(--jb-color-surface-canvas);
}

.login__card[b-eh0kw6p5ft] { width: 100%; max-width: 440px; box-shadow: var(--jb-shadow-lg); }

.login__brand[b-eh0kw6p5ft] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jb-space-xs);
    margin-bottom: var(--jb-space-lg);
    text-align: center;
}

.login__mark[b-eh0kw6p5ft] {
    width: 48px; height: 48px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-weight: var(--jb-text-weight-bold);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--jb-text-body-lg);
}

.login__title[b-eh0kw6p5ft] { margin: 0; font-size: var(--jb-text-heading-lg); }
.login__subtitle[b-eh0kw6p5ft] { margin: 0; color: var(--jb-color-text-secondary); font-size: var(--jb-text-body-sm); max-width: 320px; }

.login__field[b-eh0kw6p5ft] { display: flex; flex-direction: column; gap: var(--jb-space-2xs); margin-bottom: var(--jb-space-md); }
.login__field label[b-eh0kw6p5ft] { font-size: var(--jb-text-body-sm); font-weight: var(--jb-text-weight-medium); color: var(--jb-color-text-secondary); }

.login__field[b-eh0kw6p5ft]  input {
    padding: var(--jb-space-xs) var(--jb-space-sm);
    font-size: var(--jb-text-body-md);
    font-family: var(--jb-font-family-sans);
    border: 1px solid var(--jb-color-border-default);
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-surface-card);
    color: var(--jb-color-text-primary);
    width: 100%;
}
.login__field[b-eh0kw6p5ft]  input:focus { outline: none; border-color: var(--jb-color-border-focus); box-shadow: var(--jb-shadow-focus); }

.login__submit[b-eh0kw6p5ft] { width: 100%; justify-content: center; margin-top: var(--jb-space-xs); }
.login__footer[b-eh0kw6p5ft] { margin-top: var(--jb-space-md); text-align: center; }
/* /Pages/Login.razor.rz.scp.css */
/* Auth-page shell. Duplicated across Login, ForgotPassword, ResetPassword,
 * ChangePassword and AcceptInvite scoped CSS files so Blazor's
 * content-hashed JobBoardAdmin.styles.css bundle busts the cache on every
 * deploy. Keeping them in global app.css proved cache-flaky — visitors
 * kept rendering an old copy without the layout rules. */
.login[b-w6wyh3x3eq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--jb-space-lg);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--jb-color-brand-primary) 10%, transparent), transparent 50%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--jb-color-brand-accent) 8%, transparent), transparent 50%),
        var(--jb-color-surface-canvas);
}

.login__card[b-w6wyh3x3eq] { width: 100%; max-width: 440px; box-shadow: var(--jb-shadow-lg); }

.login__brand[b-w6wyh3x3eq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jb-space-xs);
    margin-bottom: var(--jb-space-lg);
    text-align: center;
}

.login__mark[b-w6wyh3x3eq] {
    width: 48px; height: 48px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-weight: var(--jb-text-weight-bold);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--jb-text-body-lg);
}

/* Tenant logo replacement for .login__mark when Branding.LogoUrl is
   set. Keeps the same vertical footprint so the brand row doesn't
   reflow when the snapshot lands; max-width is generous because
   wide wordmarks read better than 48-px square crops. */
.login__logo[b-w6wyh3x3eq] {
    max-width: 200px;
    max-height: 48px;
    object-fit: contain;
}

.login__title[b-w6wyh3x3eq] { margin: 0; font-size: var(--jb-text-heading-lg); }
.login__subtitle[b-w6wyh3x3eq] { margin: 0; color: var(--jb-color-text-secondary); font-size: var(--jb-text-body-sm); max-width: 320px; }

.login__field[b-w6wyh3x3eq] { display: flex; flex-direction: column; gap: var(--jb-space-2xs); margin-bottom: var(--jb-space-md); }
.login__field label[b-w6wyh3x3eq] { font-size: var(--jb-text-body-sm); font-weight: var(--jb-text-weight-medium); color: var(--jb-color-text-secondary); }

.login__field[b-w6wyh3x3eq]  input {
    padding: var(--jb-space-xs) var(--jb-space-sm);
    font-size: var(--jb-text-body-md);
    font-family: var(--jb-font-family-sans);
    border: 1px solid var(--jb-color-border-default);
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-surface-card);
    color: var(--jb-color-text-primary);
    width: 100%;
}
.login__field[b-w6wyh3x3eq]  input:focus { outline: none; border-color: var(--jb-color-border-focus); box-shadow: var(--jb-shadow-focus); }

/* Submit + Forgot-password share a flex row. Button keeps its
   prior visual weight by flex-growing to fill the leftover space;
   the link sits flush right with the muted text colour. Wrap kicks
   in below ~320 px so very narrow viewports still get a usable
   layout. */
.login__submit-row[b-w6wyh3x3eq] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-md);
    margin-top: var(--jb-space-xs);
    flex-wrap: wrap;
}
.login__submit[b-w6wyh3x3eq] { flex: 1 1 auto; justify-content: center; }
.login__forgot[b-w6wyh3x3eq] {
    color: var(--jb-color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.login__forgot:hover[b-w6wyh3x3eq] { color: var(--jb-color-brand-primary); text-decoration: underline; }

.login__divider[b-w6wyh3x3eq] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-sm);
    margin: var(--jb-space-md) 0;
    color: var(--jb-color-text-muted);
    font-size: var(--jb-text-body-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login__divider[b-w6wyh3x3eq]::before, .login__divider[b-w6wyh3x3eq]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--jb-color-border-default);
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* Auth-page shell — mirrors Login.razor.css; see there for rationale. */
.login[b-m9mlyatkqu] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--jb-space-lg);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--jb-color-brand-primary) 10%, transparent), transparent 50%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--jb-color-brand-accent) 8%, transparent), transparent 50%),
        var(--jb-color-surface-canvas);
}

.login__card[b-m9mlyatkqu] { width: 100%; max-width: 440px; box-shadow: var(--jb-shadow-lg); }

.login__brand[b-m9mlyatkqu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jb-space-xs);
    margin-bottom: var(--jb-space-lg);
    text-align: center;
}

.login__mark[b-m9mlyatkqu] {
    width: 48px; height: 48px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-weight: var(--jb-text-weight-bold);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--jb-text-body-lg);
}

.login__title[b-m9mlyatkqu] { margin: 0; font-size: var(--jb-text-heading-lg); }
.login__subtitle[b-m9mlyatkqu] { margin: 0; color: var(--jb-color-text-secondary); font-size: var(--jb-text-body-sm); max-width: 320px; }

.login__field[b-m9mlyatkqu] { display: flex; flex-direction: column; gap: var(--jb-space-2xs); margin-bottom: var(--jb-space-md); }
.login__field label[b-m9mlyatkqu] { font-size: var(--jb-text-body-sm); font-weight: var(--jb-text-weight-medium); color: var(--jb-color-text-secondary); }

.login__field[b-m9mlyatkqu]  input {
    padding: var(--jb-space-xs) var(--jb-space-sm);
    font-size: var(--jb-text-body-md);
    font-family: var(--jb-font-family-sans);
    border: 1px solid var(--jb-color-border-default);
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-surface-card);
    color: var(--jb-color-text-primary);
    width: 100%;
}
.login__field[b-m9mlyatkqu]  input:focus { outline: none; border-color: var(--jb-color-border-focus); box-shadow: var(--jb-shadow-focus); }

.login__submit[b-m9mlyatkqu] { width: 100%; justify-content: center; margin-top: var(--jb-space-xs); }
.login__footer[b-m9mlyatkqu] { margin-top: var(--jb-space-md); text-align: center; }
/* /Pages/Signup.razor.rz.scp.css */
.login[b-0kjrtzny2c] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--jb-space-lg);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--jb-color-brand-primary) 10%, transparent), transparent 50%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--jb-color-brand-accent) 8%, transparent), transparent 50%),
        var(--jb-color-surface-canvas);
}

.login__card[b-0kjrtzny2c] { width: 100%; max-width: 440px; box-shadow: var(--jb-shadow-lg); }

.login__brand[b-0kjrtzny2c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jb-space-xs);
    margin-bottom: var(--jb-space-lg);
    text-align: center;
}

.login__mark[b-0kjrtzny2c] {
    width: 48px; height: 48px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-weight: var(--jb-text-weight-bold);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--jb-text-body-lg);
}

.login__title[b-0kjrtzny2c] { margin: 0; font-size: var(--jb-text-heading-lg); }
.login__subtitle[b-0kjrtzny2c] { margin: 0; color: var(--jb-color-text-secondary); font-size: var(--jb-text-body-sm); max-width: 320px; }

.login__field[b-0kjrtzny2c] { display: flex; flex-direction: column; gap: var(--jb-space-2xs); margin-bottom: var(--jb-space-md); }
.login__field label[b-0kjrtzny2c] { font-size: var(--jb-text-body-sm); font-weight: var(--jb-text-weight-medium); color: var(--jb-color-text-secondary); }

/* Checkbox rows — checkbox on the left, label text on the right.
   Override the column-stack from .login__field so the checkbox sits
   inline with its label. align-items=flex-start keeps the checkbox
   aligned with the first line when the label wraps onto two lines
   (T&C link + privacy link), instead of centring on a tall block. */
.login__field--check[b-0kjrtzny2c] { flex-direction: row; align-items: flex-start; gap: var(--jb-space-xs); }
.login__field--check label[b-0kjrtzny2c] { font-weight: var(--jb-text-weight-regular); color: var(--jb-color-text-primary); cursor: pointer; line-height: 1.4; }
.login__field--check[b-0kjrtzny2c]  input[type="checkbox"] { width: auto; flex-shrink: 0; margin-top: 3px; }

.login__field[b-0kjrtzny2c]  input {
    padding: var(--jb-space-xs) var(--jb-space-sm);
    font-size: var(--jb-text-body-md);
    font-family: var(--jb-font-family-sans);
    border: 1px solid var(--jb-color-border-default);
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-surface-card);
    color: var(--jb-color-text-primary);
    width: 100%;
}
.login__field[b-0kjrtzny2c]  input:focus { outline: none; border-color: var(--jb-color-border-focus); box-shadow: var(--jb-shadow-focus); }

.login__submit[b-0kjrtzny2c] { width: 100%; justify-content: center; margin-top: var(--jb-space-xs); }

.login__footer[b-0kjrtzny2c] { margin-top: var(--jb-space-md); text-align: center; }

.login__divider[b-0kjrtzny2c] {
    display: flex;
    align-items: center;
    gap: var(--jb-space-sm);
    margin: var(--jb-space-md) 0;
    color: var(--jb-color-text-muted);
    font-size: var(--jb-text-body-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login__divider[b-0kjrtzny2c]::before, .login__divider[b-0kjrtzny2c]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--jb-color-border-default);
}

.login__dev-hint[b-0kjrtzny2c] { margin-top: var(--jb-space-lg); border-top: 1px dashed var(--jb-color-border-subtle); padding-top: var(--jb-space-sm); }
.login__dev-hint summary[b-0kjrtzny2c] { cursor: pointer; font-size: var(--jb-text-body-xs); color: var(--jb-color-text-muted); text-align: center; }
.login__dev-hint ul[b-0kjrtzny2c] { list-style: none; padding: var(--jb-space-xs) 0 0; margin: 0; font-size: var(--jb-text-body-xs); color: var(--jb-color-text-secondary); }
.login__dev-hint code[b-0kjrtzny2c] { background: var(--jb-color-neutral-100); padding: 1px 5px; border-radius: var(--jb-radius-sm); font-family: var(--jb-font-family-mono); font-size: 11px; }
/* /Pages/VerifyEmail.razor.rz.scp.css */
/* Auth-page shell — mirrors Login.razor.css; see there for rationale. */
.login[b-d9trel3j86] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--jb-space-lg);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--jb-color-brand-primary) 10%, transparent), transparent 50%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--jb-color-brand-accent) 8%, transparent), transparent 50%),
        var(--jb-color-surface-canvas);
}

.login__card[b-d9trel3j86] { width: 100%; max-width: 440px; box-shadow: var(--jb-shadow-lg); }

.login__brand[b-d9trel3j86] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--jb-space-xs);
    margin-bottom: var(--jb-space-lg);
    text-align: center;
}

.login__mark[b-d9trel3j86] {
    width: 48px; height: 48px;
    border-radius: var(--jb-radius-md);
    background: var(--jb-color-brand-primary);
    color: var(--jb-color-text-inverse);
    font-weight: var(--jb-text-weight-bold);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--jb-text-body-lg);
}

.login__title[b-d9trel3j86] { margin: 0; font-size: var(--jb-text-heading-lg); }
.login__subtitle[b-d9trel3j86] { margin: 0; color: var(--jb-color-text-secondary); font-size: var(--jb-text-body-sm); max-width: 320px; }

.login__submit[b-d9trel3j86] { width: 100%; justify-content: center; margin-top: var(--jb-space-xs); }
.login__footer[b-d9trel3j86] { margin-top: var(--jb-space-md); text-align: center; }