/* ═══════════════════════════════════════════════════════════════
 * recruitingAnalytics.css — RECRUITING-LINKS-ANALYTICS-V1 (2026-06-11)
 *
 * Styles for the Lane-B recruiting surfaces:
 *   rta-*  — recruitingAnalytics.js (analytics view + Ed Bot feed)
 *   rtl-*  — recruitingTrackingLinks.js additions (view switcher,
 *            inline create/edit forms, drill links, detail grid)
 *
 * Kept in a dedicated sheet (not components.css) so the concurrent
 * recruiting-hub lane owns components.css without merge conflicts.
 * Tokens only — no raw hex outside the shared --emr-*/--color-* ramp.
 * ═══════════════════════════════════════════════════════════════ */

/* ── shared: view switcher pills (Links | Firms) ───────────────── */
.rtl-switch {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.rtl-switch-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium, 500);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.rtl-switch-btn + .rtl-switch-btn { border-left: 1px solid var(--color-border); }
.rtl-switch-btn:hover { color: var(--color-text); background: var(--color-primary-tint); }
.rtl-switch-btn.is-active {
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

/* ── shared: inline form cards (create link / firm / bonus) ────── */
.rtl-form-card {
  margin: var(--space-3) var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md, 8px);
}
.rtl-form-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.rtl-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.rtl-field { display: flex; flex-direction: column; gap: var(--space-1); }
.rtl-field-wide { grid-column: 1 / -1; }
/* Placement-add row (recruiter-link-placements, mig 358) — replaces the inline
   styles the §7 design gate forbids in the JS module. */
.rtl-placement-row { display: flex; gap: 8px; margin: 8px 0; align-items: flex-end; flex-wrap: wrap; }
.rtl-field-grow { flex: 2; min-width: 160px; }
.rtl-field-label {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: 0.03em;
}
.rtl-input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: var(--space-2);
}
.rtl-input:focus { outline: none; border-color: var(--color-primary); }
.rtl-hidden { display: none; }

/* ── links/firms tables: drill affordances + detail layout ─────── */
.rtl-drill-link {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-border-strong, var(--color-border));
}
.rtl-drill-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.rtl-card-caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.rtl-caption-action { margin-left: auto; }
.rtl-url-wide { min-width: 320px; max-width: 520px; }
.rtl-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-8);
}
@media (min-width: 1100px) {
  .rtl-detail-grid { grid-template-columns: 1fr 1fr; }
  .rtl-detail-grid > .rtl-form-card { margin: 0; }
}
.rtl-detail-grid > .recruiting-links-card { margin: 0; }
.rtl-detail-grid > .rtl-form-card { margin: 0; }

/* stage pill in candidate sub-tables (color ramp mirrors the hub
 * pipeline data-seg palette) */
.rtl-stage-pill {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: 999px;
  background: var(--color-primary-tint);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-transform: capitalize;
}
.rtl-stage-pill[data-stage="hired"]        { color: var(--color-success); border-color: var(--color-success); }
.rtl-stage-pill[data-stage="rejected"]     { color: var(--color-danger); border-color: var(--color-danger); }
.rtl-stage-pill[data-stage="applied"]      { color: var(--color-info); border-color: var(--color-info); }
.rtl-stage-pill[data-stage="screening"]    { color: var(--emr-status-cyan, var(--color-info)); border-color: var(--emr-status-cyan, var(--color-info)); }
.rtl-stage-pill[data-stage="flight"]       { color: var(--emr-status-purple, var(--color-text-muted)); border-color: var(--emr-status-purple, var(--color-border)); }
.rtl-stage-pill[data-stage="arriving"]     { color: var(--color-warning); border-color: var(--color-warning); }
.rtl-stage-pill[data-stage="arrived"]      { color: var(--color-primary); border-color: var(--color-primary); }
.rtl-stage-pill[data-stage="orientation"]  { color: var(--color-primary); border-color: var(--color-primary); }
.rtl-stage-pill[data-stage="driving_test"] { color: var(--color-success); border-color: var(--color-success); }

/* keep dates/status chips on one line inside the dense ledger tables */
.rtl-td-nowrap { white-space: nowrap; }
/* ellipsize free-text notes so the actions column never clips the card */
.rtl-td-note {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* dense half-width detail cards: let dual action buttons stack instead
 * of overflowing the card edge */
.rtl-detail-grid .recruiting-actions { flex-wrap: wrap; }

/* ── analytics page (rta-*) ────────────────────────────────────── */
.rta-body { padding: var(--space-4) var(--space-6) var(--space-8); }

/* KPI strip */
.rta-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.rta-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
}
.rta-kpi-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.rta-kpi-value {
  font-size: var(--text-2xl, 28px);
  font-weight: var(--weight-semibold, 600);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
.rta-kpi.good .rta-kpi-value { color: var(--color-success); }
.rta-kpi.warn .rta-kpi-value { color: var(--color-warning); }
.rta-kpi-sub { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 2px; }

/* card grid */
.rta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1100px) {
  .rta-grid { grid-template-columns: 1fr 1fr; }
}
.rta-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  min-width: 0;
}
.rta-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.rta-card-h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.rta-card-hint { font-size: var(--text-xs); color: var(--color-text-subtle); }
.rta-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
}

/* funnel SVG — stage color ramp mirrors the hub pipeline palette */
.rta-funnel-wrap { width: 100%; overflow-x: auto; }
.rta-funnel-svg { width: 100%; height: auto; display: block; }
.rta-funnel-label { fill: var(--color-text-muted); font-size: 12px; }
.rta-funnel-num { fill: var(--color-text); font-size: 12px; font-variant-numeric: tabular-nums; }
.rta-funnel-bar { fill: var(--color-muted); }
.rta-funnel-bar[data-seg="applied"]      { fill: var(--color-info); }
.rta-funnel-bar[data-seg="screening"]    { fill: var(--emr-status-cyan, var(--color-info)); }
.rta-funnel-bar[data-seg="flight"]       { fill: var(--emr-status-purple, var(--color-muted)); }
.rta-funnel-bar[data-seg="arriving"]     { fill: var(--color-warning); }
.rta-funnel-bar[data-seg="arrived"]      { fill: var(--color-primary); }
.rta-funnel-bar[data-seg="orientation"]  { fill: var(--color-primary); opacity: 0.8; }
.rta-funnel-bar[data-seg="driving_test"] { fill: var(--color-success); opacity: 0.8; }
.rta-funnel-bar[data-seg="hired"]        { fill: var(--color-success); }

/* weekly volume stacked bars */
.rta-vol-wrap { width: 100%; overflow-x: auto; margin-bottom: var(--space-2); }
.rta-vol-svg { width: 100%; height: auto; display: block; }
.rta-vol-x { fill: var(--color-text-subtle); font-size: 10px; }
.rta-vol-bar[data-series="0"] { fill: var(--color-primary); }
.rta-vol-bar[data-series="1"] { fill: var(--color-info); }
.rta-vol-bar[data-series="2"] { fill: var(--color-success); }
.rta-vol-bar[data-series="3"] { fill: var(--color-warning); }
.rta-vol-bar[data-series="4"] { fill: var(--emr-status-purple, var(--color-muted)); }
.rta-vol-bar[data-series="5"] { fill: var(--color-muted); }
.rta-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.rta-legend-item {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.rta-legend-item::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--color-muted);
  display: inline-block;
}
.rta-legend-item[data-series="0"]::before { background: var(--color-primary); }
.rta-legend-item[data-series="1"]::before { background: var(--color-info); }
.rta-legend-item[data-series="2"]::before { background: var(--color-success); }
.rta-legend-item[data-series="3"]::before { background: var(--color-warning); }
.rta-legend-item[data-series="4"]::before { background: var(--emr-status-purple, var(--color-muted)); }

/* time-in-stage horizontal tracks */
.rta-dur-track {
  display: inline-block;
  width: 100%;
  min-width: 80px;
  height: 8px;
  background: var(--color-bg);
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
}
.rta-dur-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary);
}
.rta-dur-fill[data-seg="applied"]   { background: var(--color-info); }
.rta-dur-fill[data-seg="screening"] { background: var(--emr-status-cyan, var(--color-info)); }
.rta-dur-fill[data-seg="flight"]    { background: var(--emr-status-purple, var(--color-muted)); }
.rta-dur-fill[data-seg="arriving"]  { background: var(--color-warning); }

/* Ed Bot insight feed */
.rta-card-edbot { border-left: 3px solid var(--color-primary); }
.rta-edbot-controls {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 2fr);
  gap: var(--space-2);
}
@media (max-width: 760px) { .rta-edbot-controls { grid-template-columns: 1fr; } }
.rta-edbot-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-danger);
}
.rta-insight-feed { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.rta-insight-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3);
}
.rta-insight-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}
.rta-insight-kind {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.rta-insight-meta { font-size: var(--text-xs); color: var(--color-text-subtle); }
.rta-insight-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: pre-wrap;
}
.rta-edbot-history { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.rta-edbot-history-row { font-size: var(--text-xs); color: var(--color-text-muted); padding: 2px 0; }