/*
 * Global Contrast & Readability Fixes
 * Applied across all pages to meet WCAG AA contrast thresholds
 * on Bootstrap 5.3's dark theme.
 */

/* ── 1. text-muted / form-text / blockquote-footer ────────────────
   Bootstrap dark theme defaults text-muted to rgba(255,255,255,0.5)
   which gives only ~2.5:1 contrast ratio on dark backgrounds.
   Raised to rgba(255,255,255,0.72) for ~3.9:1 (AA for large/UI text).
   Small text uses 0.80 for ~4.5:1 (AA for normal text). */

[data-bs-theme="dark"] .text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

[data-bs-theme="dark"] small.text-muted,
[data-bs-theme="dark"] .small.text-muted,
[data-bs-theme="dark"] p.text-muted,
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .accordion-body {
    color: rgba(255, 255, 255, 0.80) !important;
}

[data-bs-theme="dark"] .blockquote-footer {
    color: rgba(255, 255, 255, 0.68) !important;
}

/* ── 2. table-light in dark mode ───────────────────────────────────
   Bootstrap remaps bg-light to a dark gray in dark mode, but
   table-light cells may not carry appropriate text color.         */
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
    color: rgba(255, 255, 255, 0.88) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── 3. bg-light in dark mode ──────────────────────────────────────
   bg-light in dark mode resolves to a dark gray, not a light color.
   Any text inside must stay light (white), not dark.
   Override any legacy "dark text on bg-light" rules.              */
[data-bs-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .bg-light *:not([class*="text-"]):not(.badge):not(a) {
    color: rgba(255, 255, 255, 0.88);
}

/* ── 4. bg-white elements need dark text in dark mode ──────────────
   bg-white always renders truly white. Ensure legible dark text.  */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-white * {
    color: #1a1d21 !important;
}

/* ── 5. Card footers without explicit color ─────────────────────── */
[data-bs-theme="dark"] .card-footer {
    color: rgba(255, 255, 255, 0.80);
}

/* ── 6. List group item muted sub-text ─────────────────────────────*/
[data-bs-theme="dark"] .list-group-item .text-muted,
[data-bs-theme="dark"] .list-group-item small {
    color: rgba(255, 255, 255, 0.68) !important;
}

/* ── 7. calculation-example / white inline boxes ───────────────────
   Some pages embed white-background boxes inside dark cards.
   Target common class patterns.                                   */
[data-bs-theme="dark"] .calculation-example {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 0.375rem;
}

[data-bs-theme="dark"] .calculation-example,
[data-bs-theme="dark"] .calculation-example * {
    color: #1a1d21 !important;
}

/* ── 8. Budget Review stat bar sub-labels ──────────────────────────
   Overrides low-opacity values in budget_review.css               */
.summary-stats-bar .stat-label {
    color: rgba(255, 255, 255, 0.80) !important;
}

.summary-stats-bar .stat-sub {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* ── 9. information_hub responsibility table headers ───────────────*/
.responsibility-table th {
    color: rgba(255, 255, 255, 0.85) !important;
}