/*
 * application.css — MatchConnector Job Fit
 * Design system ported 1:1 from the HTML prototype (mc-jobfit-v2.html).
 * Tokens, typography (DM Sans / DM Mono) and component styling mirror the
 * prototype. See CLAUDE.md §1a (fidelity to the prototype — BINDING).
 */

/* ── Design tokens (verbatim from prototype :root) ─────────────────── */
:root {
    --bg:#F7F7F5;
    --surface:#FFFFFF;
    --s2:#F2F2EF;
    --border:#E4E4E0;
    --border2:#EBEBEA;
    --text:#1C1C1A;
    --t2:#5A5A56;
    --t3:#9A9A94;
    --green:#1B9E72;
    --gl:#E3F5EE;
    --gb:#A8E0C8;
    --gd:#0D6B4C;
    --pink:#C94F78;
    --pl:#FAEDF2;
    --pb:#EAAFC4;
    --blue:#3478C7;
    --bl:#EAF1FB;
    --bb:#A8C8EE;
    --bd:#1A4F8A;
    --red:#D94040;
    --rl:#FBEAEA;
    --rb:#ECAAAA;
    --pf-dark:var(--red);
    --amber:#B87010;
    --al:#FBF1E0;
    --ab:#E8C070;
    --amber-dark:#7A5200;
    --purple:#7C4DB8;
    --purl:#F2EDFB;
    --purb:#C9B0E8;
    --white:#FFFFFF;
    --av1:#7C4DB8;
    --av2:#3478C7;
    --av3:#1B9E72;
    --av4:#D9822B;
    --av5:#C0392B;
    --av6:#0E7490;
    --btn-blue-hover:#2563b0;
    --nw:252px;
    /* ── Extended colour tokens (prototype :root lines 37-54) ──────── */
  --muted:#888888;
    --orange:#E07020;
    --red-dark:#6B1414;
    --career-dark:#1A1A2E;
    /* ODC archetype accent colours (F1-F4, M1-M4) */
  --arch-f1:#2E7D6E;
    --arch-f2:#4A6B2E;
    --arch-f3:#4B5DA8;
    --arch-f3-lt:#C7D0F8;
    --arch-m2:#2E6B8B;
    --arch-m3:#8B4DB8;
    --arch-m3-mid:#7B5EA7;
    --arch-m4:#6B4A2E;
    /* One-off semantic tokens */
  --match-good:#2E86AB;
    --green-light:#26C490;
    --green-pale:#E8F5E9;
    --green-pale-b:#A5D6A7;
    --amber-pale:#FFF8E6;
    --amber-dark-text:#5A3500;
    --red-pale:#FFF4F4;
    --green-icon:#1B7A56;
    --green-icon-dk:#1B5E3B;
    --hrbp-bg:#F3EEF9;
    --hrbp-border:#C4A8E0;
    --purple-text:#4A2B8A;
    --purple-border-lt:#C4B5FD;
    --lena-col:#6C8EBF;
    --r:10px;
    --rs:7px;
    --sh:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
    --shm:0 4px 16px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.05);
    --shl:0 12px 40px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);
    --font:'DM Sans',system-ui,sans-serif;
    --mono:'DM Mono','SFMono-Regular',Consolas,monospace;
    /* Legacy aliases so existing screens keep working and inherit the new look */
  --text-muted: var(--t2);
    --surface-2:  var(--s2);
    --radius:     var(--r);
    --radius-sm:  var(--rs);
    --shadow:     var(--sh);

    /* Avatar gradient colours (migrated from prototype.css) */
    --av-grad-a: #B0C4F0;
    --av-grad-b: #7B9DD9;
    --av-grad-text: #1A3A6E;
    --nav-av-a: #9B59B6;
    --nav-av-b: #5B8AF0;
}
/* -- Dark mode token overrides (prototype body.dark, lines 270-300) -- */
body.dark {
    --bg:#1A1A18;
    --surface:#242422;
    --s2:#2C2C2A;
    --border:#3A3A36;
    --border2:#323230;
    --text:#F0F0EC;
    --t2:#A8A8A0;
    --t3:#6A6A64;
    --green:#2DC98E;
    --gl:#0D2E22;
    --gb:#1A5A3C;
    --gd:#5AC99A;
    --pink:#E07A9D;
    --pl:#2E1020;
    --pb:#6B2540;
    --blue:#5A9EE8;
    --bl:#0D1E38;
    --bb:#1A4A7A;
    --red:#EF6565;
    --rl:#2E0D0D;
    --rb:#6B1A1A;
    --amber:#D4920A;
    --al:#2A1C08;
    --ab:#6B4510;
    --purple:#A07AD8;
    --purl:#1E1030;
    --purb:#4A2A7A;
    --pf-dark:#EF8080;
    --amber-dark:#E8A840;
    --btn-blue-hover:#4A8EDA;
    /* Extended tokens -- dark mode adaptations */
  --muted:#6A6A64;
    --orange:#E8842A;
    --blue-darker:#2A6AB8;
    --red-dark:#EF8080;
    --career-dark:#0A0A18;
    --match-good:#5AACE8;
    --green-light:#2DC98E;
    --green-pale:#0D2E22;
    --green-pale-b:#1A5A3C;
    --amber-pale:#2A1C08;
    --amber-dark-text:#E8A840;
    --red-pale:#2E0D0D;
    --green-icon:#5AC99A;
    --green-icon-dk:#2DC98E;
    --hrbp-bg:#1E1030;
    --hrbp-border:#4A2A7A;
    --purple-text:#C9B0E8;
    --purple-border-lt:#4A2A7A;
    --lena-col:#5A8EBF;
    /* Archetype colours -- slightly lighter for dark bg legibility */
  --arch-f1:#3A9E8A;
    --arch-f2:#5A8A3A;
    --arch-f3:#6A7DC8;
    --arch-f3-lt:#2A3A68;
    --arch-f4-dkr:#8B2A50;
    --arch-m2:#3A8BAB;
    --arch-m3:#A06AD8;
    --arch-m3-mid:#8A7AB8;
    --arch-m4:#8B6A3A;
}
/* ── Reset / base ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
input, select, textarea, button {
    font-family: var(--font);
    font-size: inherit;
}
h1, h2, h3 {
    margin: 0 0 .5rem;
    line-height: 1.25;
    color: var(--text);
}
h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
h2 {
    font-size: 1.05rem;
    font-weight: 700;
}
h3 {
    font-size: .95rem;
    font-weight: 700;
}
p {
    margin: 0 0 1rem;
}
ul {
    padding-left: 1.25rem;
}
a {
    color: var(--blue);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.text-muted {
    color: var(--t2);
}
.text-small {
    font-size: .85rem;
}
.empty-state {
    color: var(--t3);
    padding: 2rem 0;
}
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: normal;
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: middle;
}
/* ── Material Icons (prototype lines 120-141) ────────────────────────── */
/* The entire prototype uses class="material-icons" (not Symbols).        */
/* Without this block every icon renders at browser-default size/align.   */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}
/* Size variants used in icon containers (prototype lines 136-141) */
.ni-icon .material-icons {
    font-size: 20px;
}
.btn .material-icons {
    font-size: 15px;
}
.badge .material-icons {
    font-size: 12px;
}
.bell-wrap .material-icons {
    font-size: 20px;
}
/* Reference codes — monospace pill, as in the prototype (.ref-tag) */
.reference-code {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--t2);
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 9px;
    display: inline-flex;
    align-items: center;
}
/* ── Flash ─────────────────────────────────────────────────────────── */
.flash {
    padding: .7rem 1.5rem;
    margin: 0;
    font-weight: 500;
    font-size: .9rem;
}
.flash--notice {
    background: var(--gl);
    color: var(--gd);
    border-bottom: 1px solid var(--gb);
}
.flash--alert {
    background: var(--rl);
    color: var(--red);
    border-bottom: 1px solid var(--rb);
}
.flash-warning {
    margin-bottom: 12px;
    padding: 11px 13px;
    background: var(--al);
    border: 1px solid var(--ab);
    border-radius: var(--rs);
    font-size: 13px;
    font-weight: 600;
    color: var(--amber-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* ── Buttons (prototype .btn / .btn.pr / .btn.danger) ──────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: var(--rs);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    transition: all .15s;
    box-shadow: var(--sh);
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover {
    background: var(--s2);
    text-decoration: none;
}
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
.btn--primary, .btn.pr {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.btn--primary:hover:not(:disabled), .btn.pr:hover:not(:disabled) {
    background: var(--btn-blue-hover);
}
.btn--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn--ghost {
    background: transparent;
    color: var(--t2);
    border-color: transparent;
    box-shadow: none;
}
.btn--ghost:hover {
    background: var(--s2);
}
.btn--small {
    padding: 4px 10px;
    font-size: 12px;
}
.btn--danger, .btn.danger {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.btn--danger:hover, .btn.danger:hover {
    background: #B53030;
}
/* bsm = prototype "btn-sm" utility (prototype.css lines 698-701) */
.bsm {
    font-size: 12px;
    padding: 5px 11px;
    border-radius: var(--rs);
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--t2);
    font-family: var(--font);
    transition: background .1s;
}
.bsm:hover {
    background: var(--bg);
}
.bsm.g {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.bsm.g:hover {
    background: var(--gd);
}
/* sum-box family = vacancy/candidate summary boxes (prototype.css lines 704-711) */
.sum-box {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--rs);
    padding:11px 13px;
    margin-top:11px;
    display:none;
}
.sum-box.vis {
    display:block;
}
.sum-hd {
    font-size:12px;
    font-weight:600;
    color:var(--t2);
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:5px;
}
.sum-hd i {
    font-size:13px;
    color:var(--green);
}
.sum-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 16px;
}
.sum-r {
    font-size:12px;
    display:flex;
    gap:4px;
}
.sum-k {
    color:var(--t3);
    min-width:90px;
    flex-shrink:0;
}
.sum-v {
    color:var(--text);
    font-weight:500;
}
/* stepbar family = horizontal wizard step bar (prototype.css lines 712-721) */
.stepbar {
    display:flex;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:12px 17px;
    margin-bottom:16px;
    box-shadow:var(--sh);
}
.step-item {
    display:flex;
    align-items:center;
    gap:6px;
}
.sdot2 {
    width:24px;
    height:24px;
    border-radius:50%;
    border:1.5px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
    background:var(--bg);
    color:var(--t3);
    flex-shrink:0;
    transition:all .2s;
}
.sdot2.done {
    background:var(--gl);
    border-color:var(--gb);
    color:var(--gd);
    cursor:pointer;
}
.sdot2.active {
    background:var(--text);
    border-color:var(--text);
    color:#fff;
}
.slbl {
    font-size:11px;
    color:var(--t3);
    white-space:nowrap;
}
.slbl.active {
    color:var(--text);
    font-weight:600;
}
.slbl.done {
    color:var(--gd);
}
.sline {
    flex:1;
    height:1px;
    background:var(--border);
    margin:0 7px;
}
.sline.done {
    background:var(--gb);
}
/* ── Page chrome ───────────────────────────────────────────────────── */
/* Full-width content aligned with the prototype's .content / .page-hdr (24px sides). */
.page-container {
    max-width: none;
    margin: 0;
    padding: 16px 24px 24px;
}
/* Room above the fixed confidentiality banner so content can scroll clear of it. */
/* Bug 5: ensure no browser default margin on <main> causes topbar/sidebar misalignment */
main {
    margin: 0;
    padding: 0;
}
.main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 36px;
}
/* Breadcrumb — verbatim from prototype.css lines 247-251 */
.bc {
    display:flex;
    align-items:center;
    gap:4px;
    font-size:13px;
    color:var(--t2);
}
.bc .sep {
    color:var(--t3);
    display:flex;
    align-items:center;
}
.bc .sep .material-icons {
    font-size:16px;
}
.bc .cur {
    font-weight:700;
    color:var(--text);
    text-decoration:none;
    cursor:default;
}
/* Top chrome bar (prototype .topbar / .topbar-r, lines 261 + 267) */
.topbar {
    height:56px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:50;
    flex-shrink:0;
}
.topbar-r {
    display:flex;
    align-items:center;
    gap:10px;
}
/* Bug 2: hp-txt flex column starts text left-aligned (align-items default is stretch) */
.hp-txt {
    align-items:flex-start;
}
/* Confidentiality banner (prototype #confidentiality-banner) */
.conf-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--text);
    color: #fff;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: 0 -2px 8px rgba(0,0,0,.25);
}
.conf-banner strong {
    color: var(--ab);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 10px;
}
.conf-banner .conf-sep {
    color: rgba(255,255,255,.55);
}
/* ── Page header bar (.page-hdr / .ph-l / .ph-t / .ph-s / .ph-r) ───── */
/* Verbatim from prototype.css lines 579-583. Used in application.html.erb lines 44-50. */
.page-hdr {
    padding:24px 24px 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:13px;
    flex-wrap:wrap;
}
.ph-l {
    display:flex;
    flex-direction:column;
    gap:3px;
}
.ph-t {
    font-size:22px;
    font-weight:700;
    color:var(--text);
    letter-spacing:-.025em;
}
.ph-s {
    font-size:13px;
    color:var(--t2);
}
.ph-r {
    display:flex;
    align-items:center;
    gap:7px;
    flex-shrink:0;
    margin-top:2px;
}
.profile-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sh);
}
.profile-section h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    font-weight: 700;
    margin-bottom: .9rem;
}
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}
.definition-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1.25rem;
    margin: 0;
}
.definition-list dt {
    color: var(--t3);
    font-size: .85rem;
}
.definition-list dd {
    margin: 0;
}
/* ── Badges + score tiers (prototype .badge family) ────────────────── */
/* Base .badge — verbatim from prototype.css line 632 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.badge .material-icons {
    font-size: 12px;
}
/* Status modifier classes — verbatim from prototype.css lines 633-637 */
.badge.open {
    background: var(--gl);
    border: 1px solid var(--gb);
    color: var(--gd);
}
.badge.closed {
    background: var(--rl);
    border: 1px solid var(--rb);
    color: var(--red);
}
.badge.concept {
    background: var(--al);
    border: 1px solid var(--ab);
    color: var(--amber);
}
.badge.intern-b {
    background: var(--purl);
    border: 1px solid var(--purb);
    color: var(--purple);
}
.badge.extern-b {
    background: var(--s2);
    border: 1px solid var(--border);
    color: var(--t2);
}
.badge.matching {
    background: var(--purl);
    border: 1px solid var(--purb);
    color: var(--purple);
}
/* sdot — generic dot + per-status colour overrides (prototype lines 639-641) */
.badge .sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    flex-shrink: 0;
}
.badge.open .sdot {
    background: var(--green);
}
.badge.closed .sdot {
    background: var(--red);
}
.badge.concept .sdot {
    background: var(--amber);
}
/* .status-badge — kept for backward compat; prefer .badge.* modifier classes above */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.status-badge--draft {
    background: var(--al);
    border: 1px solid var(--ab);
    color: var(--amber);
}
.status-badge--open {
    background: var(--gl);
    border: 1px solid var(--gb);
    color: var(--gd);
}
.status-badge--matching {
    background: var(--purl);
    border: 1px solid var(--purb);
    color: var(--purple);
}
.status-badge--closed {
    background: var(--rl);
    border: 1px solid var(--rb);
    color: var(--red);
}
.score-tier {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.score-tier--strong {
    background: var(--gl);
    border: 1px solid var(--gb);
    color: var(--gd);
}
.score-tier--good {
    background: var(--bl);
    border: 1px solid var(--bb);
    color: var(--bd);
}
.score-tier--fair {
    background: var(--al);
    border: 1px solid var(--ab);
    color: var(--amber);
}
.score-tier--low {
    background: var(--rl);
    border: 1px solid var(--rb);
    color: var(--red);
}
tr.row-link {
    cursor: pointer;
}
tr.row-link:hover {
    background: var(--s2);
}
/* -- Candidate-status badge (.cs / .cs-u / .cs-g / .cs-o / .cs-af / .cs-aa) --
   Verbatim from prototype.css lines 627-632 (fidelity gap css-010).
   Used on the matching workspace candidate list and candidate detail header.  */
.cs {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
    border:1px solid transparent;
}
.cs-u {
    background:#EAF1FB;
    color:var(--bd);
    border-color:#A8C8EE;
}
.cs-g {
    background:var(--purl);
    color:var(--purple);
    border-color:var(--purb);
}
.cs-o {
    background:var(--al);
    color:var(--amber);
    border-color:var(--ab);
}
.cs-af {
    background:var(--rl);
    color:var(--red);
    border-color:var(--rb);
}
.cs-aa {
    background:var(--gl);
    color:var(--gd);
    border-color:var(--gb);
}
/* Prototype input rule (line 639) omits type=password — match it for auth forms */
input[type=password] {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
    font-family: var(--font);
}
/* Work-mode button group (prototype setWorkMode active state) */
.wm-btn.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
/* Field-state segmented control (prototype Invulvelden _fcBtn active) */
.seg-btn {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--rs);
    border: 1px solid var(--border2);
    cursor: pointer;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    color: var(--t2);
}
.seg-btn.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
/* ── Prototype cards / stats / table (.card .stats-row .tbl) ───────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px;
    margin-bottom: 13px;
    box-shadow: var(--sh);
}
.card-t {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 3px;
    letter-spacing: -.015em;
}
.stats-row {
    display: grid;
    gap: 11px;
    margin-bottom: 18px;
}
.stats-row--3 {
    grid-template-columns: repeat(3, 1fr);
}
.stats-row--6 {
    grid-template-columns: repeat(6, 1fr);
}
.card-hdr {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:14px;
}
.tbl-cell-title {
    font-weight: 600;
}
.tbl-cell-ref {
    font-size: 11px;
    color: var(--t3);
    font-family: var(--mono);
}
.stat-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 5px;
}
.stat-val {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--text);
}
.tbl {
    width: 100%;
    border-collapse: collapse;
}
.tbl th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t3);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.tbl td {
    padding: 12px 12px;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--border2);
    vertical-align: middle;
}
.tbl tbody tr:hover td {
    background: var(--s2);
    cursor: pointer;
}
.tbl tr:last-child td {
    border-bottom: none;
}
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.search-wrap .material-symbols-outlined {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--t3);
    pointer-events: none;
}
.filter-input, .filter-select {
    font-size: 12px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--rs);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    outline: none;
}
.filter-input {
    width: 100%;
    padding-left: 28px;
}
.filter-select {
    min-width: 130px;
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.result-count {
    font-size: 12px;
    color: var(--t3);
}
.label-xs {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--t2);
    margin-bottom: 13px;
    text-decoration: none;
    cursor: pointer;
}
.back-link:hover {
    color: var(--text);
    text-decoration: none;
}
.jv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.jv-header__meta {
    color: var(--t2);
    font-size: .85rem;
    margin: .25rem 0 0;
}
.jv-header__right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.jv-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
    gap: .75rem;
}
/* ── Tables ────────────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.data-table th {
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
    color: var(--t3);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.data-table td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border2);
}
/* ── Forms ─────────────────────────────────────────────────────────── */
.form-input, .form-textarea, .form-select, .form-input--inline, .form-select--inline {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--rs);
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--blue);
}
.form-textarea {
    width: 100%;
}
.form-input--inline {
    width: 7rem;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-grid label, .form-block {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    color: var(--t2);
    font-weight: 500;
}
.form-block {
    margin-bottom: 1rem;
}
/* Two- and three-column form grid (prototype.css lines 657-658) */
.fr {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}
.fr3 {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:11px;
}
/* Inline helper text below form fields (prototype.css lines 1131-1132) */
.hint {
    display:flex;
    align-items:flex-start;
    gap:5px;
    font-size:12px;
    color:var(--t3);
    margin-top:7px;
    line-height:1.4;
}
.hint i {
    font-size:13px;
    flex-shrink:0;
    margin-top:1px;
}
/* ── App shell: sidebar + main (prototype .nav layout) ─────────────── */
.app-shell {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    flex-direction: row;
}
.app-main {
    flex: 1;
    min-width: 0;
}


/* On desktop (≥768px) the sidebar is always flex — override any Tailwind hidden class. */
@media (min-width: 768px) {nav.nav {
    display: flex !important;
}
 }
.nav {
    width: var(--nw);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .25s cubic-bezier(.4,0,.2,1);
}
.nav-logo {
    padding: 0 12px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border2);
    flex-shrink: 0;
}
.nav-logo-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-logo-name {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    color: var(--text);
}
.nav-items-wrap {
    padding: 6px 0;
    flex: 1;
}
.nav-sec {
    padding: 16px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--t3);
    text-transform: uppercase;
}
.ni {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--rs);
    cursor: pointer;
    margin: 1px 6px;
    transition: background .15s;
    user-select: none;
    text-decoration: none;
}
.ni:hover {
    background: var(--s2);
    text-decoration: none;
}
.ni.active {
    background: var(--s2);
}
.ni-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--t2);
}
.ni-icon .material-symbols-outlined {
    font-size: 20px;
}
.ni.active .ni-icon {
    color: var(--text);
}
.ni-txt {
    display:flex;
    flex-direction:column;
    gap:1px;
    flex:1;
    min-width:0;
    overflow:hidden;
}
.ni-lbl {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ni.active .ni-lbl {
    color: var(--text);
    font-weight: 600;
}
.ni-sub {
    font-size:11.5px;
    color:var(--t3);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-height:1.35;
}
.nav-bot {
    margin-top: auto;
    padding: 9px;
    border-top: 1px solid var(--border2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg,#9B59B6,#5B8AF0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
}
.nav-user-txt {
    flex: 1;
    min-width: 0;
}
.nav-un {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-ur {
    font-size: 11px;
    color: var(--t3);
}
.nav-signout {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--rs);
    display: flex;
    align-items: center;
}
.nav-signout:hover {
    background: var(--s2);
    color: var(--text);
}
/* ── Nav collapse/expand toggle button (prototype lines 139 + 174-200) ─ */
.nav-toggle .material-icons {
    font-size: 18px;
}
/* Toggle button — expanded state (prototype lines 174-187) */
.nav-toggle {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border2);
    background: var(--s2);
    cursor: pointer;
    color: var(--t2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .15s, background .15s, width .25s, height .25s, border-radius .25s;
    opacity: 1 !important;
    visibility: visible !important;
}
.nav-toggle:hover {
    background: var(--s2);
    color: var(--text);
    border-color: var(--border);
}
/* Collapsed: toggle fills the entire 56×56 header bar (prototype lines 191-200) */
.nav.collapsed .nav-toggle {
    margin: 0;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--t2);
}
.nav.collapsed .nav-toggle:hover {
    background: var(--s2);
    color: var(--text);
}
/* ── Nav collapsed state — complete block (prototype lines 147-259) ── */
/* Base collapsed width */
.nav.collapsed {
    width: 56px;
}
/* Max-width transition on text elements so they fade out cleanly (prototype lines 150-155) */
.nav-logo-name,
.ni-lbl,
.ni-badge,
.nav-sec,
.nav-un,
.nav-ur {
    max-width: 220px;
    transition: max-width .2s ease, opacity .15s ease;
}
.nav.collapsed .nav-logo-name,
.nav.collapsed .ni-lbl,
.nav.collapsed .ni-badge,
.nav.collapsed .nav-sec,
.nav.collapsed .nav-un,
.nav.collapsed .nav-ur {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
}
/* Collapsed nav-logo: centre the toggle button, hide mark + name (prototype lines 169-171) */
.nav.collapsed .nav-logo {
    padding: 0;
    justify-content: center;
    gap: 0;
}
.nav.collapsed .nav-logo-mark {
    display: none;
}
.nav.collapsed .nav-logo-name {
    display: none;
}
/* Hide section headers and subtitles when collapsed (prototype lines 203-204) */
.nav.collapsed .nav-sec {
    display: none;
}
.nav.collapsed .ni-sub {
    display: none;
}
/* Nav items wrapper: remove horizontal padding when collapsed (prototype line 207) */
.nav.collapsed .nav-items-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Collapsed nav items: icon perfectly centred in 56px nav (prototype lines 214-221) */
.nav.collapsed .ni {
    justify-content: center;
    padding: 0;
    margin: 1px 4px;
    height: 44px;
    gap: 0;
    width: calc(56px - 8px);
}
/* ni-badge base style (prototype line 232) */
.ni-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}
/* Hide badge and text container when collapsed (prototype lines 231-233) */
.nav.collapsed .ni-txt {
    display: none;
}
.nav.collapsed .ni-badge {
    display: none;
}
/* Collapsed bottom user area (prototype lines 241-242) */
.nav.collapsed .nav-user {
    justify-content: center;
    padding: 7px 0;
}
.nav.collapsed .nav-bot {
    padding: 9px 4px;
}
/* ── Tooltips for collapsed nav items (prototype lines 247-259) ──── */
.nav.collapsed .ni {
    position: relative;
}
.nav.collapsed .ni:hover::after {
    content: attr(data-lbl);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text);
    color: var(--surface);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--rs);
    white-space: nowrap;
    z-index: 800;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* ── Overview (role-aware landing) ─────────────────────────────────── */
.mc-overview {
    max-width: 1040px;
    margin: 1.75rem auto;
    padding: 0 1.5rem;
}
.nav-section {
    margin-bottom: 1.75rem;
}
.nav-section__title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t3);
    font-weight: 700;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.nav-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem;
}
.nav-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.nav-card:hover {
    border-color: var(--bb);
    box-shadow: var(--shm);
    transform: translateY(-1px);
    text-decoration: none;
}
.nav-card__icon {
    color: var(--blue);
}
/* ── Job-profile / generic list cards ──────────────────────────────── */
.job-profile-list, .progress-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.job-profile-card, .progress-card, .match-rank-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 1.1rem 1.25rem;
}
.job-profile-card__meta, .progress-card__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .4rem;
}
.job-profile-card__title {
    margin: 0 0 .35rem;
    font-size: 1rem;
}
.job-profile-card__title a {
    color: var(--text);
}
.job-profile-card__info, .progress-card__meta {
    color: var(--t2);
    font-size: .85rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0;
}
.job-profile-card__date {
    color: var(--t3);
    font-size: .8rem;
    margin: .35rem 0 0;
}
.progress-card__counts {
    display: flex;
    gap: 1.5rem;
    margin: 0 0 .35rem;
}
.progress-phases {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .82rem;
    color: var(--t2);
}
/* ── Matching workspace — ranked candidate list (prototype .cand-item) ─ */
.cand-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cand-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    transition: all .15s;
    text-decoration: none;
    color: var(--text);
}
.cand-item:hover {
    border-color: var(--green);
    box-shadow: var(--sh);
    text-decoration: none;
}
.cand-item.sel {
    border:2px solid var(--green);
    background:var(--gl);
}
.cand-chk {
    width:16px;
    height:16px;
    border-radius:4px;
    border:1.5px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all .15s;
}
.cand-item.sel .cand-chk {
    background:var(--green);
    border-color:var(--green);
}
.cand-rank {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--t2);
    flex-shrink: 0;
}
.cand-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bb), var(--blue));
}
.cand-name {
    flex: 1;
    font-weight: 600;
    min-width: 0;
}
.cand-av--lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
}
/* ── Match-score progress bar + tier badges (prototype .mbw/.mb/.mf/.mpct/.rbadge) ─ */
.mbw {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 155px;
}
.mb {
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    flex: 1;
    overflow: hidden;
}
.mf {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}
.mpct {
    font-size: 12px;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
    font-family: var(--mono);
}
.rbadge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}
.rbadge-ex {
    background: var(--gl);
    color: var(--gd);
    border: 1px solid var(--gb);
}
.rbadge-good {
    background: #E3F2FD;
    color: #1565C0;
    border: 1px solid #90CAF9;
}
.rbadge-mod {
    background: #FFF8E1;
    color: #F57F17;
    border: 1px solid #FFE082;
}
.rbadge-low {
    background: var(--s2);
    color: var(--t3);
    border: 1px solid var(--border2);
}
.detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.detail-header h1 {
    margin: 0;
}
.detail-header__meta {
    color: var(--t2);
    font-size: .9rem;
    margin: .25rem 0 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
/* ── Matching workspace ────────────────────────────────────────────── */
.match-filter {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.match-rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.match-rank-card__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .6rem;
}
.match-rank-card__name {
    font-weight: 700;
}
.match-rank-card__name a {
    color: var(--text);
}
.match-rank-card__pct {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--blue);
    margin-left: auto;
}
.match-rank-card__detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0;
}
.match-rank-card__detail dt {
    color: var(--t3);
    font-size: .82rem;
}
.match-rank-card__detail dd {
    margin: 0;
}
.match-narrative {
    font-size: .92rem;
    line-height: 1.6;
}
/* ── Candidate status stepper ──────────────────────────────────────── */
.status-stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    margin: 0 0 1rem;
}
.status-stepper__step {
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: .4;
    font-size: .82rem;
}
.status-stepper__step.is-done {
    opacity: 1;
}
.status-stepper__dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--border2);
    color: var(--t3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .72rem;
}
.status-stepper__step.is-done .status-stepper__dot {
    background: var(--blue);
    color: #fff;
}
.status-form, .note-form, .membership-form, .ai-generate-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}
.preference-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.preference-group form {
    display: inline;
}
.hm-cv-name {
    margin: 0 0 .4rem;
}
.hm-cv-name a {
    color: var(--text);
}
/* ── Notes ─────────────────────────────────────────────────────────── */
.note-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.note-item {
    background: var(--al);
    border: 1px solid var(--ab);
    border-radius: var(--rs);
    padding: 10px 13px;
}
.note-item__meta {
    color: var(--amber);
    font-size: 11px;
    margin: 0 0 3px;
    font-weight: 500;
}
.note-item__body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}
/* prototype class aliases (note-meta / note-text) — keep in sync with BEM above */
.note-meta {
    font-size: 11px;
    color: var(--amber);
    margin-bottom: 3px;
    font-weight: 500;
}
.note-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
/* ── Stat cards ────────────────────────────────────────────────────── */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .9rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.stat-card__value {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--text);
}
.stat-card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 5px;
}
.stat-sub {
    font-size: 11px;
    color: var(--t3);
    margin-top: 3px;
}
/* ── Statistics funnel + distribution ──────────────────────────────── */
.funnel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.funnel-row {
    display: grid;
    grid-template-columns: 10rem 1fr 3rem;
    align-items: center;
    gap: .75rem;
}
.funnel-row__label {
    color: var(--t2);
    font-size: .88rem;
}
.funnel-row__bar {
    height: .9rem;
    border-radius: 999px;
    background: var(--blue);
    width: var(--w);
    min-width: 3px;
}
.funnel-row__count {
    text-align: right;
    font-weight: 700;
}
.distribution-bars {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.distribution-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.distribution-row__label {
    width: 8rem;
    color: var(--t2);
    font-size: .88rem;
}
/* ── Admin sub-nav ─────────────────────────────────────────────────── */
.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.admin-subnav__item {
    padding: .5rem .9rem;
    text-decoration: none;
    color: var(--t2);
    border-bottom: 2px solid transparent;
    font-size: .9rem;
}
.admin-subnav__item:hover {
    color: var(--text);
    text-decoration: none;
}
.admin-subnav__item.is-active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}
/* ── ODC archetype drive-card grid + state modifiers (prototype.css lines 724-747) ─
   .dg4     — 4-column selection grid (step 3 of job-profile wizard + ODC drives step)
   .dc      — drive card base (border, radius, padding, cursor, text-align)
   .fc/.mc  — feminine/masculine type colour accent (border override)
   .di      — circular icon container inside each card
   .dn      — drive code/name label
   .dt      — drive sub-label (hidden when a selection state is active)
   .sb      — selection-rank badge (1st / 2nd / 3rd); hidden by default    */
.dg4 {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin-bottom:9px;
}
.dc {
    border:1px solid var(--border);
    border-radius:var(--rs);
    padding:13px 8px;
    cursor:pointer;
    transition:all .15s;
    text-align:center;
    position:relative;
    background:var(--surface);
}
.dc.dis {
    opacity:.27;
    cursor:not-allowed;
    transform:none!important;
}
.dc.fc {
    border-color:var(--pb);
}
.dc.mc {
    border-color:var(--bb);
}
.dc.s1 {
    border:2px solid var(--green);
    background:var(--gl);
}
.dc.s2 {
    border:2px solid var(--blue);
    background:var(--bl);
}
.dc.s3 {
    border:2px solid var(--amber);
    background:var(--al);
}
.dc.fc:hover:not(.dis):not(.s1):not(.s2):not(.s3) {
    border-color:var(--pink);
    background:var(--pl);
}
.dc.mc:hover:not(.dis):not(.s1):not(.s2):not(.s3) {
    border-color:var(--blue);
    background:var(--bl);
}
.di {
    width:31px;
    height:31px;
    border-radius:50%;
    margin:0 auto 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}
.fc .di {
    background:var(--pl);
    color:var(--pink);
}
.mc .di {
    background:var(--bl);
    color:var(--blue);
}
.s1 .di {
    background:var(--gl);
    color:var(--green);
}
.s2 .di {
    background:var(--bl);
    color:#185FA5;
}
.s3 .di {
    background:var(--al);
    color:var(--amber);
}
.dn {
    font-size:12px;
    font-weight:700;
    color:var(--text);
}
.dt {
    font-size:10px;
    color:var(--t3);
    margin-top:2px;
}
.dc.s1 .dt,.dc.s2 .dt,.dc.s3 .dt {
    display:none;
}
.sb {
    font-size:10px;
    font-weight:600;
    padding:2px 5px;
    border-radius:20px;
    margin-top:3px;
    display:none;
}
.s1 .sb {
    display:inline-block;
    background:var(--gl);
    color:var(--gd);
}
.s2 .sb {
    display:inline-block;
    background:var(--bl);
    color:#185FA5;
}
.s3 .sb {
    display:inline-block;
    background:var(--al);
    color:var(--amber);
}
/* ── Pitfalls ──────────────────────────────────────────────────────── */
.pitfall-options {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .5rem 0;
}
.pitfall-option {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
}
/* ── Pitfall card grid + state modifiers (prototype.css lines 772-785) ─
   .pg5     — 5-column selection grid (step 4 of the job-profile wizard)
   .pc      — pitfall card base (modifier-only; shares border/radius with .dc)
   .pb2     — inline badge ("Most critical" / "Important") hidden by default;
              shown when .pc.sc or .pc.si2 is active                       */
.pg5 {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px;
}
.pc.dis2 {
    opacity:.27;
    cursor:not-allowed;
}
.pc.fc {
    border-color:var(--pb);
}
.pc.mc {
    border-color:var(--bb);
}
.pc.sc {
    border:2px solid var(--red);
    background:var(--rl);
}
.pc.si2 {
    border:2px solid var(--amber);
    background:var(--al);
}
.pc.fc .di {
    background:var(--pl);
    color:var(--pink);
}
.pc.mc .di {
    background:var(--bl);
    color:var(--blue);
}
.pc.sc .di {
    background:var(--rl);
    color:var(--red);
}
.pc.si2 .di {
    background:var(--al);
    color:var(--amber);
}
.pb2 {
    font-size:10px;
    font-weight:600;
    padding:2px 5px;
    border-radius:20px;
    margin-top:3px;
    display:none;
}
.pc.sc .pb2 {
    display:inline-block;
    background:var(--rl);
    color:var(--pf-dark);
}
.pc.si2 .pb2 {
    display:inline-block;
    background:var(--al);
    color:var(--amber);
}
.pc.sc .dt,.pc.si2 .dt {
    display:none;
}
/* ── Result competencies list (shared) ─────────────────────────────── */
.result-competencies {
    font-size: .9rem;
    line-height: 1.8;
}
/* ── Auth + privacy screens ────────────────────────────────────────── */
.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 3.5rem 1rem;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shm);
    padding: 2rem;
}
.auth-card__title {
    margin-bottom: 1.5rem;
}
.auth-card .form-block {
    margin-bottom: 1rem;
}
.auth-card .btn {
    width: 100%;
    margin-top: .5rem;
}
.auth-card__link {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .88rem;
}
.mc-privacy {
    max-width: 600px;
    margin: 3.5rem auto;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shm);
}
/* ── Wizard layout ─────────────────────────────────────────────────── */
.wizard-container {
    max-width: 900px;
    margin: 1.75rem auto;
    padding: 0 1.5rem;
}
.wizard-header {
    margin-bottom: 2rem;
}
.wizard-steps {
    display: flex;
    gap: .5rem;
    margin: .75rem 0 .25rem;
}
.wizard-step {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--border2);
    color: var(--t3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
}
.wizard-step--active {
    background: var(--text);
    color: var(--bg);
}
.wizard-step--done {
    background: var(--blue);
    color: #fff;
}
.wizard-step-label {
    color: var(--t2);
    font-size: .85rem;
    margin: 0;
}
.wizard-instruction {
    color: var(--t2);
    margin-bottom: 1.25rem;
}
.wizard-progress {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}
.wizard-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
/* .footer / .sc2 — wizard step-bar footer row + centred step counter
   Verbatim from prototype.css lines 1150-1152. Used in jobprofile, ODC,
   education wizards (prototype HTML lines 3167, 3546, 4581, 4602, 4659,
   6271-6359). */
.footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:15px;
    border-top:1px solid var(--border2);
    position:relative;
}
.footer>.sc2,.footer .btng>.sc2 {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
}
.sc2 {
    font-size:12px;
    color:var(--t3);
}
/* ── Archetype grid (step 1) ───────────────────────────────────────── */
.archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .9rem;
    margin-bottom: 1.5rem;
}
.archetype-card {
    position: relative;
    padding: 1.1rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    transition: border-color .15s, transform .1s;
    user-select: none;
}
.archetype-card:hover {
    border-color: var(--bb);
    background: var(--bl);
    transform: translateY(-2px);
}
.archetype-card--selected, .archetype-card.ranked, .archetype-card.archetype-card--selected {
    border-color: var(--blue);
    background: var(--bl);
}
.archetype-card__rank, .archetype-rank-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.archetype-card__rank:empty, .archetype-rank-badge:empty {
    display: none;
}
.archetype-card__drive, .archetype-drive {
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
}
.archetype-icon {
    color: var(--blue);
    font-size: 2rem !important;
}
.archetype-name {
    font-size: 1rem;
    font-weight: 700;
}
.archetype-tagline {
    font-size: .78rem;
    color: var(--t2);
}
/* ── Summary drives / connector (shared with show screens) ─────────── */
.summary-drives {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.summary-drive-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .75rem 1rem;
    border-radius: var(--r);
    min-width: 110px;
    text-align: center;
    font-size: .85rem;
    background: var(--bl);
    border: 1px solid var(--bb);
}
.summary-drive-rank {
    font-weight: 700;
    font-size: 1rem;
}
/* ── Competency cards (step 2) ─────────────────────────────────────── */
.competency-group {
    margin-bottom: 1.75rem;
}
.competency-group-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    margin-bottom: .75rem;
}
.competency-group-drive {
    font-size: .8rem;
    font-weight: 400;
    color: var(--t2);
    margin-left: auto;
}
.competency-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.competency-card {
    padding: .8rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--rs);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.competency-card:hover {
    border-color: var(--bb);
    background: var(--bl);
}
.competency-card.selected {
    border-color: var(--green);
    background: var(--gl);
}
.competency-card.disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.competency-kind {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t3);
    display: block;
    margin-bottom: .2rem;
}
.competency-text {
    margin: 0;
    font-size: .9rem;
}
/* ── Result / profile screens ──────────────────────────────────────── */
.result-container, .profile-container {
    max-width: 900px;
    margin: 1.75rem auto;
    padding: 0 1.5rem;
}
.result-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sh);
}
.result-section h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    margin-bottom: 1rem;
}
.result-drives {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.result-drive-card {
    flex: 1;
    min-width: 160px;
    padding: 1.1rem;
    border-radius: var(--r);
    text-align: center;
    background: var(--bl);
    border: 1px solid var(--bb);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}
.result-drive-rank {
    font-size: 1.1rem;
    font-weight: 800;
}
.result-drive-tag {
    font-size: .78rem;
    color: var(--t2);
    margin: 0;
}
.result-connector {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.connector-card {
    padding: .85rem 1.25rem;
    border-radius: var(--r);
    background: var(--bl);
    border: 1px solid var(--bb);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 130px;
}
.connector-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--t3);
}
.connector-badge {
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
}
.result-balances {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.balance-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.balance-label {
    width: 4rem;
    font-weight: 600;
    text-transform: capitalize;
}
.balance-track {
    flex: 1;
    height: .7rem;
    background: var(--s2);
    border-radius: 999px;
    overflow: hidden;
}
.balance-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 999px;
    transition: width .4s;
}
.balance-score {
    width: 2.5rem;
    text-align: right;
    font-size: .85rem;
    color: var(--t2);
}
.result-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}
.profile-archetypes {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.profile-archetype-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border-radius: var(--rs);
    border-left: 4px solid var(--blue);
    background: var(--bl);
}
.profile-rank {
    font-weight: 800;
    width: 1.5rem;
    text-align: center;
}
.profile-archetype-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.profile-archetype-info em {
    font-size: .82rem;
    color: var(--t2);
    font-style: normal;
}
.profile-shadow {
    margin: .25rem 0 .5rem;
    padding: .6rem 1rem;
    background: var(--s2);
    border-radius: var(--rs);
    font-size: .85rem;
    color: var(--t2);
    border-left: 3px solid var(--border);
}
.profile-competencies {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    padding: 0;
}
.profile-competency {
    padding: .75rem 1rem;
    border-radius: var(--rs);
    border-left: 4px solid var(--bb);
    background: var(--bl);
    font-size: .9rem;
}
/* ── Form validation errors (prototype inline-red pattern) ─────────── */
/* Rails wraps invalid fields in .field_with_errors — display:contents
   prevents the wrapper div from breaking flex/grid child layouts.    */
.field_with_errors {
    display: contents;
}
.field_with_errors .form-input,
.field_with_errors .form-textarea,
.field_with_errors .form-select,
.field_with_errors input:not([type=submit]):not([type=button]):not([type=hidden]):not([type=checkbox]):not([type=radio]),
.field_with_errors textarea,
.field_with_errors select {
    border-color: var(--red) !important;
    background: var(--rl);
}
select:user-invalid,
textarea:user-invalid {
    border-color: var(--red) !important;
    background: var(--rl);
}
/* Error summary box (shown at top of forms with validation failures) */
.form-errors {
    background: var(--rl);
    border: 1px solid var(--rb);
    border-radius: var(--rs);
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    color: var(--red);
    font-size: .85rem;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.form-errors .form-errors__icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
}
.form-errors ul {
    margin: .25rem 0 0;
    padding-left: 1.2rem;
}
.form-errors li {
    margin-bottom: .1rem;
}
/* Inline field error text */
.field-error {
    display: block;
    color: var(--red);
    font-size: .76rem;
    margin-top: .2rem;
    line-height: 1.3;
}
/* Input placeholder improvement — prototype uses subdued grey */
input::placeholder, textarea::placeholder {
    color: var(--t3);
}
/* ── Improved empty state (prototype hm-empty pattern) ─────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: var(--t3);
    text-align: center;
}
.empty-state .material-icons, .empty-state .material-symbols-outlined {
    font-size: 36px;
    color: var(--border);
}
.empty-state__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--t2);
    margin: 0;
}
.empty-state__sub {
    font-size: .82rem;
    color: var(--t3);
    margin: 0;
}
/* ── Tabs (tabs_controller) ─────────────────────────────────────────── */
.tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
}
.tab-btn {
    padding: .55rem 1.1rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--t2);
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font);
    transition: color .15s;
}
.tab-btn:hover {
    color: var(--text);
}
.tab-btn.is-active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}
.tab-panel {
    display: none;
}
.tab-panel.is-active {
    display: block;
}
/* ── Toggle row — div+tog-thumb pattern (prototype lines 660-668) ──── */
/* Used in wizard step 1 own-company toggle and similar flow toggles.   */
/* Distinct from the checkbox+.tog-sl pattern (admin/settings screens). */
.tog-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: var(--rs);
    border: 1px solid var(--border);
    background: var(--bg);
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.tog-row:hover {
    border-color: var(--gb);
}
.tog-row.on {
    background: var(--gl);
    border-color: var(--gb);
}
.tog {
    width: 30px;
    height: 17px;
    border-radius: 9px;
    background: var(--border);
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.tog.on {
    background: var(--green);
}
.tog-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tog.on .tog-thumb {
    left: 15px;
}
.tog-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.tog-sub {
    font-size: 12px;
    color: var(--t3);
    margin-left: auto;
}
.tog-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.tog-sm:hover, .tog-sm.on {
    border-color: var(--gb);
}
.tog-sm.on {
    background: var(--gl);
}
.tog-sm-lbl {
    font-size: 12px;
    font-weight: 500;
    color: var(--t2);
}
.tog-sm.on .tog-sm-lbl {
    color: var(--gd);
}
/* ── Person-selector + dropdown (.psel / .dd family) (prototype.css lines 659-676) ──────
   Used in the candidate/user person-select widget wherever a JFA or HM picks a person
   from a searchable dropdown list (e.g. assign reviewer, select candidate).
   ──────────────────────────────────────────────────────────────────────────────────────── */
.psel {
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border-radius:var(--rs);
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
    min-height:37px;
    transition:border-color .15s;
}
.psel:hover {
    border-color:var(--green);
}
.psel.filled {
    border-color:var(--gb);
}
.p-av {
    width:21px;
    height:21px;
    border-radius:50%;
    background:var(--gl);
    display:none;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:700;
    color:var(--gd);
    flex-shrink:0;
}
.p-ph {
    font-size:13px;
    color:var(--t3);
    flex:1;
}
.p-nm {
    font-size:13px;
    color:var(--text);
    font-weight:500;
    flex:1;
    display:none;
}
.dd {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    margin-top:4px;
    display:none;
    box-shadow:var(--shm);
    position:relative;
    z-index:200;
}
.dd.open {
    display:block;
}
.dd-srch {
    padding:6px 9px;
    border-bottom:1px solid var(--border2);
}
.dd-srch input {
    font-size:12px;
    padding:5px 9px;
    border-radius:var(--rs);
    border:1px solid var(--border);
    background:var(--bg);
    width:100%;
}
.dd-list {
    max-height:145px;
    overflow-y:auto;
}
.dd-item {
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    cursor:pointer;
    font-size:13px;
    transition:background .1s;
}
.dd-item:hover {
    background:var(--bg);
}
.dd-av {
    width:23px;
    height:23px;
    border-radius:50%;
    background:var(--gl);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:700;
    color:var(--gd);
    flex-shrink:0;
}
.dd-role {
    font-size:11px;
    color:var(--t3);
    margin-left:auto;
}
.dd-empty {
    padding:9px 11px;
    font-size:12px;
    color:var(--t3);
    text-align:center;
}
.dd-add {
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 11px;
    cursor:pointer;
    font-size:13px;
    color:var(--green);
    border-top:1px solid var(--border2);
    font-weight:500;
}
.dd-add:hover {
    background:var(--gl);
}
/* ── Settings toggle — label+input[checkbox]+.tog-sl pattern (prototype lines 403-408) ── */
/* Used in .pm-set-row rows: admin settings, role-settings, hub settings, vacancy templates. */
/* .tog:has(.tog-sl) overrides the div-variant dimensions for the checkbox-label variant.   */
.tog:has(.tog-sl) {
    width: 40px;
    height: 22px;
    border-radius: 0;
    background: transparent;
}
.tog input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.tog-sl {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s;
}
.tog input:checked + .tog-sl {
    background: var(--blue);
}
.tog-sl:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tog input:checked + .tog-sl:before {
    transform: translateX(18px);
}
/* ── Notification / bell panel ──────────────────────────────────────── */
.notif-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 92vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shl);
    z-index: 501;
    display: none;
    flex-direction: column;
}
.notif-panel__hdr {
    padding: .75rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    border-bottom: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.notif-item {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border2);
    font-size: .85rem;
    cursor: pointer;
    transition: background .1s;
}
.notif-item:hover {
    background: var(--s2);
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item.is-unread {
    background: var(--bl);
}
/* ── Drive block family — job-profile drives section + ODC result screens ── */
/* Ported from prototype.css lines 824-838 (drv-blk family + seclbl + tc)   */
.seclbl {
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--t3);
    text-transform:uppercase;
    margin-bottom:10px;
    margin-top:16px;
}
.seclbl:first-of-type {
    margin-top:0;
}
.drv-blk {
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--surface);
    margin-bottom:8px;
}
.dh {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 13px;
    background:var(--s2);
}
.dh-ic {
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    flex-shrink:0;
}
.dh-nm {
    font-size:13px;
    font-weight:700;
    flex:1;
    min-width:0;
}
.dh-type {
    font-size:10px;
    font-weight:600;
    padding:2px 7px;
    border-radius:20px;
    white-space:nowrap;
}
.drv-blk.fb {
    border-color:var(--pb);
}
.drv-blk.mb {
    border-color:var(--bb);
}
.drv-blk.fb .dh {
    background:var(--pl);
}
.drv-blk.mb .dh {
    background:var(--bl);
}
.drv-blk.fb .dh-ic {
    background:var(--pb);
    color:#6B1A38;
}
.drv-blk.mb .dh-ic {
    background:var(--bb);
    color:#0E3D7A;
}
.drv-blk.fb .dh-nm {
    color:#5A0F2A;
}
.drv-blk.mb .dh-nm {
    color:#072E5E;
}
.drv-blk.fb .dh-type {
    background:var(--pb);
    color:#5A0F2A;
}
.drv-blk.mb .dh-type {
    background:var(--bb);
    color:#072E5E;
}
.tc {
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    min-width:33px;
}
.drv-blk.fb .tc {
    color:#8B2A50;
}
.drv-blk.mb .tc {
    color:var(--bd);
}
.notif-item.is-unread:hover {
    background: color-mix(in srgb, var(--bl) 80%, var(--s2));
}
/* ── Mobile utilities ─────────────────────────────────────────────── */
/* Used by mobile-sidebar Stimulus controller (sidebar toggle on < 768px) */
.hidden {
    display: none;
}
.flex {
    display: flex !important;
}


/* ── Mobile layout (NF5 — 375px viewport) ───────────────────────── */
@media (max-width: 767px) {/* Sidebar: overlay mode on narrow screens */
  #mobile-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 999;
    box-shadow: 4px 0 16px rgba(0,0,0,.25);
}
/* Reduce page padding */
  .page-container {
    padding: 10px 12px 20px;
}
.page-hdr {
    padding: 16px 12px 0;
}
/* Tables: horizontal scroll to prevent overflow */
  .card {
    overflow-x: auto;
}
/* Stat grids wrap on narrow screens */
  .stat-grid, .kpi-grid {
    flex-wrap: wrap !important;
}
/* Topbar: reduce horizontal padding */
  .topbar {
    padding: 0 12px;
}

}


/* ── Extra narrow viewports (375px / iPhone SE) ─────────────────── */
@media (max-width: 480px) {table {
    display: block;
    overflow-x: auto;
}
.stat-card {
    min-width: 0;
    flex: 1 1 100%;
}
.topbar {
    padding: 0 8px;
}

}
.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    display: inline-block;
    flex-shrink: 0;
}
.notif-badge {
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
}
/* ── Screen show/hide + fade-up animation (prototype lines 606-608) ──── */
/* .screen panels are hidden by default; .active makes them visible.      */
/* The @keyframes fu animation fires on entry for a subtle fade-up.       */
.screen {
    display: none;
    animation: fu .18s ease;
}
.screen.active {
    display: block;
}

@keyframes fu {from {
    opacity: 0;
    transform: translateY(5px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
 }


/* ── Keyframe animations (prototype lines 835, 1056, 1323, 1352, 1392) ── */
/* spin — loading spinner used in wizard step 6 + regen-flow (line 835)   */
@keyframes spin {to {
    transform: rotate(360deg);
}
 }
/* notifPulse — deep-link highlight pulse on notification target (line 1056) */
.notif-highlight {
    animation: notifPulse 1.6s ease;
}

@keyframes notifPulse {0% {
    box-shadow: 0 0 0 0 rgba(59,130,246,.45);
}
60% {
    box-shadow: 0 0 0 7px rgba(59,130,246,0);
}
100% {
    box-shadow: 0 0 0 0 rgba(59,130,246,0);
}
 }

/* drawerIn — career-portal job-detail drawer slide-in (line 1323) */
@keyframes drawerIn {from {
    transform: translateX(48px);
    opacity: 0;
}
to {
    transform: translateX(0);
    opacity: 1;
}
 }

/* fadeUp — career-portal apply modal entrance (line 1352) */
@keyframes fadeUp {from {
    transform: translateY(20px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
 }
/* fadeInUp — apply-modal multi-step transition (line 1392) */
.apply-step {
    animation: fadeInUp .25s ease;
}

@keyframes fadeInUp {from {
    opacity: 0;
    transform: translateY(8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
 }
/* ── Pitfall result boxes (.pf-res / .pfb family) ───────────────────────
   Verbatim from prototype.css lines 786-808.
   Used on the matching/candidate-detail pitfall section to show "critical"
   (.pfb.cr) and "important" (.pfb.im) pitfall hits.
   ─────────────────────────────────────────────────────────────────────── */
.ctx-bar {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    padding:7px 12px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--rs);
    margin-bottom:12px;
    font-size:12px;
    color:var(--t2);
}
.ctx-pill {
    padding:2px 8px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    background:var(--gl);
    color:var(--gd);
}
.pf-res {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:13px;
}
.pfb {
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid;
    display:flex;
    align-items:stretch;
}
.pfb.cr {
    border-color:var(--rb);
}
.pfb.im {
    border-color:var(--ab);
}
.pfb-h {
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:6px;
    width:120px;
    flex-shrink:0;
    box-sizing:border-box;
}
.pfb.cr .pfb-h {
    background:var(--rl);
}
.pfb.im .pfb-h {
    background:var(--al);
}
.pfb-ic {
    width:25px;
    height:25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    flex-shrink:0;
}
.pfb.cr .pfb-ic {
    background:var(--rb);
    color:var(--pf-dark);
}
.pfb.im .pfb-ic {
    background:var(--ab);
    color:#7A4A00;
}
.pfb-nm {
    font-size:13px;
    font-weight:600;
}
.pfb.cr .pfb-nm {
    color:#6B1414;
}
.pfb.im .pfb-nm {
    color:var(--amber-dark);
}
.pfb-bdg {
    font-size:10px;
    font-weight:600;
    padding:2px 7px;
    border-radius:20px;
    white-space:nowrap;
}
.pfb.cr .pfb-bdg {
    background:#E88A8A;
    color:#3D0A0A;
}
.pfb.im .pfb-bdg {
    background:#DDA030;
    color:#3A1A00;
}
.pfb-b {
    padding:10px 12px;
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.pfb-code {
    font-family:var(--mono);
    font-size:11px;
    margin-bottom:2px;
}
.pfb.cr .pfb-code {
    color:var(--red);
}
.pfb.im .pfb-code {
    color:var(--amber);
}
.pfb-sh {
    font-size:12px;
    color:var(--t2);
    line-height:1.5;
}
/* ── Connector / archetype-pair selector cards (.cg / .cc / .cc-pair / .cp)
   Verbatim from prototype.css lines 770-783 (gap cc-connector-family-missing).
   Used on the connector-selection step of the matching wizard and job-profile
   flow where a JFA picks a Connector archetype pair.
   ──────────────────────────────────────────────────────────────────────────── */
.conn-sec {
    margin-top:15px;
    padding-top:15px;
    border-top:1px solid var(--border2);
}
.conn-t {
    font-size:12px;
    font-weight:600;
    color:var(--t2);
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:6px;
}
.conn-t i {
    font-size:14px;
    color:var(--green);
}
.cg {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:6px;
}
.cc {
    border:1px solid var(--border);
    border-radius:var(--rs);
    padding:8px 10px;
    cursor:pointer;
    transition:all .15s;
    background:var(--surface);
}
.cc:hover {
    border-color:var(--green);
    background:var(--gl);
}
.cc.act {
    border:2px solid var(--green);
    background:var(--gl);
}
.cc.faded {
    opacity:.3;
    cursor:not-allowed;
}
.cc-pair {
    display:flex;
    align-items:center;
    gap:4px;
    margin-bottom:3px;
}
.cp {
    font-size:11px;
    font-weight:600;
    padding:2px 7px;
    border-radius:20px;
}
.cp.f {
    background:var(--pl);
    color:#8B2A50;
}
.cp.m {
    background:var(--bl);
    color:var(--bd);
}
.cp.s {
    background:var(--gl);
    color:var(--gd);
}
.cn {
    font-size:12px;
    color:var(--t2);
}



/* ── Migrated from prototype.css (components) ──────────────────────── */

/* ── Focus visible — WCAG 2.1 AA ─────────────────────────────
   Uses :focus-visible so keyboard users get clear focus rings
   without affecting mouse users.
   ─────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;}
button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue);}
.ni:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
/* ── Scenario Guide ─────────────────────────────────────────── */
#scenario-guide{position:fixed;bottom:20px;right:20px;z-index:9500;width:300px;background:var(--surface);border:1.5px solid var(--bb);border-radius:var(--r);box-shadow:var(--shl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s;}
#scenario-guide.sg-expanded{top:20px;bottom:auto;max-height:calc(100vh - 40px);}
.sg-header{background:var(--blue);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;transition:background .15s;flex-shrink:0;}
.sg-header:hover{background:var(--btn-blue-hover);}
.sg-title{font-size:13px;font-weight:700;flex:1;}
.sg-body{padding:14px 14px 0 14px;overflow-y:auto;flex:1;}
.sg-footer{padding:10px 14px 14px 14px;flex-shrink:0;border-top:1px solid var(--border2);background:var(--surface);}
.sg-step{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border2);}
.sg-step:last-child{border-bottom:none;}
.sg-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;}
.sg-num.done{background:var(--green);color:#fff;}
.sg-num.active{background:var(--blue);color:#fff;}
.sg-num.pending{background:var(--border2);color:var(--t3);}
.sg-step-text{font-size:12px;line-height:1.5;}
.sg-step-text.done{color:var(--t3);text-decoration:line-through;}
.sg-step-text.active{color:var(--text);font-weight:600;}
.sg-step-text.pending{color:var(--t3);}
.sg-action-btn{margin-top:8px;width:100%;font-size:12px;padding:7px 12px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;border:none;border-radius:var(--rs);cursor:pointer;font-weight:600;transition:background .15s;}
.sg-action-btn:hover{background:var(--btn-blue-hover);}
/* Login screen: highlight Sophie Roos */

.mw-arch-card{border:2px solid var(--border);border-radius:var(--r);padding:12px 8px;cursor:pointer;transition:all .15s;text-align:center;position:relative;background:var(--surface);}
.mw-arch-card:hover:not(.disabled){border-color:var(--bb);background:var(--bl);}
.mw-arch-card.selected{border-color:var(--blue);background:var(--bl);}
.mw-arch-card.selected::after{content:'✓';position:absolute;top:5px;right:7px;font-size:11px;font-weight:700;color:var(--blue);}
.mw-arch-card.auto-sel{border-color:var(--amber);background:var(--al);cursor:default;}
.mw-arch-card.auto-sel::after{content:'AUTO';position:absolute;top:4px;right:5px;font-size:8px;font-weight:700;color:var(--amber);background:var(--al);border-radius:3px;padding:1px 3px;}
.mw-arch-card.disabled{opacity:.25;cursor:default;filter:grayscale(.7);}
.mw-arch-img{width:44px;height:44px;border-radius:50%;margin:0 auto 7px;background:var(--s2);display:flex;align-items:center;justify-content:center;}
.mw-arch-name{font-size:11px;font-weight:600;line-height:1.3;}
.mw-arch-id{font-size:10px;color:var(--t3);margin-top:2px;}
.mw-substep{display:flex;align-items:center;gap:5px;padding:5px 13px;border-radius:20px;font-size:12px;font-weight:500;background:var(--s2);color:var(--t3);}
.mw-substep.active{background:var(--text);color:var(--bg);font-weight:700;}
.mw-substep.done{background:var(--blue);color:#fff;font-weight:600;}
.mw-substep.done::before{content:'✓ ';}
.mw-comp-card{border:2px solid var(--border);border-radius:var(--rs);padding:11px 13px;cursor:pointer;transition:all .15s;position:relative;background:var(--surface);}
.mw-comp-card:hover{border-color:var(--bb);background:var(--bl);}
.mw-comp-card.selected{border-color:var(--green);background:var(--gl);}
.mw-comp-card.selected::after{content:'✓';position:absolute;top:6px;right:8px;font-size:13px;font-weight:700;color:var(--green);}
.mw-comp-arch-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;margin-bottom:5px;}
.mw-comp-text{font-size:11px;color:var(--text);line-height:1.5;}
.mw-pbar{height:6px;border-radius:3px;background:var(--border2);overflow:hidden;}
.mw-pbar-fill{height:100%;border-radius:3px;transition:width .35s;}
.mw-step-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.mw-step-num.done{background:var(--green);color:#fff;}
.mw-step-num.active{background:var(--text);color:var(--bg);}
.mw-step-num.pending{background:var(--border2);color:var(--t3);}
.mw-step-lbl{font-size:13px;}
.mw-step-lbl.done{color:var(--green);}
.mw-step-lbl.active{color:var(--text);font-weight:700;}
.mw-step-lbl.pending{color:var(--t3);}

/* ── Material Icons sizing ───────────────────────────────── */
.material-icons{
  font-family:'Material Icons';
  font-weight:normal;
  font-style:normal;
  font-size:18px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  vertical-align:middle;
}
/* Size variants used in icon containers */
.ni-icon .material-icons{font-size:20px;}
.uav-btn .material-icons, .udd-av .material-icons{font-size:16px;}
.bell-wrap .material-icons{font-size:20px;}
.nav-toggle .material-icons{font-size:18px;}
.btn .material-icons{font-size:15px;}
.badge .material-icons{font-size:12px;}

body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
.nav{width:var(--nw);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;flex-shrink:0;overflow-y:auto;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.2,1);}

/* ── Collapsed state ─────────────────────────────────────── */
.nav.collapsed{width:56px;}

/* Hide text elements — use max-width transition so text fades out cleanly */
.nav-logo-name,
.ni-lbl,
.ni-badge,
.nav-sec,
.nav-un,
.nav-ur{max-width:220px;transition:max-width .2s ease, opacity .15s ease;}

.nav.collapsed .nav-logo-name,
.nav.collapsed .ni-lbl,
.nav.collapsed .ni-badge,
.nav.collapsed .nav-sec,
.nav.collapsed .nav-un,
.nav.collapsed .nav-ur{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;}

/* Logo bar — always show toggle button centred when collapsed */
.nav-logo{padding:0 12px;height:56px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border2);flex-shrink:0;}
.nav-logo-mark{flex-shrink:0;display:flex;align-items:center;justify-content:center;}

/* Collapsed nav-logo: hide the SVG logo, centre the toggle button and make it fill the bar */
.nav.collapsed .nav-logo{padding:0;justify-content:center;gap:0;}
.nav.collapsed .nav-logo-mark{display:none;}
.nav.collapsed .nav-logo-name{display:none;}

/* Toggle button — expanded state */
.nav-toggle{
  margin-left:auto;
  width:30px;height:30px;
  border:1px solid var(--border2);
  background:var(--s2);
  cursor:pointer;
  color:var(--t2);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:color .15s, background .15s, width .25s, height .25s, border-radius .25s;
  opacity:1 !important;
  visibility:visible !important;
}
.nav-toggle:hover{background:var(--s2);color:var(--text);border-color:var(--border);}

/* Collapsed: toggle fills the entire 56×56 header bar — easy to click, acts as expand button */
.nav.collapsed .nav-toggle{
  margin:0;
  width:56px;
  height:56px;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--t2);
}
.nav.collapsed .nav-toggle:hover{background:var(--s2);color:var(--text);}

/* Hide section headers and subtitles when collapsed */
.nav.collapsed .nav-sec{display:none;}
.nav.collapsed .ni-sub{display:none;}

/* Nav items wrapper: remove horizontal padding when collapsed so items can centre */
.nav.collapsed .nav-items-wrap{padding-left:0 !important;padding-right:0 !important;}

/* Nav items — icon centred, fixed width */
.ni{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--rs);cursor:pointer;margin:1px 6px;transition:background .15s;user-select:none;min-height:46px;}
.ni:hover{background:var(--s2);}
.ni.active{background:var(--s2);position:relative;}
/* Collapsed: full width of the 56px nav, icon perfectly centred */
.nav.collapsed .ni{
  justify-content:center;
  padding:0;
  margin:1px 4px;
  height:44px;
  gap:0;
  width:calc(56px - 8px);
}

/* Icon — fixed size, never shrinks */
.ni-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--t2);}
.ni-icon .material-icons{font-size:20px;}
.ni.active .ni-icon{color:var(--text);}
.ni-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;overflow:hidden;}
.ni-lbl{font-size:13.5px;font-weight:500;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ni.active .ni-lbl{color:var(--text);font-weight:600;}
.ni-sub{font-size:11.5px;color:var(--t3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;}
.nav.collapsed .ni-txt{display:none;}
.ni-badge{margin-left:auto;min-width:18px;height:18px;border-radius:9px;background:var(--green);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;}
.nav.collapsed .ni-badge{display:none;}

/* Nav section headers */
.nav-sec{padding:16px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--t3);text-transform:uppercase;}

/* Bottom user area */
.nav-bot{margin-top:auto;padding:9px;border-top:1px solid var(--border2);}
.nav-user{display:flex;align-items:center;gap:8px;padding:7px 5px;}
.nav.collapsed .nav-user{justify-content:center;padding:7px 0;}
.nav.collapsed .nav-bot{padding:9px 4px;}
.nav-av{width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,var(--nav-av-a),var(--nav-av-b));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--white);flex-shrink:0;}
.nav-un{font-size:12px;font-weight:600;color:var(--text);}
.nav-ur{font-size:11px;color:var(--t3);}

/* ── Tooltips for collapsed items ──────────────────────── */
.nav.collapsed .ni{position:relative;}
.nav.collapsed .ni:hover::after{
  content:attr(data-lbl);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;transform:translateY(-50%);
  background:var(--text);color:var(--surface);
  font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:var(--rs);
  white-space:nowrap;z-index:800;pointer-events:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50;flex-shrink:0;}
/* Breadcrumb — matches design doc: underlined links, chevron separator, bold current */
.bc{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--t2);}
.bc .sep{color:var(--t3);display:flex;align-items:center;}
.bc .sep .material-icons{font-size:16px;}
.bc .cur{font-weight:700;color:var(--text);text-decoration:none;cursor:default;}
.topbar-r{display:flex;align-items:center;gap:10px;}

/* --- Dark mode --- */
body.dark{
  --bg:#1A1A18;--surface:#242422;--s2:#2C2C2A;--border:#3A3A36;--border2:#323230;
  --text:#F0F0EC;--t2:#A8A8A0;--t3:#6A6A64;
  --green:#2DC98E;--gl:#0D2E22;--gb:#1A5A3C;--gd:#5AC99A;
  --pink:#E07A9D;--pl:#2E1020;--pb:#6B2540;
  --blue:#5A9EE8;--bl:#0D1E38;--bb:#1A4A7A;
  --red:#EF6565;--rl:#2E0D0D;--rb:#6B1A1A;
  --amber:#D4920A;--al:#2A1C08;--ab:#6B4510;
  --purple:#A07AD8;--purl:#1E1030;--purb:#4A2A7A;
  --pf-dark:#EF8080;--amber-dark:#E8A840;
  --btn-blue-hover:#4A8EDA;
  /* Extended tokens — dark mode adaptations */
  --muted:#6A6A64;
  --orange:#E8842A;
  --blue-darker:#2A6AB8;
  --red-dark:#EF8080;
  --career-dark:#0A0A18;
  --match-good:#5AACE8;
  --green-light:#2DC98E;
  --green-pale:#0D2E22;--green-pale-b:#1A5A3C;
  --amber-pale:#2A1C08;--amber-dark-text:#E8A840;
  --red-pale:#2E0D0D;
  --green-icon:#5AC99A;--green-icon-dk:#2DC98E;
  --hrbp-bg:#1E1030;--hrbp-border:#4A2A7A;
  --purple-text:#C9B0E8;--purple-border-lt:#4A2A7A;
  --lena-col:#5A8EBF;
  /* Archetype colours — slightly lighter for dark bg legibility */
  --arch-f1:#3A9E8A;--arch-f2:#5A8A3A;--arch-f3:#6A7DC8;--arch-f3-lt:#2A3A68;
  --arch-f4-dkr:#8B2A50;
  --arch-m2:#3A8BAB;--arch-m3:#A06AD8;--arch-m3-mid:#8A7AB8;--arch-m4:#8B6A3A;
}

/* --- NEW: User avatar button --- */
.user-wrap{position:relative;}
.uav-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--av-grad-a),var(--av-grad-b));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--av-grad-text);cursor:pointer;box-shadow:0 0 0 2px var(--border);transition:box-shadow .15s;flex-shrink:0;user-select:none;overflow:hidden;}
.uav-btn:hover{box-shadow:0 0 0 2px var(--t3);}
.uav-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.user-dd{position:absolute;top:46px;right:0;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shl);z-index:400;display:none;overflow:hidden;}
.user-dd.open{display:block;}
.udd-hdr{padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border2);}
.udd-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--av-grad-a),var(--av-grad-b));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--av-grad-text);flex-shrink:0;overflow:hidden;}
.udd-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.udd-nm{font-size:15px;font-weight:600;color:var(--text);line-height:1.25;}
.udd-em{font-size:12px;color:var(--t3);margin-top:2px;}
.udd-sec{padding:10px 18px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;}
.udd-mi{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;cursor:pointer;font-size:15px;font-weight:400;color:var(--text);transition:background .1s;line-height:1.3;}
.udd-mi:hover{background:var(--bg);}
.udd-mi.danger{color:var(--text);border-top:1px solid var(--border2);padding-top:14px;padding-bottom:14px;font-weight:400;}
.udd-mi.danger:hover{background:var(--bg);}
.udd-mi-arr{color:var(--t2);display:flex;align-items:center;}

/* --- Vacancy Summary Panel (inline slide-down in Job match) --- */
.vac-sum-panel{display:none;border-top:1px solid var(--border2);margin-top:14px;padding-top:16px;animation:fu .18s ease;}
.vac-sum-panel.open{display:block;}
.vac-sum-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border2);}
.vac-sum-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:3px;}
.vac-sum-meta{font-size:12px;color:var(--t2);line-height:1.6;}
.vac-sum-close{width:26px;height:26px;border-radius:50%;border:none;background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);flex-shrink:0;transition:background .12s;}
.vac-sum-close:hover{background:var(--s2);color:var(--text);}
.vac-sum-section{margin-bottom:14px;}
.vac-sum-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:6px;}
.vac-sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.vac-sum-cell{background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);padding:9px 11px;}
.vac-sum-cell-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:3px;}
.vac-sum-cell-val{font-size:12px;color:var(--text);font-weight:500;}
.vac-sum-desc{font-size:13px;color:var(--t2);line-height:1.65;padding:10px 12px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);}
.vac-sum-drives{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.vac-sum-pf-row{display:flex;align-items:flex-start;gap:8px;padding:8px 11px;border-radius:var(--rs);font-size:12px;line-height:1.5;}
.vac-sum-pf-row.crit{background:var(--rl);border:1px solid var(--rb);color:var(--pf-dark);}
.vac-sum-pf-row.imp{background:var(--al);border:1px solid var(--ab);color:var(--amber-dark);}
.vac-sum-crit-row{display:flex;flex-direction:column;gap:5px;}
.vac-sum-mh-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid var(--border2);}
.vac-sum-mh-row:last-child{border-bottom:none;}

/* --- Invite Candidate Modal --- */
.inv-modal{background:var(--surface);border-radius:16px;width:460px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shl);}
.inv-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border2);}
.inv-title{font-size:15px;font-weight:700;color:var(--text);}
.inv-body{padding:20px;overflow-y:auto;}
.inv-field{display:flex;flex-direction:column;gap:4px;margin-bottom:13px;}
.inv-field label{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;}
.inv-field input,.inv-field select{font-size:13px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;font-family:var(--font);transition:border .15s;}
.inv-field input:focus,.inv-field select:focus{border-color:var(--green);}
.inv-row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.inv-footer{padding:14px 20px;border-top:1px solid var(--border2);display:flex;gap:9px;justify-content:flex-end;}
.inv-link-box{background:var(--gl);border:1px solid var(--gb);border-radius:var(--rs);padding:14px 16px;margin-top:4px;}
.inv-link-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gd);margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.inv-link-url{font-size:12px;font-family:var(--mono);color:var(--gd);word-break:break-all;line-height:1.6;}
.inv-link-copy{display:inline-flex;align-items:center;gap:4px;margin-top:9px;padding:4px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--gb);font-size:12px;font-weight:600;color:var(--gd);cursor:pointer;transition:background .12s;}
.inv-link-copy:hover{background:var(--bg);}
.inv-ref-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;background:var(--s2);border:1px solid var(--border);font-size:11px;color:var(--t2);font-family:var(--mono);margin-left:6px;}
.pm-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:700;display:none;align-items:center;justify-content:center;}
.pm-ov.open{display:flex;}
.pm-modal{background:var(--surface);border-radius:16px;width:520px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shl);}
.pm-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border2);}
.pm-title{font-size:15px;font-weight:700;color:var(--text);}
.pm-close{width:28px;height:28px;border-radius:50%;border:none;background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;transition:all .15s;}
.pm-close:hover{background:var(--s2);color:var(--text);}
.pm-tabs{display:flex;gap:0;border-bottom:1px solid var(--border2);padding:0 20px;}
.pm-tab{padding:10px 14px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;}
.pm-tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:600;}
.pm-body{flex:1;overflow-y:auto;padding:20px;}
.pm-panel.active{display:block;}

/* Account info form */
.pm-avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.pm-av-big{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--av-grad-a),var(--av-grad-b));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--av-grad-text);flex-shrink:0;overflow:hidden;cursor:pointer;position:relative;}
.pm-av-big img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pm-av-big .av-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);border-radius:50%;display:none;align-items:center;justify-content:center;}
.pm-av-big:hover .av-overlay{display:flex;}
.pm-av-big .av-overlay i{font-size:20px;color:#fff;}
.pm-av-info{display:flex;flex-direction:column;gap:4px;}
.pm-av-hint{font-size:12px;color:var(--t3);line-height:1.4;}
.pm-av-btns{display:flex;gap:7px;margin-top:4px;}
.pm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px;}
.pm-field{display:flex;flex-direction:column;gap:4px;margin-bottom:11px;}
.pm-field label{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;}
.pm-field input,.pm-field select{font-size:13px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;width:100%;font-family:var(--font);transition:border .15s;}
.pm-field input:focus,.pm-field select:focus{border-color:var(--green);}
.pm-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9A94' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}

/* Advanced tab */
.pm-adv-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border2);}
.pm-adv-row:last-child{border-bottom:none;}
.pm-adv-l{display:flex;flex-direction:column;gap:2px;}
.pm-adv-lbl{font-size:13px;font-weight:500;color:var(--text);}
.pm-adv-val{font-size:12px;color:var(--t3);}
.pm-deact-box{margin-top:20px;padding:14px;background:var(--rl);border:1px solid var(--rb);border-radius:var(--rs);}
.pm-deact-title{font-size:13px;font-weight:700;color:var(--red);margin-bottom:6px;}
.pm-deact-list{font-size:12px;color:var(--red);margin-left:16px;line-height:1.8;}

/* QR tab */
.pm-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0;}
.pm-qr-box{width:180px;height:180px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:12px;display:flex;align-items:center;justify-content:center;}
.pm-qr-name{font-size:15px;font-weight:700;color:var(--text);}
.pm-qr-sub{font-size:12px;color:var(--t3);text-align:center;line-height:1.5;max-width:280px;}
.pm-qr-role-badge{font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;background:var(--gl);color:var(--gd);display:inline-flex;align-items:center;gap:5px;}

/* Settings panel */
.pm-set-section{margin-bottom:20px;}
.pm-set-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:10px;}
.pm-set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border2);}
.pm-set-row:last-child{border-bottom:none;}
.pm-set-l{display:flex;align-items:center;gap:9px;}
.pm-set-l i{font-size:16px;color:var(--t2);}
.pm-set-lbl{font-size:13px;font-weight:500;color:var(--text);}
.pm-set-sub{font-size:11px;color:var(--t3);margin-top:1px;}
/* Toggle switch */
.tog{display:inline-block;position:relative;width:40px;height:22px;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;position:absolute;}
.tog-sl{position:absolute;inset:0;background:var(--border);border-radius:11px;cursor:pointer;transition:background .2s;}
.tog input:checked+.tog-sl{background:var(--blue);}
.tog-sl:before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tog input:checked+.tog-sl:before{transform:translateX(18px);}
/* Lang selector */
.lang-seg{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;}
.lang-seg button{flex:1;padding:5px 14px;font-size:12px;font-weight:600;color:var(--t2);background:none;border:none;cursor:pointer;transition:all .15s;font-family:var(--font);}
.lang-seg button.active{background:var(--green);color:#fff;}
/* Hub list in settings */
.pm-hub-list{display:flex;flex-direction:column;gap:6px;}
.pm-hub-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;transition:all .15s;}
.pm-hub-item:hover{border-color:var(--green);}
.pm-hub-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.pm-hub-nm{font-size:13px;font-weight:500;color:var(--text);}
.pm-hub-role{font-size:11px;color:var(--t3);margin-top:1px;}
.pm-hub-arr{margin-left:auto;font-size:13px;color:var(--t3);}

/* Data & Privacy panel */
.pm-privacy-section{margin-bottom:22px;}
.pm-privacy-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
.pm-privacy-desc{font-size:12px;color:var(--t2);line-height:1.6;margin-bottom:10px;}

/* About panel */
.pm-about-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.pm-about-logo{width:52px;height:52px;border-radius:11px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pm-about-logo i{font-size:22px;color:#fff;}
.pm-about-appname{font-size:17px;font-weight:700;color:var(--text);}
.pm-about-version{font-size:12px;color:var(--t3);}
.pm-about-divider{height:1px;background:var(--border2);margin:16px 0;}
.pm-cl-item{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border2);}
.pm-cl-item:last-child{border-bottom:none;}
.pm-cl-ver{font-size:11px;font-weight:700;font-family:var(--mono);color:var(--green);min-width:52px;padding-top:1px;}
.pm-cl-date{font-size:10px;color:var(--t3);margin-top:2px;}
.pm-cl-changes{font-size:12px;color:var(--t2);line-height:1.7;}
.pm-cl-changes li{margin-left:14px;}
.pm-about-company{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:13px 15px;margin-bottom:14px;}
.pm-about-cn{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;}
.pm-about-cd{font-size:12px;color:var(--t2);line-height:1.7;}
.pm-about-links{display:flex;gap:14px;flex-wrap:wrap;}
.pm-about-link{font-size:12px;color:var(--green);cursor:pointer;text-decoration:none;}
.pm-about-link:hover{color:var(--gd);}
.pm-about-footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--border2);text-align:center;font-size:12px;color:var(--t3);}
.pm-about-footer span{color:var(--red);}

/* --- NEW: Hub pill --- */
.hub-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all .15s;user-select:none;box-shadow:var(--sh);}
.hub-pill:hover{background:var(--s2);border-color:var(--t3);}
.hp-txt{display:flex;flex-direction:column;line-height:1.2;}
.hp-org{font-size:10px;color:var(--t3);font-weight:500;}
.hp-role{font-size:12px;color:var(--text);font-weight:600;}
/* Organisation/Role icon pill - matches design doc */
.hub-pill .material-icons.hp-person{font-size:17px;color:var(--t2);}

/* --- NEW: Bell --- */
.bell-wrap{position:relative;}
.bell-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative;}
.bell-btn:hover{background:var(--s2);}
.bell-dot{position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--surface);display:none;}
.bell-count{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;border:2px solid var(--surface);}

/* Notification panel — right side panel (matches design doc) */
.notif-panel-ov{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:500;display:none;}
.notif-panel-ov.open{display:block;}
.notif-panel{position:fixed;top:0;right:0;width:380px;max-width:92vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shl);z-index:501;display:none;flex-direction:column;}
.notif-panel.open{display:flex;}
/* Header — two rows */
.notif-panel-hdr{padding:14px 16px 0 16px;border-bottom:1px solid var(--border2);}
.notif-panel-hdr-row1{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.notif-panel-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);border-radius:var(--rs);transition:background .12s;flex-shrink:0;}
.notif-panel-close:hover{background:var(--s2);}
.notif-panel-close .material-icons{font-size:20px;}
.notif-panel-title{font-size:16px;font-weight:700;color:var(--text);flex:1;}
/* Mark all read — header button */
.notif-mark-all{font-size:12px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--rs);transition:background .12s;white-space:nowrap;font-family:var(--font);}
.notif-mark-all:hover{background:var(--bl);}
.notif-mark-all:disabled{color:var(--t3);cursor:default;}
.notif-mark-all:disabled:hover{background:none;}
/* Filter row */
.notif-panel-hdr-row2{display:flex;align-items:center;gap:8px;padding-bottom:12px;}
.notif-tab-bar{display:flex;gap:0;padding-bottom:0;margin-top:2px;}
.notif-tab{background:none;border:none;border-bottom:2px solid transparent;padding:7px 12px;font-size:12px;font-family:var(--font);color:var(--t2);cursor:pointer;transition:color .12s,border-color .12s;margin-bottom:-1px;font-weight:400;}
.notif-tab:hover{color:var(--text);}
.notif-tab.active{color:var(--text);border-bottom-color:var(--text);font-weight:500;}
.notif-filter-label{font-size:12px;font-weight:600;color:var(--t3);white-space:nowrap;}
.notif-filter-select{font-size:13px;font-weight:500;color:var(--text);background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:5px 28px 5px 12px;cursor:pointer;outline:none;font-family:var(--font);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9A94' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;transition:border-color .12s,background-color .12s;}
.notif-filter-select:hover{border-color:var(--bb);background-color:var(--bl);}
.notif-filter-select:focus{border-color:var(--blue);}
/* List */
.notif-list{flex:1;overflow-y:auto;padding:6px 10px;}
/* Card — clean, no icon, left border accent for unread/action */
.notif-card{background:var(--surface);border:none;border-left:2px solid transparent;padding:10px 14px 9px 12px;transition:background .12s;position:relative;display:grid;grid-template-columns:10px 1fr auto;gap:0 10px;align-items:start;}
.notif-card + .notif-card{border-top:0.5px solid var(--border2);}
.notif-card:hover{background:var(--s2);}
.notif-card.notif-unread{border-left-color:var(--text);}
.notif-card.notif-action{border-left-color:var(--red);}
.notif-card.notif-card-archived{opacity:.5;}
.notif-card.notif-read{opacity:.65;}
/* Dot column */
.notif-card-dot{width:6px;height:6px;border-radius:50%;background:var(--text);margin-top:5px;flex-shrink:0;}
.notif-card-dot.dot-action{background:var(--red);}
.notif-card-dot.dot-read{background:transparent;}
/* Content column */
.notif-card-content{min-width:0;cursor:pointer;}
.notif-card-body{cursor:pointer;}
.notif-card-type{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:2px;}
.notif-card-type.type-action{color:var(--red);}
.notif-card-title{font-size:12px;font-weight:500;color:var(--text);line-height:1.4;margin-bottom:1px;}
.notif-card-desc{font-size:11.5px;color:var(--t2);line-height:1.45;margin-top:3px;}
.notif-card.notif-card-archived .notif-card-title{color:var(--t2);}
/* Meta row */
.notif-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;}
.notif-card-link{font-size:11px;font-weight:500;color:var(--text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px;cursor:pointer;}
.notif-card-link:hover{text-decoration-color:var(--text);}
.notif-time{font-size:11px;color:var(--t3);}
/* Action badge */
.notif-action-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--red);margin-bottom:3px;}
/* Actions column */
.notif-card-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.notif-archive-btn{background:none;border:none;font-size:10.5px;color:transparent;cursor:pointer;padding:1px 0;font-family:var(--font);transition:color .12s;white-space:nowrap;}
.notif-unread-btn{background:none;border:none;font-size:10.5px;color:transparent;cursor:pointer;padding:1px 0;font-family:var(--font);transition:color .12s;white-space:nowrap;display:block;}
.notif-card:hover .notif-unread-btn{color:var(--t3);}
.notif-unread-btn:hover{color:var(--text) !important;}
/* Tab badge */
.notif-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;background:var(--text);color:var(--bg);border-radius:8px;font-size:9px;font-weight:600;margin-left:5px;line-height:1;}
.notif-tab-badge.badge-action{background:var(--red);color:#fff;}
.notif-card:hover .notif-archive-btn{color:var(--t3);}
.notif-archive-btn:hover{color:var(--text) !important;}
.notif-restore-btn{background:none;border:none;font-size:10.5px;color:var(--t3);cursor:pointer;padding:1px 0;font-family:var(--font);transition:color .12s;white-space:nowrap;}
.notif-restore-btn:hover{color:var(--text);}
/* Footer */
.notif-panel-foot{padding:10px 16px;border-top:0.5px solid var(--border2);display:flex;align-items:center;justify-content:space-between;}
.notif-panel-foot-txt{font-size:11px;color:var(--t3);}
.notif-panel-foot a{font-size:12px;font-weight:500;color:var(--text);text-decoration:none;cursor:pointer;}
.notif-panel-foot a:hover{text-decoration:underline;}

/* --- NEW: Hub switcher panel --- */
.hs-ov{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:500;display:none;}
.hs-ov.open{display:block;}
.hs-panel{position:fixed;top:0;right:0;width:400px;max-width:92vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shl);z-index:501;display:none;flex-direction:column;}
.hs-panel.open{display:flex;}
.hs-hdr{padding:17px 20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--border2);}
.hs-close{width:30px;height:30px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all .12s;}
.hs-close:hover{background:var(--s2);}
.hs-close .material-icons{font-size:20px;}
.hs-title{font-size:16px;font-weight:700;color:var(--text);}
.hs-body{padding:18px 20px;flex:1;overflow-y:auto;}
.hs-urow{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;}
.hs-uav{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#B0C4F0,#7B9DD9);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#1A3A6E;flex-shrink:0;}
.hs-unm{font-size:13px;font-weight:600;color:var(--text);}
.hs-uem{font-size:11px;color:var(--t3);margin-top:1px;}
.hs-intro{font-size:13px;color:var(--t2);line-height:1.55;margin-bottom:22px;}
.hs-fld{margin-bottom:20px;position:relative;}
.hs-flbl{font-size:13px;font-weight:500;color:var(--text);margin-bottom:8px;}
.hs-sbtn{width:100%;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--rs);background:var(--surface);cursor:pointer;font-size:14px;color:var(--text);transition:border-color .12s;}
.hs-sbtn:hover{border-color:var(--t3);}
.hs-sbtn .nm{flex:1;text-align:left;font-weight:400;}
.hs-sbtn .chev{color:var(--t3);font-size:18px;}
.hs-slist{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);box-shadow:var(--shm);z-index:10;max-height:230px;overflow-y:auto;display:none;}
.hs-slist.open{display:block;}
.hs-sitem{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;font-size:13px;transition:background .1s;}
.hs-sitem:hover{background:var(--bg);}
.hs-sitem.sel{background:var(--gl);}
.hs-sitem .ck{margin-left:auto;color:var(--green);font-size:14px;display:none;}
.hs-sitem.sel .ck{display:inline;}
.hs-defrow{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--t2);cursor:pointer;user-select:none;padding:4px 2px;}
.hschk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s;background:var(--surface);}
.hschk.on{background:var(--blue);border-color:var(--blue);}
.hschk.on .material-icons{color:#fff;font-size:11px;display:block;}
.hschk .material-icons{display:none;}
.hs-need-help{padding:10px 16px;border-top:1px solid var(--border2);text-align:center;}
.hs-foot{padding:14px 20px;border-top:1px solid var(--border2);display:flex;gap:9px;justify-content:flex-start;}

/* --- NEW: Page header --- */
.page-hdr{padding:24px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:13px;flex-wrap:wrap;}
.ph-l{display:flex;flex-direction:column;gap:3px;}
.ph-t{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.025em;}
.ph-s{font-size:13px;color:var(--t2);}
.ph-r{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-top:2px;}

/* Instructions button — outlined style matching design doc */
.btn.inst{background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:var(--sh);}
.btn.inst:hover{background:var(--s2);}

/* All original styles below */
.ref-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:var(--s2);border:1px solid var(--border);font-size:11px;color:var(--t2);font-family:var(--mono);}
.content{padding:20px 24px 32px;flex:1;}
.screen{display:none;animation:fu .18s ease;}
.screen.active{display:block;}
@keyframes fu{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:var(--rs);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font);transition:all .15s;box-shadow:var(--sh);}
.btn:hover{background:var(--s2);}
.btn.pr{background:var(--blue);border-color:var(--blue);color:var(--white);}
.btn.pr:hover:not(:disabled){background:var(--btn-blue-hover);}
.btn.pr:disabled{background:var(--border);border-color:var(--border);color:var(--t3);cursor:not-allowed;box-shadow:none;}
.btn.danger{background:var(--red);border-color:var(--red);color:var(--white);}
.btn.danger:hover{background:#B53030;}
.btn.sm{padding:5px 11px;font-size:12px;}
.btng{display:flex;align-items:center;gap:7px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:13px;box-shadow:var(--sh);}
.card-t{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.015em;}
.card-s{font-size:13px;color:var(--t2);margin-bottom:17px;line-height:1.6;}
.card-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.stats-row{display:grid;gap:11px;margin-bottom:18px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 17px;box-shadow:var(--sh);}
.stat-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-val{font-size:24px;font-weight:700;font-family:var(--mono);color:var(--text);}
.stat-sub{font-size:11px;color:var(--t3);margin-top:3px;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);padding:10px 12px;border-bottom:1px solid var(--border);}
.tbl td{padding:12px 12px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border2);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background .1s;}.tbl tbody tr:hover td{background:var(--s2);cursor:pointer;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.badge.open{background:var(--gl);border:1px solid var(--gb);color:var(--gd);}
.badge.closed{background:var(--rl);border:1px solid var(--rb);color:var(--red);}
.badge.concept{background:var(--al);border:1px solid var(--ab);color:var(--amber);}
.badge.intern-b{background:var(--purl);border:1px solid var(--purb);color:var(--purple);}
.badge.extern-b{background:var(--s2);border:1px solid var(--border);color:var(--t2);}
.sdot{width:5px;height:5px;border-radius:50%;}
.badge.open .sdot{background:var(--green);}
.badge.closed .sdot{background:var(--red);}
.badge.concept .sdot{background:var(--amber);}
.cs{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid transparent;}
.cs-u{background:#EAF1FB;color:var(--bd);border-color:#A8C8EE;}
.cs-g{background:var(--purl);color:var(--purple);border-color:var(--purb);}
.cs-o{background:var(--al);color:var(--amber);border-color:var(--ab);}
.cs-af{background:var(--rl);color:var(--red);border-color:var(--rb);}
.cs-aa{background:var(--gl);color:var(--gd);border-color:var(--gb);}
.field{margin-bottom:12px;}
.field:last-child{margin-bottom:0;}
.lbl{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px;display:flex;align-items:center;gap:6px;letter-spacing:.01em;}
.req{font-size:10px;padding:1px 6px;border-radius:20px;background:var(--rl);color:var(--red);font-weight:600;}
.opt{font-size:10px;padding:1px 6px;border-radius:20px;background:var(--s2);color:var(--t3);font-weight:500;}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;font-size:13px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;font-family:var(--font);transition:border-color .15s,box-shadow .15s;}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(52,120,199,.12);}
input.filled{border-color:var(--gb);}
textarea{resize:vertical;min-height:78px;line-height:1.6;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;}
.divider{height:1px;background:var(--border2);margin:15px 0;}
.tog-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);margin-bottom:12px;cursor:pointer;user-select:none;transition:all .15s;}
.tog-row:hover{border-color:var(--gb);}
.tog-row.on{background:var(--gl);border-color:var(--gb);}
.tog{display:inline-block;width:30px;height:17px;border-radius:9px;background:var(--border);position:relative;flex-shrink:0;transition:background .2s;}
.tog.on{background:var(--green);}
.tog-thumb{width:13px;height:13px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tog.on .tog-thumb{left:15px;}
.tog-text{font-size:13px;font-weight:500;color:var(--text);}
.tog-sub{font-size:12px;color:var(--t3);margin-left:auto;}
.tog-sm{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);cursor:pointer;user-select:none;transition:all .15s;}
.tog-sm:hover,.tog-sm.on{border-color:var(--gb);}
.tog-sm.on{background:var(--gl);}
.tog-sm-lbl{font-size:12px;font-weight:500;color:var(--t2);}
.tog-sm.on .tog-sm-lbl{color:var(--gd);}
.psel{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);cursor:pointer;min-height:37px;transition:border-color .15s;}
.psel:hover{border-color:var(--green);}
.psel.filled{border-color:var(--gb);}
.p-av{width:21px;height:21px;border-radius:50%;background:var(--gl);display:none;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--gd);flex-shrink:0;}
.p-ph{font-size:13px;color:var(--t3);flex:1;}
.p-nm{font-size:13px;color:var(--text);font-weight:500;flex:1;display:none;}
.dd{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-top:4px;display:none;box-shadow:var(--shm);position:relative;z-index:200;}
.dd.open{display:block;}
.dd-srch{padding:6px 9px;border-bottom:1px solid var(--border2);}
.dd-srch input{font-size:12px;padding:5px 9px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);width:100%;}
.dd-list{max-height:145px;overflow-y:auto;}
.dd-item{display:flex;align-items:center;gap:7px;padding:7px 11px;cursor:pointer;font-size:13px;transition:background .1s;}
.dd-item:hover{background:var(--bg);}
.dd-av{width:23px;height:23px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--gd);flex-shrink:0;}
.dd-role{font-size:11px;color:var(--t3);margin-left:auto;}
.dd-empty{padding:9px 11px;font-size:12px;color:var(--t3);text-align:center;}
.dd-add{display:flex;align-items:center;gap:6px;padding:7px 11px;cursor:pointer;font-size:13px;color:var(--green);border-top:1px solid var(--border2);font-weight:500;}
.dd-add:hover{background:var(--gl);}
.apanel{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-top:5px;display:none;}
.apanel.open{display:block;}
.apanel-t{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.arow{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px;}
.aem{width:100%;font-size:13px;padding:7px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;margin-bottom:7px;font-family:var(--font);}
.abtns{display:flex;gap:5px;justify-content:flex-end;}
.bsm{font-size:12px;padding:5px 11px;border-radius:var(--rs);cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--t2);font-family:var(--font);transition:background .1s;}
.bsm:hover{background:var(--bg);}
.bsm.g{background:var(--green);border-color:var(--green);color:#fff;}
.bsm.g:hover{background:var(--gd);}
.bsm.danger{border-color:var(--rb);color:var(--red);}
.bsm.danger:hover{background:var(--rl);border-color:var(--red);}
.clt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px;margin-bottom:18px;}
.clt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:17px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);}
.clt-card:hover{border-color:var(--green);box-shadow:var(--shm);transform:translateY(-1px);}
.clt-logo{width:40px;height:40px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;}
.clt-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.clt-sec{font-size:12px;color:var(--t3);}
.clt-stats{display:flex;gap:13px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border2);}
.clt-stat{font-size:11px;color:var(--t3);}
.clt-stat strong{color:var(--text);font-weight:600;}
.contact-list{display:flex;flex-direction:column;gap:7px;}
.contact-item{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);}
.contact-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.contact-name{font-size:13px;font-weight:600;color:var(--text);}
.contact-role{font-size:11px;color:var(--t3);}
.contact-email{font-size:11px;color:var(--t3);margin-left:auto;}
.sum-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:11px 13px;margin-top:11px;display:none;}
.sum-box.vis{display:block;}
.sum-hd{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.sum-hd i{font-size:13px;color:var(--green);}
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;}
.sum-r{font-size:12px;display:flex;gap:4px;}
.sum-k{color:var(--t3);min-width:90px;flex-shrink:0;}
.sum-v{color:var(--text);font-weight:500;}
.stepbar{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 17px;margin-bottom:16px;box-shadow:var(--sh);}
.step-item{display:flex;align-items:center;gap:6px;}
.sdot2{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--bg);color:var(--t3);flex-shrink:0;transition:all .2s;}
.sdot2.done{background:var(--gl);border-color:var(--gb);color:var(--gd);cursor:pointer;}
.sdot2.active{background:var(--text);border-color:var(--text);color:#fff;}
.slbl{font-size:11px;color:var(--t3);white-space:nowrap;}
.slbl.active{color:var(--text);font-weight:600;}
.slbl.done{color:var(--gd);}
.sline{flex:1;height:1px;background:var(--border);margin:0 7px;}
.sline.done{background:var(--gb);}
.grp-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;text-transform:uppercase;}
.dot{width:7px;height:7px;border-radius:50%;}
.dot-f{background:var(--pink);}
.dot-m{background:var(--blue);}
.dg4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:9px;}
.dc.dis{opacity:.27;cursor:not-allowed;transform:none!important;}
.dc.fc{border-color:var(--pb);}
.dc.mc{border-color:var(--bb);}
.dc.s1{border:2px solid var(--green);background:var(--gl);}
.dc.s2{border:2px solid var(--blue);background:var(--bl);}
.dc.s3{border:2px solid var(--amber);background:var(--al);}
.dc.fc:hover:not(.dis):not(.s1):not(.s2):not(.s3){border-color:var(--pink);background:var(--pl);}
.dc.mc:hover:not(.dis):not(.s1):not(.s2):not(.s3){border-color:var(--blue);background:var(--bl);}
.di{width:31px;height:31px;border-radius:50%;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.fc .di{background:var(--pl);color:var(--pink);}
.mc .di{background:var(--bl);color:var(--blue);}
.s1 .di{background:var(--gl);color:var(--green);}
.s2 .di{background:var(--bl);color:#185FA5;}
.s3 .di{background:var(--al);color:var(--amber);}
.dn{font-size:12px;font-weight:700;color:var(--text);}
.dt{font-size:10px;color:var(--t3);margin-top:2px;}
.dc.s1 .dt,.dc.s2 .dt,.dc.s3 .dt{display:none;}
.sb{font-size:10px;font-weight:600;padding:2px 5px;border-radius:20px;margin-top:3px;display:none;}
.s1 .sb{display:inline-block;background:var(--gl);color:var(--gd);}
.s2 .sb{display:inline-block;background:var(--bl);color:#185FA5;}
.s3 .sb{display:inline-block;background:var(--al);color:var(--amber);}
.sstbar{display:flex;gap:5px;margin-bottom:14px;}
.sstep{flex:1;padding:6px 8px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);text-align:center;font-size:12px;font-weight:500;color:var(--t3);transition:all .15s;}
.sstep.active{background:var(--gl);border-color:var(--gb);color:var(--gd);}
.sstep.done{background:var(--gl);border-color:var(--gb);color:var(--gd);}
.sel-sum{display:none;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:12px;}
.sinum{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.sinum.n1{background:var(--green);color:#fff;}
.sinum.n2{background:var(--blue);color:#fff;}
.sinum.n3{background:var(--amber);color:#fff;}
.conn-sec{margin-top:15px;padding-top:15px;border-top:1px solid var(--border2);}
.conn-t{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.conn-t i{font-size:14px;color:var(--green);}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;}
.cc{border:1px solid var(--border);border-radius:var(--rs);padding:8px 10px;cursor:pointer;transition:all .15s;background:var(--surface);}
.cc:hover{border-color:var(--green);background:var(--gl);}
.cc.act{border:2px solid var(--green);background:var(--gl);}
.cc.faded{opacity:.3;cursor:not-allowed;}
.cc-pair{display:flex;align-items:center;gap:4px;margin-bottom:3px;}
.cp{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;}
.cp.f{background:var(--pl);color:#8B2A50;}
.cp.m{background:var(--bl);color:var(--bd);}
.cp.s{background:var(--gl);color:var(--gd);}
.cn{font-size:12px;color:var(--t2);}
.third-info{display:flex;align-items:flex-start;gap:6px;padding:8px 12px;background:var(--al);border:1px solid var(--ab);border-radius:var(--rs);margin-top:11px;font-size:12px;color:#7A4A00;line-height:1.5;}
.pg5{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.pc.dis2{opacity:.27;cursor:not-allowed;}
.pc.fc{border-color:var(--pb);}
.pc.mc{border-color:var(--bb);}
.pc.sc{border:2px solid var(--red);background:var(--rl);}
.pc.si2{border:2px solid var(--amber);background:var(--al);}
.pc.fc .di{background:var(--pl);color:var(--pink);}
.pc.mc .di{background:var(--bl);color:var(--blue);}
.pc.sc .di{background:var(--rl);color:var(--red);}
.pc.si2 .di{background:var(--al);color:var(--amber);}
.pb2{font-size:10px;font-weight:600;padding:2px 5px;border-radius:20px;margin-top:3px;display:none;}
.pc.sc .pb2{display:inline-block;background:var(--rl);color:var(--pf-dark);}
.pc.si2 .pb2{display:inline-block;background:var(--al);color:var(--amber);}
.pc.sc .dt,.pc.si2 .dt{display:none;}
.ctx-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:12px;font-size:12px;color:var(--t2);}
.ctx-pill{padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600;background:var(--gl);color:var(--gd);}
.pf-res{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px;}
.pfb{border-radius:var(--r);overflow:hidden;border:1px solid;display:flex;align-items:stretch;}
.pfb.cr{border-color:var(--rb);}
.pfb.im{border-color:var(--ab);}
.pfb-h{padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;width:120px;flex-shrink:0;box-sizing:border-box;}
.pfb.cr .pfb-h{background:var(--rl);}
.pfb.im .pfb-h{background:var(--al);}
.pfb-ic{width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.pfb.cr .pfb-ic{background:var(--rb);color:var(--pf-dark);}
.pfb.im .pfb-ic{background:var(--ab);color:#7A4A00;}
.pfb-nm{font-size:13px;font-weight:600;}
.pfb.cr .pfb-nm{color:#6B1414;}
.pfb.im .pfb-nm{color:var(--amber-dark);}
.pfb-bdg{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap;}
.pfb.cr .pfb-bdg{background:#E88A8A;color:#3D0A0A;}
.pfb.im .pfb-bdg{background:#DDA030;color:#3A1A00;}
.pfb-b{padding:10px 12px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.pfb-code{font-family:var(--mono);font-size:11px;margin-bottom:2px;}
.pfb.cr .pfb-code{color:var(--red);}
.pfb.im .pfb-code{color:var(--amber);}
.pfb-sh{font-size:12px;color:var(--t2);line-height:1.5;}
.tov-card.sel{border:2px solid var(--text);background:var(--bg);}
.tov-card.sel .tov-chk{display:flex;}
/* Notificatie detail modal */
.notif-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:600;display:none;align-items:center;justify-content:center;}
.notif-ov.open{display:flex;}
.notif-modal{background:var(--surface);border-radius:14px;width:460px;max-width:95vw;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.notif-mhdr{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border2);}
.notif-mhdr-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.notif-mhdr-ic i{font-size:17px;}
.notif-mbody{padding:18px 20px;}
.notif-mtext{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:14px;}
.notif-mtime{font-size:12px;color:var(--t3);margin-bottom:18px;}
.notif-mfoot{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--border2);background:var(--bg);}
@keyframes spin{to{transform:rotate(360deg);}}
.draft-regen-banner.vis{display:flex;}
.seclbl{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;margin-bottom:10px;margin-top:16px;}
.seclbl:first-of-type{margin-top:0;}
.drv-blk.fb{border-color:var(--pb);}
.drv-blk.mb{border-color:var(--bb);}
.drv-blk.fb .dh{background:var(--pl);}
.drv-blk.mb .dh{background:var(--bl);}
.drv-blk.fb .dh-ic{background:var(--pb);color:#6B1A38;}
.drv-blk.mb .dh-ic{background:var(--bb);color:#0E3D7A;}
.drv-blk.fb .dh-nm{color:#5A0F2A;}
.drv-blk.mb .dh-nm{color:#072E5E;}
.drv-blk.fb .dh-type{background:var(--pb);color:#5A0F2A;}
.drv-blk.mb .dh-type{background:var(--bb);color:#072E5E;}
.tc{font-family:var(--mono);font-size:10px;font-weight:500;min-width:33px;}
.drv-blk.fb .tc{color:#8B2A50;}
.drv-blk.mb .tc{color:var(--bd);}
.cb-pill.f{background:var(--pl);color:#6B1A38;border:1px solid var(--pb);}
.cb-pill.m{background:var(--bl);color:#0E3D7A;border:1px solid var(--bb);}
.pub-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start;margin-top:12px;}
input[type=date]{font-size:13px;padding:7px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;font-family:var(--font);}
input[type=date]:focus{border-color:var(--green);}
.sl-row{display:flex;align-items:center;gap:13px;padding:11px 15px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:14px;}
.sl-lbl{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;}
.sl-val{font-size:18px;font-weight:700;color:var(--text);min-width:48px;text-align:right;font-family:var(--mono);}
input[type=range]{flex:1;accent-color:var(--green);cursor:pointer;}
input[type=range]:disabled{opacity:.35;}

/* ── Marketing Tone (read-only, from psychometrie) ───────── */

/* ── Searchable template picker modal ────────────────────────── */
#tpl-picker-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8500;display:none;align-items:flex-start;justify-content:center;padding:60px 20px 20px;}
#tpl-picker-modal.open{display:flex;}
.tpl-picker-box{background:var(--surface);border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.22);width:100%;max-width:620px;display:flex;flex-direction:column;max-height:80vh;}
.tpl-picker-head{padding:16px 20px 0;flex-shrink:0;}
.tpl-picker-head h3{font-size:15px;font-weight:700;color:var(--text);margin:0 0 10px;}
.tpl-picker-search{width:100%;font-size:13px;padding:8px 12px 8px 34px;border:1.5px solid var(--border);border-radius:var(--rs);background:var(--bg);color:var(--text);font-family:var(--font);outline:none;box-sizing:border-box;}
.tpl-picker-search:focus{border-color:var(--blue);}
.tpl-picker-search-wrap{position:relative;margin-bottom:10px;}
.tpl-picker-search-wrap .material-icons{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3);pointer-events:none;}
.tpl-picker-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.tpl-filter-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--border2);background:var(--s2);color:var(--t2);cursor:pointer;transition:all .12s;}
.tpl-filter-chip:hover,.tpl-filter-chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.tpl-picker-list{overflow-y:auto;flex:1;padding:0 20px 16px;}
.tpl-picker-item{padding:11px 13px;border:1.5px solid var(--border2);border-radius:var(--rs);cursor:pointer;margin-bottom:7px;transition:all .12s;}
.tpl-picker-item:hover{border-color:var(--blue);background:var(--bl);}
.tpl-picker-item.selected{border-color:var(--green);background:var(--gl);}
.tpl-picker-item-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
.tpl-picker-item-meta{font-size:11px;color:var(--t2);display:flex;gap:10px;flex-wrap:wrap;}
.tpl-picker-item-drives{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--gl);border:1px solid var(--gb);color:var(--gd);}
.tpl-picker-item-pf{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--rl);border:1px solid var(--rb);color:var(--red);}
.tpl-picker-footer{padding:12px 20px;border-top:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.tpl-picker-none{padding:28px 0;text-align:center;color:var(--t3);font-size:13px;}
/* ── Password strength meter ──────────────────────────────────── */
.pw-field-wrap{position:relative;margin-bottom:14px;}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);padding:4px;display:flex;align-items:center;}
.pw-strength-bar{height:4px;border-radius:2px;background:var(--border2);margin:8px 0 10px;overflow:hidden;}
.pw-strength-fill{height:100%;border-radius:2px;transition:width .25s,background .25s;}
.pw-req-list{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-bottom:14px;}
.pw-req{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:5px;transition:color .2s;}
.pw-req.met{color:var(--gd);}
.pw-req .material-icons{font-size:13px;}
.dept-wrap{position:relative;}
.dept-dd{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);box-shadow:0 4px 16px rgba(0,0,0,.14);z-index:3000;max-height:220px;overflow-y:auto;display:none;}
.dept-dd.open{display:block;}
.dept-dd-item{padding:9px 13px;font-size:13px;color:var(--text);cursor:pointer;line-height:1.3;}
.dept-dd-item:hover,.dept-dd-item.focused{background:var(--bl);color:var(--blue);}
.dept-dd-none{padding:9px 13px;font-size:13px;color:var(--t3);}
/* ── Marketing Voice picker ───────────────────────────────── */
.voice-card{padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--rs);background:var(--bg);cursor:pointer;transition:all .15s;position:relative;}
.voice-card:hover{border-color:var(--green);background:var(--gl);}
.voice-card.selected{border-color:var(--green);background:var(--gl);box-shadow:0 0 0 2px rgba(27,158,114,.18);}
.voice-card.recommended{border-color:var(--blue);background:var(--bl);}
.voice-card.recommended.selected{border-color:var(--green);background:var(--gl);}
.voice-card-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.3;}
.voice-card-quote{font-size:11px;color:var(--t2);font-style:italic;line-height:1.45;}
.voice-card-badge{position:absolute;top:7px;right:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:10px;background:var(--bl);color:var(--blue);border:1px solid var(--bb);}
.voice-card.selected .voice-card-badge{background:var(--gl);color:var(--gd);border-color:var(--gb);}
.voice-selected-display{padding:11px 14px;background:var(--gl);border:1.5px solid var(--green);border-radius:var(--rs);display:flex;align-items:flex-start;gap:10px;}
.voice-selected-icon{width:32px;height:32px;border-radius:8px;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.voice-selected-icon .material-icons{font-size:16px;color:#fff;}

/* ── Tone sliders ─────────────────────────────────────────── */
.tov-sliders{display:flex;flex-direction:column;gap:20px;}
.tov-sl-row{display:flex;flex-direction:column;gap:0;}
.tov-sl-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.tov-sl-lbl{font-size:13px;font-weight:600;color:var(--text);}
.tov-sl-val{font-size:12px;font-weight:600;color:var(--green);}

/* custom slider track with tick marks via background */
.tov-sl-track{position:relative;padding:4px 0 2px;}
.tov-sl-track input[type=range]{
  width:100%;margin:0;height:4px;
  -webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;
  position:relative;z-index:2;
}
.tov-sl-track input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--green) 0%,var(--green) var(--pct,50%),var(--border) var(--pct,50%),var(--border) 100%);
}
.tov-sl-track input[type=range]::-moz-range-track{
  height:4px;border-radius:2px;background:var(--border);
}
.tov-sl-track input[type=range]::-moz-range-progress{
  height:4px;border-radius:2px;background:var(--green);
}
.tov-sl-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--green);
  box-shadow:0 1px 4px rgba(0,0,0,.15);margin-top:-7px;
  transition:transform .1s,box-shadow .1s;
}
.tov-sl-track input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px rgba(27,158,114,.3);}
.tov-sl-track input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--green);
  background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer;
}
/* tick marks overlay */
.tov-sl-ticks{display:flex;justify-content:space-between;padding:0 9px;margin-top:5px;}
.tov-sl-ticks span{width:1px;height:6px;background:var(--border);border-radius:1px;display:block;}
.tov-sl-ticks span.active{background:var(--green);}
.tov-sl-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--t3);margin-top:5px;}

/* Regenerate prompt banner */
.tov-regen-bar{display:none;align-items:center;gap:9px;margin-top:16px;padding:10px 14px;
  background:var(--al);border:1px solid var(--ab);border-radius:var(--rs);
  font-size:12px;color:var(--amber);}
.tov-regen-bar.vis{display:flex;}
.tov-regen-bar .material-icons{font-size:15px;flex-shrink:0;}
.tov-regen-bar strong{color:var(--amber);}

/* preset badge chip */
.sl-preset-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:var(--bl);border:1px solid var(--bb);font-size:11px;font-weight:600;color:var(--blue);margin-top:10px;}
.sl-preset-chip .material-icons{font-size:12px;}
.cand-list{display:flex;flex-direction:column;gap:6px;}
.cand-item{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .15s;}
.cand-item:hover{border-color:var(--green);box-shadow:var(--sh);}
.cand-item.sel{border:2px solid var(--green);background:var(--gl);}
.cand-chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.cand-item.sel .cand-chk{background:var(--green);border-color:var(--green);}
.cand-rank{width:21px;height:21px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t2);flex-shrink:0;}
.cand-rank.top{background:var(--al);border-color:var(--ab);color:var(--amber);}
.cand-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.mbw{display:flex;align-items:center;gap:8px;min-width:155px;}
.mb{height:5px;border-radius:3px;background:var(--border);flex:1;overflow:hidden;}
.mf{height:100%;border-radius:3px;transition:width .4s ease;}
.mpct{font-size:12px;font-weight:700;min-width:36px;text-align:right;font-family:var(--mono);}
.rbadge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;}
.rbadge-ex  {background:var(--gl);color:var(--gd);border:1px solid var(--gb);}
.rbadge-good{background:#E3F2FD;color:#1565C0;border:1px solid #90CAF9;}
.rbadge-mod {background:#FFF8E1;color:#F57F17;border:1px solid #FFE082;}
.rbadge-low {background:var(--s2);color:var(--t3);border:1px solid var(--border2);}
/* ── Candidate status badges ─────────────────────────────────── */
/* ── Status progress stepper ──────────────────────────────────── */
.cst-stepper{display:flex;align-items:center;gap:0;margin:12px 0 6px;}
.cst-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;}
.cst-step::before{content:'';position:absolute;top:9px;left:50%;right:-50%;height:2px;background:var(--border2);z-index:0;}
.cst-step:last-child::before{display:none;}
.cst-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);background:var(--surface);z-index:1;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;}
.cst-dot.done{background:var(--green);border-color:var(--green);color:#fff;}
.cst-dot.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.cst-dot.skip{background:var(--rl);border-color:var(--rb);color:var(--red);}
.cst-lbl{font-size:9px;color:var(--t3);margin-top:4px;text-align:center;white-space:nowrap;}
.cst-lbl.active{color:var(--blue);font-weight:700;}
.cst-lbl.done{color:var(--green);}
/* ── Shortlist export panel ───────────────────────────────────── */
.export-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-top:14px;}
.export-cand-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:var(--s2);border:1px solid var(--border2);font-size:12px;font-weight:600;color:var(--text);}
.export-cand-chip .av-sm{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;}
/* ── Department/location catalogue ───────────────────────────── */
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--s2);border-radius:var(--rs);margin-bottom:6px;gap:10px;}
.cat-item-name{font-size:13px;font-weight:600;color:var(--text);flex:1;}
.cat-add-row{display:flex;gap:8px;margin-top:10px;}
.cat-add-row input{flex:1;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg);color:var(--text);font-family:var(--font);outline:none;}
.cat-add-row input:focus{border-color:var(--green);}
.cat-drag-handle{cursor:grab;color:var(--t3);display:flex;align-items:center;flex-shrink:0;touch-action:none;padding:0 2px;}
.cat-drag-handle:active{cursor:grabbing;}
.cat-drag-item{transition:opacity .15s;}
.cat-drag-item.dragging{opacity:.4;}
.cat-drag-item.drag-over{border-top:2px solid var(--blue);}
/* ── Admin tab navigation (Job Fit settings) ─────────────── */
.adm-snav{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:none;background:none;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);border-radius:var(--rs);cursor:pointer;text-align:left;transition:background .12s,color .12s;white-space:nowrap;}
.adm-snav .material-icons{font-size:14px;flex-shrink:0;}
.adm-snav:hover{background:var(--bg);color:var(--text);}
.adm-snav.active{background:var(--bg);color:var(--blue);font-weight:700;}
.adm-snav.active .material-icons{color:var(--blue);}
/* ── Admin section panels ───────────────────────────────── */
.adm-sec-panel{}
/* ── Recommendation / status banner ─────────────────────────── */
.rec-banner{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--rs);margin-top:10px;border:1px solid;}
.rec-banner.shortlisted{background:var(--al);border-color:var(--ab);}
.rec-banner.hired{background:var(--gl);border-color:var(--gb);}
.rec-banner.rejected{background:var(--rl);border-color:var(--rb);}
.rec-banner.onhold{background:var(--s2);border-color:var(--border2);}
/* ── Stepper pending dot ─────────────────────────────────────── */
.cst-dot.pending{background:var(--surface);border-color:var(--border2);color:var(--t3);}
/* ── Score breakdown section ────────────────────────────────── */
.score-breakdown{padding:13px 15px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);margin-top:16px;}
/* ── Compose-prompt flash banner ────────────────────────────── */
.flash-compose-prompt{margin-bottom:12px;padding:12px 16px;border-radius:var(--rs);background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:13px;}

/* ── HM-specific styles ───────────────────────────────────────── */
/* HM dashboard vacancy cards */
.hm-vac-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:all .15s;}
.hm-vac-card:hover{border-color:var(--green);box-shadow:var(--sh);}
.hm-vac-card.has-new{border-left:3px solid var(--blue);}
.hm-vac-meta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.hm-vac-chip{font-size:11px;color:var(--t2);display:flex;align-items:center;gap:4px;}
.hm-vac-chip .material-icons{font-size:13px;color:var(--t3);}
/* HM candidate preference buttons */
.hm-pref-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid;cursor:pointer;transition:all .15s;background:var(--surface);}
.hm-pref-btn:hover{box-shadow:var(--sh);}
.hm-pref-btn.up{border-color:var(--gb);color:var(--gd);}
.hm-pref-btn.up.active{background:var(--gl);border-color:var(--green);}
.hm-pref-btn.down{border-color:var(--rb);color:var(--red);}
.hm-pref-btn.down.active{background:var(--rl);border-color:var(--red);}
.hm-pref-btn.neutral{border-color:var(--border2);color:var(--t3);}
/* Inline HM preference buttons on candidate-list rows */
.hm-lp-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border2);background:var(--surface);color:var(--t3);cursor:pointer;transition:all .15s;padding:0;}
.hm-lp-btn:hover{box-shadow:var(--sh);}
.hm-lp-btn.up:hover,.hm-lp-btn.up.active{background:var(--gl);border-color:var(--green);color:var(--gd);}
.hm-lp-btn.down:hover,.hm-lp-btn.down.active{background:var(--rl);border-color:var(--red);color:var(--red);}
/* One-click action button inside a notification card */
.notif-qa-btn{font-size:11px;font-weight:600;color:var(--blue);background:var(--bl);border:1px solid var(--bb);border-radius:14px;padding:3px 10px;cursor:pointer;margin-right:8px;}
.notif-qa-btn:hover{background:var(--blue);color:#fff;}
.notif-done-btn{color:var(--t2);background:var(--s2);border-color:var(--border);}
.notif-done-btn:hover{background:var(--t2);color:#fff;border-color:var(--t2);}
.notif-reminded-btn{color:var(--t2);background:var(--s2);border-color:var(--border);cursor:default;}
.notif-reminded-btn:hover{background:var(--s2);color:var(--t2);}
/* Deep-link highlight pulse */
.notif-highlight{animation:notifPulse 1.6s ease;}
@keyframes notifPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.45);}60%{box-shadow:0 0 0 7px rgba(59,130,246,0);}100%{box-shadow:0 0 0 0 rgba(59,130,246,0);}}
/* Command palette (Cmd/Ctrl-K) */
.cmdk-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:flex-start;justify-content:center;z-index:9999;}
.cmdk-ov.open{display:flex;}
.cmdk-box{margin-top:12vh;width:560px;max-width:92vw;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;}
.cmdk-inwrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border2);}
.cmdk-input{flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--text);}
.cmdk-hint{font-size:11px;color:var(--t3);border:1px solid var(--border2);border-radius:4px;padding:1px 6px;}
.cmdk-list{max-height:340px;overflow-y:auto;padding:6px;}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;}
.cmdk-item.sel{background:var(--bl);}
.cmdk-title{font-size:13px;font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmdk-ref{font-size:11px;color:var(--t3);font-family:var(--mono);}
.cmdk-client{font-size:11px;color:var(--t2);}
.cmdk-empty{padding:24px;text-align:center;color:var(--t3);font-size:13px;}
/* HM visibility badge */
.hm-vis-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--bl);color:var(--bd);border:1px solid var(--bb);}
/* HM action strip on candidate row */
/* HM empty state */
.hm-empty{padding:32px;text-align:center;color:var(--t3);}
.hm-empty .material-icons{font-size:40px;display:block;margin-bottom:10px;color:var(--border);}
/* HM notification item */
.hm-notif.unread{background:var(--bl);border-color:var(--bb);}
.hm-notif-dot.read{background:var(--t3);}
/* Welkomstbanner HM */
.hm-welcome{background:linear-gradient(135deg,var(--bl) 0%,var(--surface) 70%);border:1px solid var(--bb);border-radius:var(--r);padding:18px 22px;margin-bottom:16px;display:flex;align-items:flex-start;gap:14px;}
.hm-welcome-icon{width:44px;height:44px;border-radius:11px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hm-welcome-icon .material-icons{font-size:22px;color:#fff;}

/* ── Candidate-specific styles ────────────────────────────────── */
.cand-onboard{padding:16px 20px;background:linear-gradient(135deg,var(--bl) 0%,var(--surface) 70%);border:1px solid var(--bb);border-radius:var(--r);margin-bottom:16px;}
.cand-onboard-steps{display:flex;align-items:flex-start;gap:0;margin-top:14px;}
.co-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;}
.co-step::before{content:'';position:absolute;top:14px;left:50%;right:-50%;height:2px;background:var(--border2);z-index:0;}
.co-step:last-child::before{display:none;}
.co-step.done::before{background:var(--green);}
.co-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--surface);z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.co-dot.done{background:var(--green);border-color:var(--green);color:#fff;}
.co-dot.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.co-dot.pending{background:var(--surface);border-color:var(--border2);color:var(--t3);}
.co-lbl{font-size:10px;text-align:center;margin-top:5px;line-height:1.3;max-width:70px;}
.co-lbl.done{color:var(--green);}
.co-lbl.active{color:var(--blue);font-weight:700;}
.co-lbl.pending{color:var(--t3);}
.cv-match-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;background:var(--s2);border-radius:var(--rs);}
.cv-match-locked .material-icons{font-size:40px;color:var(--border);margin-bottom:10px;}
.det-tabs{display:flex;gap:2px;margin-bottom:16px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:3px;}
.det-tab{flex:1;padding:6px 9px;border-radius:6px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;text-align:center;transition:all .15s;}
.det-tab.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--sh);}
.iq-cat{margin-bottom:16px;}
.iq-cat-t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.iq-item{background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);padding:11px 13px;margin-bottom:6px;}
.iq-q{font-size:13px;color:var(--text);font-weight:500;line-height:1.5;margin-bottom:6px;}
.iq-ntog{font-size:12px;color:var(--green);cursor:pointer;display:flex;align-items:center;gap:4px;}
.iq-ntog:hover{color:var(--gd);}
.iq-na{margin-top:7px;display:none;}
.iq-na.open{display:block;}
.iq-na textarea{font-size:12px;min-height:55px;background:var(--surface);}
.note-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.note-item{background:var(--al);border:1px solid var(--ab);border-radius:var(--rs);padding:10px 13px;}
.note-meta{font-size:11px;color:var(--amber);margin-bottom:3px;font-weight:500;}
.note-text{font-size:13px;color:var(--text);line-height:1.5;}
.note-new{display:flex;gap:7px;align-items:flex-end;}
.note-new textarea{flex:1;font-size:13px;min-height:65px;}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.cmp-col{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:12px;}
.cmp-col-t{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;}
.cmp-drv{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--border2);font-size:12px;}
.cmp-drv:last-child{border-bottom:none;}
.dp{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;}
.dp.f{background:var(--pl);color:#8B2A50;}
.dp.m{background:var(--bl);color:var(--bd);}
.dp.match{background:var(--gl);color:var(--gd);}
.dp.no{background:var(--rl);color:var(--red);}
.admin-av{width:27px;height:27px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--gd);}
.hint{display:flex;align-items:flex-start;gap:5px;font-size:12px;color:var(--t3);margin-top:7px;line-height:1.4;}
.hint i{font-size:13px;flex-shrink:0;margin-top:1px;}
.collapsible{overflow:hidden;transition:max-height .3s ease;}
.collapsible.closed{max-height:0!important;}
.org-note{display:none;align-items:center;gap:6px;font-size:12px;color:var(--gd);background:var(--gl);border:1px solid var(--gb);border-radius:var(--rs);padding:6px 12px;margin-bottom:12px;font-weight:500;}
.org-note.vis{display:flex;}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.sec-l{display:flex;align-items:center;gap:7px;}
.sec-ic{width:27px;height:27px;border-radius:var(--rs);background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.sec-ic i{font-size:14px;color:var(--t2);}
.sec-t{font-size:13px;font-weight:600;color:var(--text);}
.sec-s{font-size:11px;color:var(--t3);}
.cr{display:grid;grid-template-columns:140px 1fr;gap:7px;margin-bottom:7px;}
.lin{font-size:12px;padding:7px 9px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;width:100%;font-family:var(--font);transition:all .15s;}
.lin:focus{border-color:var(--green);}
.lin.hv{border-color:var(--gb);background:var(--gl);color:var(--gd);font-weight:600;}
.dist-row{display:flex;align-items:center;gap:11px;}
.dist-val{font-size:13px;font-weight:600;color:var(--text);min-width:53px;text-align:right;}
.dist-val.off{color:var(--t3);}
.footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--border2);position:relative;}
.footer>.sc2,.footer .btng>.sc2{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;}
.sc2{font-size:12px;color:var(--t3);}
.back-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--t2);cursor:pointer;margin-bottom:13px;padding:3px 0;}
.back-link:hover{color:var(--text);}
/* ── Education Module ─────────────────────────────────────── */
.edu-type-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.edu-type-education{background:var(--gl);color:var(--gd);border:1px solid #A8D8A8;}
.edu-type-training{background:#EAF1FB;color:var(--bd);border:1px solid #A8C8EE;}
.edu-type-course{background:var(--purl);color:var(--purple);border:1px solid var(--purb);}
.edu-prog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);margin-bottom:10px;}
.edu-prog-card:hover{border-color:var(--blue);box-shadow:var(--shm);transform:translateY(-1px);}
.edu-prog-card.published{border-left:3px solid var(--green);}
.edu-prog-card.draft{border-left:3px solid var(--amber);}
.edu-prog-card.concept{border-left:3px solid var(--border);}
.edu-inst-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:17px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);}
.edu-inst-card:hover{border-color:var(--blue);box-shadow:var(--shm);}
.edu-inst-logo{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;}
.edu-mkt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);}
.edu-mkt-card:hover{border-color:var(--blue);box-shadow:var(--shm);transform:translateY(-1px);}
.edu-match-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;flex:1;}
.edu-match-fill{height:100%;border-radius:3px;transition:width .4s;}
.edu-career-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;background:var(--al);border:1px solid var(--ab);color:var(--amber);}
.edu-wizard-step{display:none;}
.edu-wizard-step.active{display:block;animation:fu .18s ease;}
.edu-upload-zone{border:2px dashed var(--border);border-radius:var(--r);padding:32px 20px;text-align:center;cursor:pointer;transition:all .15s;background:var(--bg);}
.edu-upload-zone:hover,.edu-upload-zone.drag{border-color:var(--blue);background:var(--bl);}
.edu-upload-zone.done{border-color:var(--green);background:var(--gl);}
.edu-profile-section{background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);padding:12px 14px;margin-bottom:10px;}
.edu-profile-section-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;}
.edu-connector-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--gl);border:1px solid var(--gb);color:var(--gd);margin:2px;}
.edu-nh-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--bl);border:1px solid var(--bb);color:var(--blue);margin:2px;}
.edu-pf-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--rl);border:1px solid var(--rb);color:var(--red);margin:2px;}
.edu-privacy-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:var(--gl);border:1px solid var(--gb);font-size:11px;font-weight:600;color:var(--gd);}
.edu-stat-row{display:grid;gap:10px;margin-bottom:16px;}
.edu-reveal-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:11px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.edu-reveal-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}

/* ── Login screen ────────────────────────────────────────────── */
#login-screen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}

/* ── Privacy statement gate ─────────────────────────────── */
#privacy-gate{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:none;align-items:center;justify-content:center;padding:20px;}
#privacy-gate.open{display:flex;}
.pg-box{width:100%;max-width:600px;background:var(--surface);border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.22);display:flex;flex-direction:column;max-height:90vh;}
.pg-header{padding:20px 24px 16px;border-bottom:1px solid var(--border2);flex-shrink:0;}
.pg-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:3px;}
.pg-subtitle{font-size:12px;color:var(--t2);}
.pg-body{padding:20px 24px;overflow-y:auto;flex:1;}
.pg-section{margin-bottom:18px;}
.pg-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.pg-section-title .material-icons{font-size:13px;}
.pg-section p{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:6px;}
.pg-section p strong{color:var(--text);}
.pg-section ul{font-size:13px;color:var(--t2);line-height:1.7;padding-left:18px;margin:0;}
.pg-section ul li{margin-bottom:3px;}
.pg-footer{padding:16px 24px;border-top:1px solid var(--border2);flex-shrink:0;}
.pg-checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer;}
.pg-checkbox-row input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;cursor:pointer;accent-color:var(--green);}
.pg-checkbox-label{font-size:13px;color:var(--text);line-height:1.5;}
.login-box{width:100%;max-width:560px;}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.login-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--t2);margin-bottom:24px;}
.login-list{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow-y:auto;}
/* ── SuperAdmin screen ──────────────────────────────────────── */
.sa-hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:var(--sh);}
.sa-hub-card:hover{border-color:var(--purple);}
.sa-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh);}
.sa-stat-val{font-size:28px;font-weight:800;color:var(--text);}
.sa-stat-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-top:2px;}

/* ══════════════════════════════════════════════════════════════
   CAREER SITE — public vacancy portal (separate environment)
   Inspired by octopus.energy/careers/join-us/ — fully anonymised
   ══════════════════════════════════════════════════════════════ */
#career-site{display:none;position:fixed;inset:0;z-index:2000;background:#fff;overflow-y:auto;font-family:'DM Sans',system-ui,sans-serif;}
/* Detail panel */
.cs-detail-ov.open{display:flex;}
/* New badge on freshly published jobs */
/* No-jobs banner */

/* ══════════════════════════════════════════════════════════════
   CAREER PORTAL — embedded in MC Job Fit
   Scoped under #career-portal to avoid CSS conflicts
   ══════════════════════════════════════════════════════════════ */
#career-portal {
  --pink:#e040a0; --ink:#1a1a2e; --mid:#4a4a6a; --muted:#8a8aaa;
  --line:#e8e8f0; --bg:#ffffff; --bg2:#f5f5fa; --blue:#1565c0;
  font-family:'DM Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#career-portal *{box-sizing:border-box;margin:0;padding:0;}
#career-portal :root{
#career-portal   --pink:#e040a0;
#career-portal   --ink:#1a1a2e;
#career-portal   --mid:#4a4a6a;
#career-portal   --muted:#8a8aaa;
#career-portal   --line:#e8e8f0;
#career-portal   --bg:#ffffff;
#career-portal   --bg2:#f5f5fa;
#career-portal   --blue:#1565c0;
#career-portal }
#career-portal body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;}

/* ── Top nav ─────────────────────────────────────────────────── */
#career-portal .topnav{height:60px;display:flex;align-items:center;padding:0 48px;border-bottom:1px solid var(--line);}
#career-portal .nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;}
#career-portal .nav-logo-sq{width:32px;height:32px;background:var(--ink);border-radius:7px;display:flex;align-items:center;justify-content:center;}
#career-portal .nav-logo-sq svg{width:18px;height:18px;}
#career-portal .nav-brand{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
#career-portal .nav-links{margin-left:auto;display:flex;align-items:center;gap:28px;}
#career-portal .nav-links a{font-size:14px;color:var(--mid);text-decoration:none;font-weight:500;transition:color .15s;}
#career-portal .nav-links a:hover,.nav-links a.active{color:var(--ink);}

/* ── Hero — dark, full width, big headline ──────────────────── */
#career-portal .hero{background:var(--ink);padding:72px 48px 80px;}
#career-portal .hero-label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:20px;}
#career-portal .hero-title{font-size:clamp(36px,6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:#fff;max-width:720px;margin-bottom:32px;}
#career-portal .hero-title .accent{color:var(--pink);}
/* Search bar — large, white, with icon */
#career-portal .hero-search{position:relative;max-width:640px;}
#career-portal .hero-search .material-icons{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--muted);pointer-events:none;}
#career-portal .hero-search input{width:100%;font-size:17px;padding:18px 22px 18px 56px;border-radius:12px;border:none;background:#fff;color:var(--ink);outline:none;box-shadow:0 4px 32px rgba(0,0,0,.35);font-family:inherit;font-weight:400;}
#career-portal .hero-search input::placeholder{color:var(--muted);}
#career-portal .hero-search input:focus{box-shadow:0 4px 32px rgba(0,0,0,.4),0 0 0 3px rgba(224,64,160,.35);}

/* ── Filters strip ───────────────────────────────────────────── */
#career-portal .filters-strip{background:var(--bg2);border-bottom:1px solid var(--line);padding:14px 48px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#career-portal .filter-label{font-size:13px;font-weight:600;color:var(--mid);margin-right:4px;}
/* Pill-style filter selects */
#career-portal .fpill{appearance:none;font-size:13px;font-weight:500;padding:7px 32px 7px 14px;border-radius:100px;border:1.5px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a8aaa' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--ink);font-family:inherit;cursor:pointer;outline:none;transition:all .15s;}
#career-portal .fpill:hover{border-color:var(--mid);}
#career-portal .fpill:focus,.fpill.active{border-color:var(--pink);background-color:#fff8fc;}
#career-portal .filters-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
#career-portal .refresh-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--mid);background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:6px 14px;cursor:pointer;font-family:inherit;transition:all .15s;}
#career-portal .refresh-pill:hover{border-color:var(--mid);color:var(--ink);}
#career-portal .refresh-pill .material-icons{font-size:15px;}

/* ── Main content ─────────────────────────────────────────────── */
#career-portal .content{max-width:960px;margin:0 auto;padding:40px 48px 100px;}
#career-portal .showing-count{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:28px;}
#career-portal .showing-count span{color:var(--pink);}

/* ── Job rows — full width, like Octopus ─────────────────────── */
#career-portal .job-list{display:flex;flex-direction:column;}
#career-portal .job-row{display:flex;align-items:flex-start;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;border-radius:0;text-decoration:none;}
#career-portal .job-row:first-child{border-top:1px solid var(--line);}
#career-portal .job-row:hover{background:var(--bg2);margin:0 -16px;padding:22px 16px;border-radius:8px;border-color:transparent;}
#career-portal .job-row:hover + .job-row{border-top-color:transparent;}
#career-portal .job-main{flex:1;min-width:0;}
#career-portal .job-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.3;letter-spacing:-.01em;}
#career-portal .job-org{font-size:14px;color:var(--mid);margin-bottom:10px;display:flex;align-items:center;gap:5px;}
#career-portal .job-org .material-icons{font-size:15px;color:var(--muted);}
#career-portal .job-tags{display:flex;flex-wrap:wrap;gap:6px;}
#career-portal .job-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:4px 10px;border-radius:100px;background:var(--bg2);color:var(--mid);border:1px solid var(--line);}
#career-portal .job-tag.dept{background:#f0f0ff;border-color:#d0d0f0;color:#4040a0;}
#career-portal .job-tag.new-tag{background:#fff0f8;border-color:#f0b0d8;color:#c0206080;font-weight:700;}
#career-portal .job-tag .material-icons{font-size:12px;}
#career-portal .job-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);margin-top:4px;transition:all .18s;}
#career-portal .job-row:hover .job-arrow{border-color:var(--pink);color:var(--pink);background:#fff0f8;}

/* ── Empty state ─────────────────────────────────────────────── */
#career-portal .empty-state{padding:64px 32px;text-align:center;}
#career-portal .empty-state .material-icons{font-size:56px;color:var(--line);display:block;margin-bottom:16px;}
#career-portal .empty-title{font-size:20px;font-weight:700;color:var(--mid);margin-bottom:8px;}
#career-portal .empty-sub{font-size:15px;color:var(--muted);}

/* ── Detail drawer — slides in from right ────────────────────── */
#career-portal .drawer-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;backdrop-filter:blur(2px);}
#career-portal .drawer-ov.open{display:flex;align-items:stretch;justify-content:flex-end;}
#career-portal .drawer{width:600px;max-width:95vw;height:100vh;background:#fff;overflow-y:auto;display:flex;flex-direction:column;animation:drawerIn .24s cubic-bezier(.4,0,.2,1);}
@keyframes drawerIn{from{transform:translateX(48px);opacity:0;}to{transform:translateX(0);opacity:1;}}
#career-portal .drawer-close-bar{padding:16px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:1;}
#career-portal .drawer-close-btn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--mid);background:none;border:none;cursor:pointer;font-family:inherit;padding:6px 12px;border-radius:8px;transition:all .12s;}
#career-portal .drawer-close-btn:hover{background:var(--bg2);color:var(--ink);}
#career-portal .drawer-close-btn .material-icons{font-size:18px;}
#career-portal .drawer-apply-top{background:var(--pink);color:#fff;border:none;border-radius:8px;padding:9px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:background .15s;}
#career-portal .drawer-apply-top:hover{background:#c0308080;}
#career-portal .drawer-hdr{padding:32px 32px 24px;}
#career-portal .drawer-dept-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4040a0;background:#f0f0ff;border:1px solid #d0d0f0;border-radius:100px;padding:4px 12px;margin-bottom:14px;}
#career-portal .drawer-title{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin-bottom:10px;}
#career-portal .drawer-org{font-size:15px;color:var(--mid);margin-bottom:16px;display:flex;align-items:center;gap:5px;}
#career-portal .drawer-org .material-icons{font-size:16px;color:var(--muted);}
#career-portal .drawer-meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0;}
#career-portal .drawer-meta-tag{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;padding:5px 12px;border-radius:100px;background:var(--bg2);color:var(--mid);border:1px solid var(--line);}
#career-portal .drawer-meta-tag .material-icons{font-size:14px;color:var(--muted);}
#career-portal .drawer-body{padding:0 32px 32px;flex:1;}
#career-portal .drawer-section{margin-top:28px;padding-top:28px;border-top:1px solid var(--line);}
#career-portal .drawer-section:first-child{border-top:none;margin-top:0;padding-top:0;}
#career-portal .drawer-sec-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
#career-portal .drawer-text{font-size:15px;color:var(--ink);line-height:1.78;white-space:pre-wrap;}
#career-portal .drawer-footer{padding:24px 32px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff;}
#career-portal .apply-big{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px;background:var(--ink);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.01em;transition:background .15s;}
#career-portal .apply-big:hover{background:#0d0d1a;}
#career-portal .apply-hint{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.55;}

/* ── Apply modal ─────────────────────────────────────────────── */
#career-portal .modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
#career-portal .modal-ov.open{display:flex;}
#career-portal .modal{display:block;background:#fff;border-radius:20px;width:500px;max-width:95vw;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.3);animation:fadeUp .2s cubic-bezier(.4,0,.2,1);}
@keyframes fadeUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
#career-portal .modal-hdr{background:var(--ink);padding:22px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
#career-portal .modal-hdr-title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px;}
#career-portal .modal-hdr-job{font-size:18px;font-weight:700;color:#fff;line-height:1.25;}
#career-portal .modal-close{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;margin-top:2px;}
#career-portal .modal-close:hover{background:rgba(255,255,255,.22);}
#career-portal .modal-body{padding:24px 26px;}
#career-portal .ref-section{background:#f5f5fa;border-radius:12px;padding:18px 20px;margin-bottom:22px;}
#career-portal .ref-section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
#career-portal .ref-code{font-size:26px;font-weight:800;font-family:'DM Mono',monospace;color:var(--ink);letter-spacing:.06em;margin-bottom:7px;}
#career-portal .ref-note{font-size:13px;color:var(--mid);line-height:1.55;}
#career-portal .steps-label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:11px;}
#career-portal .steps{display:flex;flex-direction:column;gap:10px;}
#career-portal .step{display:flex;align-items:flex-start;gap:12px;}
#career-portal .step-num{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
#career-portal .step-text{font-size:14px;color:var(--mid);line-height:1.5;}
#career-portal .step-text strong{color:var(--ink);}
#career-portal .modal-footer{padding:16px 26px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;}
#career-portal .btn-ghost{display:inline-flex;align-items:center;gap:5px;padding:10px 18px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--mid);font-family:inherit;transition:all .15s;}
#career-portal .btn-ghost:hover{border-color:var(--mid);color:var(--ink);}
#career-portal .btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);}
#career-portal .btn-dark:hover{background:#0d0d1a;}

/* ── Footer ─────────────────────────────────────────────────── */
#career-portal .site-footer{background:var(--ink);padding:36px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
#career-portal .footer-brand{font-size:14px;font-weight:700;color:#fff;}
#career-portal .footer-links{display:flex;gap:22px;}
#career-portal .footer-links a{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .15s;}
#career-portal .footer-links a:hover{color:#fff;}
#career-portal .footer-note{font-size:12px;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:6px;}
#career-portal .footer-note .material-icons{font-size:14px;color:rgba(255,255,255,.3);}

@media(max-width:768px){
#career-portal   .topnav,.hero,.filters-strip,.content,.site-footer{padding-left:20px;padding-right:20px;}
#career-portal   .hero{padding-top:48px;padding-bottom:56px;}
#career-portal   .drawer{width:100vw;}
#career-portal }

/* ── Apply modal multi-step ──────────────────────────────── */
.apply-step { animation: fadeInUp .25s ease; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.apply-how-row { display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:13px;color:var(--t2);line-height:1.5; }
.apply-how-row:not(:last-child) { border-bottom:1px solid var(--border2); }
.apply-how-ic { font-size:18px;color:var(--blue);flex-shrink:0;margin-top:1px; }
.ref-copy-btn { display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s; }
.ref-copy-btn:hover { border-color:var(--blue);color:var(--blue); }
.btn-primary { display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--rs,8px);border:none;background:var(--blue);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-primary:disabled { opacity:.45;cursor:not-allowed; }
/* ── Test Data Manager ───────────────────────────────────────── */
.tdm-tab.active{color:var(--amber)!important;border-bottom-color:var(--amber)!important;font-weight:600!important;}
.tdm-tab:hover{color:var(--text)!important;}
.tdm-stat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;}
.tdm-stat-num{font-size:22px;font-weight:700;color:var(--text);line-height:1.1;}
.tdm-stat-lbl{font-size:11px;color:var(--t3);margin-top:2px;}
.tdm-ds-card{border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer;transition:all .15s;}
.tdm-ds-card:hover{border-color:var(--amber);background:var(--al);}
.tdm-ds-card.loaded{border-color:var(--green);background:var(--gl);}
/* ── Typography utility classes ─────────────────────────────── */
.label-xs{font-size:var(--text-xs);font-weight:var(--label-weight);letter-spacing:var(--label-spacing);text-transform:var(--label-transform);color:var(--t3);}
.label-sm{font-size:var(--text-xs);font-weight:var(--label-weight);letter-spacing:.05em;text-transform:var(--label-transform);color:var(--t3);margin-bottom:4px;}
.text-sm{font-size:var(--text-sm);color:var(--t3);}
.text-base{font-size:var(--text-base);color:var(--t2);}
.text-md{font-size:var(--text-md);}
.text-muted{color:var(--t3);}
.text-secondary{color:var(--t2);}
.fw-6{font-weight:600;}
.fw-7{font-weight:700;}
.mono{font-family:var(--mono);}

/* ── v2.10 Statistieken scherm ──────────────────────────────────────────── */
.stat-period-btn{font-size:12px;padding:4px 12px;border-radius:20px;border:1px solid var(--border2);background:transparent;color:var(--t2);cursor:pointer;font-family:var(--font);}
.stat-period-btn.active{background:var(--text);color:var(--bg);border-color:var(--text);}
.stat-tab-btn{font-size:13px;padding:8px 14px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--t2);cursor:pointer;font-family:var(--font);position:relative;bottom:-1px;}
.stat-tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
.stat-tab-btn.admin-tab{color:var(--purple);}
.stat-tab-btn.admin-tab.active{color:var(--purple);border-bottom-color:var(--purple);}
.stat-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.stat-kpi-card{background:var(--s2);border-radius:var(--rs);padding:12px 14px;}
.stat-kpi-lbl{font-size:11px;color:var(--t2);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.stat-kpi-val{font-size:22px;font-weight:700;color:var(--text);line-height:1;}
.stat-kpi-sub{font-size:11px;color:var(--t3);margin-top:4px;}
.stat-chart-wrap{position:relative;height:220px;margin-bottom:6px;}
.stat-chart-label{font-size:11px;color:var(--t3);margin-bottom:8px;}
.stat-hm-table{width:100%;border-collapse:collapse;font-size:13px;}
.stat-hm-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);padding:8px 12px;border-bottom:1px solid var(--border2);text-align:left;}
.stat-hm-table td{padding:10px 12px;border-bottom:1px solid var(--border2);color:var(--text);}
.stat-hm-table tr:last-child td{border-bottom:none;}
.stat-hm-table tr:hover td{background:var(--s2);}


.st0{fill:var(--white);}.st1{fill:url(#SVGID_1_);}.st2{fill:url(#SVGID_00000054972652950698644030000017964670701689306506_);}.st3{fill:url(#SVGID_00000106128495029601101220000001680011480863901375_);}
.st0{fill:var(--white);}.st1{fill:url(#SVGID_1_);}.st2{fill:url(#SVGID_00000054972652950698644030000017964670701689306506_);}.st3{fill:url(#SVGID_00000106128495029601101220000001680011480863901375_);}
/* ── Thin unobtrusive scrollbar for .main ───────────────────────────────── */
.main::-webkit-scrollbar { width: 5px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.main::-webkit-scrollbar-button { display: none; height: 0; }
.main { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }

/* ── Stats sprint 2: doorlooptijd + trechter ───────────────────────────── */
.stat-funnel-wrap{display:flex;align-items:stretch;gap:0;margin:16px 0;}
.stat-funnel-step{flex:1;position:relative;text-align:center;}
.stat-funnel-bar{height:52px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;border-radius:0;transition:opacity .15s;}
.stat-funnel-step:first-child .stat-funnel-bar{border-radius:var(--rs) 0 0 var(--rs);}
.stat-funnel-step:last-child  .stat-funnel-bar{border-radius:0 var(--rs) var(--rs) 0;}
.stat-funnel-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:6px;color:var(--t2);}
.stat-funnel-pct{font-size:10px;color:var(--t3);margin-top:2px;}
.stat-funnel-arrow{position:absolute;right:-8px;top:50%;transform:translateY(-50%) translateY(-13px);font-size:16px;color:var(--border2);z-index:1;pointer-events:none;}
.stat-tt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px;}
.stat-tt-card{background:var(--s2);border-radius:var(--rs);padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
.stat-tt-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);}
.stat-tt-val{font-size:26px;font-weight:700;color:var(--text);font-family:var(--mono);line-height:1;}
.stat-tt-sub{font-size:11px;color:var(--t3);}
.stat-match-bar-wrap{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.stat-match-bar-bg{flex:1;height:8px;background:var(--border2);border-radius:4px;overflow:hidden;}
.stat-match-bar-fill{height:100%;border-radius:4px;transition:width .4s ease;}
/* Table header corners — clip to card border-radius */