/* ============================================================================
   Hiring module component library (hx-*) — per 06_DESIGN_TOKENS.md component
   specs. All selectors live under .hiring-page / .careers-page (tokens file
   defines the variables on those wrappers).
   ============================================================================ */

.hiring-page {
    min-height: calc(100vh - 100px);
    padding: 0 0 4px;
}

.tablescrolldash{
      height: calc(100vh - 340px);
      overflow-x: auto;
}

    .hiring-page *, .hiring-page *::before, .hiring-page *::after,
    .careers-page *, .careers-page *::before, .careers-page *::after {
        box-sizing: border-box;
    }

.hx-wrap {
    width: 100%;
    /* padding: 0 30px; */
}

.hx-wrap--narrow {
    width: 100%;
}

.hx-mono {
    font-family: var(--font-mono);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.hx-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 15px 8px;
    border-bottom: 1px solid #e5e7eb;
}

.hx-topbar__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hx-topbar__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .hx-topbar__icon svg {
        width: 21px;
        height: 21px;
    }

.hx-topbar__title h1 {
    font-size: 16px;
    font-weight: 500!important;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text);
}

.hx-topbar__title p {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 0px!important;
}

.hx-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* The module's one navigation row: tabs left, utilities right. The band that
   used to sit above this (.hx-topbar) held nothing but those two utilities, so
   it was a whole row of page height spent on chrome. The ground, padding and
   rule moved up here from .hx-tabs; .hx-tabs itself is now just the tab strip. */
.hx-tabbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0 15px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.hx-tabs {
    display: flex;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    /* the tab strip may scroll on a narrow screen; the utilities must not
       scroll away with it */
    scrollbar-width: none;
}

    .hx-tabs::-webkit-scrollbar {
        display: none;
    }

.hx-tabbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-left: auto;
}

/* Deliberately NOT .btn/.btn-primary: those are Bootstrap globals carrying
   !important rules from the legacy chrome, and a 34px filled button would
   shout next to a 44px tab row. */
.hx-tabact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 140ms, color 140ms;
}

    .hx-tabact:hover, .hx-tabact:focus {
        border-color: var(--accent);
        color: var(--accent);
        text-decoration: none;
    }

    .hx-tabact i {
        font-size: 13px;
    }

@media (max-width: 720px) {
    /* the label is the first thing to go, not the button */
    .hx-tabact span.hx-tabact__t {
        display: none;
    }
}

/* ONE module tab treatment across the product. These values are Onboarding's
   .obh-tab, to the pixel and to the oklch — a user crossing from Onboarding to
   Hiring must not notice the tab strip changed hands. Copied as literals rather
   than referenced as tokens because --qhrm-indigo-* live in the Onboarding
   token sheet, which Hiring pages do not load.

   Hiring used to differ on three counts, and each one read as "a different
   product": 13px not 14px, weight 600 on INACTIVE tabs (so nothing but the
   underline marked the active one), and hairline separators between tabs that
   no other module draws. */
.hx-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 45px;
    padding: 0 11px;
    font-size: 14px;
    font-weight: 500;
    color: oklch(0.58 0.025 280);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 140ms, border-color 140ms;
}

    .hx-tab:hover {
        color: var(--qhrm-primary, #4361ee);
        text-decoration: none;
    }

    .hx-tab svg,
    .hx-tab .lucide {
        width: 15px;
        height: 15px;
    }

.hx-tab--active {
    color: oklch(0.46 0.2 270);
    font-weight: 600;
    border-bottom-color: oklch(0.54 0.21 270);
}

    .hx-tab--active:hover {
        color: oklch(0.46 0.2 270);
    }

/* ── Layout: tab body; sub-navigation = horizontal pill tabs (prototype SubTabs) ── */
.hx-body {
    display: block;
    width: 100%;
    margin: 0px 0 0;
    padding: 0px;
}

.hx-submenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 15px;
    background: #fff;
}

.hx-submenu__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* height: 36px; */
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    background: transparent;
    transition: background 140ms, color 140ms;
    font-family: var(--font-sans);
}

    .hx-submenu__item svg {
        width: 16px;
        height: 16px;
        color: var(--text-3);
    }

    .hx-submenu__item:hover {
        background: var(--surface-2);
        color: var(--text);
        text-decoration: none;
    }

.hx-submenu__item--active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

    .hx-submenu__item--active:hover {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .hx-submenu__item--active svg {
        color: var(--accent);
    }

.hx-submenu__count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border-radius: 6px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

.hx-submenu__item--active .hx-submenu__count {
    color: var(--accent);
    background: transparent;
    padding: 0;
    min-width: 0;
}

.hx-main {
    width: 100%;
    min-width: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* height: 38px; */
    padding: 6px 14px;
    border-radius: var(--r-input);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms, border-color 140ms, color 140ms;
    white-space: nowrap;
}

    .hx-btn:hover {
        text-decoration: none;
    }

    .hx-btn svg {
        width: 15px;
        height: 15px;
    }

.hx-btn--sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

.hx-btn--lg {
    height: 42px;
    padding: 0 20px;
    font-size: 13.5px;
}

.hx-btn--primary {
    background: #4361ee;
    color: #fff;
}

    .hx-btn--primary:hover {
        background: var(--accent-2);
        color: #fff;
    }

.hx-btn--secondary {
    background: #fff;
    color: #4361ee;
    border-color: #4361ee;
}

    .hx-btn--secondary:hover {
        border-color: #3a54d4;
        color: #fff;
        background: #3a54d4;
    }

.hx-btn--ghost {
    background: transparent;
    color: #4361ee;
    border: 1px solid;
}

    .hx-btn--ghost:hover {
        background: var(--surface-2);
        color: var(--text);
    }

.hx-btn--danger {
    background: var(--danger);
    color: #fff;
}

    .hx-btn--danger:hover {
        background: #b91c1c;
        color: #fff;
    }

.hx-btn--danger-soft {
    background: var(--danger-soft);
    color: var(--danger-text);
}

    .hx-btn--danger-soft:hover {
        background: var(--danger);
        color: #fff;
    }

.hx-btn--icon {
    width: 38px;
    padding: 0;
}

    .hx-btn--icon.hx-btn--sm {
        width: 34px;
    }

.hx-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.hx-btn--block {
    width: 100%;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.hx-field {
    margin-bottom: 14px;
}

.hx-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px;
}

    .hx-label .hx-req {
        color: var(--danger);
    }

.hx-input, .hx-select, .hx-textarea {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    outline: none;
    transition: border-color 140ms, box-shadow 140ms;
}

.hx-textarea {
    height: auto;
    min-height: 84px;
    padding: 10px 12px;
    resize: vertical;
}

    .hx-input:focus, .hx-select:focus, .hx-textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

.hx-input--error, .hx-select--error, .hx-textarea--error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.hx-error-msg {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--danger-text);
    margin-top: 5px;
}

    .hx-error-msg svg {
        width: 13px;
        height: 13px;
    }

.hx-hint {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 5px;
}

.hx-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a91a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

/* ── Combobox (searchable select) ────────────────────────────────────────── */
.hx-combobox {
    position: relative;
    width: 100%;
}

.hx-combobox__native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.hx-combobox__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 4px 32px 4px 12px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    cursor: pointer;
    outline: none;
    transition: border-color 140ms, box-shadow 140ms;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a91a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

    .hx-combobox__trigger:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

.hx-combobox__trigger--error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.hx-combobox__trigger--disabled {
    opacity: .6;
    cursor: not-allowed;
}

.hx-combobox__trigger--multi {
    flex-wrap: wrap;
}

.hx-combobox__placeholder {
    color: var(--text-3);
}

.hx-combobox__value {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-combobox__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 7px 3px 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.hx-combobox__chip-x {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: .7;
}

    .hx-combobox__chip-x:hover {
        opacity: 1;
    }

.hx-combobox__panel {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    max-height: 290px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
}

.hx-combobox__search {
    flex-shrink: 0;
    height: 36px;
    padding: 0 12px;
    margin: 6px;
    width: calc(100% - 12px);
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
}

    .hx-combobox__search:focus {
        border-color: var(--accent);
    }

.hx-combobox__list {
    overflow-y: auto;
    padding: 4px;
}

.hx-combobox__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    border-radius: 7px;
    cursor: pointer;
}

    .hx-combobox__opt:hover, .hx-combobox__opt--active {
        background: var(--surface-2);
    }

.hx-combobox__opt--selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.hx-combobox__opt--clear {
    color: var(--text-3);
    font-style: italic;
}

.hx-combobox__check {
    width: 16px;
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 700;
}

.hx-combobox__empty {
    padding: 14px 12px;
    font-size: 12.5px;
    color: var(--text-3);
    text-align: center;
}

/* segmented control */
.hx-segment {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    padding: 3px;
    gap: 2px;
}

.hx-segment__opt {
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--text-2);
    cursor: pointer;
    transition: background 140ms, color 140ms;
}

.hx-segment__opt--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-card);
}

/* toggle */
.hx-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 22px;
    background: var(--surface-3);
    border: 0;
    cursor: pointer;
    transition: background 140ms;
    flex-shrink: 0;
}

    .hx-toggle::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: left 140ms;
        box-shadow: var(--shadow-card);
    }

.hx-toggle--on {
    background: var(--accent);
}

    .hx-toggle--on::after {
        left: 19px;
    }

/* ── Status badge ────────────────────────────────────────────────────────── */
.hx-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.hx-badge__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.hx-badge--success {
    background: var(--success-soft);
    color: var(--success-text);
}

.hx-badge--warning {
    background: var(--warning-soft);
    color: var(--warning-text);
}

.hx-badge--danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.hx-badge--info {
    background: var(--info-soft);
    color: var(--info-text);
}

.hx-badge--grey {
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid #cdd2eb;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.hx-card {
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* border-radius: var(--r-card); */
    box-shadow: var(--shadow-card);
}

.hx-card__header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border);
}

    .hx-card__header svg {
        width: 16px;
        height: 16px;
        color: var(--text-3);
    }

.hx-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    flex: 1;
}

.hx-card__body {
    padding: 8px 15px;
}

.hx-card--hover {
    cursor: pointer;
    transition: transform 140ms, box-shadow 140ms;
}

    .hx-card--hover:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-overlay);
    }

/* KPI card */
.hx-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 8px 15px;
}

.hx-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    padding: 18px;
}

.hx-kpi__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.hx-kpi__chip {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
}

    .hx-kpi__chip svg {
        width: 16px;
        height: 16px;
    }

.hx-kpi__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

.hx-kpi__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hx-kpi__sub {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 4px;
}

.hx-progress {
    height: 6px;
    border-radius: 6px;
    background: var(--surface-3);
    overflow: hidden;
    margin-top: 8px;
}

.hx-progress__bar {
    height: 100%;
    border-radius: 6px;
    background: var(--accent);
    transition: width 200ms;
}

/* ── Data table ──────────────────────────────────────────────────────────── */
.hx-table-wrap {
    overflow-x: auto;
}

.hx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .hx-table thead th {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-3);
        background: var(--surface-2);
        text-align: left;
        padding: 9px 14px;
        white-space: nowrap;
    }

        .hx-table thead th:first-child {
            /* border-radius: 8px 0 0 8px; */
        }

        

    .hx-table tbody td {
        padding: 13px 14px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        vertical-align: middle;
    }

    .hx-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .hx-table tbody tr.hx-row--click {
        cursor: pointer;
        transition: background 140ms;
    }

        .hx-table tbody tr.hx-row--click:hover {
            background: var(--surface-2);
        }

    .hx-table .hx-cell-mono {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--text-2);
    }

.hx-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.hx-pagination__info {
    font-size: 12px;
    color: var(--text-3);
}

.hx-pagination__controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hx-pagination__btn {
    width: 30px;
    height: 30px;
    padding: 0;
}

    .hx-pagination__btn svg {
        width: 14px;
        height: 14px;
    }

.hx-pagination__page {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--r-input);
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms, color 140ms;
}

    .hx-pagination__page:hover {
        background: var(--surface-2);
        color: var(--text);
    }

.hx-pagination__page--active,
.hx-pagination__page--active:hover {
    background: var(--accent);
    color: #fff;
}

.hx-pagination__ellipsis {
    padding: 0 4px;
    color: var(--text-3);
    font-size: 12.5px;
}

.hx-cell-main {
    font-weight: 600;
    color: var(--text);
}

.hx-cell-sub {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 1px;
}

/* avatar */
.hx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.hx-avatar--sm {
    width: 22px;
    height: 22px;
    font-size: 9px;
}

.hx-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 17px;
}

.hx-person {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* kebab menu */
.hx-kebab {
    position: relative;
}

.hx-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 185px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-overlay);
    padding: 5px;
    z-index: 600;
    display: none;
    animation: hx-menu-in 120ms ease-out;
}

.hx-menu--open {
    display: block;
}

.hx-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 140ms;
}

    .hx-menu__item:hover {
        background: var(--surface-2);
    }

    .hx-menu__item svg {
        width: 14px;
        height: 14px;
        color: var(--text-3);
    }

.hx-menu__item--danger {
    color: var(--danger-text);
}

    .hx-menu__item--danger svg {
        color: var(--danger-text);
    }

.hx-menu__sep {
    height: 1px;
    background: var(--border);
    margin: 4px 6px;
}

@keyframes hx-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Drawer ──────────────────────────────────────────────────────────────── */
/* App shell navbar (.navbar-fixed-top) is z-index 1003 — overlay layers must clear it. */
.hx-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18,21,28,.40);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
}

.hx-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.hx-drawer {
    position: fixed;
    top: 0;
    right: -640px;
    width: 600px;
    max-width: 96vw;
    height: 100vh;
    background: var(--surface);
    /* border-left: 1px solid var(--border); */
    box-shadow: var(--shadow-overlay);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    transition: right 200ms cubic-bezier(.2,.8,.2,1);
}

.hx-drawer--open {
    right: 0;
}

.hx-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 15px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: #4361ee;
}

.hx-drawer__title {
    font-size: 16px;
    font-weight: 500!important;
    color: #ffffff;
    margin: 0;
}

.hx-drawer__subtitle {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 0px !important;
}

.hx-drawer__close {
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    border-radius: 7px;
    transition: background 140ms, color 140ms;
}

    .hx-drawer__close:hover {
        background: var(--surface-2);
        color: var(--text);
    }

.hx-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px;
}

.hx-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 9px;
    padding: 8px 18px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #f7f8fa;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.hx-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hx-modal--open {
    display: flex;
}

.hx-modal__box {
    width: 520px;
    max-width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-overlay);
    box-shadow: var(--shadow-overlay);
    animation: hx-modal-in 180ms ease-out;
}

@keyframes hx-modal-in {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hx-modal__header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 22px 12px;
}

.hx-modal__chip {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .hx-modal__chip svg {
        width: 17px;
        height: 17px;
    }

.hx-modal__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    flex: 1;
}

.hx-modal__body {
    padding: 6px 22px 16px;
    overflow-y: auto;
}

.hx-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 13px 22px;
    border-top: 1px solid var(--border);
}

/* ── Pipeline stepper ────────────────────────────────────────────────────── */
.hx-stepper {
    display: flex;
    align-items: flex-start;
}

.hx-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 1;
    position: relative;
}

.hx-step__circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
}

    .hx-step__circle svg {
        width: 15px;
        height: 15px;
    }

.hx-step--done .hx-step__circle {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.hx-step--active .hx-step__circle {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.hx-step__label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-3);
    text-align: center;
}

.hx-step--active .hx-step__label {
    font-weight: 700;
    color: var(--accent);
}

.hx-step--done .hx-step__label {
    color: var(--text-2);
}

.hx-step::before {
    content: '';
    position: absolute;
    top: 17px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--border-2);
}

.hx-step:first-child::before {
    display: none;
}

.hx-step--done::before, .hx-step--active::before {
    background: var(--accent);
}

/* BUG-3186: a step rendered as a <button> is a "move to this stage" control.
   Reset the native button chrome so it sits identically to the plain steps. */
button.hx-step {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

    button.hx-step:hover .hx-step__circle {
        border-color: var(--accent);
        color: var(--accent);
    }

    button.hx-step:hover .hx-step__label {
        color: var(--accent);
    }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.hx-toasts {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}

.hx-toast {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--shadow-overlay);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    animation: hx-toast-in 180ms ease-out;
    pointer-events: auto;
    max-width: 480px;
}

    .hx-toast svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.hx-toast--success svg {
    color: var(--success);
}

.hx-toast--error svg {
    color: var(--danger);
}

.hx-toast--info svg {
    color: var(--info);
}

@keyframes hx-toast-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.hx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    text-align: center;
}

.hx-empty__icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
}

    .hx-empty__icon svg {
        width: 22px;
        height: 22px;
    }

.hx-empty__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
}

.hx-empty__sub {
    font-size: 12.5px;
    color: var(--text-3);
    margin: 0 0 16px;
}

/* ── Page header inside a tab ────────────────────────────────────────────── */
.hx-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 15px;
    border-bottom: 1px solid #e5e7eb;
}

.hx-pagehead__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.hx-pagehead__sub {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 1px !important;
}

.hx-pagehead__actions {
    display: flex;
    gap: 8px;
}

/* filter toolbar */
.hx-filters {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 9px;
    padding: 8px 15px;
    align-items: center;
    background: #fff;
}

    .hx-filters .hx-input, .hx-filters .hx-select {
        width: auto;
        min-width: 150px;
    }

.hx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;   
    padding: 7px 15px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
}

    .hx-chip button {
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        padding: 0;
        display: inline-flex;
    }

        .hx-chip button svg {
            width: 13px;
            height: 13px;
        }

/* detail two-column grid */
.hx-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1000px) {
    .hx-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* info banner */
.hx-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 14px;
}

    .hx-banner svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
    }

.hx-banner--success {
    background: var(--success-soft);
    color: var(--success-text);
}

.hx-banner--warning {
    background: var(--warning-soft);
    color: var(--warning-text);
}

.hx-banner--danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.hx-banner--info {
    background: var(--info-soft);
    color: var(--info-text);
}

/* definition rows (drawer read-only summary) */
.hx-def {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 6px 14px;
    font-size: 13px;
}

    .hx-def dt {
        color: var(--text-3);
        font-weight: 500;
    }

    .hx-def dd {
        color: var(--text);
        margin: 0;
        font-weight: 500;
    }

/* requirements checklist */
.hx-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .hx-checklist li {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        font-size: 13px;
        color: var(--text);
    }

        .hx-checklist li svg {
            width: 15px;
            height: 15px;
            color: var(--success);
            flex-shrink: 0;
            margin-top: 2px;
        }

/* ── Public careers page ─────────────────────────────────────────────────── */
.careers-page {
    min-height: 100vh;
}

.cx-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.cx-header__in {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cx-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
}

    .cx-logo:hover {
        color: var(--text);
        text-decoration: none;
    }

.cx-logo__mark {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.cx-logo__mark-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

    .cx-logo__mark svg {
        width: 16px;
        height: 16px;
    }

.cx-header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cx-header__navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
}

    .cx-header__navlink svg {
        width: 15px;
        height: 15px;
    }

    .cx-header__navlink:hover {
        color: var(--text);
        text-decoration: none;
    }

    .cx-header__navlink--active {
        color: var(--accent);
    }

    .cx-header__navlink--cta {
        border-color: var(--border);
        color: var(--text);
    }

    .cx-header__navlink--cta:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-soft);
    }

@media (max-width: 560px) {
    .cx-header__navlink span {
        display: none;
    }
}

.cx-hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 24px 8px;
}

    .cx-hero h1 {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text);
        margin: 0 0 6px;
    }

    .cx-hero p {
        font-size: 14px;
        color: var(--text-2);
        margin: 0;
    }

.cx-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 24px 60px;
}

.cx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.cx-jobgrid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 22px;
    align-items: start;
}

.cx-job-main {
    min-width: 0;
}

@media (max-width: 900px) {
    .cx-jobgrid {
        grid-template-columns: 1fr;
    }
}

.cx-sticky {
    position: sticky;
    top: calc(64px + 18px);
}

.cx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cx-meta__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
}

    .cx-meta__chip svg {
        width: 12px;
        height: 12px;
    }

/* honeypot — visually hidden, still focusable by bots */
.hx-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* misc */
.hx-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .hx-link:hover {
        color: var(--accent-2);
        text-decoration: underline;
    }

.hx-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    text-decoration: none;
    margin-bottom: 12px;
}

    .hx-back:hover {
        color: var(--accent);
        text-decoration: none;
    }

    .hx-back svg {
        width: 14px;
        height: 14px;
    }

.hx-spin {
    animation: hx-rot 800ms linear infinite;
}

@keyframes hx-rot {
    to {
        transform: rotate(360deg);
    }
}


 

.hx-table-wrap {
    height: calc(100vh - 302px);
    overflow-y: auto;
  }

  thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 22;
  }

/* ── Careers v2 ─────────────────────────────────────────────────────────────── */

/* Hero */
.cx-hero-v2 {
    background: linear-gradient(135deg, #312e81 0%, #5145e8 50%, #7c3aed 100%);
    padding: 50px 24px 56px;
    position: relative;
    overflow: hidden;
}

.cx-hero-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.cx-hero-v2__inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cx-hero-v2__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cx-hero-v2__col {
    flex: 1;
    min-width: 0;
}

.cx-hero-v2__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
}

.cx-hero-v2__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,.28);
    flex-shrink: 0;
}

.cx-hero-v2__deco {
    position: relative;
    width: 190px;
    height: 190px;
    flex-shrink: 0;
}

.cx-hero-v2__deco-circle {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.85);
}

.cx-hero-v2__deco-circle svg {
    width: 30%;
    height: 30%;
}

.cx-hero-v2__deco-circle--1 { width: 56px; height: 56px; top: 4px; right: 64px; }
.cx-hero-v2__deco-circle--2 { width: 96px; height: 96px; top: 54px; right: 0; }
.cx-hero-v2__deco-circle--3 { width: 48px; height: 48px; top: 136px; right: 82px; }

@media (max-width: 900px) {
    .cx-hero-v2__deco { display: none; }
}

.cx-hero-v2__head {
    margin-bottom: 28px;
}

.cx-hero-v2__title {
    font-size: 46px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.cx-hero-v2__subtitle {
    font-size: 16px;
    color: rgba(255,255,255,.76);
    margin: 0;
    max-width: 520px;
    line-height: 1.65;
}

.cx-hero-v2__stats {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.cx-hero-v2__stat {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    padding: 9px 18px;
    min-width: 100px;
}

.cx-hero-v2__stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cx-hero-v2__stat-icon svg {
    width: 15px;
    height: 15px;
    color: #fff;
}

.cx-hero-v2__stat-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cx-hero-v2__stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cx-hero-v2__stat-label {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,.70);
}

/* Filter bar — floats as a card overlapping the hero's bottom edge */
.cx-filter-bar-wrap {
    position: relative;
    z-index: 5;
    margin-top: -34px;
    padding: 0 24px;
}

.cx-filter-bar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -14px rgba(49,46,129,.28), 0 2px 8px rgba(16,20,30,.06);
}

.cx-filter-bar__form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cx-filter-bar__search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.cx-filter-bar__search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-3);
    pointer-events: none;
}

.cx-filter-bar__search-input {
    width: 100%;
    height: 38px;
    padding-left: 34px !important;
}

.cx-filter-bar__form .hx-select {
    width: auto;
    min-width: 148px;
    height: 38px;
}

.cx-filter-bar__form .hx-btn {
    height: 38px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Content area */
.cx-content-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 5px 16px;
}

.cx-results-meta {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 20px;
}

.cx-results-meta strong {
    color: var(--text);
    font-weight: 700;
}

.cx-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}


.cx-results-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cx-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
}

.cx-sort__select {
    height: 34px;
    min-width: 128px;
    font-size: 12.5px;
}

.cx-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px;
    background: var(--surface-2);
}

.cx-view-toggle__btn {
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-3);
    cursor: pointer;
}

.cx-view-toggle__btn svg {
    width: 15px;
    height: 15px;
}

.cx-view-toggle__btn--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(16,20,30,.08);
}

@media (max-width: 560px) {
    .cx-sort span { display: none; }
}

/* Department groups */
.cx-dept-group {
    margin-bottom: 32px;
}

.cx-dept-group__header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
    cursor: pointer;
    user-select: none;
}

.cx-dept-group__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cx-dept-group__icon svg {
    width: 14px;
    height: 14px;
}

.cx-dept-group__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

.cx-dept-group__count {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 20px;
    padding: 3px 11px;
}

.cx-dept-group__collapse {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-3);
    border-radius: 8px;
    flex-shrink: 0;
    transition: transform 160ms, background 140ms;
}

.cx-dept-group__collapse svg {
    width: 16px;
    height: 16px;
}

.cx-dept-group__collapse:hover {
    background: var(--surface-2);
    color: var(--text);
}

.cx-dept-group--collapsed .cx-dept-group__collapse {
    transform: rotate(-90deg);
}

.cx-dept-group--collapsed .cx-dept-group__header {
    margin-bottom: 0;
}

/* Job list & rows */
.cx-job-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.cx-job-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    background: var(--surface);
    transition: background 140ms;
    cursor: pointer;
    position: relative;
}

.cx-job-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 140ms;
}

.cx-job-row:hover::before {
    opacity: 1;
}

.cx-job-row:last-child {
    border-bottom: none;
}

.cx-job-row:hover {
    background: var(--surface-2);
    text-decoration: none;
}

.cx-job-row__left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cx-job-row__title-line {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.cx-job-row__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.cx-job-row__new-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 20px;
    background: #dcfce7;
    color: #15803d;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.cx-job-row__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.cx-job-row__date {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    font-weight: 500;
}

.cx-job-row__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    transition: background 140ms, color 140ms, transform 140ms;
    flex-shrink: 0;
}

.cx-job-row__cta svg {
    width: 15px;
    height: 15px;
}

.cx-job-row:hover .cx-job-row__cta {
    background: var(--accent-soft);
    color: var(--accent);
    transform: translateX(3px);
}

/* Meta chip colour variants for employment type */
.cx-meta__chip--green {
    background: #e7f7f0;
    color: #0a7d56;
    border-color: #b6e9d6;
}

.cx-meta__chip--blue {
    background: var(--info-soft);
    color: var(--info-text);
    border-color: #bfcfff;
}

.cx-meta__chip--amber {
    background: var(--warning-soft);
    color: var(--warning-text);
    border-color: #f5d9a3;
}

/* Empty state v2 */
.cx-empty-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
}

.cx-empty-v2__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--surface-2);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.cx-empty-v2__icon svg {
    width: 28px;
    height: 28px;
}

.cx-empty-v2__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.cx-empty-v2__sub {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 0 0 22px;
}

/* Footer */
.cx-footer {
    border-top: none;
    background: linear-gradient(135deg, #312e81 0%, #5145e8 50%, #7c3aed 100%);
    padding: 24px;
}

.cx-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    font-size: 12.5px;
    color: rgba(255,255,255,.65);
}

.cx-footer__inner strong {
    color: rgba(255,255,255,.90);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 700px) {
    .cx-hero-v2 { padding: 36px 16px 28px; }
    .cx-hero-v2__title { font-size: 30px; }
    .cx-hero-v2__subtitle { font-size: 14px; }
    .cx-filter-bar-wrap { margin-top: -22px; padding: 0 12px; }
    .cx-filter-bar { padding: 10px 16px; }
    .cx-filter-bar__form .hx-select { min-width: 120px; }
    .cx-content-wrap { padding: 18px 16px 60px; }
    .cx-job-row { padding: 14px 16px; }
    .cx-job-row__right { display: none; }
}

/* ── Drawer header icon chip (white-on-blue) ──────────────────────────────── */
.hx-drawer__icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hx-drawer__icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.hx-drawer__head-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.hx-drawer__head-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* ── Form section divider ─────────────────────────────────────────────────── */
.hx-form-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 14px;
}

.hx-form-sep__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    white-space: nowrap;
}

.hx-form-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Two-column form row ──────────────────────────────────────────────────── */
.hx-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ── Definition list card variant ────────────────────────────────────────── */
.hx-def--card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 12px 14px;
    margin-top: 14px;
}

/* ── Drag-and-drop dropzone ──────────────────────────────────────────────── */
.hx-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 24px 28px;
    border: 2px dashed var(--border);
    border-radius: var(--r-card);
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 180ms, background 180ms, box-shadow 180ms;
    outline: none;
    user-select: none;
}

.hx-dropzone:hover,
.hx-dropzone:focus {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.hx-dropzone--active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.hx-dropzone__icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    transition: background 180ms, color 180ms, transform 180ms;
}

    .hx-dropzone__icon svg {
        width: 26px;
        height: 26px;
    }

.hx-dropzone--active .hx-dropzone__icon,
.hx-dropzone:focus .hx-dropzone__icon {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.hx-dropzone__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.hx-dropzone__formats {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
}

.hx-dropzone__fmt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fee2e2;
    color: #b91c1c;
    line-height: 1.6;
}

.hx-dropzone__fmt--doc {
    background: #dbeafe;
    color: #1d4ed8;
}

.hx-dropzone__hint-txt {
    font-size: 11.5px;
    color: var(--text-3);
}

.hx-hidden-input {
    display: none;
}

/* ── Bulk stats bar ──────────────────────────────────────────────────────── */
.hx-bulk-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    background: var(--accent-soft);
    border: 1px solid rgba(67, 97, 238, .18);
    border-radius: var(--r-input);
    margin: 14px 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
}

    .hx-bulk-stats svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

.hx-bulk-stats__sep {
    width: 1px;
    height: 13px;
    background: rgba(67, 97, 238, .25);
    flex-shrink: 0;
}

.hx-bulk-stats__more {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Bulk candidate rows ─────────────────────────────────────────────────── */
.hx-bulk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hx-bulk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    transition: border-color 140ms;
}

    .hx-bulk-row:hover {
        border-color: var(--border-2, #d1d5db);
    }

    .hx-bulk-row:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

.hx-bulk-row__type {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 5px;
    background: #fee2e2;
    color: #b91c1c;
    min-width: 36px;
    text-align: center;
    line-height: 1;
    align-self: flex-start;
    margin-top: 6px;
}

.hx-bulk-row__type--doc {
    background: #dbeafe;
    color: #1d4ed8;
}

.hx-bulk-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hx-bulk-row__name {
    height: 30px;
    font-size: 13px;
    background: var(--surface-2);
}

    .hx-bulk-row__name:focus {
        background: var(--surface);
    }

.hx-bulk-row__file {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    line-height: 1.3;
}

.hx-bulk-row__del {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
    color: var(--text-3) !important;
    border-color: transparent !important;
}

    .hx-bulk-row__del:hover {
        color: var(--danger-text) !important;
        border-color: var(--danger-soft) !important;
        background: var(--danger-soft) !important;
    }

/* ── Settings two-column layout ─────────────────────────────────────────── */
.hx-settings-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    min-height: calc(100vh - 200px);
    border-top: 1px solid var(--border);
}

.hx-settings-nav {
    padding: 12px 8px;
    border-right: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hx-settings-nav .hx-submenu__item {
    width: 100%;
    border: none;
    border-radius: 7px;
    padding: 9px 12px;
    text-align: left;
    justify-content: flex-start;
    font-size: 13px;
    gap: 10px;
}

    .hx-settings-nav .hx-submenu__item svg {
        width: 15px;
        height: 15px;
    }

    .hx-settings-nav .hx-submenu__item--active {
        background: var(--accent-soft);
        color: var(--accent);
        border: none;
    }

.hx-settings-content {
    background: var(--surface);
}

.hx-settings-section {
    display: block;
}

.hx-settings-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 15px 8px;
    border-bottom: 1px solid var(--border);
}

.hx-settings-section__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}

.hx-settings-section__desc {
    font-size: 12px;
    color: var(--text-3);
    margin: 0;
}

.hx-settings-section__body {
    padding: 8px 15px;
}


.p-8-15{
     padding: 8px 15px;
}

.pt-0 {
    padding-top: 0px !important;
}

.addfotterbtn {
    display: flex;
    align-items: center;
    justify-content: end;
}

.hx-settings-section__footer {
    padding: 8px 15px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    background: var(--qhrm-bg);
}

.hx-settings-section__divider {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.hx-settings-section__sub-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-top: 0px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 8px 8px 0px 0px;
}

    .hx-settings-section__sub-head svg {
        width: 15px;
        height: 15px;
        color: var(--text-3);
    }

.hx-settings-section__sub-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin: 0;
}

/* Template horizontal tabs bar */
.hx-settings-tpl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

/* Scoped overrides: nav items in horizontal tab mode */
.hx-settings-tpl-tabs .hx-tpl-nav-item {
    width: auto;
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    gap: 8px;
}

    .hx-settings-tpl-tabs .hx-tpl-nav-item:hover {
        background: var(--surface-3);
        border-color: #d1d5db;
    }

    .hx-settings-tpl-tabs .hx-tpl-nav-item--active {
        background: var(--accent-soft);
        border-color: var(--accent);
    }

    .hx-settings-tpl-tabs .hx-tpl-nav-item__icon {
        width: 22px;
        height: 22px;
        border-radius: 5px;
    }

        .hx-settings-tpl-tabs .hx-tpl-nav-item__icon svg {
            width: 12px;
            height: 12px;
        }

    .hx-settings-tpl-tabs .hx-tpl-nav-item__trigger {
        display: none;
    }

    .hx-settings-tpl-tabs .hx-tpl-nav-item__lock {
        display: none;
    }

/* Template editor body (below the tabs) */
.hx-settings-tpl-body {
    padding: 20px;
}

.hx-settings-tpl-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ── Template nav items (richer list) ─────────────────────────────────────── */
.hx-tpl-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 140ms;
    font-family: var(--font-sans);
}

    .hx-tpl-nav-item:hover {
        background: var(--surface-3);
    }

.hx-tpl-nav-item--active {
    background: var(--accent-soft) !important;
}

    .hx-tpl-nav-item--active .hx-tpl-nav-item__name {
        color: var(--accent);
    }

    .hx-tpl-nav-item--active .hx-tpl-nav-item__trigger {
        color: var(--accent);
        opacity: 0.7;
    }

.hx-tpl-nav-item__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .hx-tpl-nav-item__icon svg {
        width: 14px;
        height: 14px;
    }

.hx-tpl-nav-item__icon--info    { background: var(--info-soft);    color: var(--info-text); }
.hx-tpl-nav-item__icon--warning { background: var(--warning-soft); color: var(--warning-text); }
.hx-tpl-nav-item__icon--danger  { background: var(--danger-soft);  color: var(--danger-text); }
.hx-tpl-nav-item__icon--success { background: var(--success-soft); color: var(--success-text); }
.hx-tpl-nav-item__icon--grey    { background: var(--surface-3);    color: var(--text-2); }

.hx-tpl-nav-item__text {
    flex: 1;
    min-width: 0;
}

.hx-tpl-nav-item__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hx-tpl-nav-item__trigger {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.hx-tpl-nav-item__lock {
    flex-shrink: 0;
    color: var(--text-3);
}

    .hx-tpl-nav-item__lock svg {
        width: 11px;
        height: 11px;
    }

/* ── Template editor header ────────────────────────────────────────────────── */
.hx-tpl-editor-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.hx-tpl-editor-head__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--accent-soft);
    color: var(--accent);
    transition: background 200ms, color 200ms;
}

    .hx-tpl-editor-head__icon svg {
        width: 18px;
        height: 18px;
    }

.hx-tpl-editor-head__icon--info    { background: var(--info-soft);    color: var(--info-text); }
.hx-tpl-editor-head__icon--warning { background: var(--warning-soft); color: var(--warning-text); }
.hx-tpl-editor-head__icon--danger  { background: var(--danger-soft);  color: var(--danger-text); }
.hx-tpl-editor-head__icon--success { background: var(--success-soft); color: var(--success-text); }

.hx-tpl-editor-head__meta {
    flex: 1;
    min-width: 0;
}

.hx-tpl-editor-head__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.hx-tpl-editor-head__trigger {
    font-size: 11.5px;
    color: var(--text-3);
}

/* ── Subject input with char count ─────────────────────────────────────────── */
.hx-tpl-input-wrap {
    position: relative;
}

    .hx-tpl-input-wrap .hx-input {
        padding-right: 60px;
    }

.hx-tpl-char-count {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ── Placeholder toolbar ────────────────────────────────────────────────────── */
.hx-tpl-placeholders {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    margin-bottom: 12px;
}

.hx-tpl-placeholders .hx-label {
    margin: 0;
    font-size: 11px;
    color: var(--text-3);
}

.hx-tpl-ph-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--accent);
    cursor: pointer;
    transition: background 140ms, border-color 140ms;
}

    .hx-tpl-ph-chip:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
    }

    .hx-tpl-ph-chip svg {
        width: 11px;
        height: 11px;
        color: var(--text-3);
    }

/* Core / locked fields badges */
.hx-core-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
   align-items: center;
}

.hx-badge-icon {
    width: 11px !important;
    height: 11px !important;
}

/* Exit statuses row */
.hx-pipe-exits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Toggle row */
.hx-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.hx-toggle-row__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.hx-toggle-row__desc {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
}

/* Narrow field */
.hx-field--narrow {
    max-width: 380px;
}

/* Dashed add button */
.hx-btn--dashed {
    border-style: dashed;
    border-color: var(--border);
    color: var(--text-2);
    background: transparent;
}

    .hx-btn--dashed:hover {
        background: var(--surface-2);
        color: var(--text);
        border-color: var(--accent);
        border-style: dashed;
    }

/* ── Master data: departments & locations card grid ─────────────────────── */
.hx-master-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hx-master-meta__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
    font-variant-numeric: tabular-nums;
}

.hx-master-meta__readonly {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
}

    .hx-master-meta__readonly svg {
        width: 11px;
        height: 11px;
    }

.hx-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.hx-dept-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    transition: box-shadow 140ms, border-color 140ms;
}

    .hx-dept-card:hover {
        border-color: #d1d5db;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

.hx-dept-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

    .hx-dept-card__avatar svg {
        width: 20px;
        height: 20px;
    }

.hx-dept-card__avatar--0 { background: var(--accent-soft);   color: var(--accent); }
.hx-dept-card__avatar--1 { background: var(--success-soft);  color: var(--success-text); }
.hx-dept-card__avatar--2 { background: var(--warning-soft);  color: var(--warning-text); }
.hx-dept-card__avatar--3 { background: var(--danger-soft);   color: var(--danger-text); }
.hx-dept-card__avatar--4 { background: var(--info-soft);     color: var(--info-text); }

.hx-dept-card__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.hx-dept-card__code {
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
}

/* ── Master data list view ──────────────────────────────────────────────── */
.hx-master-list {
    display: flex;
    flex-direction: column;
}

.hx-master-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    transition: background 120ms;
}

    .hx-master-row:last-child {
        border-bottom: none;
    }

    .hx-master-row:hover {
        background: var(--surface-2);
        border-radius: 6px;
    }

.hx-master-row__num {
    width: 22px;
    font-size: 11.5px;
    font-family: var(--font-mono);
    color: var(--text-3);
    text-align: right;
    flex-shrink: 0;
}

.hx-master-row__avatar {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

    .hx-master-row__avatar svg {
        width: 14px;
        height: 14px;
    }

.hx-master-row__name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state */
.hx-master-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 52px 20px;
    color: var(--text-3);
    text-align: center;
}

    .hx-master-empty svg {
        width: 38px;
        height: 38px;
        opacity: 0.3;
    }

    .hx-master-empty p {
        font-size: 13px;
        margin: 0;
        color: var(--text-3);
    }

/* ── Drawer footer info / status text ───────────────────────────────────── */
.hx-drawer__footer-info {
    flex: 1;
    font-size: 11.5px;
    color: var(--text-3);
    margin: 0;
}

/* ── Product Trainer drawer — role identity banner ───────────────────────── */
.pt-role-banner {
    display: flex;
    align-items: center;
    gap: 13px;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 6px;
}

.pt-role-banner__icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #4361ee 0%, #7c3aed 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(67,97,238,.25);
}

.pt-role-banner__icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.pt-role-banner__meta {
    flex: 1;
    min-width: 0;
}

.pt-role-banner__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}

.pt-role-banner__dept {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── Trainer skill checklist pills ──────────────────────────────────────── */
.pt-skill-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.pt-skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #c7d2fe;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.pt-skill-pill svg {
    width: 13px;
    height: 13px;
}

.pt-skill-pill--selected {
    background: #4361ee;
    color: #fff;
    border-color: #4361ee;
}

/* ── Salary input with currency prefix ──────────────────────────────────── */
.pt-input-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    overflow: hidden;
    background: #fff;
    transition: border-color 140ms;
}

.pt-input-prefix:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(67,97,238,.1);
}

.pt-input-prefix__label {
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
    align-self: stretch;
    white-space: nowrap;
}

.pt-input-prefix .hx-input {
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    flex: 1;
}




 .div-fixed-scroll {
    height: calc(100vh - 185px);
    overflow-y: auto;
  }

/* ── Body reset for standalone careers layout ────────────────────────────── */
body.cx-page {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(160deg, #eef1fb 0%, #f5f3fb 45%, #eef2fd 100%);
}

/* ── Framed canvas card — whole site sits in a rounded, shadowed card ───────── */
.cx-canvas {
    max-width: 1180px;
    margin: 0px auto;
    border-radius: 0px;
    background: var(--surface);
}

@media (max-width: 900px) {
    .cx-canvas {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
    }
}

/* ── Job cards grid (card-based listing layout) ──────────────────────────── */
.cx-job-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cx-job-card {
    border-radius: 22px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.cx-job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(16,20,30,.16);
    text-decoration: none;
}

/* Pastel card colors — 6-step cycle */
.cx-job-card--c0 { background: #fde8dc; }
.cx-job-card--c1 { background: #d4f0e8; }
.cx-job-card--c2 { background: #e8e4f9; }
.cx-job-card--c3 { background: #d4e8f9; }
.cx-job-card--c4 { background: #fce4ef; }
.cx-job-card--c5 { background: #e4e8f5; }

.cx-job-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cx-job-card__date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.72);
    border-radius: 30px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

.cx-job-card__date svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cx-job-card__bookmark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    flex-shrink: 0;
    transition: background 140ms, color 140ms;
    padding: 0;
}

.cx-job-card__bookmark:hover {
    background: rgba(255,255,255,.95);
    color: var(--accent);
}

.cx-job-card__bookmark svg {
    width: 15px;
    height: 15px;
}

.cx-job-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cx-job-card__company-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cx-job-card__company-info {
    flex: 1;
    min-width: 0;
}

.cx-job-card__company {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    display: block;
    margin-bottom: 4px;
}

.cx-job-card__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}

.cx-job-card__logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    flex-shrink: 0;
    letter-spacing: -0.03em;
    font-family: var(--font-sans);
}

.cx-job-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cx-job-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 13px;
    border-radius: 30px;
    border: 1.5px solid rgba(0,0,0,.13);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    background: transparent;
    white-space: nowrap;
}

.cx-job-card__tag svg {
    width: 11px;
    height: 11px;
}

.cx-job-card__new-tag {
    background: rgba(255,255,255,.72);
    border-color: transparent;
    color: #0a7d56;
}

.cx-job-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.cx-job-card__location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-job-card__location svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cx-job-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 30px;
    background: #12151c;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-sans);
    text-decoration: none;
    transition: background 140ms, transform 140ms;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
}

.cx-job-card__cta:hover {
    background: #2a2d36;
    color: #fff;
    text-decoration: none;
    transform: scale(1.03);
}

.cx-job-card__cta svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 1024px) {
    .cx-job-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .cx-job-cards { grid-template-columns: 1fr; }
    .cx-job-card__title { font-size: 18px; }
}

/* ── Job list v2 (horizontal row listing) ────────────────────────────────── */
.cx-job-list-v2 {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.cx-job-list-v2--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: none;
    background: transparent;
    box-shadow: none;
    gap: 14px;
}

.cx-job-list-v2--grid .cx-job-list-item {
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}

.cx-job-list-v2--grid .cx-job-list-item__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cx-job-list-v2--grid .cx-job-list-item__arrow {
    display: none;
}

.cx-job-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    background: var(--surface);
    transition: background 140ms;
    position: relative;
    cursor: pointer;
}

.cx-job-list-item:last-child {
    border-bottom: none;
}

.cx-job-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 140ms;
}

.cx-job-list-item:hover {
    background: var(--surface-2);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(67,97,238,.07);
}

.cx-job-list-item:hover::before {
    opacity: 1;
}

/* Colored logo avatar */
.cx-job-list-item__logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    flex-shrink: 0;
    font-family: var(--font-sans);
    letter-spacing: -0.03em;
}

.cx-job-list-item__logo--c0 { background: #dcfce7; color: #15803d; }
.cx-job-list-item__logo--c1 { background: #ffedd5; color: #c2410c; }
.cx-job-list-item__logo--c2 { background: #dbeafe; color: #1d4ed8; }
.cx-job-list-item__logo--c3 { background: #fce7f3; color: #be185d; }
.cx-job-list-item__logo--c4 { background: #f3e8ff; color: #7e22ce; }
.cx-job-list-item__logo--c5 { background: #e0f2fe; color: #0369a1; }

/* Main content */
.cx-job-list-item__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cx-job-list-item__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cx-job-list-item__title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

/* Right: date + New badge */
.cx-job-list-item__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cx-job-list-item__dept,
.cx-job-list-item__location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
}

.cx-job-list-item__dept svg,
.cx-job-list-item__location svg {
    width: 13px;
    height: 13px;
    color: var(--text-3);
}

.cx-job-list-item__date {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
}

/* Meta row: company • type tag */
.cx-job-list-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
}

.cx-job-list-item__company {
    font-weight: 500;
    color: var(--text-2);
}

.cx-job-list-item__sep {
    color: var(--border-2);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
}

/* Employment type pill tags */
.cx-job-list-item__type {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cx-job-list-item__type--fulltime  { background: #d1fae5; color: #065f46; }
.cx-job-list-item__type--parttime  { background: #dbeafe; color: #1e40af; }
.cx-job-list-item__type--contract  { background: #fff7ed; color: #c2410c; }

/* "New" / urgency badge */
.cx-job-list-item__new {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    background: #dcfce7;
    color: #15803d;
    white-space: nowrap;
    letter-spacing: .02em;
}

/* Hover arrow indicator */
.cx-job-list-item__arrow {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 180ms, transform 180ms, background 140ms, color 140ms;
}

.cx-job-list-item__arrow svg {
    width: 15px;
    height: 15px;
}

.cx-job-list-item:hover .cx-job-list-item__arrow {
    opacity: 1;
    transform: none;
    background: var(--accent);
    color: #fff;
}

@media (max-width: 700px) {
    .cx-job-list-item { padding: 16px; gap: 12px; }
    .cx-job-list-item__logo { width: 40px; height: 40px; font-size: 16px; }
    .cx-job-list-item__title-row { flex-wrap: wrap; }
    .cx-job-list-item__arrow { display: none; }
}

/* ── Job detail page utilities ───────────────────────────────────────────── */
.cx-wrap--job {
    padding-top: 24px;
}

.cx-job-detail-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 12px;
}

.cx-meta--mb {
    margin-bottom: 20px;
}

.cx-body-text {
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.cx-card--mt {
    margin-top: 16px;
}

.cx-consent-row {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.cx-consent-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.cx-consent-label {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
}

.cx-file-input {
    padding-top: 7px !important;
}

/* ── Confirm / Closed page classes ────────────────────────────────────────── */
.cx-confirm-wrap {
    max-width: 560px;
    padding-top: 60px;
}

.cx-confirm-card {
    text-align: center;
}

.cx-confirm-card-body {
    padding: 38px 30px;
}

.cx-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cx-confirm-icon svg {
    width: 26px;
    height: 26px;
}

.cx-confirm-icon--success {
    background: var(--success-soft);
    color: var(--success);
}

.cx-confirm-icon--grey {
    background: var(--surface-2);
    color: var(--text-3);
}

.cx-confirm-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
}

.cx-confirm-body {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 16px;
}

.cx-confirm-ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px dashed var(--border-2);
    border-radius: 10px;
    padding: 10px 18px;
    margin-bottom: 22px;
}

.cx-confirm-ref .hx-hint {
    margin-top: 0;
}

.cx-confirm-ref-code {
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-mono);
}

.cx-confirm-actions {
    display: flex;
    gap: 9px;
    justify-content: center;
}

/* ── Job detail hero band ────────────────────────────────────────────────── */
.cx-job-hero {
    background: linear-gradient(135deg, #312e81 0%, #5145e8 55%, #7c3aed 100%);
    padding: 32px 24px 28px;
    position: relative;
    overflow: hidden;
}

.cx-job-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 400' preserveAspectRatio='none'%3E%3Cpath d='M0,140 C160,200 300,80 470,130 C640,180 760,90 900,140 L900,400 L0,400 Z' fill='%23ffffff' fill-opacity='0.055'/%3E%3Cpath d='M0,210 C200,150 340,260 540,200 C700,155 800,220 900,190 L900,400 L0,400 Z' fill='%23ffffff' fill-opacity='0.045'/%3E%3Cpath d='M0,60 C220,15 380,110 600,65 C740,38 820,85 900,55 L900,0 L0,0 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.cx-job-hero__inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 15px;
}

.cx-job-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.70);
    text-decoration: none;
    margin-bottom: 14px;
    transition: color 140ms;
}

.cx-job-hero__back:hover {
    color: #fff;
    text-decoration: none;
}

.cx-job-hero__back svg {
    width: 14px;
    height: 14px;
}

.cx-job-hero__title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.15;
}

.cx-job-hero .cx-meta__chip {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.88);
}

/* ── Bordered card variant (cx pages) ────────────────────────────────────── */
.hx-card--bordered {
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
}

/* ── Apply form — comfortable input sizing for public UX ─────────────────── */
.cx-apply-form .hx-input,
.cx-apply-form .hx-select {
    height: 40px;
    font-size: 13.5px;
}

/* ── File dropzone (label-click, no JS needed) ───────────────────────────── */
.cx-file-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 20px;
    border: 2px dashed var(--border);
    border-radius: var(--r-card);
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 180ms, background 180ms;
    margin-top: 2px;
    width: 100%;
}

.cx-file-dropzone:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.cx-file-dropzone__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 180ms, color 180ms;
}

.cx-file-dropzone:hover .cx-file-dropzone__icon {
    background: var(--accent);
    color: #fff;
}

.cx-file-dropzone__icon svg {
    width: 22px;
    height: 22px;
}

.cx-file-dropzone__main {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.cx-file-dropzone__formats {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

.cx-file-dropzone__hint {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
}

.cardbox{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 15px;
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════════
   VACANCY DETAIL — Enhanced design classes (Detail.cshtml)
   Added: page-head card, pipeline, activity feed, hover rows
   ═══════════════════════════════════════════════════════════════ */

@keyframes hx-bar-in { from { width: 0 } }

@keyframes hx-fade-up {
    from { opacity: 0; transform: translateY(5px) }
    to   { opacity: 1; transform: none }
}

/* ── Page head card ── */
.hx-pagehead--card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-card);
    margin: 0 15px 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    animation: hx-fade-up .3s ease both;
}

.hx-ph-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 22px;
}

.hx-ph-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Filled solid icon (vs soft tint on hx-topbar__icon) */
.hx-ph-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(67,97,238,.22);
}

.hx-ph-icon svg,
.hx-ph-icon i {
    width: 22px !important;
    height: 22px !important;
}

.hx-ph-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

/* Meta chips */
.hx-ph-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.hx-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 500;
    border: 1px solid var(--border);
}

.hx-meta-chip svg,
.hx-meta-chip i {
    width: 11px !important;
    height: 11px !important;
    color: var(--text-3);
}

.hx-meta-chip--warn {
    background: var(--warning-soft);
    color: var(--warning-text);
    border-color: #fcd34d;
}

.hx-meta-chip--warn svg,
.hx-meta-chip--warn i {
    color: var(--warning) !important;
}

/* Fill-progress bar */
.hx-ph-fill {
    border-top: 1px solid var(--border);
    padding: 12px 22px 14px;
}

.hx-ph-fill__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.hx-ph-fill__label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-3);
}

.hx-ph-fill__val {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--info-text);
}

.hx-ph-fill__track {
    height: 5px;
    border-radius: 5px;
    background: var(--surface-3);
    overflow: hidden;
}

.hx-ph-fill__bar {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--info) 100%);
    animation: hx-bar-in .9s cubic-bezier(.4,0,.2,1) .2s both;
    transition: width .4s ease;
    width: 0;
}

/* ── KPI enhancements ── */
.hx-kpis--hoverable .hx-kpi {
    transition: transform .15s, box-shadow .15s;
}

.hx-kpis--hoverable .hx-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-overlay);
}

.hx-progress__bar--anim {
    animation: hx-bar-in .9s cubic-bezier(.4,0,.2,1) .4s both;
}

.hx-kpi__trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: auto;
}

.hx-kpi__trend svg,
.hx-kpi__trend i {
    width: 10px !important;
    height: 10px !important;
}

.hx-kpi__trend--up   { background: var(--success-soft); color: var(--success-text); }
.hx-kpi__trend--flat { background: var(--surface-2);    color: var(--text-3); }

/* ── Card helpers ── */
.hx-card__header--tinted { background: var(--surface-2); }
.hx-card--mt             { margin-top: 16px; }
.hx-card__body--pipeline { padding: 18px; }
.hx-card__body--role     { font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.hx-card__body--appl     { padding: 10px 18px; }

/* ── Badge variant: CURRENT ── */
.hx-badge--current {
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* ════ Vertical Pipeline (Vacancy Detail) ════ */
.hx-pipeline {
    display: flex;
    flex-direction: column;
}

.hx-pipe-stage {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.hx-pipe-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
    flex-shrink: 0;
}

.hx-pipe-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.hx-pipe-dot svg,
.hx-pipe-dot i {
    width: 11px !important;
    height: 11px !important;
}

.hx-pipe-dot--done    { background: var(--success); color: #fff; }
.hx-pipe-dot--active  { background: var(--accent);  color: #fff; box-shadow: 0 0 0 5px var(--accent-soft); }
.hx-pipe-dot--pending { background: var(--surface-2); color: var(--text-3); border: 2px solid var(--border-2); }

.hx-pipe-line { width: 2px; flex: 1; background: var(--border); min-height: 8px; margin: 3px 0; }
.hx-pipe-line--done { background: rgba(14,159,110,.25); }

.hx-pipe-content {
    padding-bottom: 16px;
    flex: 1;
    min-width: 0;
}

.hx-pipe-stage:last-child .hx-pipe-content { padding-bottom: 0; }

.hx-pipe-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.hx-pipe-name          { font-size: 13px; font-weight: 600; color: var(--text-2); }
.hx-pipe-name--done    { color: var(--text); }
.hx-pipe-name--active  { color: var(--accent); }

.hx-pipe-meta { display: flex; align-items: center; gap: 6px; }

.hx-pipe-count         { font-size: 13px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hx-pipe-count--done   { color: var(--success-text); }
.hx-pipe-count--active { color: var(--accent); }

.hx-pipe-sub           { font-size: 10.5px; color: var(--text-3); margin-bottom: 6px; }
.hx-pipe-sub--active   { color: var(--accent); font-weight: 500; }

/* Funnel bar per stage */
.hx-pipe-funnel { height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-bottom: 3px; }

.hx-pipe-funnel__fill {
    height: 100%;
    border-radius: 3px;
    animation: hx-bar-in 1s cubic-bezier(.4,0,.2,1) .5s both;
}

.hx-pipe-funnel__fill--done    { background: var(--success); }
.hx-pipe-funnel__fill--active  { background: var(--accent); }
.hx-pipe-funnel__fill--pending { background: var(--border-2); }

.hx-pipe-conv       { font-size: 10px; color: var(--text-3); }
.hx-pipe-conv--ok   { color: var(--success-text); }
.hx-pipe-conv--active { color: var(--accent); }

/* ════ Applicant rows — enhanced ════ */
.hx-appl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-bottom: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background .13s;
}

.hx-appl-row:last-child { border-bottom: none; }
.hx-appl-row:hover      { background: var(--surface-2); }

.hx-appl-row__info { flex: 1; min-width: 0; }

.hx-appl-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hx-appl-row__sub {
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 1px;
}

.hx-appl-row__arrow {
    width: 14px;
    height: 14px;
    color: var(--border-2);
    flex-shrink: 0;
    transition: color .13s;
}

.hx-appl-row:hover .hx-appl-row__arrow { color: var(--text-3); }

/* ════ Activity feed ════ */
.hx-activity { display: flex; flex-direction: column; }

.hx-act-item { display: flex; align-items: stretch; gap: 12px; }

.hx-act-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 14px;
    flex-shrink: 0;
}

.hx-act-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    border: 2px solid var(--surface);
}

.hx-act-line {
    width: 1px;
    flex: 1;
    background: var(--border);
    min-height: 6px;
    margin: 3px 0;
}

.hx-act-item:last-child .hx-act-line { display: none; }

.hx-act-body          { padding-bottom: 14px; flex: 1; }
.hx-act-item:last-child .hx-act-body { padding-bottom: 0; }

.hx-act-text          { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.hx-act-text strong   { color: var(--text); font-weight: 600; }
.hx-act-time          { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }

.hx-act-dot--accent { background: var(--accent); }
.hx-act-dot--ok     { background: var(--success); }
.hx-act-dot--warn   { background: var(--warning); }
.hx-act-dot--grey   { background: var(--text-3); }

.hx-link--sm { font-size: 12px; }

/* ── Careers: header scroll shadow ─────────────────────────────────────────── */
.cx-header {
    transition: box-shadow 200ms;
}

.cx-header--scrolled {
    box-shadow: 0 4px 20px rgba(16,20,30,.10);
}

/* ── Careers: hero CTA button (Job detail page) ─────────────────────────────── */
.cx-job-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 24px;
    border: 2px solid rgba(255,255,255,.50);
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-sans);
    text-decoration: none;
    background: rgba(255,255,255,.08);
    cursor: pointer;
    appearance: none;
    transition: background 160ms, border-color 160ms;
}

.cx-job-hero__cta:hover {
    background: rgba(255,255,255,.20);
    border-color: rgba(255,255,255,.85);
    color: #fff;
    text-decoration: none;
}

.cx-job-hero__cta svg {
    width: 15px;
    height: 15px;
}

/* ── Careers: CV dropzone — selected state ──────────────────────────────────── */
.cx-file-dropzone--selected {
    border-color: var(--success);
    background: var(--success-soft);
}

.cx-file-dropzone--selected .cx-file-dropzone__icon {
    background: var(--success);
    color: #fff;
}

.cx-file-dropzone--selected:hover {
    border-color: var(--success);
    background: var(--success-soft);
}

.cx-file-dropzone__filename {
    font-size: 12px;
    font-weight: 600;
    color: var(--success-text);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Careers: Confirm page — success icon entrance animation ────────────────── */
@keyframes cx-confirm-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

.cx-confirm-icon--success {
    animation: cx-confirm-pop 480ms cubic-bezier(.34,1.56,.64,1) both;
    width: 64px;
    height: 64px;
}

.cx-confirm-icon--success svg {
    width: 30px;
    height: 30px;
}

/* ── Careers: meta chip hover (outside hero context) ───────────────────────── */
.cx-content-wrap .cx-meta__chip,
.cx-wrap .cx-meta__chip {
    transition: background 140ms, border-color 140ms;
}

.cx-content-wrap .cx-meta__chip:hover,
.cx-wrap .cx-meta__chip:hover {
    background: var(--surface-3);
    border-color: var(--border-2);
}

/* ── Job detail — company identity row under back link ───────────────────────── */
.cx-job-hero__id {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
}

.cx-job-hero__avatar {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Job detail — entrance animation for content cards ───────────────────────── */
.cx-anim-in {
    animation: hx-fade-up .35s ease both;
}

.cx-job-main > .cx-anim-in:nth-of-type(2) { animation-delay: 60ms; }
.cx-job-main > .cx-anim-in:nth-of-type(3) { animation-delay: 120ms; }
.cx-sticky .cx-anim-in:nth-of-type(2) { animation-delay: 90ms; }

/* ── Job detail — role overview card (sidebar) ───────────────────────────────── */
.cx-overview {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.cx-overview__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.cx-overview__row svg,
.cx-overview__row i {
    width: 14px !important;
    height: 14px !important;
    color: var(--text-3);
    flex-shrink: 0;
    position: relative;
    top: 1px;
}

.cx-overview__label {
    color: var(--text-3);
    min-width: 84px;
    flex-shrink: 0;
}

.cx-overview__val {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    margin-left: auto;
}

.cx-overview__row--closing .cx-overview__val {
    color: var(--warning-text);
}

.cx-overview__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: -3px;
    padding: 7px 10px;
    border-radius: var(--r-input);
    background: var(--warning-soft);
    color: var(--warning-text);
    font-size: 11.5px;
    font-weight: 600;
}

.cx-overview__note svg,
.cx-overview__note i {
    width: 13px !important;
    height: 13px !important;
    color: var(--warning-text) !important;
}

/* ── Job detail — share row (bottom of main content) ─────────────────────────── */
.cx-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
}

.cx-share-row__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
}

.cx-share-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cx-share-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    transition: background 140ms, border-color 140ms, color 140ms;
}

.cx-share-icon:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.cx-share-icon svg {
    width: 15px;
    height: 15px;
}

.cx-share-icon--copied {
    background: var(--success-soft) !important;
    border-color: var(--success) !important;
    color: var(--success-text) !important;
}

/* ── Job detail — apply form section labels ──────────────────────────────────── */
.cx-form-section__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.cx-form-section__label--mt {
    margin-top: 18px;
}

/* ── Job detail — mobile sticky apply bar ────────────────────────────────────── */
.cx-mobile-apply-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(16,20,30,.10);
    transform: translateY(100%);
    transition: transform 220ms ease;
}

.cx-mobile-apply-bar--visible {
    transform: translateY(0);
}

.cx-mobile-apply-bar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.cx-mobile-apply-bar__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-mobile-apply-bar__sub {
    font-size: 11px;
    color: var(--warning-text);
    font-weight: 600;
}

.cx-mobile-apply-bar .hx-btn {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .cx-mobile-apply-bar {
        display: flex;
    }
    .cx-wrap--job {
        padding-bottom: 84px;
    }
}

/* ── Job detail — icon badges (tinted rounded-square icon chips) ─────────────── */
.cx-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cx-icon-badge svg,
.cx-icon-badge i {
    width: 16px !important;
    height: 16px !important;
}

.cx-icon-badge--violet { background: var(--accent-soft);  color: var(--accent); }
.cx-icon-badge--green  { background: var(--success-soft); color: var(--success); }
.cx-icon-badge--blue   { background: var(--info-soft);    color: var(--info); }
.cx-icon-badge--amber  { background: var(--warning-soft); color: var(--warning); }

/* ── Job detail — badged card headers (no divider, icon chip + title) ────────── */
.cx-job-main .hx-card__header,
.cx-sticky .hx-card__header {
    border-bottom: none;
    padding: 16px 18px 6px;
    align-items: flex-start;
    gap: 12px;
}

.cx-job-main .hx-card__body,
.cx-sticky .hx-card__body:not(.cx-apply-form-wrap) {
    padding: 10px 18px 16px;
}

/* ── Job detail — apply card header v2: flat, badged, with subtitle ──────────── */
.hx-card__header--apply {
    background: var(--surface);
    border-bottom: none;
    padding: 18px 18px 8px;
    align-items: flex-start;
}

.hx-card__header--apply .hx-card__title {
    color: var(--accent);
}

.cx-card__subtitle {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-3);
    margin: 2px 0 0;
}

/* ── Job detail — gradient submit button ─────────────────────────────────────── */
.hx-btn--gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-color: transparent;
}

.hx-btn--gradient:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

/* ── Job detail — trust bar (bottom of page card) ────────────────────────────── */
.cx-trust-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 24px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 11.5px;
    color: var(--text-3);
}

.cx-trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cx-trust-bar__item svg,
.cx-trust-bar__item i {
    width: 13px !important;
    height: 13px !important;
    color: var(--text-3);
}

.cx-trust-bar__support {
    color: var(--accent);
    font-weight: 600;
}

@media (max-width: 900px) {
    .cx-trust-bar {
        padding: 12px 16px 96px;
    }
}

/* ── Job detail — header "Copy link" action (light background) ─────────────── */
.cx-header .cx-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 140ms, border-color 140ms, color 140ms;
}

.cx-header .cx-share-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.cx-header .cx-share-btn svg {
    width: 13px;
    height: 13px;
}

.cx-header .cx-share-btn--copied {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success-text);
}

/* ── Job detail — sidebar "Apply" CTA card ───────────────────────────────────── */
.cx-apply-cta__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 26px 20px;
}

.cx-apply-cta__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    margin-bottom: 4px;
}

.cx-apply-cta__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.cx-apply-cta__sub {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.5;
    margin: 0 0 8px;
}

.cx-apply-cta .hx-btn {
    width: 100%;
}

/* ── Job detail — apply drawer (right side panel) ────────────────────────────── */
.cx-apply-drawer.hx-drawer {
    width: 560px;
}

.cx-apply-drawer__header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    padding: 18px 20px;
    align-items: flex-start;
}

.cx-apply-drawer__head-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cx-apply-drawer__header .hx-drawer__title {
    color: #fff;
}

.cx-apply-drawer__header .hx-drawer__subtitle {
    color: rgba(255,255,255,.75);
    margin-top: 2px;
}

.cx-icon-badge--onheader {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.cx-apply-drawer .hx-drawer__footer {
    padding: 14px 20px;
}

@media (max-width: 620px) {
    .cx-apply-drawer.hx-drawer {
        width: 100%;
    }
}

.hx-link--sm { font-size: 12px; }
/* ============================================================================
   NO PAGE TITLES — the tab strip already names the screen
   ----------------------------------------------------------------------------
   "Vacancies" tab -> "Vacancies" heading -> "Job postings created from approved
   requisitions". The heading and its explainer go; .hx-pagehead survives because
   it holds the New / Import / Export buttons, which must stay put.
   ============================================================================ */
.hx-pagehead__title,
.hx-pagehead__sub {
    display: none;
}

/* Pagehead with no actions left in it collapses instead of drawing an empty bar. */
.hx-pagehead--titleonly {
    display: none;
}


/* The hairline that used to separate Hiring's tabs is gone. It was added to
   match the hubs' .ph-tab row, but neither Onboarding nor the hubs actually
   draw one, so it was the only tab strip in the product with fences in it. */

/* The title half of the bar moved to the navbar; right-align what is left. */
.hx-topbar--actions-only { justify-content: flex-end; }

/* ============================================================================
   Soft-nav loading feedback
   ----------------------------------------------------------------------------
   Hiring used to draw its own indigo bar across the top of the viewport here
   while a tab swap was in flight. It was the only module in QHRM that did, so
   Hiring was the one place the product did not show the personal loading
   message and three dots people see everywhere else.

   navigate() in hiring-shell.js now raises the shared preloader instead
   (#qloader-overlay, css/qloader.css) exactly as a full page navigation does,
   and takes it down once the swapped-in page is in the DOM. There is no
   Hiring-specific loading style any more, and there should not be one.
   ============================================================================ */
}