/* ============================================================================
   css/matching_styles.css
   Styles for the Matching tab: requirement cards, candidate comparison table,
   expandable detail panels (skill matrix, score breakdown, HR conclusion).
   ============================================================================ */

/* ── Outer container ──────────────────────────────────────────────────────── */
.matching-content {
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   REQUIREMENT CARD
   One card per requirement. Contains the header summary and the table.
   ════════════════════════════════════════════════════════════════════════════ */

.matching-req-card {
  background   : var(--surface);
  border       : 1px solid var(--border);
  border-radius: 10px;
  box-shadow   : 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 28px;
  overflow     : hidden;
}

/* ── Requirement header ───────────────────────────────────────────────────── */
.matching-req-header {
  padding          : 18px 22px 14px;
  background       : linear-gradient(135deg, #f0f4ff 0%, #fafbfc 100%);
  border-bottom    : 1px solid #dde4ec;
}

.matching-req-header-left {
  display    : flex;
  align-items: center;
  gap        : 12px;
  margin-bottom: 8px;
}

.matching-req-id {
  font-size    : 11px;
  font-weight  : 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color        : #5b6d8a;
  background   : #dfe7f0;
  padding      : 2px 9px;
  border-radius: 4px;
}

.matching-req-title {
  margin: 0;
  font-size  : 17px;
  font-weight: 600;
  color      : #1e2b3d;
}

.matching-req-client {
  font-size: 13px;
  color    : #5b6d8a;
}

/* Meta row: location · seniority · date · rate */
.matching-req-meta {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 18px;
  margin-bottom: 10px;
}

.matching-req-meta-item {
  font-size: 12px;
  color    : #6b7b8f;
}

/* Non-negotiable skill pills */
.matching-req-skills {
  display     : flex;
  align-items : center;
  gap         : 7px;
  flex-wrap   : wrap;
}

.matching-req-skills-label {
  font-size     : 11px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color         : var(--status-emphasis-fg);
}

.matching-skill-badge {
  font-size    : 11px;
  font-weight  : 600;
  background   : #fff3e0;
  color        : var(--status-emphasis-fg);
  border       : 1px solid #ffe0b2;
  padding      : 2px 9px;
  border-radius: 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPARISON TABLE
   ════════════════════════════════════════════════════════════════════════════ */

.matching-table-wrapper {
  overflow-x: auto;
}

.matching-table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : 13px;
  table-layout    : fixed;        /* enables column width control */
}

/* ── Column widths ────────────────────────────────────────────────────────── */
.matching-table .col-rank     { width: 38px; }
.matching-table .col-name     { width: 16%;  }
.matching-table .col-profile  { width: 15%;  }
.matching-table .col-exp      { width: 9%;   }
.matching-table .col-nonneg   { width: 9%;   }
.matching-table .col-score    { width: 12%;  }
.matching-table .col-decision { width: 10%;  }
.matching-table .col-avail    { width: 10%;  }
.matching-table .col-rate     { width: 8%;   }
.matching-table .col-gap      { width: 0;    flex: 1; }
.matching-table .col-expand   { width: 38px; }

/* ── Header cells ─────────────────────────────────────────────────────────── */
.matching-th {
  background     : #f4f6f9;
  color          : #5b6d8a;
  font-size      : 11px;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : 0.5px;
  padding        : 10px 12px;
  text-align     : left;
  border-bottom  : 2px solid #dde4ec;
  white-space    : nowrap;
  user-select    : none;
}

.matching-th.sortable {
  cursor     : pointer;
  transition : background 0.15s;
}

.matching-th.sortable:hover,
.matching-th.sort-active {
  background: #eaeef3;
  color     : #3a5580;
}

.sort-icon {
  margin-left: 4px;
  font-size  : 10px;
  color      : #aab;
}

.matching-th.sort-active .sort-icon {
  color: #3a5580;
}

/* ── Data rows ────────────────────────────────────────────────────────────── */
.matching-row {
  border-bottom: 1px solid #eef0f3;
  transition   : background 0.15s;
  cursor       : pointer;
}

.matching-row:hover                { background: #fafbfd; }
.matching-row.expanded             { background: #f2f5fa; }
.matching-row.decision-strong      { border-left: 3px solid #28a745; background: #f0fdf4; }
.matching-row.decision-good        { border-left: 3px solid #007bff; background: #eff6ff; }
.matching-row.decision-mismatch    { border-left: 3px solid #c9cdd2; background: #fef2f2; }
.matching-row.decision-strong td,
.matching-row.decision-good td,
.matching-row.decision-mismatch td   { background: transparent; }

/* ── Data cells ───────────────────────────────────────────────────────────── */
.matching-td {
  padding        : 10px 12px;
  color          : #2d3a4a;
  vertical-align : middle;
  overflow       : hidden;
  text-overflow  : ellipsis;
  white-space    : nowrap;
}

/* Rank number */
.matching-td.col-rank {
  font-weight: 700;
  color      : #7b8a9e;
  text-align : center;
}

/* Candidate name + domain subtitle */
.candidate-name-block {
  display       : flex;
  flex-direction: column;
  white-space   : normal;        /* allow wrapping in name cell */
}

.candidate-name-block strong {
  font-size: 13px;
  color    : #1e2b3d;
}

.candidate-domain {
  font-size  : 11px;
  color      : #8a99a8;
  margin-top : 1px;
}

/* ── Non-negotiable badge ─────────────────────────────────────────────────── */
.nonneg-badge {
  display     : inline-flex;
  align-items : center;
  gap         : 5px;
  font-size   : 12px;
  font-weight : 600;
  padding     : 3px 9px;
  border-radius: 14px;
  white-space : nowrap;
}

.nonneg-badge.nonneg-pass { background: #e8f5e9; color: #2e7d32; }
.nonneg-badge.nonneg-fail { background: #f5f5f5; color: #757575; }

/* ── Score block: number + thin progress bar ──────────────────────────────── */
.score-block {
  display     : flex;
  align-items : center;
  gap         : 8px;
  min-width   : 85px;
  white-space : nowrap;
}

.score-value {
  font-weight: 700;
  font-size  : 15px;
  min-width  : 28px;
  color      : #1e2b3d;
}

.score-bar-track {
  flex          : 1;
  height        : 6px;
  min-width     : 44px;
  background    : #eef0f3;
  border-radius : 3px;
  overflow      : hidden;
}

.score-bar-fill {
  height        : 100%;
  border-radius : 3px;
  transition    : width 0.4s ease;
}

.score-bar-fill.decision-strong  { background: linear-gradient(90deg, #43a047, #66bb6a); }
.score-bar-fill.decision-good    { background: linear-gradient(90deg, #1e88e5, #42a5f5); }
.score-bar-fill.decision-mismatch{ background: linear-gradient(90deg, #9e9e9e, #bdbdbd); }

/* ── Decision badge ───────────────────────────────────────────────────────── */
.decision-badge {
  display      : inline-block;
  font-size    : 11px;
  font-weight  : 600;
  padding      : 3px 10px;
  border-radius: 14px;
  white-space  : nowrap;
}

.decision-badge.decision-strong  { background: #e8f5e9; color: #2e7d32; }
.decision-badge.decision-good    { background: #e3f2fd; color: #1565c0; }
.decision-badge.decision-mismatch{ background: #f5f5f5; color: #616161; }

/* ── Expand / collapse chevron button ─────────────────────────────────────── */
.expand-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : none;
  border          : 1px solid #e0e3e8;
  border-radius   : 4px;
  padding         : 3px 6px;
  cursor          : pointer;
  color           : #7b8a9e;
  transition      : background 0.15s, border-color 0.15s;
}

.expand-btn:hover {
  background   : #eef1f5;
  border-color : #d0d5dc;
}

/* ════════════════════════════════════════════════════════════════════════════
   DETAIL EXPANSION PANEL
   Hidden by default; toggled via the .expanded class in JS.
   ════════════════════════════════════════════════════════════════════════════ */

.matching-detail-row          { display: none; }
.matching-detail-row.expanded { display: table-row; }

.matching-detail-cell {
  padding     : 0 !important;
  background  : #f8f9fc;
  border-bottom: 2px solid #dde4ec;
}

.matching-detail-panel {
  padding   : 20px 22px;
  animation : detailSlideIn 0.22s ease;
}

@keyframes detailSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── 2-column grid layout for detail sections ─────────────────────────────── */
.detail-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 16px;
}

.detail-section {
  background    : var(--surface);
  border        : 1px solid var(--border);
  border-radius : 8px;
  padding       : 14px 16px;
}

.detail-section h4 {
  margin         : 0 0 10px;
  font-size      : 11px;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : 0.5px;
  color          : #5b6d8a;
}

/** Spans both columns */
.detail-full-width { grid-column: 1 / -1; }

/* ── Skill-match mini-table ───────────────────────────────────────────────── */
.detail-skill-table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : 12px;
}

.detail-skill-table th {
  text-align     : left;
  font-size      : 10px;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : 0.4px;
  color          : #8a99a8;
  padding        : 4px 6px;
  border-bottom  : 1px solid #eef0f3;
}

.detail-skill-table td {
  padding       : 5px 6px;
  color         : #2d3a4a;
  border-bottom : 1px solid #f0f2f5;
}

.detail-skill-table tr.skill-non-neg td:first-child {
  font-weight: 600;
}

/* "Required" micro-tag next to non-negotiable skill names */
.non-neg-tag {
  display       : inline-block;
  font-size     : 9px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background    : #fff3e0;
  color         : var(--status-emphasis-fg);
  padding       : 1px 5px;
  border-radius : 3px;
  margin-left   : 5px;
}

/* Colour-coded match-score numbers */
.skill-score         { font-weight: 700; font-size: 12px; }
.skill-score.good    { color: #2e7d32; }
.skill-score.partial { color: #f57c00; }
.skill-score.none    { color: #9e9e9e; }

/* ── Score-breakdown horizontal bars ──────────────────────────────────────── */
.breakdown-bars {
  display       : flex;
  flex-direction: column;
  gap           : 9px;
}

.breakdown-item .breakdown-label {
  display         : flex;
  justify-content : space-between;
  font-size       : 12px;
  margin-bottom   : 3px;
}

.breakdown-item .breakdown-label span:first-child { color: #2d3a4a; }

.breakdown-score { color: #7b8a9e; font-weight: 600; }

.breakdown-track {
  height        : 6px;
  background    : #eef0f3;
  border-radius : 3px;
  overflow      : hidden;
}

.breakdown-fill {
  height        : 100%;
  background    : linear-gradient(90deg, #5b6d8a, #7b8a9e);
  border-radius : 3px;
  transition    : width 0.3s ease;
}

/* ── Domain-alignment section ─────────────────────────────────────────────── */
.domain-required,
.domain-candidate {
  font-size : 12px;
  color     : #5b6d8a;
  margin    : 4px 0;
}

.domain-languages {
  display     : flex;
  align-items : center;
  gap         : 6px;
  flex-wrap   : wrap;
  margin-top  : 10px;
}

.domain-label {
  font-size     : 10px;
  font-weight   : 600;
  text-transform: uppercase;
  color         : #8a99a8;
}

.lang-tag {
  font-size    : 10px;
  font-weight  : 600;
  background   : #e8eaf6;
  color        : #3949ab;
  padding      : 2px 8px;
  border-radius: 10px;
}

/* ── Strengths / Gaps assessment ──────────────────────────────────────────── */
.assessment-strengths,
.assessment-gaps { margin-top: 4px; }

.assessment-label {
  display       : inline-block;
  font-size     : 10px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding       : 1px 7px;
  border-radius : 3px;
  margin-bottom : 5px;
}

.strengths-label { background: #e8f5e9; color: #2e7d32; }
.gaps-label      { background: #fff3e0; color: var(--status-emphasis-fg); }

.detail-assessment ul {
  margin      : 0;
  padding-left: 18px;
  font-size   : 12px;
  color       : #4a5568;
}

.detail-assessment li { margin-bottom: 3px; }

/* ── HR conclusion block ──────────────────────────────────────────────────── */
.hr-conclusion {
  margin      : 0;
  font-size   : 13px;
  color       : #2d3a4a;
  line-height : 1.55;
  padding     : 10px 14px;
  background  : #fafbfc;
  border-radius: 6px;
  border-left : 3px solid #5b6d8a;
}

/* ── Card footer (candidate count summary) ────────────────────────────────── */
.matching-req-footer {
  padding      : 10px 22px;
  background   : #fafbfc;
  border-top   : 1px solid #eef0f3;
  font-size    : 12px;
  color        : #7b8a9e;
  display      : flex;
  gap          : 8px;
  align-items  : center;
}

/* ════════════════════════════════════════════════════════════════════════════
   STATES: loading / error / empty
   ════════════════════════════════════════════════════════════════════════════ */

.matching-loading,
.matching-error,
.matching-empty {
  text-align : center;
  padding    : 64px 20px;
  color      : #7b8a9e;
}

.matching-spinner {
  width           : 32px;
  height          : 32px;
  border          : 3px solid #e0e3e8;
  border-top-color: #5b6d8a;
  border-radius   : 50%;
  animation       : matchingSpin 0.7s linear infinite;
  margin          : 0 auto 14px;
}

@keyframes matchingSpin { to { transform: rotate(360deg); } }

.matching-error p {
  color       : var(--status-emphasis-fg);
  margin-bottom: 14px;
}

/* ── Responsive fallback: single-column detail grid on narrow viewports ─── */
@media (max-width: 700px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Additional styles for matching view messages */

.matching-no-requirement,
.matching-no-results {
  padding: 60px 40px;
  text-align: center;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  margin: 20px;
}

.matching-no-requirement p:first-child,
.matching-no-results p:first-child {
  font-size: 1.1em;
  color: #495057;
  margin-bottom: 12px;
}

.matching-no-requirement p:last-child,
.matching-no-results p:last-child {
  color: #6c757d;
  font-size: 0.95em;
  margin-top: 8px;
}

.matching-no-requirement strong,
.matching-no-results strong {
  color: #212529;
  font-weight: 600;
}

/* Selection Header */
.matching-selection-header {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.selection-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.requirement-info,
.selected-cvs-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.info-label {
  color: #6c757d;
  font-size: 0.9em;
  font-weight: 500;
}

.requirement-info strong {
  color: #0066cc;
  font-weight: 600;
}

.no-selection {
  color: #6c757d;
  font-style: italic;
  font-size: 0.9em;
}

.selected-cv-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.selected-cv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e7f3ff;
  color: #0066cc;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 500;
  border: 1px solid #b3d9ff;
}

.remove-cv-btn {
  background: none;
  border: none;
  color: #0066cc;
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: all 0.2s;
}

.remove-cv-btn:hover {
  background: #0066cc;
  color: white;
}

.selection-count {
  color: #6c757d;
  font-size: 0.85em;
  font-weight: 500;
}

/* Table checkbox column */
.matching-th.col-select,
.matching-td.col-select {
  width: 40px;
  text-align: center;
  padding: 8px !important;
}

.cv-select-cb,
.select-all-cb {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: #0066cc;
}

.cv-select-cb:disabled,
.select-all-cb:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Selected row highlighting */
.matching-row.selected {
  background-color: #f0f8ff !important;
  border-left: 3px solid #0066cc;
}

.matching-row.selected td {
  border-left-color: #0066cc;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .selection-info {
    gap: 12px;
  }
  
  .requirement-info,
  .selected-cvs-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .selected-cv-list {
    width: 100%;
  }
}

/* Additional styles for matching view messages */

.matching-no-requirement,
.matching-no-results {
  padding: 60px 40px;
  text-align: center;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  margin: 20px;
}

.matching-no-requirement p:first-child,
.matching-no-results p:first-child {
  font-size: 1.1em;
  color: #495057;
  margin-bottom: 12px;
}

.matching-no-requirement p:last-child,
.matching-no-results p:last-child {
  color: #6c757d;
  font-size: 0.95em;
  margin-top: 8px;
}

.matching-no-requirement strong,
.matching-no-results strong {
  color: #212529;
  font-weight: 600;
}

/* View Toggle */
.matching-view-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  width: fit-content;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #6c757d;
  font-size: 0.9em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.view-toggle-btn:hover:not(:disabled) {
  background: #ffffff;
  color: #0066cc;
  border-color: #dee2e6;
}

.view-toggle-btn.active {
  background: #ffffff;
  color: #0066cc;
  border-color: #0066cc;
  font-weight: 600;
}

.view-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.view-toggle-btn svg {
  flex-shrink: 0;
}

/* Selection Header */
.matching-selection-header {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.selection-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.requirement-info,
.selected-cvs-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.info-label {
  color: #6c757d;
  font-size: 0.9em;
  font-weight: 500;
}

.requirement-info strong {
  color: #0066cc;
  font-weight: 600;
}

.no-selection {
  color: #6c757d;
  font-style: italic;
  font-size: 0.9em;
}

.selected-cv-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.selected-cv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e7f3ff;
  color: #0066cc;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 500;
  border: 1px solid #b3d9ff;
}

.remove-cv-btn {
  background: none;
  border: none;
  color: #0066cc;
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: all 0.2s;
}

.remove-cv-btn:hover {
  background: #0066cc;
  color: white;
}

.selection-count {
  color: #6c757d;
  font-size: 0.85em;
  font-weight: 500;
}

/* Chart View */
.matching-chart-container {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 24px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

#matching-chart {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #ffffff;
  flex-shrink: 0;
}

.chart-legend {
  flex-shrink: 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  min-width: 200px;
}

.chart-legend h4 {
  margin: 0 0 16px 0;
  font-size: 1em;
  color: #333;
  font-weight: 600;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
  color: #666;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* Chart Tooltip */
.chart-tooltip {
  position: fixed;
  display: none;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  line-height: 1.6;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 300px;
}

.chart-tooltip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05em;
  color: #fff;
}

/* Table checkbox column */
.matching-th.col-select,
.matching-td.col-select {
  width: 40px;
  text-align: center;
  padding: 8px !important;
}

.cv-select-cb,
.select-all-cb {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: #0066cc;
}

.cv-select-cb:disabled,
.select-all-cb:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Selected row highlighting */
.matching-row.selected {
  background-color: #f0f8ff !important;
  border-left: 3px solid #0066cc;
}

.matching-row.selected td {
  border-left-color: #0066cc;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .matching-chart-container {
    flex-direction: column;
  }
  
  #matching-chart {
    width: 100%;
    max-width: 100%;
  }
  
  .chart-legend {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .selection-info {
    gap: 12px;
  }
  
  .requirement-info,
  .selected-cvs-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .selected-cv-list {
    width: 100%;
  }
  
  .matching-view-toggle {
    width: 100%;
  }
  
  .view-toggle-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   Dark-mode overrides for matching surfaces.
   matching_styles.css ships with light-mode hardcoded values
   throughout. These overrides flip the major chrome surfaces to
   dark equivalents while preserving semantic colors (match-score
   greens/reds, status pills, brand accents) which keep their
   raw hex values.
   ============================================================ */
[data-theme="dark"] .matching-req-card,
[data-theme="dark"] .matching-card,
[data-theme="dark"] .matching-section,
[data-theme="dark"] .candidate-card {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .matching-row {
  border-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .matching-row:hover {
  background-color: #243549;
}

[data-theme="dark"] .matching-section h2,
[data-theme="dark"] .matching-section h3,
[data-theme="dark"] .matching-section h4,
[data-theme="dark"] .matching-req-card h2,
[data-theme="dark"] .matching-req-card h3,
[data-theme="dark"] .matching-req-card h4 {
  color: #f1f5f9;
}

[data-theme="dark"] .matching-req-card .req-meta,
[data-theme="dark"] .matching-req-card .req-subtitle,
[data-theme="dark"] .matching-row td,
[data-theme="dark"] .matching-row .cell-secondary {
  color: #cbd5e1;
}

[data-theme="dark"] .matching-req-card .req-label,
[data-theme="dark"] .matching-row .cell-label,
[data-theme="dark"] .table-header,
[data-theme="dark"] .matching-table thead {
  color: #94a3b8;
  background-color: #0f172a;
}

[data-theme="dark"] .matching-table th,
[data-theme="dark"] .matching-table td {
  border-color: #334155;
}

[data-theme="dark"] .matching-empty,
[data-theme="dark"] .matching-info-banner {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

[data-theme="dark"] .matching-req-card:hover,
[data-theme="dark"] .candidate-card:hover {
  background-color: #243549;
  border-color: #475569;
}

/* ============================================================
   Dark-mode overrides — Matching tab JS-rendered subviews.
   Class names verified against frontend/js/matching-manager.js
   and the per-selector rules in this file.
   ============================================================ */

/* The "Active Requirement / Selected for Export" banner panel */
[data-theme="dark"] .matching-selection-header {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .matching-selection-header .info-label {
  color: #94a3b8;
}
[data-theme="dark"] .matching-selection-header .requirement-info strong {
  color: #60a5fa;
}
[data-theme="dark"] .matching-selection-header .no-selection {
  color: #94a3b8;
}
/* .selected-cv-badge keeps its light-blue chip styling — semantic */

/* Table View / 2D Chart toggle */
[data-theme="dark"] .matching-view-toggle {
  background-color: #1e293b;
}
[data-theme="dark"] .view-toggle-btn {
  color: #94a3b8;
}
[data-theme="dark"] .view-toggle-btn:hover:not(:disabled) {
  background-color: #243549;
  color: #60a5fa;
  border-color: #334155;
}
[data-theme="dark"] .view-toggle-btn.active {
  background-color: #243549;
  color: #60a5fa;
  border-color: #60a5fa;
}

/* Empty / no-requirement / no-results panels */
[data-theme="dark"] .matching-no-requirement,
[data-theme="dark"] .matching-no-results {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
[data-theme="dark"] .matching-no-requirement p:first-child,
[data-theme="dark"] .matching-no-results p:first-child {
  color: #f1f5f9;
}
[data-theme="dark"] .matching-no-requirement p:last-child,
[data-theme="dark"] .matching-no-results p:last-child {
  color: #94a3b8;
}
[data-theme="dark"] .matching-no-requirement strong,
[data-theme="dark"] .matching-no-results strong {
  color: #f1f5f9;
}

/* Requirement card structure — header, title, meta */
[data-theme="dark"] .matching-req-header,
[data-theme="dark"] .matching-req-header-left {
  color: #f1f5f9;
}
[data-theme="dark"] .matching-req-id {
  color: #60a5fa;
}
[data-theme="dark"] .matching-req-title {
  color: #f1f5f9;
}
[data-theme="dark"] .matching-req-client {
  color: #cbd5e1;
}
[data-theme="dark"] .matching-req-meta,
[data-theme="dark"] .matching-req-meta-item {
  color: #94a3b8;
}
[data-theme="dark"] .matching-req-skills-label {
  color: #94a3b8;
}
/* .matching-skill-badge keeps its pastel orange (#fff3e0) — semantic chip */

/* Match table chrome (the candidate rows table) */
[data-theme="dark"] .matching-table-wrapper {
  background-color: transparent;
}
[data-theme="dark"] .matching-table {
  background-color: #1e293b;
}
[data-theme="dark"] .matching-th {
  background-color: #0f172a;
  color: #94a3b8;
  border-color: #334155;
}
[data-theme="dark"] .matching-th.sortable:hover {
  background-color: #1e293b;
}
[data-theme="dark"] .matching-th.sort-active {
  color: #60a5fa;
}
[data-theme="dark"] .matching-td {
  color: #f1f5f9;
  border-color: #334155;
}
[data-theme="dark"] .matching-row.expanded {
  background-color: #1e293b;
}
[data-theme="dark"] .candidate-name-block strong {
  color: #f1f5f9;
}
[data-theme="dark"] .candidate-domain {
  color: #94a3b8;
}

/* Score block structural chrome — the score VALUES (#28a745 strong, #007bff
   good, etc.) are semantic and stay; only the surrounding chrome themes */
[data-theme="dark"] .score-block {
  color: #f1f5f9;
}
[data-theme="dark"] .score-value {
  color: #f1f5f9;
}
[data-theme="dark"] .score-bar-track {
  background-color: #334155;
}
/* score-bar-fill keeps semantic colors */

/* Decision-tinted rows: keep the score-based colour cue in dark mode by
   layering a low-alpha overlay over the dark table background. */
[data-theme="dark"] .matching-row.decision-strong   { background-color: rgba(34, 197, 94, 0.12); }
[data-theme="dark"] .matching-row.decision-good     { background-color: rgba(59, 130, 246, 0.12); }
[data-theme="dark"] .matching-row.decision-mismatch { background-color: rgba(239, 68, 68, 0.12); }
[data-theme="dark"] .matching-row.decision-strong:hover   { background-color: rgba(34, 197, 94, 0.20); }
[data-theme="dark"] .matching-row.decision-good:hover     { background-color: rgba(59, 130, 246, 0.20); }
[data-theme="dark"] .matching-row.decision-mismatch:hover { background-color: rgba(239, 68, 68, 0.20); }