/* Job Requisition — app-specific styles
 * Layered on top of design-system/colors_and_type.css and frappe-ui.css
 */

/* ────────── Reset / Layout ────────── */
html, body, #root { margin: 0; padding: 0; height: 100%; }
* { box-sizing: border-box; }

.rq-app {
  display: flex;
  height: 100vh;
  background: var(--surface-gray-1);
  color: var(--ink-gray-8);
  font-size: 14px;
  letter-spacing: 0.01em;
  overflow: hidden;
}
.rq-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ────────── Page top bar (above the page heading) ────────── */
.rq-topbar {
  height: 44px;
  flex-shrink: 0;
  background: var(--surface-white);
  border-bottom: 1px solid var(--outline-gray-1);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
}
.rq-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-gray-5);
}
.rq-breadcrumb .is-current { color: var(--ink-gray-9); font-weight: 500; }
.rq-link-btn {
  background: transparent; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  letter-spacing: inherit;
}
.rq-link-btn:hover { color: var(--ink-gray-9); }
.rq-topbar-spacer { flex: 1; }
.rq-topbar-nav { display: flex; gap: 2px; margin-right: 4px; }

.rq-icon-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--ink-gray-6); cursor: pointer;
}
.rq-icon-btn:hover { background: var(--surface-gray-2); color: var(--ink-gray-8); }
.rq-icon-btn:disabled { color: var(--ink-gray-3); cursor: not-allowed; background: transparent; }

/* ────────── LIST VIEW ────────── */
.rq-page {
  flex: 1; overflow: auto;
  padding: 18px 24px 32px;
}
.rq-page-head {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 16px;
}
.rq-page-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5); margin-bottom: 4px;
}
.rq-page-title {
  margin: 0; font-size: 22px; font-weight: 600;
  color: var(--ink-gray-9); letter-spacing: -0.005em;
}
.rq-page-actions {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.rq-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-gray-2); border: 1px solid transparent;
  border-radius: 6px; padding: 0 8px; height: 28px;
  width: 280px;
  color: var(--ink-gray-5);
  transition: background 80ms, border-color 80ms;
}
.rq-search:focus-within {
  background: var(--surface-white);
  border-color: var(--outline-gray-3);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.rq-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font: inherit; color: var(--ink-gray-9); letter-spacing: 0.01em;
}
.rq-search input::placeholder { color: var(--ink-gray-4); }

/* Status chips */
.rq-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.rq-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  background: var(--surface-white); border: 1px solid var(--outline-gray-1);
  border-radius: 99px;
  font-size: 12px; color: var(--ink-gray-7); font-weight: 420;
  cursor: pointer; transition: border-color 80ms, background 80ms;
}
.rq-chip:hover { border-color: var(--outline-gray-3); background: var(--surface-gray-1); }
.rq-chip.is-active {
  background: var(--ink-gray-9); border-color: var(--ink-gray-9);
  color: var(--ink-white);
}
.rq-chip-count {
  font-size: 11px; color: var(--ink-gray-5);
  background: var(--surface-gray-2); padding: 0 5px; border-radius: 99px;
}
.rq-chip.is-active .rq-chip-count {
  background: rgba(255,255,255,0.16); color: var(--ink-white);
}

/* Filter row */
.rq-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--surface-white); border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
}
.rq-filter-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 4px 0 8px;
  background: var(--surface-gray-2); border-radius: 6px;
  font-size: 12px; color: var(--ink-gray-8);
}
.rq-filter-tag-key { font-weight: 500; }
.rq-filter-tag-op { color: var(--ink-gray-5); }
.rq-filter-tag-val { color: var(--ink-blue-3); font-weight: 500; }
.rq-filter-tag-x {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 4px;
  color: var(--ink-gray-5); cursor: pointer;
}
.rq-filter-tag-x:hover { background: var(--surface-gray-3); color: var(--ink-gray-8); }
.rq-filter-add {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  background: transparent; border: 1px dashed var(--outline-gray-2);
  border-radius: 6px;
  font-size: 12px; color: var(--ink-gray-6); cursor: pointer;
}
.rq-filter-add:hover { border-color: var(--outline-gray-3); color: var(--ink-gray-8); }

/* Selection bar */
.rq-selbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--surface-blue-1); border: 1px solid var(--outline-blue-1);
  border-radius: 8px;
}
.rq-selbar-count {
  font-size: 13px; color: var(--ink-blue-3); font-weight: 500;
  padding-right: 6px; border-right: 1px solid var(--outline-blue-1);
  margin-right: 4px;
}
.rq-selbar-clear {
  background: transparent; border: 0; padding: 4px 8px;
  font: inherit; color: var(--ink-gray-6); cursor: pointer;
}
.rq-selbar-clear:hover { color: var(--ink-gray-9); }

/* List itself */
.rq-list {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px; overflow: hidden;
}
.rq-list-head, .rq-list-row {
  display: grid; align-items: center;
  grid-template-columns: 32px 160px 1fr 140px 120px 110px 160px 80px 130px 130px;
  gap: 12px;
  padding: 10px 16px;
}
.rq-list-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-2);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.rq-list-row {
  border-bottom: 1px solid var(--outline-gray-1);
  cursor: pointer;
  transition: background 60ms;
}
.rq-list-row:last-child { border-bottom: 0; }
.rq-list-row:hover { background: var(--surface-gray-1); }
.rq-list-row.is-sel { background: var(--surface-blue-1); }
.rq-list-id {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--ink-gray-6);
  letter-spacing: 0;
}
.rq-list-desg-title {
  font-weight: 500; color: var(--ink-gray-9);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rq-list-muted { color: var(--ink-gray-5); font-size: 13px; }
.rq-list-req {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-gray-7); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rq-list-num {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-gray-8); font-feature-settings: 'tnum';
}
.rq-list-date { display: flex; flex-direction: column; font-size: 13px; }
.rq-list-empty {
  padding: 64px 24px; text-align: center;
  color: var(--ink-gray-5); display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.rq-list-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 4px 0; font-size: 12px; color: var(--ink-gray-5);
}

/* Avatar */
.rq-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; color: var(--ink-white);
  font-weight: 600; letter-spacing: 0.01em; flex-shrink: 0;
}

/* ────────── DETAIL VIEW ────────── */
.rq-doc {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
}
.rq-doc-head {
  background: var(--surface-white);
  padding: 18px 28px 12px;
  border-bottom: 1px solid var(--outline-gray-1);
  flex-shrink: 0;
}
.rq-doc-title-row {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rq-doc-title-block { flex: 1 1 280px; min-width: 0; }
.rq-doc-title {
  margin: 0 0 6px 0;
  font-size: 24px; font-weight: 600;
  color: var(--ink-gray-9); letter-spacing: -0.01em;
  line-height: 1.2;
}
.rq-doc-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; font-size: 13px; color: var(--ink-gray-6);
}
.rq-doc-id {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-gray-7); letter-spacing: 0;
}
.rq-doc-sep { color: var(--ink-gray-3); }
.rq-doc-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.rq-saved {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-gray-5); padding: 0 6px;
}
.rq-saved svg { color: var(--ink-green-3); }
.rq-dot-amber {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--ink-amber-3);
}

.rq-doc-pills {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rq-pill-divider {
  width: 1px; height: 16px; background: var(--outline-gray-2);
}
.rq-workflow {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  background: var(--surface-gray-2); border-radius: 6px;
  font-size: 12px; color: var(--ink-gray-8); cursor: pointer;
}
.rq-workflow:hover { background: var(--surface-gray-3); }
.rq-assigned {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-gray-7);
}
.rq-assigned-label { color: var(--ink-gray-5); }
.rq-tags { display: flex; gap: 4px; }
.rq-tag-add {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  background: transparent; border: 1px dashed var(--outline-gray-2);
  border-radius: 99px;
  font-size: 12px; color: var(--ink-gray-5); cursor: pointer;
}
.rq-tag-add:hover { border-color: var(--outline-gray-3); color: var(--ink-gray-8); }

/* Tabs */
.rq-tabs {
  display: flex; gap: 0;
  padding: 0 28px;
  background: var(--surface-white);
  border-bottom: 1px solid var(--outline-gray-1);
  flex-shrink: 0;
  overflow-x: auto;
}
.rq-tab {
  background: transparent; border: 0;
  padding: 10px 14px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-gray-6);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 80ms, border-color 80ms;
}
.rq-tab:hover { color: var(--ink-gray-9); }
.rq-tab.is-active {
  color: var(--ink-gray-9);
  border-bottom-color: var(--ink-gray-9);
}

/* Body */
.rq-doc-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  overflow: hidden;
}
.rq-doc-body.no-sidebar { grid-template-columns: 1fr; }
.rq-form {
  overflow-y: auto;
  padding: 20px 28px 64px;
}

/* Sections */
.rq-section {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.rq-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5);
  padding: 12px 16px 4px;
}
.rq-section-body {
  padding: 8px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.rq-section.is-compact .rq-section-body { padding: 8px 12px; }

/* Rows */
.rq-row { display: grid; gap: 16px; }
.rq-row-1 { grid-template-columns: 1fr; }
.rq-row-2 { grid-template-columns: 1fr 1fr; }
.rq-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1200px) {
  .rq-row-3 { grid-template-columns: 1fr 1fr; }
  .rq-row-2 { grid-template-columns: 1fr; }
}

/* Field */
.rq-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rq-field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-gray-6);
  letter-spacing: 0.01em;
}
.rq-req { color: var(--ink-red-3); margin-left: 1px; }
.rq-fetched {
  color: var(--ink-blue-3); cursor: help;
  display: inline-flex;
}
.rq-cond {
  font-size: 10px; color: var(--ink-amber-3);
  background: var(--surface-amber-1);
  padding: 1px 5px; border-radius: 4px;
  letter-spacing: 0.02em;
}
.rq-field-hint {
  font-size: 11px; color: var(--ink-gray-5); margin-top: 1px;
}
.rq-input {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 8px;
  background: var(--surface-gray-2);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-gray-9);
  font-family: var(--font-sans); font-size: 13px;
  letter-spacing: 0.01em;
  width: 100%;
  transition: background 80ms, border-color 80ms;
  cursor: text;
}
input.rq-input, .rq-input input, .rq-input textarea {
  background: transparent; border: 0; outline: 0;
  flex: 1; min-width: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.rq-input:hover { background: var(--surface-gray-3); }
.rq-input:focus-within {
  background: var(--surface-white);
  border-color: var(--outline-gray-3);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.rq-input.is-read {
  background: transparent;
  border-color: transparent;
  color: var(--ink-gray-6);
  cursor: not-allowed;
}
.rq-input.is-read:hover { background: transparent; }
input.rq-input.is-read, .rq-input.is-read input {
  color: var(--ink-gray-6);
}
.rq-input input::placeholder, .rq-input textarea::placeholder, input.rq-input::placeholder {
  color: var(--ink-gray-4);
}
.rq-placeholder { color: var(--ink-gray-4); }

.rq-textarea {
  height: auto; min-height: 60px;
  padding: 6px 8px;
  align-items: flex-start;
  resize: vertical;
}
textarea.rq-input.rq-textarea, .rq-input.rq-textarea textarea {
  resize: vertical;
}

.rq-select { cursor: pointer; user-select: none; position: relative; }
.rq-select > span:first-child { flex: 1; }
.rq-options {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-2);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  z-index: 20;
  max-height: 240px; overflow-y: auto;
  padding: 4px;
}
.rq-option {
  padding: 6px 8px; border-radius: 4px;
  font-size: 13px; color: var(--ink-gray-8);
  cursor: pointer;
}
.rq-option:hover { background: var(--surface-gray-2); }
.rq-option.is-sel { background: var(--surface-blue-1); color: var(--ink-blue-3); }

.rq-link-input { gap: 6px; }
.rq-link-input .rq-link-val { color: var(--ink-gray-9); }
.rq-input-search {
  background: transparent; border: 0; padding: 0;
  color: var(--ink-gray-4); cursor: pointer;
  display: inline-flex;
}
.rq-input-search:hover { color: var(--ink-gray-7); }

.rq-input-money { padding: 0 4px 0 8px; }
.rq-affix { color: var(--ink-gray-5); font-size: 12px; padding-right: 4px; border-right: 1px solid var(--outline-gray-2); margin-right: 4px; height: 18px; display: inline-flex; align-items: center; }
.rq-affix-r { color: var(--ink-gray-4); font-size: 11px; padding: 0 6px; }
.rq-input-money input { text-align: right; font-variant-numeric: tabular-nums; }

.rq-input-date svg { color: var(--ink-gray-5); }

/* Check */
.rq-check { display: inline-flex; align-items: center; gap: 8px; height: 30px; cursor: pointer; user-select: none; }
.rq-check input { display: none; }
.rq-check-box {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid var(--outline-gray-3);
  background: var(--surface-gray-2); position: relative;
  flex-shrink: 0;
}
.rq-check input:checked + .rq-check-box { background: var(--blue-500); border-color: var(--blue-500); }
.rq-check input:checked + .rq-check-box::after {
  content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px;
  border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.rq-check-lbl { font-size: 13px; color: var(--ink-gray-8); }

/* Rich text */
.rq-rte {
  border: 1px solid var(--outline-gray-2); border-radius: 6px;
  background: var(--surface-white);
  overflow: hidden;
}
.rq-rte-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--outline-gray-1);
  background: var(--surface-gray-1);
}
.rq-rte-btn {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 4px;
  font: inherit; font-size: 12px; color: var(--ink-gray-7);
  cursor: pointer;
}
.rq-rte-btn:hover { background: var(--surface-gray-3); color: var(--ink-gray-9); }
.rq-rte-sep { width: 1px; height: 14px; background: var(--outline-gray-2); margin: 0 2px; }
.rq-rte-content {
  padding: 10px 12px; min-height: 110px;
  font-size: 13px; color: var(--ink-gray-9); line-height: 1.55;
  outline: 0;
}
.rq-rte-content p { margin: 0 0 8px 0; font-size: 13px; line-height: 1.55; color: var(--ink-gray-9); }
.rq-rte-content ul, .rq-rte-content ol { margin: 0 0 8px 18px; padding: 0; font-size: 13px; line-height: 1.6; }
.rq-rte-content li { margin-bottom: 2px; }
.rq-rte-content .rq-placeholder-html { color: var(--ink-gray-4); }

/* Chips */
.rq-chips-field {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px;
  min-height: 32px;
  background: var(--surface-gray-2);
  border-radius: 6px;
  border: 1px solid transparent;
}
.rq-chips-field:focus-within { background: var(--surface-white); border-color: var(--outline-gray-3); }
.rq-chip-item {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 6px 0 8px;
  background: var(--surface-blue-1); color: var(--ink-blue-3);
  border-radius: 4px; font-size: 12px;
}
.rq-chip-item button {
  background: transparent; border: 0; padding: 0;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-blue-3); cursor: pointer; border-radius: 3px;
}
.rq-chip-item button:hover { background: var(--blue-200); }
.rq-chips-field input {
  flex: 1; min-width: 100px;
  background: transparent; border: 0; outline: 0;
  height: 22px; padding: 0 6px;
  font: inherit; color: var(--ink-gray-9); font-size: 13px;
}
.rq-chips-field input::placeholder { color: var(--ink-gray-4); }

/* SimpleTable (child tables) */
.rq-table {
  border: 1px solid var(--outline-gray-1);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-white);
}
.rq-table-head, .rq-table-row {
  display: grid;
  grid-template-columns: 28px 36px repeat(var(--cols, 3), minmax(120px, 1fr)) 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
}
.rq-table-row { --cols: 3; }
.rq-table-head { --cols: 3; }
/* Dynamic columns via grid-template - we set --cols when we know it. For now using auto. */
.rq-table-head, .rq-table-row {
  grid-template-columns: 28px 36px 1fr 1fr 1fr 32px;
}
.rq-table .rq-table-head { background: var(--surface-gray-1); border-bottom: 1px solid var(--outline-gray-1); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-gray-5); }
.rq-table .rq-table-row { border-bottom: 1px solid var(--outline-gray-1); color: var(--ink-gray-8); }
.rq-table .rq-table-row:last-of-type { border-bottom: 0; }
.rq-table .rq-table-row:hover { background: var(--surface-gray-1); }
.rq-table-idx { color: var(--ink-gray-5); font-size: 12px; }
.rq-table-empty {
  padding: 28px; text-align: center;
  font-size: 13px; color: var(--ink-gray-5);
}
.rq-table-foot {
  display: flex; gap: 8px;
  padding: 6px 10px; border-top: 1px solid var(--outline-gray-1);
  background: var(--surface-gray-1);
}
.rq-table-action {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  background: transparent; border: 0; border-radius: 4px;
  font: inherit; font-size: 12px; color: var(--ink-gray-6);
  cursor: pointer;
}
.rq-table-action:hover { background: var(--surface-gray-2); color: var(--ink-gray-9); }
.rq-table-row-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 4px;
  color: var(--ink-gray-5); cursor: pointer;
}
.rq-table-row-btn:hover { background: var(--surface-gray-2); color: var(--ink-gray-9); }
.rq-row-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-gray-9);
}
.rq-num { font-variant-numeric: tabular-nums; }
.rq-mail-link { color: var(--ink-blue-3); font-size: 12px; }

/* ────────── Vacancy breakdown (per-position) ────────── */
.vb {
  display: flex; flex-direction: column;
  gap: 10px;
}
.vb-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-gray-1);
  border: 1px dashed var(--outline-gray-2);
  border-radius: 8px;
  color: var(--ink-gray-6);
}
.vb-empty svg { color: var(--ink-gray-4); }
.vb-empty-title { font-size: 13px; font-weight: 600; color: var(--ink-gray-9); }
.vb-empty-hint { font-size: 12px; color: var(--ink-gray-6); margin-top: 2px; }

.vb-summary {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--surface-gray-1);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  flex-wrap: wrap;
}
.vb-summary-spacer { flex: 1; min-width: 8px; }
.vb-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--ink-gray-7);
}
.vb-stat-value {
  font-size: 18px; font-weight: 600;
  color: var(--ink-gray-9);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vb-stat-label {
  font-size: 12px; color: var(--ink-gray-6);
  letter-spacing: 0.01em;
}
.vb-stat-divider {
  width: 1px; height: 22px;
  background: var(--outline-gray-2);
}
.vb-stat-dot {
  width: 8px; height: 8px; border-radius: 99px;
  display: inline-block;
  align-self: center;
  background: var(--ink-gray-4);
  flex-shrink: 0;
}
.vb-stat-new .vb-stat-dot,
.vb-dot-new { background: var(--surface-green-3); }
.vb-stat-rep .vb-stat-dot,
.vb-dot-rep { background: var(--ink-amber-3); }

.vb-bulk {
  display: inline-flex; align-items: center; gap: 6px;
}
.vb-bulk-label {
  font-size: 11px; color: var(--ink-gray-5);
  letter-spacing: 0.02em;
  text-transform: uppercase; font-weight: 500;
}
.vb-bulk-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px;
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-2);
  border-radius: 99px;
  font: inherit; font-size: 12px; color: var(--ink-gray-7);
  cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.vb-bulk-btn:hover {
  background: var(--surface-gray-2);
  border-color: var(--outline-gray-3);
  color: var(--ink-gray-9);
}

/* Table */
.vb-table {
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  background: var(--surface-white);
  overflow: hidden;
}
.vb-head, .vb-row {
  display: grid;
  grid-template-columns: 64px 240px 1.2fr 1.2fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
}
/* Job Opening variant: extra column (Employment type) */
.vb-table-jo .vb-head,
.vb-table-jo .vb-row {
  grid-template-columns: 56px 220px 1.4fr 1.4fr 130px;
  gap: 12px;
}
.vb-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.vb-row {
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 13px;
  position: relative;
}
.vb-row:last-child { border-bottom: 0; }
.vb-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 80ms;
}
.vb-row.is-new::before  { background: var(--surface-green-3); }
.vb-row.is-rep::before  { background: var(--ink-amber-3); }
.vb-row.is-rep         { background: color-mix(in oklab, var(--ink-amber-3) 4%, var(--surface-white)); }

.vb-pos-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-gray-9);
  font-size: 14px;
}
.vb-pos-num-hash {
  color: var(--ink-gray-4);
  font-weight: 500;
  margin-right: 1px;
}

/* Segmented control */
.vb-seg {
  display: inline-flex;
  background: var(--surface-gray-2);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.vb-seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1;
  height: 26px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 4px;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--ink-gray-6);
  cursor: pointer;
  white-space: nowrap;
  transition: background 80ms, color 80ms, box-shadow 80ms;
}
.vb-seg-btn:hover { color: var(--ink-gray-9); }
.vb-seg-btn.is-on {
  background: var(--surface-white);
  color: var(--ink-gray-9);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px var(--outline-gray-2);
}

/* Cell wrappers */
.vb-cell {
  min-width: 0;
  display: flex;
  align-items: center;
}
.vb-cell .rq-input {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-2);
}
.vb-cell .rq-input:hover {
  background: var(--surface-gray-1);
  border-color: var(--outline-gray-3);
}
.vb-cell .rq-input:focus-within {
  background: var(--surface-white);
  border-color: var(--outline-gray-3);
}
.vb-row.is-new .vb-cell .rq-input,
.vb-row.is-rep .vb-cell .rq-input {
  background: var(--surface-white);
}
.vb-cell-meta {
  font-size: 11px; color: var(--ink-gray-5);
  white-space: nowrap;
  letter-spacing: 0.01em;
  padding-left: 6px;
  border-left: 1px solid var(--outline-gray-2);
  margin-left: 2px;
}

.vb-na {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-gray-4);
  font-style: italic;
}
.vb-na svg { color: var(--ink-gray-4); }

/* Foot */
.vb-foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-gray-5);
  padding: 0 2px;
}
.vb-foot svg { color: var(--ink-gray-4); }
.vb-foot strong { color: var(--ink-gray-7); font-weight: 600; }

@media (max-width: 1100px) {
  .vb-head, .vb-row {
    grid-template-columns: 50px 200px 1fr 1fr;
    gap: 10px;
    padding: 10px;
  }
  .vb-table-jo .vb-head,
  .vb-table-jo .vb-row {
    grid-template-columns: 46px 200px 1fr 1fr 110px;
    gap: 8px;
    padding: 10px;
  }
}

/* ────────── End vacancy breakdown ────────── */
.pb-count {
  display: flex; align-items: baseline; gap: 6px;
  background: var(--surface-blue-1);
  color: var(--ink-blue-3);
  border: 1px dashed var(--outline-blue-1);
  cursor: default;
}
.pb-count strong {
  font-size: 16px; font-weight: 600;
  color: var(--ink-blue-3);
  font-variant-numeric: tabular-nums;
}
.pb-count-unit { font-size: 11px; color: var(--ink-gray-5); }

/* Position breakdown — sub-tables (stacked) */
.pb-subtable { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pb-subtable-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-gray-8);
}
.pb-subtable-title { color: var(--ink-gray-9); }

/* Position breakdown — tabs (legacy, kept for dot colors used in stacked labels) */
.pb-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--outline-gray-2);
  margin-top: 4px;
}
.pb-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0;
  padding: 10px 14px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-gray-6); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pb-tab:hover { color: var(--ink-gray-9); }
.pb-tab.is-active {
  color: var(--ink-gray-9);
  border-bottom-color: var(--ink-amber-3);
}
.pb-tab-dot {
  width: 8px; height: 8px; border-radius: 99px;
}
.pb-tab-dot-new { background: var(--surface-green-3); }
.pb-tab-dot-rep { background: var(--ink-amber-3); }
.pb-tab-count {
  font-size: 11px; color: var(--ink-gray-5);
  background: var(--surface-gray-2);
  padding: 1px 6px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.pb-tab.is-active .pb-tab-count {
  background: var(--ink-gray-9); color: var(--ink-white);
}

/* Position rows tables */
.ja-ct-pb-new .ja-ct-head, .ja-ct-pb-new .ja-ct-row {
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr 1fr;
  gap: 12px; align-items: center;
  padding: 8px 12px;
  min-width: 0;
}
.ja-ct-pb-rep .ja-ct-head, .ja-ct-pb-rep .ja-ct-row {
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr 1.4fr 1fr;
  gap: 12px; align-items: center;
  padding: 8px 12px;
  min-width: 0;
}
.pb-pos-num {
  color: var(--ink-gray-9); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.rq-cv-attach {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  background: var(--surface-gray-2); border: 1px dashed var(--outline-gray-2);
  border-radius: 6px;
  font: inherit; font-size: 13px;
  color: var(--ink-gray-7);
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
  max-width: 100%;
}
.rq-cv-attach:hover {
  background: var(--surface-gray-3); border-color: var(--outline-gray-3);
  color: var(--ink-gray-9);
}
.rq-cv-attach svg { color: var(--ink-gray-5); }
.rq-cv-attach:hover svg { color: var(--ink-gray-7); }
.rq-cv-name {
  color: var(--ink-blue-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.rq-cv-empty { color: var(--ink-gray-5); }

/* Strong candidate checkbox (gold star) */
.rq-check-strong .rq-check-lbl {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-gray-7);
}
.rq-check-strong .rq-check-lbl svg { color: var(--ink-gray-4); }
.rq-check-strong input:checked + .rq-check-box {
  background: var(--ink-amber-3); border-color: var(--ink-amber-3);
}
.rq-check-strong:has(input:checked) .rq-check-lbl { color: var(--ink-gray-9); font-weight: 500; }
.rq-check-strong:has(input:checked) .rq-check-lbl svg { color: var(--ink-amber-3); fill: var(--ink-amber-3); }

/* Notes */
.rq-notes-preview {
  background: var(--surface-gray-1); border: 1px dashed var(--outline-gray-2);
  border-radius: 6px; padding: 12px 14px;
}
.rq-notes-eyebrow { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-gray-5); margin-bottom: 8px; }
.rq-notes-line { font-size: 13px; color: var(--ink-gray-8); margin-bottom: 4px; }
.rq-notes-line strong { color: var(--ink-gray-9); margin-right: 4px; }

/* Connections — inline pill style */
.rq-conn-section { padding: 0; }

/* ================ POSITIONS TAB ================ */
.rq-positions-section { padding: 0; }
.rq-subtabs {
  display: flex;
  border-bottom: 1px solid var(--outline-gray-1);
  padding: 0 16px;
  background: var(--surface-white);
}
.rq-subtab {
  background: transparent; border: 0;
  padding: 10px 14px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-gray-6);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rq-subtab:hover { color: var(--ink-gray-9); }
.rq-subtab.is-active {
  color: var(--ink-gray-9);
  border-bottom-color: var(--ink-gray-9);
}
.rq-pos-table-wrap { overflow-x: auto; padding: 0; }
.rq-pos-table { min-width: 1280px; }
.rq-pos-head, .rq-pos-row {
  display: grid;
  grid-template-columns: 70px 140px 130px 110px 170px 90px 170px 130px 150px 150px 60px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
}
.rq-pos-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.rq-pos-row {
  border-bottom: 1px solid var(--outline-gray-1);
  color: var(--ink-gray-8);
}
.rq-pos-row:last-child { border-bottom: 0; }
.rq-pos-row:hover { background: var(--surface-gray-1); }
.rq-pos-num { font-variant-numeric: tabular-nums; color: var(--ink-gray-9); font-weight: 500; }
.rq-pos-loc { color: var(--ink-blue-3); line-height: 1.35; }
.rq-pos-mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-gray-7); letter-spacing: 0; }
.rq-pos-cand a { color: var(--ink-blue-3); }
.rq-pos-cand a:hover { text-decoration: underline; }
.rq-pos-tat { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-gray-9); }
.rq-pos-empty {
  grid-column: 1 / -1;
  padding: 56px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ink-gray-5);
}
.rq-pos-empty-hint { font-size: 12px; color: var(--ink-gray-4); }

.rq-pos-details { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rq-pos-card {
  background: var(--surface-white); border: 1px solid var(--outline-gray-1);
  border-radius: 8px; padding: 14px 16px;
}
.rq-pos-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rq-pos-card-num { font-size: 13px; font-weight: 600; color: var(--ink-gray-9); }
.rq-pos-card-id { font-family: var(--font-mono); font-size: 11px; color: var(--ink-gray-6); }
.rq-pos-card-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px 18px;
}
@media (max-width: 1000px) {
  .rq-pos-card-grid { grid-template-columns: repeat(2, 1fr); }
}
.rq-pos-kv-label {
  font-size: 11px; color: var(--ink-gray-5);
  letter-spacing: 0.01em; margin-bottom: 2px;
}
.rq-pos-kv-value { font-size: 13px; color: var(--ink-gray-9); word-break: break-word; }
.rq-pos-kv-value.is-link { color: var(--ink-blue-3); }
.rq-pos-kv-value.is-empty { color: var(--ink-gray-4); }

/* ================ JOB OPENING ================ */
.rq-doc-linkreq {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  background: var(--surface-blue-1);
  color: var(--ink-blue-3);
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 100%;
}
.rq-doc-linkreq:hover { background: var(--blue-100); text-decoration: none; }
.rq-doc-linkreq-id { font-family: var(--font-mono); font-size: 11px; }
.rq-doc-linkreq-sep { color: var(--ink-gray-4); }
.rq-doc-linkreq-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.rq-doc-meta-linkrow {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
}
.rq-doc-meta-label { color: var(--ink-gray-5); }

.rq-jo-table { padding: 0; }
.rq-jo-head, .rq-jo-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 110px 60px;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
}
.rq-jo-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.rq-jo-head svg { color: var(--ink-gray-4); }
.rq-jo-row {
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 13px;
}
.rq-jo-row:last-child { border-bottom: 0; }
.rq-jo-row:hover { background: var(--surface-gray-1); }

/* Sources sub-tabs (pill-row) */
.rq-srcsub {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 12px 16px;
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
}
.rq-srcsub-btn {
  background: transparent; border: 0;
  padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-gray-6);
  border-radius: 6px;
  cursor: pointer;
}
.rq-srcsub-btn:hover { color: var(--ink-gray-9); background: var(--surface-white); }
.rq-srcsub-btn.is-active {
  background: var(--ink-gray-9); color: var(--ink-white);
}
.rq-srcsub-body {
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.rq-src-card {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  padding: 16px 18px;
}
.rq-src-title {
  margin: 0 0 8px 0;
  font-size: 14px; font-weight: 600; color: var(--ink-gray-9);
  letter-spacing: 0.005em;
}
.rq-src-sublabel {
  font-size: 13px; font-weight: 500; color: var(--ink-gray-8);
  margin: 6px 0 4px;
}
.rq-src-help {
  font-size: 13px; color: var(--ink-gray-6);
  margin: 0 0 12px 0; line-height: 1.5;
}
.rq-src-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 32px;
  background: var(--surface-gray-1);
  border: 1px dashed var(--outline-gray-2);
  border-radius: 6px; color: var(--ink-gray-5);
  font-size: 13px;
}

/* Toggles */
.rq-src-toggles { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.rq-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-gray-8);
  cursor: pointer; user-select: none;
}
.rq-toggle-track {
  width: 30px; height: 18px;
  background: var(--surface-gray-3); border-radius: 99px;
  position: relative;
  transition: background 120ms;
  flex-shrink: 0;
}
.rq-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 99px;
  background: var(--surface-white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 120ms;
}
.rq-toggle-track.is-on { background: var(--blue-500); }
.rq-toggle-track.is-on .rq-toggle-thumb { transform: translateX(12px); }

/* Boards grid */
.rq-src-boards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.rq-src-board {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--surface-gray-1);
  border-radius: 6px;
}
.rq-src-board-name {
  flex: 1; font-size: 13px; font-weight: 500; color: var(--ink-gray-9);
}
.rq-src-board-meta { font-size: 12px; color: var(--ink-gray-5); }

/* Connections action row + clickable opening rows */
.rq-conn-section-actions {
  display: flex; gap: 6px;
  margin-right: 8px;
}
.rq-conn-row-btn {
  background: var(--surface-gray-1); border: 0;
  width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  transition: background 80ms;
}
.rq-conn-row-btn:hover { background: var(--surface-gray-2); }

/* Link existing dialog */
.rq-link-list { display: flex; flex-direction: column; gap: 6px; }
.rq-link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-gray-1); border: 0;
  border-radius: 6px;
  font: inherit; cursor: pointer; text-align: left;
  color: var(--ink-gray-8);
  transition: background 80ms;
}
.rq-link-row:hover { background: var(--surface-gray-2); }
.rq-link-row .rq-conn-id { font-family: var(--font-mono); font-size: 11px; color: var(--ink-gray-6); }
.rq-link-row-title { font-weight: 500; color: var(--ink-gray-9); font-size: 13px; }

/* ================ JO STEPPER (within Job Opening view) ================ */
.jo-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface-blue-1);
  border-bottom: 1px solid var(--outline-gray-1);
  padding: 4px 16px;
  flex-shrink: 0;
}
.jo-step {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 12px;
  background: transparent; border: 0;
  font: inherit; font-size: 13px; color: var(--ink-gray-6);
  cursor: pointer;
  position: relative;
}
.jo-step:not(:last-child)::after {
  content: ''; position: absolute;
  right: -10px; top: 50%;
  width: 20px; height: 1px;
  background: var(--outline-gray-3);
}
.jo-step:hover { color: var(--ink-gray-9); }
.jo-step.is-active { color: var(--ink-gray-9); font-weight: 600; }
.jo-step.is-done { color: var(--ink-gray-7); }
.jo-step-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-3);
  color: var(--ink-gray-6);
  font-size: 11px; font-weight: 600;
}
.jo-step.is-active .jo-step-num {
  background: var(--ink-gray-9); color: var(--ink-white); border-color: var(--ink-gray-9);
}
.jo-step.is-done .jo-step-num {
  background: var(--surface-green-3); color: var(--ink-white); border-color: var(--surface-green-3);
}

/* External recruiter */
.rq-ext-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0 4px;
  flex-wrap: wrap;
}
.rq-ext-assign { display: inline-flex; align-items: center; gap: 14px; }
.rq-ext-assign-label { font-size: 13px; color: var(--ink-gray-6); }
.rq-ext-search { display: inline-flex; align-items: center; gap: 8px; }
.rq-ext-pager {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 0;
  font-size: 12px; color: var(--ink-gray-7);
}
.rq-ext-table {
  border: 1px solid var(--outline-gray-1);
  border-radius: 6px;
  overflow: hidden;
}
.rq-ext-head {
  display: grid; gap: 16px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 80px;
  padding: 10px 14px;
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.rq-ext-empty {
  padding: 36px; text-align: center;
  background: var(--surface-cyan-1);
  color: var(--ink-gray-7); font-size: 13px;
}

/* Hiring workflow stages */
.jo-stages { display: flex; flex-direction: column; gap: 6px; }
.jo-stage {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-gray-1);
  border-radius: 6px;
}
.jo-stage-num {
  width: 22px; height: 22px;
  border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-white); border: 1px solid var(--outline-gray-2);
  font-size: 11px; font-weight: 600; color: var(--ink-gray-7);
  font-variant-numeric: tabular-nums;
}
.jo-stage-icon {
  width: 28px; height: 28px;
  border-radius: 6px; background: var(--surface-white);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-gray-6); border: 1px solid var(--outline-gray-1);
}
.jo-stage-name { font-size: 13px; font-weight: 500; color: var(--ink-gray-9); flex: 1; }
.jo-stage-meta { font-size: 12px; color: var(--ink-gray-6); }
.jo-stage-meta strong { color: var(--ink-gray-9); font-weight: 500; margin: 0 2px; }
.jo-stage-add {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 8px 12px; margin-top: 4px;
  background: transparent; border: 1px dashed var(--outline-gray-2);
  border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--ink-gray-6);
  cursor: pointer;
}
.jo-stage-add:hover { border-color: var(--outline-gray-3); color: var(--ink-gray-9); }

/* Hiring team */
.jo-team { display: flex; flex-direction: column; gap: 6px; }
.jo-team-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-gray-1); border-radius: 6px;
}
.jo-team-meta { flex: 1; }
.jo-team-name { font-size: 13px; font-weight: 500; color: var(--ink-gray-9); }
.jo-team-mail { font-size: 11px; color: var(--ink-gray-5); }

/* Job application */
.ja-inner-tabs {
  display: flex; align-items: center; gap: 0;
  padding: 0 0 14px;
}
.ja-inner-tab {
  background: transparent; border: 0;
  padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-gray-6); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ja-inner-tab.is-active {
  color: var(--ink-gray-9); border-bottom-color: var(--ink-gray-9);
}
.ja-inner-tab:hover { color: var(--ink-gray-9); }

.ja-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: start;
}
.ja-rail {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
  max-height: 540px; overflow-y: auto;
  position: sticky; top: 0;
}
.ja-rail-item {
  background: transparent; border: 0;
  padding: 7px 10px;
  font: inherit; font-size: 13px; color: var(--ink-gray-7);
  text-align: left; border-radius: 4px;
  cursor: pointer;
}
.ja-rail-item:hover { background: var(--surface-gray-2); color: var(--ink-gray-9); }
.ja-rail-item.is-active {
  background: var(--surface-gray-2); color: var(--ink-gray-9);
  font-weight: 500;
}

.ja-fields { overflow-x: auto; }
.ja-grid {
  display: grid;
  grid-template-columns: 140px 220px repeat(8, minmax(110px, 1fr));
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
  min-width: 1100px;
}
.ja-grid-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.ja-grid-row { border-bottom: 1px solid var(--outline-gray-1); }
.ja-grid-row:last-of-type { border-bottom: 0; }
.ja-flag-col { font-size: 10px; line-height: 1.3; }
.ja-flag-cell { display: inline-flex; align-items: center; justify-content: flex-start; }
.ja-field-name { font-weight: 500; color: var(--ink-gray-9); }
.ja-parse { padding: 14px; border-top: 1px solid var(--outline-gray-1); max-width: 360px; }

.ja-screener-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ja-screener-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-gray-1); border-radius: 6px;
}
.ja-screener-num {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-gray-6);
  width: 32px;
}
.ja-screener-q { flex: 1; font-size: 13px; color: var(--ink-gray-9); }

/* ================ COLLAPSIBLE SECTIONS ================ */
.rq-collapse {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.rq-collapse-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: 0;
  padding: 12px 16px;
  cursor: pointer; text-align: left;
}
.rq-collapse-head:hover { background: var(--surface-gray-1); }
.rq-collapse-title {
  flex: 1;
  font-size: 14px; font-weight: 600; color: var(--ink-gray-9);
  letter-spacing: 0.005em;
}
.rq-collapse-actions { display: inline-flex; gap: 6px; }
.rq-collapse-caret {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-gray-5);
  transition: transform 120ms ease;
}
.rq-collapse-caret.is-open { transform: rotate(180deg); }
.rq-collapse-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--outline-gray-1);
}
.rq-collapse-sub {
  padding: 14px 0 0;
  margin-top: 14px;
  border-top: 1px solid var(--outline-gray-1);
}
.rq-collapse-sublabel {
  font-size: 13px; font-weight: 600; color: var(--ink-gray-9);
  margin-bottom: 6px;
}

.ja-actions {
  display: flex; gap: 8px; margin-bottom: 8px;
  justify-content: flex-end;
}
.ja-fields-flat { overflow-x: auto; padding: 4px 0; }

/* ================ Child doctype: Application fields ================ */
.ja-ct {
  border: 1px solid var(--outline-gray-1);
  border-radius: 6px;
  overflow-x: auto;
  background: var(--surface-white);
}
.ja-ct-head, .ja-ct-row {
  display: grid;
  grid-template-columns: 28px 44px 130px 140px 180px repeat(4, 96px) 32px;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  min-width: 1080px;
  font-size: 13px;
}
.ja-ct-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.ja-ct-row {
  border-bottom: 1px solid var(--outline-gray-1);
  color: var(--ink-gray-8);
}
.ja-ct-row:last-of-type { border-bottom: 0; }
.ja-ct-row:hover { background: var(--surface-gray-1); }
.ja-ct-row.is-band { border-top: 1px solid var(--outline-gray-2); }
.ja-ct-row.is-band:first-child { border-top: 0; }

.ja-ct-idx { color: var(--ink-gray-5); font-size: 12px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.ja-ct-surf { text-align: center; }

.ja-ct-section-cell { display: flex; align-items: center; }
.ja-ct-section-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: var(--surface-blue-1);
  color: var(--ink-blue-3);
  border-radius: 4px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ja-ct-section-cont {
  color: var(--ink-gray-3);
  font-size: 14px;
  padding-left: 10px;
}
.ja-ct-field {
  font-weight: 500; color: var(--ink-gray-9); font-size: 13px;
}
.ja-ct-surf-cell {
  display: inline-flex; align-items: center; justify-content: center;
}

/* Surface 2-state toggle cluster */
.ja-st {
  display: inline-flex; align-items: center;
  border: 1px solid var(--outline-gray-2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-white);
}
.ja-st-btn {
  width: 32px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-white);
  border: 0; padding: 0;
  color: var(--ink-gray-4);
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.ja-st-btn + .ja-st-btn { border-left: 1px solid var(--outline-gray-1); }
.ja-st-btn:hover { background: var(--surface-gray-1); color: var(--ink-gray-7); }
.ja-st-view.is-on { background: var(--surface-blue-1); color: var(--ink-blue-3); }
.ja-st-req .ja-st-star {
  font-size: 14px; font-weight: 700; line-height: 1;
  font-family: var(--font-sans);
  transform: translateY(2px);
}
.ja-st-req.is-on { background: var(--surface-red-2); color: var(--ink-red-3); }
.ja-st-req.is-disabled { opacity: 0.45; cursor: not-allowed; }

.ja-ct-foot {
  display: flex; gap: 4px;
  padding: 6px 10px; border-top: 1px solid var(--outline-gray-1);
  background: var(--surface-gray-1);
}

/* Application-fields sub-tabs (Application / Campus registration) */
.ja-subtabs {
  display: inline-flex; gap: 2px;
  padding: 3px; margin-bottom: 12px;
  background: var(--surface-gray-2); border-radius: 9px;
}
.ja-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 14px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-gray-6); cursor: pointer;
}
.ja-subtab svg { color: var(--ink-gray-4); }
.ja-subtab:hover { color: var(--ink-gray-9); }
.ja-subtab.is-on {
  background: var(--surface-white); color: var(--ink-gray-9);
  box-shadow: var(--shadow-sm);
}
.ja-subtab.is-on svg { color: var(--ink-blue-3); }

/* ================ Application fields wide table ================ */
/* Columns: cb | # | Section | Ref name | Display |
   Careers (View, Mand) | IJP (View, Mand) | Refer (View, Mand) | Pre-offer (View, Mand) |
   CTQ | Visibility | Editability | PreVis | PreEdit |
   Actions
   = 19 cells
*/
.ja-ct-app { min-width: 100%; }
.ja-ct-app .ja-ct-supergroup,
.ja-ct-app .ja-ct-head,
.ja-ct-app .ja-ct-row {
  display: grid;
  grid-template-columns:
    28px               /* cb */
    44px               /* # */
    120px              /* section */
    150px              /* ref name */
    170px              /* display name */
    64px 80px          /* Careers V/M */
    64px 80px          /* IJP V/M */
    64px 80px          /* Refer V/M */
    64px 80px          /* Pre-offer V/M */
    64px               /* CTQ */
    64px               /* TPO verifies */
    150px 150px        /* visibility / editability */
    180px 180px        /* pre-offer visibility / edit-approve */
    44px;              /* actions */
  gap: 8px;
  min-width: 1964px;
  align-items: center;
  padding: 8px 12px;
}

.ja-ct-app .ja-ct-supergroup {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
  padding: 6px 12px 4px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-gray-6);
}
.ja-sg {
  text-align: center;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ja-sg-careers  { grid-column: span 2; background: var(--surface-blue-1);  color: var(--ink-blue-3); }
.ja-sg-ijp      { grid-column: span 2; background: var(--surface-cyan-1);  color: var(--ink-blue-3); }
.ja-sg-refer    { grid-column: span 2; background: var(--surface-green-1); color: var(--ink-green-3); }
.ja-sg-preoffer { grid-column: span 2; background: var(--surface-amber-1); color: var(--ink-amber-3); }
.ja-sg-general  { grid-column: span 4; background: var(--surface-gray-2);  color: var(--ink-gray-7); }
.ja-sg-prerules { grid-column: span 2; background: var(--surface-amber-1); color: var(--ink-amber-3); }
.ja-sg-pad      { /* spacer cells */ }

.ja-ct-app .ja-ct-head .ja-sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-gray-6);
}

.ja-tg-cell {
  display: inline-flex; align-items: center; justify-content: center;
}

/* Workflow variant: 10-column layout */
.ja-ct-wf .ja-ct-head, .ja-ct-wf .ja-ct-row {
  grid-template-columns: 28px 56px 1.4fr 120px 130px 130px 70px 70px 1.4fr 96px;
  min-width: 1200px;
}
.ja-ct-drag {
  color: var(--ink-gray-3);
  font-size: 11px; line-height: 1;
  cursor: grab;
  user-select: none;
}
.ja-ct-drag:hover { color: var(--ink-gray-6); }
.ja-ct-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-gray-5) 50%), linear-gradient(135deg, var(--ink-gray-5) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.ja-ct-sla { display: inline-flex; align-items: center; gap: 4px; }
.ja-ct-num { width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.ja-ct-unit { width: 56px; padding-right: 22px; }
.ja-ct-bool { display: inline-flex; align-items: center; justify-content: center; }
.ja-ct-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }
.ja-ct-actions .rq-icon-btn:nth-child(1) svg { transform: rotate(180deg); }

/* ================ Screener fields ================ */
.ja-sc-head {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-gray-1);
  border: 1px solid var(--outline-gray-1);
  border-radius: 6px;
  margin-bottom: 10px;
}
.ja-sc-tpl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ja-sc-tpl-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5);
}
.ja-sc-tpl-select { width: 260px; max-width: 100%; padding-right: 22px; }
.ja-sc-summary {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--outline-gray-1);
}
.ja-sc-stat {
  display: inline-flex; flex-direction: column; gap: 2px;
  min-width: 86px;
}
.ja-sc-stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5);
}
.ja-sc-stat-value {
  font-size: 18px; font-weight: 600; color: var(--ink-gray-9);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ja-sc-stat-input .rq-input { width: 70px; background: var(--surface-white); }
.ja-sc-autoreject { margin-left: auto; }

/* Screener table layout: 9 columns */
.ja-ct-sc .ja-ct-head, .ja-ct-sc .ja-ct-row {
  grid-template-columns: 28px 60px 1.6fr 120px 140px 1.4fr 110px 76px 80px;
  min-width: 1240px;
  align-items: center;
}

/* Kind cell styling */
.ja-sc-kind-cell { display: inline-flex; }
.ja-sc-kind-select {
  font-weight: 500;
  padding-right: 22px;
}
.ja-sc-kind-select.is-pre {
  background-color: var(--surface-amber-1);
  border-color: var(--outline-amber-1);
  color: var(--ink-amber-3);
}
.ja-sc-kind-select.is-score {
  background-color: var(--surface-blue-1);
  color: var(--ink-blue-3);
}

/* Condition cell — op + value side by side */
.ja-sc-cond {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 6px;
}
.ja-sc-op { padding-right: 22px; font-size: 12px; color: var(--ink-gray-6); }

/* Score input + units */
.ja-sc-score-cell { display: inline-flex; align-items: center; }
.ja-sc-score-input { display: inline-flex; align-items: center; gap: 4px; }
.ja-sc-score-input .rq-input { width: 56px; text-align: right; }
.ja-sc-pts { font-size: 11px; color: var(--ink-gray-5); }
.ja-sc-reject {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--surface-red-2);
  color: var(--ink-red-3);
  border-radius: 4px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ja-sc-help {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--surface-blue-1);
  border: 1px solid var(--outline-blue-1);
  border-radius: 6px;
  font-size: 12px; color: var(--ink-gray-8); line-height: 1.5;
}
.ja-sc-help svg { color: var(--ink-blue-3); flex-shrink: 0; margin-top: 2px; }
.ja-sc-help strong { color: var(--ink-gray-9); font-weight: 600; }

/* Eligibility rules block inside Screener fields */
.ja-sc-elig { margin-top: 16px; }
.ja-sc-elig-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ja-sc-elig-title { font-size: 13px; font-weight: 600; color: var(--ink-gray-9); }
.ja-sc-elig-sub { font-size: 12px; color: var(--ink-gray-5); }

/* ================ JOB OPENING CARD GRID ================ */
.rq-op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.rq-op-card {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-2);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color 80ms, transform 120ms;
}
.rq-op-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent, var(--ink-gray-3));
}
.rq-op-card:hover { border-color: var(--outline-gray-3); transform: translateY(-1px); }
.rq-op-card.is-open    { --accent: var(--surface-green-3); }
.rq-op-card.is-draft   { --accent: var(--ink-amber-3); }
.rq-op-card.is-closed  { --accent: var(--surface-gray-5); }
.rq-op-card.is-onhold  { --accent: var(--ink-cyan-1); }
.rq-op-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-gray-5);
}
.rq-op-card-id {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-gray-7); letter-spacing: 0;
}
.rq-op-card-title {
  margin: 0;
  font-size: 15px; font-weight: 600;
  color: var(--ink-gray-9); letter-spacing: -0.005em;
  line-height: 1.3;
}
.rq-op-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: 12px; color: var(--ink-gray-6);
}
.rq-op-card-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.rq-op-card-meta-item svg { color: var(--ink-gray-5); }
.rq-op-card-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--outline-gray-1);
}
.rq-op-card-applicants {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-gray-7);
}
.rq-op-card-applicants strong {
  font-size: 14px; font-weight: 600;
  color: var(--ink-gray-9); font-variant-numeric: tabular-nums;
}
.rq-op-card-from {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-gray-5); letter-spacing: 0;
}

/* View toggle (cards vs list) */
.rq-view-toggle {
  display: inline-flex;
  border: 1px solid var(--outline-gray-2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-white);
}
.rq-view-toggle button {
  background: transparent; border: 0;
  padding: 6px 10px;
  font: inherit; font-size: 12px; color: var(--ink-gray-6);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.rq-view-toggle button.is-active {
  background: var(--surface-gray-2); color: var(--ink-gray-9);
}

/* ================ OPENINGS LIST — analytics view ================ */
.ol-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.ol-kpi {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.ol-kpi-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5);
}
.ol-kpi-value {
  font-size: 22px; font-weight: 600; color: var(--ink-gray-9);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.ol-kpi-sub { font-size: 11px; color: var(--ink-gray-5); }

.ol-subtabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--outline-gray-1);
  margin-bottom: 12px;
}
.ol-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  padding: 8px 12px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-gray-6); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ol-subtab:hover { color: var(--ink-gray-9); }
.ol-subtab.is-active {
  color: var(--ink-gray-9);
  border-bottom-color: var(--ink-gray-9);
}
.ol-subtab-count {
  font-size: 11px; color: var(--ink-gray-5);
  background: var(--surface-gray-2);
  padding: 1px 6px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.ol-subtab.is-active .ol-subtab-count {
  background: var(--ink-gray-9); color: var(--ink-white);
}

/* List itself */
.ol-list {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  overflow: hidden;
}
.ol-list-head, .ol-list-row {
  display: grid;
  grid-template-columns: 32px minmax(220px, 1.6fr) 100px 100px minmax(280px, 1.8fr) 110px 80px 130px 90px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
}
.ol-list-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-2);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.ol-list-row {
  border-bottom: 1px solid var(--outline-gray-1);
  cursor: pointer;
  transition: background 60ms;
}
.ol-list-row:last-child { border-bottom: 0; }
.ol-list-row:hover { background: var(--surface-gray-1); }

.ol-row-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ol-row-title-name {
  font-weight: 500; color: var(--ink-gray-9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ol-row-title-meta {
  font-size: 12px; color: var(--ink-gray-5);
  display: inline-flex; gap: 4px; align-items: center;
  flex-wrap: wrap;
}
.ol-sep { color: var(--ink-gray-3); }

.ol-applicants { display: inline-flex; align-items: baseline; gap: 4px; }
.ol-applicants strong { font-size: 16px; font-weight: 600; color: var(--ink-gray-9); font-variant-numeric: tabular-nums; }
.ol-applicants-sub { font-size: 11px; color: var(--ink-gray-5); }

/* Pipeline strip */
.ol-pipeline { display: flex; flex-direction: column; gap: 4px; }
.ol-pipeline-bar {
  display: flex;
  height: 8px;
  background: var(--surface-gray-2);
  border-radius: 99px;
  overflow: hidden;
}
.ol-pipeline-seg { display: inline-block; height: 100%; }
.ol-pipeline-seg.is-gray   { background: var(--surface-gray-5); }
.ol-pipeline-seg.is-blue   { background: var(--blue-400); }
.ol-pipeline-seg.is-cyan   { background: var(--cyan-500); }
.ol-pipeline-seg.is-amber  { background: var(--amber-400); }
.ol-pipeline-seg.is-green  { background: var(--green-500); }
.ol-pipeline-seg.is-red    { background: var(--red-400); }

.ol-pipeline-legend {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: var(--ink-gray-6);
}
.ol-pipeline-tick { display: inline-flex; align-items: center; gap: 3px; }
.ol-pipeline-dot {
  width: 6px; height: 6px; border-radius: 99px; display: inline-block; flex-shrink: 0;
}
.ol-pipeline-dot.is-gray   { background: var(--surface-gray-5); }
.ol-pipeline-dot.is-blue   { background: var(--blue-400); }
.ol-pipeline-dot.is-cyan   { background: var(--cyan-500); }
.ol-pipeline-dot.is-amber  { background: var(--amber-400); }
.ol-pipeline-dot.is-green  { background: var(--green-500); }
.ol-pipeline-dot.is-red    { background: var(--red-400); }
.ol-pipeline-tick-n { font-weight: 600; color: var(--ink-gray-9); font-variant-numeric: tabular-nums; }
.ol-pipeline-tick-l { color: var(--ink-gray-6); }

.ol-iv-cell { display: inline-flex; }
.ol-iv-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--surface-cyan-1);
  color: var(--ink-blue-3);
  border-radius: 4px;
  font-size: 12px;
}
.ol-iv-chip strong { font-weight: 600; }
.ol-empty-dash { color: var(--ink-gray-3); font-size: 12px; }

.ol-age strong { font-size: 13px; color: var(--ink-gray-9); font-variant-numeric: tabular-nums; }
.ol-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-gray-8); }

.ol-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }

/* Interviews table */
.ol-iv-list {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  overflow: hidden;
}
.ol-iv-head, .ol-iv-row {
  display: grid;
  grid-template-columns: 130px minmax(200px, 1.4fr) minmax(200px, 1.4fr) 130px 100px minmax(200px, 1.2fr) 70px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
}
.ol-iv-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-2);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.ol-iv-row {
  border-bottom: 1px solid var(--outline-gray-1);
  cursor: default;
}
.ol-iv-row:last-child { border-bottom: 0; }
.ol-iv-row:hover { background: var(--surface-gray-1); }

.ol-iv-when { display: flex; flex-direction: column; }
.ol-iv-day  { font-weight: 600; color: var(--ink-gray-9); font-size: 13px; }
.ol-iv-time { font-size: 11px; color: var(--ink-gray-5); }

.ol-iv-cand { display: inline-flex; align-items: center; gap: 8px; }
.ol-iv-cand-name { display: block; font-weight: 500; color: var(--ink-gray-9); }
.ol-iv-cand-id { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-gray-5); }

.ol-iv-opening { cursor: pointer; }
.ol-iv-opening-title { display: block; font-weight: 500; color: var(--ink-blue-3); }
.ol-iv-opening:hover .ol-iv-opening-title { text-decoration: underline; }

.ol-iv-mode { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-gray-7); }
.ol-iv-mode svg { color: var(--ink-gray-5); }

.ol-iv-people { display: inline-flex; align-items: center; gap: 4px; }
.ol-iv-people .rq-avatar { margin-right: -4px; border: 2px solid var(--surface-white); }
.ol-iv-people-names { margin-left: 8px; font-size: 12px; color: var(--ink-gray-8); }

/* Applicants view */
.ol-applicants-sublabel {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 6px;
  font-size: 13px; color: var(--ink-gray-6);
}
.ol-pipeline-band {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.ol-app-list {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  overflow: hidden;
}
.ol-app-head, .ol-app-row {
  display: grid;
  grid-template-columns: 32px minmax(220px, 1.6fr) 130px 90px 130px 110px 110px 110px 80px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
}
.ol-app-head {
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-2);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-gray-5);
}
.ol-app-row {
  border-bottom: 1px solid var(--outline-gray-1);
}
.ol-app-row:last-child { border-bottom: 0; }
.ol-app-row:hover { background: var(--surface-gray-1); }

.ol-app-cand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ol-app-name { display: block; font-weight: 500; color: var(--ink-gray-9); }
.ol-app-mail { display: block; font-size: 11px; color: var(--ink-gray-5); }

.ol-app-exp { color: var(--ink-gray-8); font-variant-numeric: tabular-nums; }
.ol-app-score { display: inline-flex; align-items: center; gap: 6px; }
.ol-score-bar {
  width: 60px; height: 6px;
  background: var(--surface-gray-2);
  border-radius: 99px;
  overflow: hidden;
}
.ol-score-bar-fill {
  display: block; height: 100%;
  background: var(--blue-400);
}
.ol-app-score strong { font-size: 13px; font-weight: 600; color: var(--ink-gray-9); font-variant-numeric: tabular-nums; }
.ol-app-src { font-size: 12px; color: var(--ink-gray-7); }
.ol-app-date { font-size: 12px; color: var(--ink-gray-7); font-variant-numeric: tabular-nums; }
.ol-app-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-gray-8); }

.rq-conn-section-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: 0;
  padding: 14px 16px 8px;
  cursor: pointer;
  text-align: left;
}
.rq-conn-section-title {
  flex: 1;
  font-size: 14px; font-weight: 600; color: var(--ink-gray-9);
  letter-spacing: 0.01em;
}
.rq-conn-section-caret {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-gray-5);
  transition: transform 120ms ease;
}
.rq-conn-section-caret.is-collapsed { transform: rotate(-90deg); }

.rq-conn-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 16px 16px;
}
.rq-conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: var(--surface-gray-2); border: 0;
  border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--ink-gray-8);
  cursor: pointer;
  transition: background 80ms;
}
.rq-conn-pill:hover { background: var(--surface-gray-3); color: var(--ink-gray-9); }
.rq-conn-pill svg { color: var(--ink-gray-6); }
.rq-conn-pill-count {
  font-size: 11px; color: var(--ink-gray-5);
  background: var(--surface-white); padding: 1px 6px;
  border-radius: 99px; margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.rq-conn-pill-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--surface-gray-2); border: 0; border-radius: 6px;
  color: var(--ink-gray-6); cursor: pointer;
}
.rq-conn-pill-add:hover { background: var(--surface-gray-3); color: var(--ink-gray-9); }

.rq-conn-detail {
  border-top: 1px solid var(--outline-gray-1);
  padding: 12px 16px 14px;
}
.rq-conn-detail-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5);
  margin-bottom: 8px;
}
.rq-conn-list { display: flex; flex-direction: column; gap: 6px; }
.rq-conn-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-gray-1); border-radius: 6px;
  font-size: 13px; color: var(--ink-gray-8);
}
.rq-conn-row svg { color: var(--ink-gray-6); }
.rq-conn-row .rq-conn-id {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-gray-6); letter-spacing: 0;
}
.rq-conn-row-title { font-weight: 500; color: var(--ink-gray-9); }
.rq-conn-row-meta { font-size: 12px; color: var(--ink-gray-6); }

/* ================ WIZARD ================ */
.wz-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.36);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 24px;
  overflow-y: auto;
  animation: wz-fade 120ms ease-out;
}
@keyframes wz-fade { from { opacity: 0; } }

.wz-shell {
  background: var(--surface-white);
  border-radius: 12px;
  box-shadow: var(--shadow-2xl);
  width: 100%; max-width: 880px;
  overflow: hidden;
  animation: wz-pop 160ms ease-out;
}
@keyframes wz-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.wz-head {
  display: flex; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--outline-gray-1);
}
.wz-title {
  margin: 0; flex: 1;
  font-size: 16px; font-weight: 600; color: var(--ink-gray-9);
  letter-spacing: 0.005em;
}

/* Stepper */
.wz-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-gray-1);
  border-bottom: 1px solid var(--outline-gray-1);
}
.wz-step {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 12px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: 13px; color: var(--ink-gray-5);
  cursor: not-allowed;
  position: relative;
  text-align: center;
}
.wz-step.is-done { cursor: pointer; color: var(--ink-gray-7); }
.wz-step.is-done:hover { color: var(--ink-gray-9); }
.wz-step.is-active {
  color: var(--ink-gray-9); font-weight: 600;
  border-bottom-color: var(--ink-gray-9);
  background: var(--surface-white);
}
.wz-step-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: var(--surface-gray-3); color: var(--ink-gray-6);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wz-step.is-active .wz-step-num {
  background: var(--ink-gray-9); color: var(--ink-white);
}
.wz-step.is-done .wz-step-num {
  background: var(--surface-green-3); color: var(--ink-white);
}

/* Body */
.wz-body {
  padding: 20px 20px 22px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  background: var(--surface-gray-1);
}
.wz-card {
  background: var(--surface-white);
  border: 1px solid var(--outline-gray-1);
  border-radius: 8px;
  padding: 20px 22px 18px;
}
.wz-card-title {
  margin: 0 0 16px 0;
  font-size: 16px; font-weight: 600; color: var(--ink-gray-9);
  letter-spacing: -0.005em;
}

.wz-row { display: grid; gap: 14px; margin-bottom: 12px; }
.wz-row-2 { grid-template-columns: 1fr 1fr; }
.wz-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.wz-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 800px) {
  .wz-row-4, .wz-row-3 { grid-template-columns: 1fr 1fr; }
  .wz-row-2 { grid-template-columns: 1fr; }
}

.wz-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5);
  margin: 8px 0 8px;
}

.wz-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 14px;
}
.wz-banner > span:nth-child(2) { flex: 1; }
.wz-banner-warn {
  background: var(--surface-amber-1);
  border: 1px solid var(--outline-amber-1);
  color: var(--ink-gray-8);
}
.wz-banner-warn svg { color: var(--ink-amber-3); }
.wz-banner-info {
  background: var(--surface-blue-1);
  border: 1px solid var(--outline-blue-1);
  color: var(--ink-blue-3);
  margin-top: 14px;
}
.wz-banner-info svg { color: var(--ink-blue-3); }

.wz-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.wz-field-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wz-allowed {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ink-gray-7);
}
.wz-allowed strong { color: var(--ink-gray-9); font-weight: 600; }
.wz-allowed svg { color: var(--ink-gray-5); }

.wz-radio-group { display: flex; gap: 24px; padding: 4px 0; }
.wz-radio {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: var(--ink-gray-8);
}
.wz-radio input { display: none; }
.wz-radio-dot {
  width: 16px; height: 16px;
  border-radius: 99px;
  border: 1.5px solid var(--outline-gray-3);
  background: var(--surface-white);
  position: relative;
  transition: border-color 80ms;
}
.wz-radio.is-checked .wz-radio-dot { border-color: var(--blue-500); }
.wz-radio.is-checked .wz-radio-dot::after {
  content: ''; position: absolute;
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--blue-500);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.wz-radio.is-checked { color: var(--ink-gray-9); font-weight: 500; }

.wz-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--outline-gray-1);
}

.wz-foot-card {
  display: flex; align-items: center; gap: 8px;
  position: sticky; bottom: 0;
  box-shadow: 0 -4px 12px -8px rgba(0,0,0,0.15);
}

/* Right sidebar */
.rq-side {
  border-left: 1px solid var(--outline-gray-1);
  background: var(--surface-white);
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0;
}
.rq-side-head {
  display: flex; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--outline-gray-1);
  font-size: 12px; font-weight: 500; color: var(--ink-gray-7);
  letter-spacing: 0.02em;
}
.rq-side-head > span { flex: 1; }
.rq-side-block {
  padding: 14px 16px;
  border-bottom: 1px solid var(--outline-gray-1);
}
.rq-side-block:last-child { border-bottom: 0; }
.rq-side-block-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-gray-5);
  margin-bottom: 10px;
}
.rq-side-people { display: flex; flex-direction: column; gap: 8px; }
.rq-side-person {
  display: flex; align-items: center; gap: 8px;
}
.rq-side-person-name { font-size: 13px; font-weight: 500; color: var(--ink-gray-9); }
.rq-side-person-role { font-size: 11px; color: var(--ink-gray-5); }

.rq-side-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.rq-stat {
  background: var(--surface-gray-1);
  border-radius: 6px;
  padding: 10px 12px;
}
.rq-stat-value { font-size: 18px; font-weight: 600; color: var(--ink-gray-9); line-height: 1.1; }
.rq-stat.is-small .rq-stat-value { font-size: 13px; }
.rq-stat-label { font-size: 11px; color: var(--ink-gray-5); margin-top: 2px; letter-spacing: 0.02em; }

.rq-side-activity { display: flex; flex-direction: column; gap: 12px; }
.rq-act { display: flex; gap: 8px; }
.rq-act-body { flex: 1; min-width: 0; }
.rq-act-text { font-size: 12px; color: var(--ink-gray-7); line-height: 1.4; }
.rq-act-text strong { color: var(--ink-gray-9); font-weight: 500; }
.rq-act-target {
  background: var(--surface-gray-2); padding: 1px 5px;
  border-radius: 3px; font-size: 11px;
}
.rq-act-when { font-size: 11px; color: var(--ink-gray-5); margin-top: 2px; }

.rq-side-comment .rq-input.rq-textarea { background: var(--surface-gray-1); }
.rq-side-comment-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }

/* Sidebar (left nav) layout overrides */
.fui-sidebar { height: 100vh; overflow-y: auto; }

.rq-empty-state {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-gray-5);
}

/* Scrollbar polish */
.rq-form::-webkit-scrollbar, .rq-side::-webkit-scrollbar, .rq-page::-webkit-scrollbar { width: 10px; height: 10px; }
.rq-form::-webkit-scrollbar-thumb, .rq-side::-webkit-scrollbar-thumb, .rq-page::-webkit-scrollbar-thumb {
  background: var(--outline-gray-2); border-radius: 99px; border: 2px solid var(--surface-white);
}
.rq-form::-webkit-scrollbar-thumb:hover { background: var(--outline-gray-3); }
.rq-form::-webkit-scrollbar-track, .rq-side::-webkit-scrollbar-track, .rq-page::-webkit-scrollbar-track { background: transparent; }