/* ═══════════════════════════════════════════════════════════════════════════
   Saksoft Beacon — App CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables (light mode) ─────────────────────────────────────────── */
:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #eaf0f8;
  --border: #d6dfeb;
  --border-strong: #b1bfd2;
  --text: #0e1a2c;
  --text-soft: #46556a;
  --text-faint: #5f6f82;
  --primary: #1d4ed8;
  --primary-soft: #eff6ff;
  --primary-hover: #1e40af;
  --danger: #b42626;
  --danger-soft: #fff0f0;
  --warn: #92400e;
  --warn-soft: #fffbeb;
  --success: #0a6a31;
  --success-soft: #f0fdf4;
  --purple: #7c3aed;
  --purple-soft: #f0eaff;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow: 0 2px 8px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.13);
  --nav-h: 58px;
  --transition: 150ms ease;
  color-scheme: light;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #0c1220;
  --surface: #141e30;
  --surface-2: #1c2a3f;
  --border: #253348;
  --border-strong: #3a4e6a;
  --text: #e8edf5;
  --text-soft: #b4c3d8;
  --text-faint: #7990ae;
  --primary: #60a5fa;
  --primary-soft: #1e2d4a;
  --primary-hover: #93c5fd;
  --danger: #f87171;
  --danger-soft: #2d1414;
  --warn: #fbbf24;
  --warn-soft: #2d2014;
  --success: #34d399;
  --success-soft: #0f2d1f;
  --purple: #a78bfa;
  --purple-soft: #1e1230;
  color-scheme: dark;
}

/* ── Dark mode component overrides ──────────────────────────────────────── */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover { color: var(--bg); }
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-danger:hover  { color: var(--bg); }
[data-theme="dark"] .btn:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }

/* ── Material Symbols Outlined (self-hosted variable font) ──────────────────── */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2')
       format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ── Top navigation bar ──────────────────────────────────────────────────── */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px;
}
.topnav-brand {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  margin-right: 32px;
  white-space: nowrap;
}
.topnav-brand:hover { text-decoration: none; }
.topnav-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
.topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.topnav-link {
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.topnav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.topnav-link.active { background: var(--primary-soft); color: var(--primary); }
.topnav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Avatar dropdown ─────────────────────────────────────────────────────── */
.avatar-menu { position: relative; }
.avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-soft);
  transition: background var(--transition);
}
.avatar-btn:hover { background: var(--surface-2); }
.avatar-circle {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 180px;
  z-index: 200;
}
.dropdown-menu a, .dropdown-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: .85rem;
  color: var(--text-soft);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.dropdown-menu a:hover, .dropdown-menu button:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.dropdown-divider { border-top: 1px solid var(--border); margin: 4px 0; }
[x-cloak] { display: none !important; }

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.theme-btn:hover { background: var(--surface-2); }
.theme-icon { width: 18px; height: 18px; pointer-events: none; flex-shrink: 0; }

/* ── Page layout ─────────────────────────────────────────────────────────── */
.page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.page-subtitle {
  font-size: .875rem;
  color: var(--text-faint);
  margin-top: 2px;
}
.page-header form { display: contents; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-body { padding: 20px; }
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title { font-size: .95rem; font-weight: 600; }

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-label { font-size: .8rem; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--text); }
.stat-sub { font-size: .8rem; color: var(--text-soft); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; text-align: left; font-size: .875rem; }
th { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); border-bottom: 1px solid var(--border); background: var(--surface-2); }
td { border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }
.table-filename { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-success  { background: var(--success-soft);  color: var(--success); }
.badge-danger   { background: var(--danger-soft);   color: var(--danger); }
.badge-warn     { background: var(--warn-soft);     color: var(--warn); }
.badge-neutral  { background: var(--surface-2);     color: var(--text-soft); }
.badge-primary  { background: var(--primary-soft);  color: var(--primary); }
.badge-sm { padding: 1px 7px; font-size: .7rem; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background var(--transition), opacity var(--transition), color var(--transition), box-shadow var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
}
.btn-primary  { background: var(--primary);   color: #fff; }
.btn-primary:hover  { background: var(--primary-hover); color: #fff; }
.btn-secondary { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger   { background: var(--danger);    color: #fff; }
.btn-danger:hover   { opacity: .85; }
.btn-sm { padding: 5px 11px; font-size: .8rem; min-height: 32px; }
.btn-xs { padding: 3px 8px; font-size: .75rem; min-height: 24px; }
.btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
label { font-size: .85rem; font-weight: 500; color: var(--text-soft); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: .875rem;
  font-family: var(--sans);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
  background: var(--surface);
  color: var(--text);
}
textarea { resize: vertical; min-height: 80px; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease 0s;
}
.form-hint { font-size: .78rem; color: var(--text-faint); }
.form-error { font-size: .8rem; color: var(--danger); }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-bar input[type="text"], .filter-bar select {
  width: auto;
  min-width: 180px;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 0 4px;
}
.pag-btn {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-soft);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  transition: background var(--transition), color var(--transition);
  padding: 0 10px;
}
.pag-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.pag-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pag-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pag-info { font-size: .8rem; color: var(--text-faint); padding: 0 8px; }

/* ── Alerts & banners ────────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .875rem;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-warn    { background: var(--warn-soft);    color: var(--warn); border: 1px solid #fde68a; }
.alert-success { background: var(--success-soft); color: var(--success); border: 1px solid #bbf7d0; }
.alert-danger  { background: var(--danger-soft);  color: var(--danger); border: 1px solid #fca5a5; }
.alert-info    { background: var(--primary-soft); color: var(--primary); border: 1px solid #bfdbfe; }
.decision-banner {
  background: var(--warn-soft);
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: .82rem;
  color: var(--warn);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Score ring ──────────────────────────────────────────────────────────── */
.score-ring-lg { width: 88px; height: 88px; flex-shrink: 0; }
.score-ring-lg svg { width: 100%; height: 100%; }

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.progress-label { font-size: .8rem; color: var(--text-soft); min-width: 90px; }
.progress-track {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
  transition: width .4s ease;
}
.progress-fill.fill-success { background: var(--success); }
.progress-fill.fill-warn    { background: #f59e0b; }
.progress-fill.fill-danger  { background: var(--danger); }
.progress-val { font-size: .8rem; font-weight: 600; color: var(--text); min-width: 36px; text-align: right; }

/* ── Skills chips ────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
}
.chip-match   { background: var(--success-soft); color: var(--success); border: 1px solid #bbf7d0; }
.chip-missing { background: var(--danger-soft);  color: var(--danger);  border: 1px solid #fca5a5; }
.chip-pref    { background: var(--primary-soft); color: var(--primary); border: 1px solid #bfdbfe; }
.chip-neutral { background: var(--surface-2);    color: var(--text-faint); border: 1px solid var(--border); }
.chip .material-symbols-outlined { font-size: inherit; line-height: 1; }

/* ── Results two-panel layout ────────────────────────────────────────────── */
.results-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  height: calc(100vh - var(--nav-h) - 48px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.results-list-panel {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  height: 100%;
}
.results-detail-panel {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  height: 100%;
  padding: 0;
}

/* ── Candidates two-panel layout (list left / preview right) ─────────────── */
.candidates-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 0;
  height: calc(100vh - var(--nav-h) - 210px);
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* min-width: 0 overrides a grid item's default "never shrink below content"
   behavior — without it, anything wide nested inside (e.g. the session
   history table in the detail panel below) drags the whole panel, and the
   page, past the viewport edge instead of scrolling internally. Both panels
   need it; only the list panel had it before. */
.candidates-list-panel {
  overflow: auto;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
/* The panel's direct child (either the candidates .card or the empty-state
   .card) stretches to fill the panel instead of sitting at content height
   with a visible dead gap below it. min-height: 0 is required so the flex
   item can still shrink and let the panel's own overflow:auto scroll a long
   candidate table — without it, flex items refuse to shrink below their
   content size by default. */
.candidates-list-panel > .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.candidates-list-panel table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.candidates-detail-panel {
  border-left: 1px solid var(--border);
  overflow-y: auto;
  height: 100%;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  container-type: inline-size;
}
.candidates-detail-panel .card { border: 0; box-shadow: none; margin: 0; }
.candidates-detail-panel > .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.candidates-detail-panel .table-wrap { overflow-x: visible; }
.candidates-detail-panel .table-wrap table { width: 100%; min-width: 0; }
.preview-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@container (min-width: 520px) {
  .preview-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Session History inside the preview panel: a real <table> renders once the
   panel has room for it; below that, a separate stacked-row block renders
   instead. Two sibling blocks (not one table with display hacks) so each
   stays simple, predictable markup rather than fighting table layout rules. */
.session-history-wide { display: none; }
.session-history-narrow { display: flex; flex-direction: column; }
.session-history-narrow .shr-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.session-history-narrow .shr-row:last-child { border-bottom: none; }
.session-history-narrow .shr-primary { display: block; margin-bottom: 4px; }
.session-history-narrow .shr-meta { display: flex; gap: 10px; flex-wrap: wrap; }
@container (min-width: 480px) {
  .session-history-wide { display: block; }
  .session-history-narrow { display: none; }
}

/* ── Ranked candidate card (left panel) ──────────────────────────────────── */
.rank-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}
.rank-card:hover { background: var(--surface-2); }
.rank-card.selected { background: var(--primary-soft); border-left: 3px solid var(--primary); }
.rank-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-faint);
  min-width: 28px;
  text-align: center;
}
.rank-num.rank-1 { color: #ca8a04; }
.rank-num.rank-2 { color: var(--text-soft); }
.rank-num.rank-3 { color: #b45309; }
.rank-card-info { flex: 1; min-width: 0; }
.rank-filename { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-meta { font-size: .78rem; color: var(--text-faint); margin-top: 2px; }
.rank-score {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
}
.score-high { color: var(--success); }
.score-mid  { color: var(--warn); }
.score-low  { color: var(--danger); }

/* ── Candidate detail panel ──────────────────────────────────────────────── */
.detail-panel-inner { padding: 24px; }
.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.detail-title { font-size: 1.1rem; font-weight: 700; }
.detail-section { margin-bottom: 20px; }
.detail-section-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.rank-callout {
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
  padding: 10px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .875rem;
  color: var(--text-soft);
  margin-bottom: 12px;
}
.strength-list, .watch-list { list-style: none; padding: 0; }
.strength-list li, .watch-list li {
  padding: 6px 0 6px 20px;
  font-size: .875rem;
  position: relative;
}
.strength-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.watch-list li::before { content: "!"; position: absolute; left: 0; color: var(--warn); font-weight: 700; }
.interview-q {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .875rem;
  margin-bottom: 8px;
}
.interview-q::before { content: "Q: "; font-weight: 600; color: var(--primary); }
.low-confidence-banner {
  background: var(--warn-soft);
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: .8rem;
  color: var(--warn);
  margin-bottom: 12px;
}
.injection-banner {
  background: var(--danger-soft);
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: .8rem;
  color: var(--danger);
  margin-bottom: 12px;
}

/* ── Shortlist action buttons ────────────────────────────────────────────── */
.shortlist-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-shortlist { border: none; }
.btn-shortlist-yes     { background: var(--success-soft); color: var(--success); border: 1px solid #bbf7d0; }
.btn-shortlist-yes:hover { background: #dcfce7; }
.btn-shortlist-hold    { background: var(--warn-soft);    color: var(--warn);    border: 1px solid #fde68a; }
.btn-shortlist-hold:hover { background: #fef3c7; }
.btn-shortlist-reject  { background: var(--danger-soft);  color: var(--danger);  border: 1px solid #fca5a5; }
.btn-shortlist-reject:hover { background: #fee2e2; }

/* ── Upload zone ─────────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.upload-zone input[type="file"] { display: none; }
.upload-zone-icon { font-size: 2rem; margin-bottom: 8px; }
.upload-zone-label { font-size: .9rem; font-weight: 500; color: var(--text-soft); }
.upload-zone-hint  { font-size: .8rem; color: var(--text-faint); margin-top: 4px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  padding: 4px;
}
.modal-close:hover { color: var(--text); }

/* ── Modal tabs ──────────────────────────────────────────────────────────── */
.modal-tab {
  padding: 10px 16px;
  font-size: .875rem;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text-soft);
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.modal-tab[aria-selected="true"] {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.modal-tab:hover:not([aria-selected="true"]) { color: var(--text); }

/* ── Progress bar (session processing) ──────────────────────────────────── */
.session-progress-wrap { margin: 16px 0; }
.session-progress-track {
  height: 10px;
  background: var(--surface-2);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.session-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 5px;
  transition: width .5s ease;
}
.session-progress-label {
  font-size: .82rem;
  color: var(--text-faint);
  margin-top: 6px;
  text-align: center;
}

/* ── Analytics ───────────────────────────────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.analytics-chart-card { overflow: hidden; }
.analytics-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.analytics-tab {
  padding: 8px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--text-soft);
  font-size: .9rem;
  font-weight: 500;
  transition: color var(--transition), border-color var(--transition);
  outline: none;
}
.analytics-tab:hover { color: var(--text); }
.analytics-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.analytics-tab:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 2px; }
.chart-container { position: relative; height: 240px; }
#skills-network { width: 100%; height: 650px; border-radius: var(--radius); background: var(--surface-2); }

/* ── Admin tabs ──────────────────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.admin-tab {
  padding: 10px 18px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.admin-tab:hover { color: var(--text); text-decoration: none; }
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-soft);
  /* display:flex + flex:1 only take effect inside a flex-column parent that
     hands this element real extra height (the candidates two-panel layout
     below) — everywhere else .empty-state is used, flex is simply ignored
     and this renders exactly as the block/text-align version did before. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.empty-state-icon { font-size: 2.5rem; margin-bottom: 12px; color: var(--border-strong); }
.empty-state-title { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state-desc { font-size: .875rem; color: var(--text-faint); margin-bottom: 18px; }

/* ── Toast notifications ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 12px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
  font-weight: 500;
  animation: slideIn .25s ease;
  min-width: 220px;
  max-width: 340px;
}
.toast-success { background: var(--success); color: #fff; }
.toast-danger  { background: var(--danger);  color: #fff; }
.toast-warn    { background: var(--warn);    color: #fff; }
.toast-info    { background: var(--primary); color: #fff; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Checkbox hack ───────────────────────────────────────────────────────── */
.cb-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
input[type="checkbox"]:not(.toggle-switch) {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Radar chart container ───────────────────────────────────────────────── */
.radar-wrap { position: relative; height: 260px; max-width: 320px; margin: 0 auto; }

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
}
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-title { font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 4px; }
.login-sub   { font-size: .85rem; color: var(--text-faint); text-align: center; }
.pwd-wrapper { position: relative; display: block; }
.pwd-wrapper input { padding-right: 44px; }
/* Suppress native Chrome/Edge password-reveal buttons to avoid double icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
.pwd-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  /* WCAG 2.2 AA: minimum 24×24px touch target; 36×36px for comfort */
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  border-radius: var(--radius);
  transition: color var(--transition);
  padding: 0;
}
.pwd-toggle:hover { color: var(--text); }
.pwd-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.eye-icon { width: 18px; height: 18px; pointer-events: none; display: block; flex-shrink: 0; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.text-sm  { font-size: .875rem; }
.text-xs  { font-size: .78rem; }
.text-soft  { color: var(--text-soft); }
.text-faint { color: var(--text-faint); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-full { width: 100%; }

/* ── HTMX loading indicator ──────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .results-layout { grid-template-columns: 1fr; height: auto; }
  .results-list-panel { height: 300px; border-right: none; border-bottom: 1px solid var(--border); }
  .results-detail-panel { height: auto; min-height: 400px; }
  .candidates-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .candidates-list-panel { max-height: 420px; }
  .candidates-detail-panel { border-left: 0; border-top: 1px solid var(--border); height: auto; min-height: 360px; }
  .topnav-links { display: none; }
}

/* ── Chart download button ───────────────────────────────────────────────── */
.chart-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.chart-dl-btn:hover { color: var(--text); background: var(--surface-2); }

/* ── Print view ──────────────────────────────────────────────────────────── */
@media print {
  .topnav,
  .page-header .flex.gap-2,
  #bulk-open-btn, #compare-btn, #bulk-form,
  #sort-select, #shortlist-select,
  #min-score, label:has(#min-score),
  .results-list-panel { display: none !important; }
  .results-layout    { display: block !important; }
  .results-detail-panel { width: 100% !important; overflow: visible !important; }
  .detail-panel-inner { break-inside: avoid; }
  a[href]::after { content: none !important; }
  body { background: #fff !important; color: #000 !important; }
}