/* ============================================================
   RECRUITING MODULE — Monochrome Design System v2
   Apple-style · Porcelain foundation · Carbon contrast
   ============================================================ */

/* ── VARIABLES ── */
:root {
    --text-carbon: #0B0D10;
    --state-hover: rgba(11, 13, 16, 0.03);
    --state-active: rgba(11, 13, 16, 0.05);
    --border-hairline: rgba(11, 13, 16, 0.08);
    --border-hover: rgba(11, 13, 16, 0.15);
}

/* ── LEFT-RAIL NAV ── */
.left-rail nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-secondary, rgba(11,13,16,0.55));
    text-decoration: none;
    font-weight: 450;
    font-size: 13px;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    position: relative;
}

.nav-item:hover {
    background: rgba(11, 13, 16, 0.04);
    color: var(--text-carbon);
}

.nav-item.active {
    background: rgba(11, 13, 16, 0.06);
    color: var(--text-carbon);
    font-weight: 550;
}

/* ── PAGE LAYOUT ── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 32px 48px 24px;
    flex-shrink: 0;
}

.page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-carbon);
    letter-spacing: -0.03em;
}

.page-desc {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.breadcrumb {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb a:hover {
    color: var(--text-carbon);
}

.content-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 48px 64px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
}

/* ── KPI STRIP ── */
.kpi-strip {
    display: flex;
    gap: 1px;
    margin-bottom: 24px;
    background: var(--border-hairline);
    border-radius: 14px;
    overflow: hidden;
}

.kpi-card {
    background: #fff;
    padding: 18px 24px;
    flex: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.kpi-card:first-child {
    border-radius: 14px 0 0 14px;
}

.kpi-card:last-child {
    border-radius: 0 14px 14px 0;
}

.kpi-card:hover {
    background: var(--state-hover);
}

.kpi-val {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-carbon);
    line-height: 1;
    min-height: 26px;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
}

/* ── TABLE ── */
.table-container {
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 14px;
    overflow: hidden;
}

.table-container .data-table {
    margin-top: 0;
}

.table-container .data-table th {
    padding: 14px 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.table-container .data-table td {
    padding: 14px 20px;
    vertical-align: middle;
}

.table-container .data-table tr {
    cursor: pointer;
    transition: background 0.1s;
}

.table-container .data-table tbody tr:hover td {
    background: var(--state-hover);
}

/* ── CANDIDATE ROW ── */
.c-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-carbon);
    display: block;
    line-height: 1.3;
}

.c-phone {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.c-origin {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* ── STATUS PILLS — MONOCHROME ── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Active stages (new, docs) */
.st-active {
    background: rgba(11, 13, 16, 0.04);
    color: var(--text-secondary);
}

.st-active::before {
    background: rgba(11, 13, 16, 0.30);
}

/* In-progress emphasis (interview, review, offer) */
.st-progress {
    background: rgba(11, 13, 16, 0.07);
    color: var(--text-carbon);
}

.st-progress::before {
    background: var(--text-carbon);
}

/* Final positive (hired) */
.st-final-pos {
    background: var(--text-carbon);
    color: #fff;
}

.st-final-pos::before {
    background: #fff;
}

/* Final negative (discarded, withdrawn, no-show) */
.st-final-neg {
    background: rgba(11, 13, 16, 0.03);
    color: var(--text-tertiary);
    text-decoration: line-through;
    text-decoration-color: rgba(11, 13, 16, 0.2);
}

.st-final-neg::before {
    background: rgba(11, 13, 16, 0.15);
}

/* Hold (paused, postponed) */
.st-hold {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px dashed rgba(11, 13, 16, 0.15);
}

.st-hold::before {
    background: rgba(11, 13, 16, 0.2);
}

/* ── NEW 12-STAGE ALIASES ── */
/* Entrada */
.st-new {
    background: rgba(11, 13, 16, 0.04);
    color: var(--text-secondary);
}

.st-new::before {
    background: rgba(11, 13, 16, 0.30);
}

/* Proceso */
.st-filter,
.st-interview,
.st-review,
.st-decision {
    background: rgba(11, 13, 16, 0.07);
    color: var(--text-carbon);
}

.st-filter::before,
.st-interview::before,
.st-review::before,
.st-decision::before {
    background: var(--text-carbon);
}

/* Cierre */
.st-offer,
.st-docs {
    background: rgba(11, 13, 16, 0.10);
    color: var(--text-carbon);
    font-weight: 600;
}

.st-offer::before,
.st-docs::before {
    background: var(--text-carbon);
}

/* Final positivo */
.st-hired {
    background: var(--text-carbon);
    color: #fff;
}

.st-hired::before {
    background: #fff;
}

/* Final negativo */
.st-discarded {
    background: rgba(11, 13, 16, 0.03);
    color: var(--text-tertiary);
    text-decoration: line-through;
    text-decoration-color: rgba(11, 13, 16, 0.2);
}

.st-discarded::before {
    background: rgba(11, 13, 16, 0.15);
}

/* Holding */
.st-paused,
.st-stuck {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px dashed rgba(11, 13, 16, 0.15);
}

.st-paused::before,
.st-stuck::before {
    background: rgba(11, 13, 16, 0.2);
}

/* ── DAYS IN STAGE ── */
.days-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.days-badge.warning {
    color: var(--text-secondary);
}

.days-badge.danger {
    color: var(--text-carbon);
    font-weight: 700;
}

/* ── VIEW PILLS (filter presets) ── */
.view-strip {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    padding: 0 48px;
    flex-wrap: wrap;
}

.view-pill {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
}

.view-pill:hover {
    color: var(--text-carbon);
    background: var(--state-hover);
}

.view-pill.active {
    color: var(--text-carbon);
    background: rgba(11, 13, 16, 0.06);
    font-weight: 600;
}

/* ── VIEW TOGGLE (list/kanban) ── */
.view-toggle {
    display: flex;
    gap: 1px;
    background: var(--border-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.view-toggle-btn {
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.15s;
    position: relative;
}

.view-toggle-btn:hover {
    color: var(--text-carbon);
}

.view-toggle-btn.active {
    background: var(--text-carbon);
    color: #fff;
}

/* ── PROFILE CARD (redesigned — with pipeline stepper) ── */
.profile-card {
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 14px;
    padding: 24px;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-header {
    display: flex;
    gap: 14px;
    align-items: center;
}

.profile-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(11, 13, 16, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-carbon);
    flex-shrink: 0;
}

.profile-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-carbon);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.profile-position {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 500;
}

/* Profile metadata footer (small inline) */
.profile-meta-footer {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Status + days inline */
.profile-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ── PERFIL TAB STYLES ── */
.perfil-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-hairline);
    text-decoration: none;
    color: var(--text-carbon);
    transition: background 0.12s;
    cursor: pointer;
}

.perfil-link-row:last-child {
    border-bottom: none;
}

.perfil-link-row:hover {
    opacity: 0.7;
}

.perfil-link-icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.perfil-link-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.perfil-link-row>svg:last-child {
    color: var(--text-tertiary);
    opacity: 0.4;
}

.perfil-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.perfil-data-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perfil-data-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.perfil-data-value {
    font-size: 14px;
    color: var(--text-carbon);
    line-height: 1.4;
}

/* ── VERTICAL PIPELINE STEPPER ── */
.pipeline-stepper {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
}

.pipeline-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding-bottom: 4px;
    min-height: 28px;
}

.pipeline-step:last-child {
    padding-bottom: 0;
}

.ps-dot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16px;
    flex-shrink: 0;
}

.ps-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(11, 13, 16, 0.08);
    border: 1.5px solid rgba(11, 13, 16, 0.12);
    flex-shrink: 0;
    margin-top: 5px;
    transition: all 0.2s;
}

.ps-line {
    width: 1.5px;
    flex: 1;
    background: rgba(11, 13, 16, 0.06);
    margin-top: 3px;
    min-height: 8px;
}

.pipeline-step:last-child .ps-line {
    display: none;
}

/* States */
.pipeline-step.completed .ps-dot {
    background: var(--text-carbon);
    border-color: var(--text-carbon);
}

.pipeline-step.completed .ps-line {
    background: var(--text-carbon);
}

.pipeline-step.current .ps-dot {
    background: var(--text-carbon);
    border-color: var(--text-carbon);
    width: 10px;
    height: 10px;
    margin-top: 4px;
    box-shadow: 0 0 0 3px rgba(11, 13, 16, 0.08);
}

.pipeline-step.current .ps-line {
    background: rgba(11, 13, 16, 0.06);
}

.ps-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    line-height: 1.4;
    padding-top: 2px;
}

.pipeline-step.completed .ps-label {
    color: var(--text-secondary);
}

.pipeline-step.current .ps-label {
    font-weight: 700;
    color: var(--text-carbon);
}

/* ── SECTION DIVIDER ── */
.card-divider {
    height: 1px;
    background: var(--border-hairline);
    margin: 0 -24px;
    width: calc(100% + 48px);
}

/* ── Info rows (icon + value) ── */
.info-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-row-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.info-row-icon svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
    opacity: 0.5;
    width: 15px;
    height: 15px;
}

.info-row-icon a {
    color: var(--text-carbon);
    text-decoration: none;
    border-bottom: 1px solid var(--border-hairline);
    transition: border-color 0.15s;
}

.info-row-icon a:hover {
    border-color: var(--text-carbon);
}

/* ── Screening answers (always visible) ── */
.screening-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.screening-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.screening-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.screening-q {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.screening-a {
    font-size: 13px;
    color: var(--text-carbon);
    line-height: 1.4;
}

/* ── CONTENT CARDS ── */
.content-card {
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 12px;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-carbon);
    letter-spacing: -0.01em;
}

/* ── TABS ── */
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-hairline);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    position: relative;
}

.tab-btn:hover {
    color: var(--text-carbon);
}

.tab-btn.active {
    color: var(--text-carbon);
    font-weight: 600;
    border-bottom-color: var(--text-carbon);
}

/* ── TIMELINE ── */
.timeline-list {
    display: flex;
    flex-direction: column;
}

.timeline-item {
    display: flex;
    position: relative;
    padding-bottom: 24px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.t-date {
    width: 60px;
    text-align: right;
    padding-right: 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    line-height: 1.2;
    padding-top: 3px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.t-dot-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.t-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid rgba(11, 13, 16, 0.15);
    background: #fff;
    flex-shrink: 0;
    margin-top: 5px;
}

.t-line {
    width: 1px;
    flex: 1;
    background: rgba(11, 13, 16, 0.08);
    margin-top: 4px;
}

.timeline-item:last-child .t-line {
    display: none;
}

.timeline-item.current .t-dot,
.timeline-item.past .t-dot {
    background: var(--text-carbon);
    border-color: var(--text-carbon);
}

.t-content {
    padding-left: 14px;
    flex: 1;
    min-width: 0;
}

.t-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-carbon);
    line-height: 1.3;
}

.t-body {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.4;
    margin-top: 2px;
}

.t-actor {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
    opacity: 0.7;
}

/* ── INTERVIEW CARDS ── */
.interview-card {
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: border-color 0.15s;
}

.interview-card:hover {
    border-color: var(--border-hover);
}

.interview-card-inner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.i-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.i-day {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-carbon);
    line-height: 1;
}

.i-mon {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

.i-time {
    font-size: 12px;
    color: var(--text-carbon);
    font-weight: 500;
    margin-top: 4px;
}

.i-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.i-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.i-meta-row svg {
    opacity: 0.4;
    flex-shrink: 0;
}

.i-observations {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(11, 13, 16, 0.02);
    border-radius: 8px;
    border-left: 2px solid rgba(11, 13, 16, 0.1);
    line-height: 1.5;
}

/* Interview inline actions */
.i-actions {
    display: flex;
    gap: 1px;
    margin-top: 12px;
    background: var(--border-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.i-action-btn {
    flex: 1;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fff;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.i-action-btn:hover {
    background: var(--state-hover);
    color: var(--text-carbon);
}

.i-action-btn svg {
    width: 13px;
    height: 13px;
}

.i-reschedule-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    background: rgba(11, 13, 16, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ── SCORE DISPLAY ── */
.score-grid {
    display: flex;
    gap: 3px;
}

.score-dot {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(11, 13, 16, 0.08);
    color: var(--text-tertiary);
    transition: all 0.12s;
}

.score-dot.filled {
    background: var(--text-carbon);
    color: #fff;
    border-color: var(--text-carbon);
}

.score-dot.active {
    transform: scale(1.1);
}

.score-dot:hover {
    border-color: var(--text-carbon);
    cursor: pointer;
}

/* ── BUTTONS ── */
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
}

.btn-ghost:hover {
    color: var(--text-carbon);
    background: var(--state-hover);
}

/* Icon buttons (header actions) */
.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-hairline);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-tertiary);
    position: relative;
}

.btn-icon:hover {
    border-color: var(--text-carbon);
    color: var(--text-carbon);
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

/* Tooltip for icon buttons */
.btn-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    background: var(--text-carbon);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s;
}

.btn-icon:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ── HEADER ACTIONS GROUP ── */
.header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ── FORM ELEMENTS ── */
.form-group {
    margin-bottom: 16px;
}

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

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-ui);
    background: #fff;
    color: var(--text-carbon);
    transition: border-color 0.15s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--text-carbon);
    outline: none;
}

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: var(--text-carbon);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.btn:hover {
    border-color: var(--border-hover);
    background: var(--state-hover);
}

.btn-primary,
.btn-save {
    background: var(--text-carbon);
    border-color: var(--text-carbon);
    color: #fff;
}

.btn-primary:hover,
.btn-save:hover {
    opacity: .85;
    background: var(--text-carbon);
    border-color: var(--text-carbon);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--state-hover);
    border-color: transparent;
    color: var(--text-carbon);
}

/* ── MODAL OVERLAY ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 13, 16, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

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


.modal,
.modal-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(11, 13, 16, 0.12);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    animation: modalSlideUp .25s ease;
}

.confirm-modal {
    max-width: 400px;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 20px 24px 0;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-carbon);
    padding: 20px 24px 16px;
}

.modal-header .modal-title {
    padding: 0;
}

.modal-body {
    padding: 16px 24px;
}

.modal-box>.form-group,
.modal-box>div:not(.modal-title):not(.modal-actions) {
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 12px;
}


.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border-hairline);
}

.form-select {
    appearance: none;
    cursor: pointer;
}

/* ── EMPTY STATE ── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-tertiary);
}

.empty-state .empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state .empty-desc {
    font-size: 13px;
    max-width: 280px;
    margin: 0 auto 16px;
    line-height: 1.5;
}

/* ── MODAL ── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-card {
    background: #fff;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12);
    transform: scale(0.96);
    transition: transform 0.2s var(--ease-default);
}

.modal-overlay.open .modal-card {
    transform: scale(1);
}

.modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-hairline);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── TOAST ── */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--text-carbon);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateX(120%);
    transition: transform 0.3s var(--ease-default);
    max-width: 340px;
}

.toast.visible {
    transform: translateX(0);
}

.toast.error {
    background: #1a1a1a;
}

.toast.success {
    background: #111;
}

/* ── UNREAD INDICATOR ── */
.unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-carbon);
    flex-shrink: 0;
}

.unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--text-carbon);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 0 5px;
}

/* ── KANBAN VIEW ── */
.kanban-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    min-height: 400px;
}

.kanban-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kanban-col-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: 10px 12px;
    border-bottom: 2px solid rgba(11, 13, 16, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-col-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    background: rgba(11, 13, 16, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
}

.kanban-col-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kanban-card {
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.12s;
}

.kanban-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.kanban-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-carbon);
    line-height: 1.3;
}

.kanban-card-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── FILTER INPUT (in table header) ── */
.th-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-carbon);
    font-family: var(--font-ui);
}

.th-input::placeholder {
    color: var(--text-tertiary);
}

.th-input:focus {
    outline: none;
}

/* ═══════════════════════════════════════════════════════
   INTERVIEW CARD V2 — header/body/footer layout
   ═══════════════════════════════════════════════════════ */
.interview-card-v2 {
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.interview-card-v2:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Header: date left, interviewer right */
.iv2-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px 12px;
}

.iv2-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.iv2-date-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.iv2-day {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-carbon);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.iv2-mon {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.iv2-datetime {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iv2-weekday {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-carbon);
    text-transform: capitalize;
}

.iv2-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.iv2-interviewer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.iv2-interviewer svg {
    opacity: 0.4;
    flex-shrink: 0;
}

/* Meta line (office) */
.iv2-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 0 24px 12px;
}

.iv2-meta-line svg {
    opacity: 0.4;
    flex-shrink: 0;
}

/* Enriched card sections */
.iv2-section {
    padding: 0 24px 14px;
}

.iv2-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-bottom: 6px;
}

/* Observations */
.iv2-observations {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 0 24px 4px;
    font-style: italic;
}

.iv2-obs-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: normal;
    margin-top: 4px;
}

/* Evaluation inline */
.iv2-eval-scores {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.iv2-eval-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.iv2-eval-item-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.iv2-eval-item-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-carbon);
    min-width: 16px;
    text-align: center;
}

.iv2-eval-rec {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.iv2-eval-rec--proceed {
    background: rgba(34, 197, 94, .1);
    color: #16a34a;
}

.iv2-eval-rec--doubts {
    background: rgba(234, 179, 8, .1);
    color: #ca8a04;
}

.iv2-eval-rec--pause {
    background: rgba(107, 114, 128, .1);
    color: #6b7280;
}

.iv2-eval-rec--discard {
    background: rgba(239, 68, 68, .1);
    color: #dc2626;
}

.iv2-eval-comment {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 4px;
}

/* SMS log */
.iv2-sms-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.iv2-sms-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
}

.iv2-sms-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
}

/* Detail metadata grid */
.iv2-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
    padding: 0 24px 16px;
    border-bottom: 1px solid var(--border-hairline);
    margin-bottom: 14px;
}

.iv2-detail-item {
    padding: 8px 0;
}

.iv2-detail-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-bottom: 2px;
}

.iv2-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-carbon);
    line-height: 1.4;
}

/* Action buttons */
.iv2-actions {
    display: flex;
    gap: 8px;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--border-hairline);
    margin-top: 4px;
}

/* Footer: horizontal action buttons */
.iv2-footer {
    border-top: 1px solid var(--border-hairline);
    padding: 12px 24px;
}

.iv2-actions-row {
    display: flex;
    gap: 8px;
}

/* Round badge */
.i-round-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-carbon);
    background: rgba(11, 13, 16, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* Icon-only action buttons */
.i-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-hairline);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.15s;
    position: relative;
}

.i-action-icon svg {
    width: 15px;
    height: 15px;
}

.i-action-icon:hover {
    border-color: var(--text-carbon);
    color: var(--text-carbon);
    background: var(--state-hover);
}

.i-action-icon.i-action-success:hover {
    border-color: #1a7a1a;
    color: #1a7a1a;
    background: rgba(26, 122, 26, 0.04);
}

.i-action-icon.i-action-danger:hover {
    border-color: #7a1a1a;
    color: #7a1a1a;
    background: rgba(122, 26, 26, 0.04);
}

/* Tooltip for icon actions */
.i-action-icon::after,
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    background: var(--text-carbon);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s;
    z-index: 10;
}

.i-action-icon:hover::after,
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ═══════════════════════════════════════════════════════
   EVALUATION TIMELINE — vertical timeline layout
   ═══════════════════════════════════════════════════════ */

/* CTA Bar — always visible */
.eval-cta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.eval-cta-bar .eval-cta-info {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Consolidation summary card */
.eval-consolidation {
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.eval-consol-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 60px;
}

.eval-consol-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-carbon);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.eval-consol-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.eval-consol-sep {
    width: 1px;
    height: 36px;
    background: var(--border-hairline);
}

.eval-consol-recs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.eval-consol-rec-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.01em;
}

.eval-consol-discrepancy {
    font-size: 10px;
    font-weight: 600;
    color: #ca8a04;
    background: rgba(234, 179, 8, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
}

/* Timeline container */
.eval-timeline {
    position: relative;
    padding-left: 0;
}

/* Timeline node — individual evaluation entry */
.eval-tl-node {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 24px;
}

.eval-tl-node:last-child {
    padding-bottom: 0;
}

/* Timeline vertical line */
.eval-tl-node::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 44px;
    bottom: 0;
    width: 1px;
    background: var(--border-hairline);
}

.eval-tl-node:last-child::before {
    display: none;
}

/* Date block (left side) */
.eval-tl-date {
    flex-shrink: 0;
    width: 56px;
    text-align: center;
    padding-top: 4px;
}

.eval-tl-day {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-carbon);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.eval-tl-month {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.eval-tl-time {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Content area (right side) */
.eval-tl-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: 12px;
    padding: 18px 20px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.eval-tl-content:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

/* Stage change variant — left border accent */
.eval-tl-content.has-stage-change {
    border-left: 3px solid var(--text-carbon);
}

/* Content header */
.eval-tl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.eval-tl-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eval-tl-type {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-carbon);
    letter-spacing: -0.01em;
}

.eval-tl-evaluator {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.eval-tl-header-right {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.eval-tl-score {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-carbon);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.eval-tl-score-max {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Stage change badge */
.eval-tl-stage-change {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(11, 13, 16, 0.03);
    border-radius: 8px;
    margin-bottom: 12px;
}

.eval-tl-stage-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.eval-tl-stage-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-carbon);
}

.eval-tl-stage-arrow {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Criteria scores (inline) */
.eval-tl-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.eval-tl-criterion {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(11, 13, 16, 0.02);
    border-radius: 6px;
}

.eval-tl-criterion-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.eval-tl-criterion-score {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-carbon);
    font-variant-numeric: tabular-nums;
    min-width: 14px;
    text-align: center;
}

/* Comment */
.eval-tl-comment {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 12px 14px;
    background: rgba(11, 13, 16, 0.015);
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Recommendation pill */
.eval-tl-rec {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 4px;
}

.eval-tl-rec--proceed {
    background: rgba(34, 197, 94, 0.08);
    color: #16a34a;
}

.eval-tl-rec--doubts {
    background: rgba(234, 179, 8, 0.08);
    color: #ca8a04;
}

.eval-tl-rec--pause {
    background: rgba(107, 114, 128, 0.08);
    color: #6b7280;
}

.eval-tl-rec--discard {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

/* ── Stage change section in eval modal ── */
.eval-modal-stage-section {
    padding: 14px 16px;
    background: rgba(11, 13, 16, 0.025);
    border: 1.5px solid rgba(11, 13, 16, 0.1);
    border-radius: 10px;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

.eval-modal-stage-section.active {
    border-color: var(--text-carbon);
}

.eval-modal-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.eval-modal-stage-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-carbon);
    letter-spacing: -0.01em;
}

.eval-modal-stage-hint {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.eval-modal-stage-body {
    display: none;
    margin-top: 12px;
}

.eval-modal-stage-body.open {
    display: block;
}

.eval-modal-stage-toggle {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: rgba(11, 13, 16, 0.12);
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.eval-modal-stage-toggle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.eval-modal-stage-toggle.on {
    background: var(--text-carbon);
}

.eval-modal-stage-toggle.on::after {
    transform: translateX(16px);
}

/* Legacy compat — keep old classes but hidden */
.eval-card {
    display: none;
}

/* ── Evaluation Wizard Modal ─────────────────────── */
.ew-card {
    width: 780px;
    max-width: 780px !important;
    max-height: 85vh;
}

/* Header with steps below title */
.ew-card .modal-header {
    flex-wrap: wrap;
    gap: 0;
    padding-bottom: 0;
    align-items: flex-start;
}

.ew-card .modal-title {
    flex: 1;
    min-width: 0;
}

.ew-steps {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 12px 0 14px;
    border-top: none;
}

.ew-step {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all 0.25s;
    cursor: default;
}

.ew-step.active {
    color: var(--text-carbon);
    background: rgba(11, 13, 16, 0.07);
}

.ew-step.done {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.ew-step-sep {
    width: 16px;
    height: 1px;
    background: var(--border-hairline);
    flex-shrink: 0;
}

/* Body & Panels */
.ew-body {
    padding: 20px 24px;
    min-height: 280px;
}

.ew-panel {
    display: none;
}

.ew-panel.active {
    display: block;
    animation: ewFadeIn 0.22s ease;
}

@keyframes ewFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Step 1: Type buttons ── */
.ew-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}

.ew-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 4px;
    border: 1.5px solid var(--border-hairline);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.ew-type-btn:hover {
    border-color: rgba(11, 13, 16, 0.22);
}

.ew-type-btn.selected {
    border-color: var(--text-carbon);
    background: rgba(11, 13, 16, 0.04);
}

.ew-type-icon {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-tertiary);
    transition: color 0.2s;
}

.ew-type-btn.selected .ew-type-icon {
    color: var(--text-carbon);
}

.ew-type-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 0.2s;
}

.ew-type-btn.selected .ew-type-label {
    color: var(--text-carbon);
    font-weight: 700;
}

/* ── Step 1: Criteria descriptions ── */
.ew-criterion-desc {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin: -2px 0 6px;
    font-weight: 400;
}

/* ── Step 2: Recommendation buttons ── */
.ew-rec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ew-rec-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 4px;
    border: 1.5px solid var(--border-hairline);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.ew-rec-btn:hover {
    border-color: rgba(11, 13, 16, 0.22);
}

.ew-rec-icon {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-tertiary);
    transition: color 0.2s;
}

.ew-rec-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 0.2s;
}

/* Rec selected states */
.ew-rec-btn[data-val="proceed"].selected {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.06);
}

.ew-rec-btn[data-val="proceed"].selected .ew-rec-icon,
.ew-rec-btn[data-val="proceed"].selected .ew-rec-label {
    color: #16a34a;
}

.ew-rec-btn[data-val="doubts"].selected {
    border-color: #ca8a04;
    background: rgba(234, 179, 8, 0.06);
}

.ew-rec-btn[data-val="doubts"].selected .ew-rec-icon,
.ew-rec-btn[data-val="doubts"].selected .ew-rec-label {
    color: #ca8a04;
}

.ew-rec-btn[data-val="pause"].selected {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.06);
}

.ew-rec-btn[data-val="pause"].selected .ew-rec-icon,
.ew-rec-btn[data-val="pause"].selected .ew-rec-label {
    color: #6b7280;
}

.ew-rec-btn[data-val="discard"].selected {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.06);
}

.ew-rec-btn[data-val="discard"].selected .ew-rec-icon,
.ew-rec-btn[data-val="discard"].selected .ew-rec-label {
    color: #dc2626;
}

/* ── Step 3: Stage change ── */
.ew-stage-intro {
    text-align: center;
    padding: 8px 0 20px;
}

.ew-stage-intro-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-carbon);
    margin-bottom: 4px;
}

.ew-stage-intro-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.ew-stage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ew-stage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    border: 1.5px solid var(--border-hairline);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.ew-stage-btn:hover {
    border-color: rgba(11, 13, 16, 0.22);
    background: rgba(11, 13, 16, 0.015);
}

.ew-stage-btn.selected {
    border-color: var(--text-carbon);
    background: rgba(11, 13, 16, 0.05);
}

.ew-stage-btn-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.ew-stage-btn.selected .ew-stage-btn-label {
    color: var(--text-carbon);
    font-weight: 700;
}

.ew-stage-empty {
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 32px;
    text-align: center;
    background: rgba(11, 13, 16, 0.02);
    border-radius: 8px;
    border: 1px dashed var(--border-hairline);
}

/* ── Footer ── */
.ew-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ew-footer-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.eval-header,
.eval-header-left,
.eval-header-right,
.eval-type,
.eval-score,
.eval-score-max,
.eval-criteria-grid,
.eval-criterion,
.eval-criterion-label,
.eval-comment,
.eval-footer,
.eval-evaluator,
.eval-date {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   VIEW TOGGLE — icon-only with tooltips  
   ═══════════════════════════════════════════════════════ */
.view-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════
   PERFIL TAB — Edit forms, CV preview, Screening grid
   ═══════════════════════════════════════════════════════ */

/* Small icon button for card headers */
.btn-icon-sm {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border-hairline);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.15s;
    position: relative;
}

.btn-icon-sm svg {
    width: 13px;
    height: 13px;
}

.btn-icon-sm:hover {
    border-color: var(--text-carbon);
    color: var(--text-carbon);
}

.btn-icon-sm::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    background: var(--text-carbon);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.12s;
}

.btn-icon-sm:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ═══════════════════════════════════════════════════════
   UNIFIED PERFIL CARD — sections, grids, form rows
   ═══════════════════════════════════════════════════════ */
.perfil-unified-card {
    padding-bottom: 8px;
}

.perfil-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-hairline);
}

.perfil-section:last-child {
    border-bottom: none;
    padding-bottom: 8px;
}

.perfil-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

/* 2-column field grid (view mode) */
.perfil-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-bottom: 4px;
}

.perfil-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perfil-field-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.perfil-field-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-carbon);
}

.perfil-field-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-carbon);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
}

.perfil-field-link:hover {
    opacity: 0.65;
}

.perfil-field-link svg {
    opacity: 0.4;
}

/* 2-column form row (edit mode) */
.perfil-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-bottom: 12px;
}

.perfil-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* CV empty state */
.perfil-cv-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

/* Small button variant */
.btn-sm {
    font-size: 12px;
    padding: 5px 12px;
}

/* Edit form (kept for backward compat) */
.perfil-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perfil-edit-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-hairline);
    margin-top: 8px;
}

.btn-save {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    background: var(--text-carbon);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-save:hover {
    opacity: 0.85;
}

/* Empty hint */
.perfil-empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 16px 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   CONFIRM MODAL
   ═══════════════════════════════════════════════════════ */
.confirm-modal {
    max-width: 400px;
}

/* CV preview row */
.cv-preview-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(11, 13, 16, 0.015);
    border: 1px solid var(--border-hairline);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}

.cv-preview-row:hover {
    border-color: var(--border-hover);
    background: rgba(11, 13, 16, 0.03);
}

.cv-file-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(11, 13, 16, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.cv-file-icon svg {
    width: 20px;
    height: 20px;
}

.cv-file-info {
    flex: 1;
    min-width: 0;
}

.cv-file-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-carbon);
}

.cv-file-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.cv-download-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: all 0.15s;
}

.cv-preview-row:hover .cv-download-btn {
    border-color: var(--text-carbon);
    color: var(--text-carbon);
}

/* Screening grid (inside Perfil tab) */
.screening-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.screening-card-item {
    padding: 14px 16px;
    background: rgba(11, 13, 16, 0.015);
    border-radius: 10px;
    border: 1px solid var(--border-hairline);
}

.screening-card-item .screening-q {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.screening-card-item .screening-a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-carbon);
    line-height: 1.4;
}

/* Link arrow in perfil rows */
.perfil-link-arrow {
    color: var(--text-tertiary);
    opacity: 0.3;
    transition: opacity 0.15s;
}

.perfil-link-row:hover .perfil-link-arrow {
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════
   TAB BADGES — prominent numerics
   ═══════════════════════════════════════════════════════ */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(11, 13, 16, 0.06);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-carbon);
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.tab-btn.active .tab-badge {
    background: var(--text-carbon);
    color: #fff;
}

/* ── OFFER DETAILS GRID ── */
.offer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.offer-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.offer-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: 500;
}

.offer-value {
    font-size: 13px;
    color: var(--text-carbon);
    font-weight: 500;
}

/* ── SETTINGS PAGE ── */
.settings-section {
    margin-bottom: 32px;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-carbon);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 13px;
    color: var(--text-carbon);
}

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

.settings-item-actions {
    display: flex;
    gap: 8px;
}

.settings-add-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.settings-add-row .form-input {
    flex: 1;
}

/* ── TOGGLE OPTION BUTTONS (Call Modal) ── */
.btn-option-toggle {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary, #6B7280);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.btn-option-toggle:hover {
    border-color: var(--border-hover);
    background: var(--state-hover);
}

.btn-option-toggle.active {
    background: var(--text-carbon);
    color: #fff;
    border-color: var(--text-carbon);
}

/* ============================================================
   SHARED SETTINGS LAYOUT
   Used by settings.html, settings-positions, evaluations, stages
   ============================================================ */

.settings-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1px;
    background: var(--border-hairline);
    border: 1px solid var(--border-hairline);
    border-radius: 14px;
    overflow: hidden;
    min-height: 560px;
}

/* ── Sidebar tabs ── */
.settings-nav {
    background: #fff;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.settings-nav-item {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.12s;
    border: none;
    background: none;
    text-align: left;
    letter-spacing: -0.01em;
    text-decoration: none;
    display: block;
    font-family: 'Inter', sans-serif;
}

.settings-nav-item:hover {
    color: var(--text-carbon);
    background: rgba(11, 13, 16, 0.02);
}

.settings-nav-item.active {
    color: var(--text-carbon);
    font-weight: 600;
    background: rgba(11, 13, 16, 0.03);
}

.settings-nav-sep {
    height: 1px;
    background: var(--border-hairline);
    margin: 12px 16px;
}

.settings-nav-label {
    padding: 6px 20px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(11, 13, 16, 0.2);
}

/* ── Content panel ── */
.settings-panel {
    background: #fff;
    padding: 28px 32px;
    overflow-y: auto;
}

.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.sp-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-carbon);
    letter-spacing: -0.02em;
}

.sp-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
    }

    .settings-nav-item {
        white-space: nowrap;
        padding: 12px 16px;
    }

    .settings-nav-sep {
        width: 1px;
        height: auto;
        margin: 4px 0;
    }
}

/* ── Section hide/show ── */
.settings-section {
    display: none;
}

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

/* ─────────────────────────────────────────
   Shared Config Tabs (cfg-tabs)
   ───────────────────────────────────────── */
.cfg-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-hairline);
    margin-bottom: 24px;
}

.cfg-tab {
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: -0.01em;
}

.cfg-tab:hover {
    color: var(--text-secondary);
}

.cfg-tab.active {
    color: var(--text-carbon);
    border-bottom-color: var(--text-carbon);
}

.cfg-tab-panel {
    display: none;
}

.cfg-tab-panel.active {
    display: block;
}

/* ── STAGE CHANGE MODAL ── */
.sc-modal-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 0;
}

.sc-modal-left {
    padding: 20px 0 20px 24px;
    border-right: 1px solid var(--border-hairline);
    overflow-y: auto;
    max-height: 400px;
}

.sc-modal-right {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
}

/* ── VERTICAL PIPELINE ── */
.sc-pipeline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-right: 20px;
}

.sc-pipe-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sc-pipe-node {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px 12px 5px 4px;
    border-radius: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sc-pipe-node:hover {
    background: rgba(11, 13, 16, 0.03);
}

.sc-pipe-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border: 2px solid rgba(11, 13, 16, 0.1);
    background: #fff;
    color: rgba(11, 13, 16, 0.25);
}

.sc-pipe-node.is-current .sc-pipe-dot {
    border-color: var(--text-carbon);
    background: var(--text-carbon);
    color: #fff;
}

.sc-pipe-node.is-past .sc-pipe-dot {
    border-color: rgba(11, 13, 16, 0.2);
    background: rgba(11, 13, 16, 0.06);
    color: rgba(11, 13, 16, 0.35);
}

.sc-pipe-node.is-selected .sc-pipe-dot {
    border-color: var(--text-carbon);
    background: var(--text-carbon);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(11, 13, 16, 0.08);
    transform: scale(1.1);
}

.sc-pipe-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(11, 13, 16, 0.35);
    line-height: 1;
    letter-spacing: -0.01em;
    transition: color 0.15s;
}

.sc-pipe-node.is-current .sc-pipe-label {
    color: var(--text-carbon);
    font-weight: 700;
}

.sc-pipe-node.is-past .sc-pipe-label {
    color: rgba(11, 13, 16, 0.35);
}

.sc-pipe-node.is-selected .sc-pipe-label {
    color: var(--text-carbon);
    font-weight: 700;
}

.sc-pipe-node:hover .sc-pipe-label {
    color: var(--text-carbon);
}

.sc-pipe-line {
    width: 2px;
    height: 8px;
    background: rgba(11, 13, 16, 0.08);
    flex-shrink: 0;
    margin-left: 16px;
    transition: background 0.2s;
}

.sc-pipe-line.is-filled {
    background: rgba(11, 13, 16, 0.25);
}

/* ── CV SECTION ── */
.cv-upload-zone {
    border: 2px dashed var(--border-hairline);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(11, 13, 16, 0.015);
}

.cv-upload-zone:hover {
    border-color: var(--border-hover);
    background: var(--state-hover);
}

.cv-upload-zone.drag-over {
    border-color: var(--text-carbon);
    background: rgba(11, 13, 16, 0.04);
}

.cv-upload-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-carbon);
    margin-bottom: 4px;
}

.cv-upload-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
}

.cv-file-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-hairline);
    border-radius: 10px;
    background: #fff;
    transition: box-shadow 0.2s;
}

.cv-file-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cv-file-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(11, 13, 16, 0.04);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-carbon);
}

.cv-file-details {
    flex: 1;
    min-width: 0;
}

.cv-file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-carbon);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-file-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.cv-file-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cv-file-actions .btn-ghost {
    padding: 6px 10px;
    font-size: 11px;
}

.cv-pdf-preview {
    margin-top: 16px;
    border: 1px solid var(--border-hairline);
    border-radius: 12px;
    overflow: hidden;
    background: #f8f8f8;
}

.cv-pdf-preview iframe {
    width: 100%;
    height: 600px;
    border: none;
    display: block;
}