/* ================================================================
   HRex Design System — Direction A: Systematic/Linear
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ── Tokens: Light ──────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:             #f9f9f9;
  --surface:        #ffffff;
  --surface-raised: #f4f4f4;

  /* Borders */
  --border:        #e5e5e5;
  --border-strong: #d1d1d1;
  --border-input:  #d1d1d1;

  /* Text */
  --text:       #171717;
  --text-muted: #525252;
  --text-dim:   #a3a3a3;

  /* Accent — Indigo */
  --accent:        oklch(50% 0.21 260);
  --accent-hover:  oklch(44% 0.21 260);
  --accent-fg:     #ffffff;
  --accent-subtle: oklch(97% 0.04 260);

  /* Functional */
  --success:    oklch(44% 0.15 145);
  --success-bg: oklch(97% 0.03 145);
  --success-fg: oklch(27% 0.10 145);

  --danger:    oklch(47% 0.19 25);
  --danger-bg: oklch(97% 0.03 25);
  --danger-fg: oklch(30% 0.13 25);

  --warning:    oklch(54% 0.14 75);
  --warning-bg: oklch(97% 0.03 75);
  --warning-fg: oklch(35% 0.10 75);

  --info:    oklch(52% 0.15 240);
  --info-bg: oklch(97% 0.03 240);
  --info-fg: oklch(33% 0.11 240);

  /* Derived (used inside index.html) */
  --input-bg:           #ffffff;
  --th-bg:              var(--surface-raised);
  --th-text:            var(--text-muted);
  --row-hover:          #f5f5f5;
  --row-active:         var(--accent-subtle);
  --transcript-bg:      var(--surface-raised);
  --answer-item-bg:     var(--surface-raised);
  --answer-item-border: var(--border);
  --msg-in-bg:          var(--surface-raised);
  --msg-in-text:        var(--text);
  --social-btn-bg:      var(--surface-raised);
  --social-btn-hover:   #e8e8e8;
  --tab-border:         var(--border);
  --tab-text:           var(--text-muted);
  --panel-header:       var(--text-dim);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Sizing */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   20px;

  /* Radii */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-full: 999px;
}

/* ── Tokens: Dark ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #0a0a0a;
  --surface:        #171717;
  --surface-raised: #1f1f1f;

  --border:        #292929;
  --border-strong: #404040;
  --border-input:  #3d3d3d;

  --text:       #f5f5f5;
  --text-muted: #a3a3a3;
  --text-dim:   #525252;

  --accent:        oklch(68% 0.21 260);
  --accent-hover:  oklch(74% 0.21 260);
  --accent-fg:     #ffffff;
  --accent-subtle: oklch(18% 0.08 260);

  --success:    oklch(65% 0.15 145);
  --success-bg: oklch(14% 0.05 145);
  --success-fg: oklch(75% 0.13 145);

  --danger:    oklch(65% 0.19 25);
  --danger-bg: oklch(14% 0.06 25);
  --danger-fg: oklch(75% 0.15 25);

  --warning:    oklch(72% 0.14 75);
  --warning-bg: oklch(14% 0.05 75);
  --warning-fg: oklch(80% 0.12 75);

  --info:    oklch(68% 0.15 240);
  --info-bg: oklch(14% 0.05 240);
  --info-fg: oklch(78% 0.13 240);

  --input-bg:           #1f1f1f;
  --th-bg:              var(--surface-raised);
  --th-text:            var(--text-dim);
  --row-hover:          #1f1f1f;
  --row-active:         var(--accent-subtle);
  --transcript-bg:      var(--surface-raised);
  --answer-item-bg:     var(--surface-raised);
  --answer-item-border: var(--border);
  --msg-in-bg:          var(--surface-raised);
  --msg-in-text:        var(--text);
  --social-btn-bg:      var(--surface-raised);
  --social-btn-hover:   #2a2a2a;
  --tab-border:         var(--border);
  --tab-text:           var(--text-muted);
  --panel-header:       var(--text-dim);
}

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ── Top nav ────────────────────────────────────────────────────── */
.top {
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.nav-link:hover {
  background: var(--surface-raised);
  color: var(--text);
}
.nav-link.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ── Theme toggle ───────────────────────────────────────────────── */
.theme-toggle { display: flex; gap: 2px; margin-left: auto; }
.theme-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-sans);
}
.theme-btn:hover { color: var(--text-muted); background: var(--surface-raised); }
.theme-btn.active {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-raised);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  line-height: 1.25;
  transition: opacity 0.12s;
  white-space: nowrap;
}
.btn:hover { opacity: 0.82; }

.btn-primary   { background: var(--accent);      color: var(--accent-fg);   border-color: var(--accent); }
.btn-danger    { background: var(--danger-bg);   color: var(--danger-fg);   border-color: var(--danger); }
.btn-success   { background: var(--success-bg);  color: var(--success-fg);  border-color: var(--success); }
.btn-secondary { background: var(--surface);     color: var(--text-muted);  border-color: var(--border-strong); }
.btn-warning   { background: var(--warning-bg);  color: var(--warning-fg);  border-color: var(--warning); }

/* Legacy aliases */
.btn-invite     { background: var(--accent);     color: var(--accent-fg);   border-color: var(--accent); }
.btn-test       { background: var(--success-bg); color: var(--success-fg);  border-color: var(--success); }
.btn-reject     { background: var(--danger-bg);  color: var(--danger-fg);   border-color: var(--danger); }
.btn-clarify    { background: var(--warning-bg); color: var(--warning-fg);  border-color: var(--warning); }
.btn-reschedule { background: var(--warning-bg); color: var(--warning-fg);  border-color: var(--warning); }
.btn-delete     { background: var(--surface);    color: var(--text-muted);  border-color: var(--border-strong); }
.btn-clarify-send { background: var(--surface);  color: var(--text-muted);  border-color: var(--border-strong); }
.btn-block      { background: var(--danger-bg);  color: var(--danger-fg);   border-color: var(--danger); }
.btn-unblock    { background: var(--success-bg); color: var(--success-fg);  border-color: var(--success); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}
.shortlist       { background: var(--success-bg); color: var(--success-fg); }
.test_sent       { background: var(--info-bg);    color: var(--info-fg); }
.test_received   { background: var(--success-bg); color: var(--success-fg); font-weight: 600; }
.final           { background: var(--warning-bg); color: var(--warning-fg); }
.waiting_slots   { background: var(--warning-bg); color: var(--warning-fg); }
.rejected_filter { background: var(--danger-bg);  color: var(--danger-fg); }
.rejected_admin  { background: var(--danger-bg);  color: var(--danger-fg); }
.hired           { background: var(--success-bg); color: var(--success-fg); font-weight: 600; }
.in_progress     { background: var(--surface-raised); color: var(--text-muted); }

/* ── AI score badges ─────────────────────────────────────────────── */
.ai-score-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  vertical-align: middle;
  min-width: 32px;
  text-align: center;
}
.score-green  { background: var(--success-bg); color: var(--success-fg); }
.score-yellow { background: var(--warning-bg); color: var(--warning-fg); }
.score-red    { background: var(--danger-bg);  color: var(--danger-fg); }
.score-none   { background: var(--surface-raised); color: var(--text-dim); }

/* ── Banners ────────────────────────────────────────────────────── */
.banner {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 14px;
  margin: 0 0 12px;
  border: 1px solid;
  border-left-width: 3px;
  font-size: var(--text-base);
}
.banner-warning      { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-fg); }
.banner-success      { background: var(--success-bg); border-color: var(--success); color: var(--success-fg); }
.banner-error        { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger-fg); }
.banner-info         { background: var(--info-bg);    border-color: var(--info);    color: var(--info-fg); }
.banner-test-received { background: var(--success-bg); border-color: var(--success); color: var(--success-fg); }
.banner-ai           { background: var(--surface-raised); border-color: var(--border-strong); color: var(--text-muted); }

/* ── Table ──────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 0;
  border: 1px solid var(--border);
}
th {
  background: var(--th-bg);
  color: var(--th-text);
  padding: 8px 12px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--row-hover); cursor: pointer; }
tr.active td { background: var(--row-active); }

/* ── Utility: blocked / starred rows ───────────────────────────── */
.blocked-badge {
  font-size: var(--text-xs);
  background: var(--danger-bg);
  color: var(--danger-fg);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
}
tr[data-blocked="1"] td { opacity: 0.55; }
tr[data-blocked="1"]:hover td { opacity: 0.75; }
tr.starred td:first-child { border-left: 3px solid var(--warning); }

/* Status-row tints */
tr[data-status="rejected_filter"] td { background: var(--danger-bg); }
tr[data-status="rejected_filter"]:hover td { opacity: 0.85; }
tr[data-status="hired"] td { background: var(--success-bg); }
tr[data-status="hired"]:hover td { opacity: 0.85; }

/* ── Utility nav buttons ─────────────────────────────────────────── */
.btn-csv {
  padding: 5px 12px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.btn-csv:hover { background: var(--surface-raised); color: var(--text); }

.btn-show-blocked {
  padding: 4px 10px;
  font-size: var(--text-xs);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.btn-show-blocked:hover { background: var(--surface-raised); }

/* ── Unread badge ───────────────────────────────────────────────── */
.unread-badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  min-width: 16px;
  text-align: center;
}