/* ════════════════════════════════════════════════════════════════
   a11y-dark-fix.css — TalentIQ dark-dashboard contrast hotfix (P0-6)

   Problem: Admin (.lld-*), Super-Admin (.sa-*), Recruiter (.rd-*),
   Sales (.sd-*) and Candidate (.cd-*) dashboards render #0f1c38
   dark-navy cards but never set a base text color, so unstyled
   elements inherit body { color:#111827 } — black on dark blue,
   contrast ≈ 1.07:1 (WCAG AA requires 4.5:1).

   Install: add AFTER app.css in public/index.html:
     <link rel="stylesheet" href="/css/a11y-dark-fix.css?v=1">

   This is a stopgap with deliberately high specificity; the proper
   per-token fixes are listed in the audit report §15.2.
   ════════════════════════════════════════════════════════════════ */

/* 1 ─ Base text color inside every dark card/KPI: inherited text
       becomes light instead of near-black. Explicit inline colors
       (accents, statuses) still win because inline > stylesheet. */
.lld-card, .lld-kpi, .lld-alert, .lld-ai,
.sa-card,  .sa-kpi,
.rd-card,  .rd-kpi,  .rd-row,
.sd-card,  .sd-kpi,
.cd-card,  .cd-kpi,
.dk-card,  .dk-kpi {
  color: #e2e8f0;
}

/* 2 ─ Neutralize light-theme tokens that leak into dark cards.
       RD.text (#111827) was interpolated inline for timestamps etc.
       Inline styles outrank stylesheets, so override the few known
       offenders by attribute match on the exact inline value. */
.rd-card [style*="color:#111827"], .rd-row  [style*="color:#111827"],
.sd-card [style*="color:#111827"],
.cd-card [style*="color:#111827"],
.lld-card[style*="color:#111827"], .lld-card [style*="color:#111827"],
.sa-card [style*="color:#111827"] {
  color: #e2e8f0 !important;
}

/* 3 ─ Light "surface" tiles (#f9fafb) dropped inside dark cards:
       keep them as subtle dark tiles instead, and let the dark text
       rule above no longer apply inside (they get light text too,
       which is correct once the tile is dark). */
.rd-card [style*="background:#f9fafb"],
.sd-card [style*="background:#f9fafb"],
.cd-card [style*="background:#f9fafb"],
.lld-card [style*="background:#f9fafb"] {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* 4 ─ Light-gray borders (#e5e7eb) on dark rows → translucent white */
.rd-card [style*="border:1.5px solid #e5e7eb"],
.rd-card [style*="border-color:#e5e7eb"],
.sd-card [style*="border-color:#e5e7eb"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 5 ─ Secondary text: rgba(255,255,255,.4) on #0f1c38 is ~3.4:1 —
       below AA for body text. Lift to .58 (~4.6:1). */
.lld-card [style*="color:rgba(255,255,255,.4)"],
.sa-card  [style*="color:rgba(255,255,255,.4)"],
.rd-card  [style*="color:rgba(255,255,255,.4)"],
.sd-card  [style*="color:rgba(255,255,255,.4)"],
.cd-card  [style*="color:rgba(255,255,255,.4)"],
.dk-card  [style*="color:rgba(255,255,255,.4)"],
.dk-kpi   [style*="color:rgba(255,255,255,.4)"] {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* 6 ─ Tables inside dark cards: cells without inline color */
.rd-card table td, .rd-card table th,
.sd-card table td, .sd-card table th,
.lld-card table td, .lld-card table th,
.dk-card table td, .dk-card table th,
.sa-card table td, .sa-card table th {
  color: #e2e8f0;
}

/* 7 ─ Ghost buttons inside dark cards (btn-ghost assumes light bg) */
.rd-card .btn-ghost, .sd-card .btn-ghost, .lld-card .btn-ghost,
.cd-card .btn-ghost, .sa-card .btn-ghost, .dk-card .btn-ghost {
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.18);
}

/* 8 ─ Form inputs accidentally rendered inside dark cards */
.rd-card .form-input, .sd-card .form-input, .lld-card .form-input,
.sa-card .form-input, .dk-card .form-input {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.15);
}