/* ==============================================
   READABLE TEXT — both themes
   Loaded after every other stylesheet (see base.html). Every rule here
   lifts text to at least WCAG AA contrast (4.5:1, or 3:1 for large text)
   on the backgrounds it actually sits on. Measured page by page with a
   contrast audit of all pages in both themes (2026-11-15).

   Dark theme = default (html[data-theme="dark"]); light = [data-theme="light"].
   ============================================== */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* used by the footer and several cards but never defined before */
  --text-muted: var(--text-secondary);
}

:root:not([data-theme="light"]) {
  --muted: #8a97ad;            /* was #64748b: 3.5–4.0:1 on cards → 5–6.7:1 */
}

[data-theme="light"] {
  --text-secondary: #5b6472;   /* was #6c757d: under 4.5:1 on grey rows → 5–6:1 */
  --muted: #5b6472;
}

/* ── Bootstrap text utilities ───────────────────────────────────────── */
/* Bootstrap's muted grey is made for white pages; on the dark theme it was
   near-black on navy (1.15:1). */
:root:not([data-theme="light"]) .text-muted,
:root:not([data-theme="light"]) .text-body-secondary,
:root:not([data-theme="light"]) .text-secondary,
:root:not([data-theme="light"]) .form-text {
  color: var(--text-secondary) !important;
}

:root:not([data-theme="light"]) .text-primary {
  color: #8bb9fe !important;   /* #0d6efd was ~4:1 on navy */
}

[data-theme="light"] .text-muted,
[data-theme="light"] .text-body-secondary,
[data-theme="light"] .text-secondary,
[data-theme="light"] .form-text,
[data-theme="light"] .text-light,
[data-theme="light"] .text-white-50 {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .text-primary { color: #0b5ed7 !important; }   /* #0d6efd was 4.1–4.3:1 on tinted cards */
[data-theme="light"] .text-light { opacity: 1 !important; }         /* faded inline: 3.2–3.9:1 */
[data-theme="light"] :is(.monthly-muted, .label, .stat-label) { color: var(--text-secondary) !important; }
[data-theme="light"] .text-warning { color: #a16207 !important; }   /* yellow on white was 1.6:1 */
[data-theme="light"] .text-info    { color: #0e7490 !important; }   /* cyan on white was 2:1 */
[data-theme="light"] .text-success { color: #047857 !important; }

/* ── Headings on coloured backgrounds ───────────────────────────────── */
/* Headings are forced to the theme's text colour, which is unreadable on
   Bootstrap's light boxes (alerts, bg-light/warning/info) in dark mode and on
   strong colours (bg-primary/success/danger) in light mode. */
.alert :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: inherit;
}

/* Yellow / cyan boxes (not cards: some pages re-theme coloured cards) */
:is(.bg-warning, .bg-info):not(.badge):not(.card):not(.progress-bar) {
  color: #212529;
}

:is(.bg-warning, .bg-info):not(.badge):not(.card):not(.progress-bar) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: inherit;
}

:root:not([data-theme="light"]) :is(.bg-primary, .bg-success, .bg-danger, .bg-secondary, .bg-dark) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
[data-theme="light"] :is(.bg-primary, .bg-success, .bg-danger, .bg-secondary):not(.card):not(.badge) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: #fff;   /* light theme turns coloured *cards* (and bg-dark headers) light, so those keep dark text */
}

/* Bills page "Auto-Add" header is painted with the dark theme's light green */
:root:not([data-theme="light"]) .card-header[style*="--success"] {
  background: #047857 !important;
}

:root:not([data-theme="light"]) .card-header[style*="--success"] :is(h5, h6) {
  color: #fff;
}

/* Dark theme's bg-success is light green (#22c55e): white text on it was 1.9:1 */
:root:not([data-theme="light"]) .bg-success:not(.badge):not(.progress-bar) {
  background-color: #047857 !important;
}

/* White text on yellow / cyan boxes: use dark text instead */
:is(.bg-warning, .bg-info):not(.badge):not(.card):not(.progress-bar).text-white,
:is(.bg-warning, .bg-info):not(.badge):not(.card):not(.progress-bar) .text-white {
  color: #212529 !important;
}

/* Light theme: the annual report "Year" card turns white, its text was white too */
[data-theme="light"] .card.year-card :is(h6, h3) {
  color: #1f2937 !important;
  text-shadow: none !important;
}

/* Blue text and inline code inside light boxes on the dark theme */
:root:not([data-theme="light"]) :is(.bg-light, .bg-white, .alert-light):is(.text-primary),
:root:not([data-theme="light"]) :is(.bg-light, .bg-white, .alert-light) .text-primary {
  color: #0b5ed7 !important;
}

/* ── Badges ─────────────────────────────────────────────────────────── */
/* White text on the light green / cyan / yellow / grey badges was 1.8–2.6:1. */
.badge:is(.bg-success, .bg-info, .bg-warning, .bg-light, .bg-white) {
  color: #0b1324 !important;
}

:root:not([data-theme="light"]) .badge.bg-secondary {
  color: #0b1324 !important;   /* bg is light slate (#94a3b8) on the dark theme */
}

.badge.bg-danger {
  background-color: #dc2626 !important;   /* white on #ef4444 was 3.8:1 */
  color: #fff !important;
}

.badge-sm {
  background-color: #4f46e5 !important;   /* "NEW" label: white on #818cf8 was 3:1 */
  color: #fff !important;
}

/* "Step n" badges on the tutorial: coloured text on a white badge */
.badge.bg-white:is(.text-success, .text-info, .text-danger, .text-warning, .text-primary, .text-secondary) {
  color: #0b1324 !important;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
/* Dark theme accents are light (#818cf8, #34d399, #f87171), so white button
   text was 1.9–3:1. Deeper fills keep white text readable (4.8–6.3:1). */
:root:not([data-theme="light"]) :is(.btn-primary, .btn.primary, .btn-info, .btn.blue):not([class*="gradient"]) {
  background-color: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

:root:not([data-theme="light"]) :is(.btn-success, .btn.green) {
  background-color: #047857;
  border-color: #047857;
  color: #fff;
}

:root:not([data-theme="light"]) :is(.btn-danger, .btn.red) {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

:root:not([data-theme="light"]) .btn-outline-primary {
  color: #a5b4fc;
  border-color: #818cf8;
}

:root:not([data-theme="light"]) .btn-outline-secondary {
  color: var(--text-secondary);
  border-color: #475569;
}

/* Light theme: the global link colour was turning button labels blue
   (blue on green / red / grey buttons, ~1:1). */
[data-theme="light"] a.btn:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-secondary, .btn-dark) {
  color: #fff;
}

[data-theme="light"] a.btn.btn-warning {
  color: #212529;
}

/* An active/selected outline button is filled, so its text must be white */
.btn[class*="btn-outline-"].active {
  color: #fff !important;
}

/* Light theme: every .btn had a grey fill (--btn-default-bg), so outline
   buttons were coloured text on grey (~1.1:1). Outline buttons are clear. */
[data-theme="light"] .btn[class*="btn-outline-"]:not(:hover):not(:active):not(.active) {
  background-color: transparent;
}

[data-theme="light"] .btn.btn-outline-primary:not(:hover):not(:active):not(.active) { color: #0b5ed7 !important; }
[data-theme="light"] .btn.btn-outline-success:not(:hover):not(:active):not(.active) { color: #047857 !important; }
[data-theme="light"] .btn.btn-outline-danger:not(:hover):not(:active):not(.active)  { color: #b91c1c !important; }
[data-theme="light"] .btn.btn-outline-warning:not(:hover):not(:active):not(.active) { color: #a16207 !important; }
[data-theme="light"] .btn.btn-outline-info:not(:hover):not(:active):not(.active)    { color: #0e7490 !important; }

/* Settings' full-width outline buttons are filled (gradient/blue): keep white text */
[data-theme="light"] .btn.btn-full-width[class*="btn-outline-"]:not(:hover):not(:active):not(.active) {
  color: #fff !important;
}

[data-theme="light"] .btn-link {
  background-color: transparent;
}

[data-theme="light"] .progress-bar.bg-info {
  background-color: #0e7490 !important;
  color: #fff !important;
}

[data-theme="light"] .btn-outline-warning {
  color: #a16207;
  border-color: #a16207;
}

[data-theme="light"] .btn-outline-primary {
  color: #0b5ed7;
  border-color: #0b5ed7;
}

[data-theme="light"] .btn-outline-info {
  color: #0e7490;
  border-color: #0e7490;
}

[data-theme="light"] .btn-outline-secondary:not(:hover):not(:active):not(.active) {
  color: #495057 !important;
  border-color: #6c757d;
}

/* Small white text faded inline on blue headers (3.9:1) */
.bg-primary .text-white[style*="opacity"] {
  opacity: 1 !important;
}

/* ── Shared page chrome ─────────────────────────────────────────────── */
/* Footer: #94a3b8 on white was 2.6:1 in light mode */
[data-theme="light"] .site-footer,
[data-theme="light"] .site-footer__links a {
  color: var(--text-secondary);
}

/* "Budget Intelligence" menu link: cyan on white was 1.8:1 */
[data-theme="light"] .nav-flagship-link,
[data-theme="light"] .nav-flagship > .nav-flagship-link:hover,
[data-theme="light"] .nav-flagship.has-active > .nav-flagship-link,
[data-theme="light"] .nav-flagship-link i {
  color: #0e7490 !important;
}

/* Links inside Bootstrap's tinted alerts (light theme) */
[data-theme="light"] .alert a:not(.btn) {
  color: #084298;
}

/* Inline colour samples (e.g. the Help page's status legend) on white */
[data-theme="light"] :is([style*="color: #10b981"], [style*="color:#10b981"]) { color: #047857 !important; }
[data-theme="light"] :is([style*="color: #ef4444"], [style*="color:#ef4444"]) { color: #b91c1c !important; }
[data-theme="light"] :is([style*="color: #f59e0b"], [style*="color:#f59e0b"],
  [style*="color: #fbbf24"], [style*="color:#fbbf24"]) { color: #a16207 !important; }

/* ── Page-specific ──────────────────────────────────────────────────── */
/* Currency settings: names were near-white (#e2e8f0) on white in light mode */
[data-theme="light"] :is(.currency-name, .current-currency h3, .currency-info h3) { color: var(--text) !important; }
[data-theme="light"] .currency-code { color: var(--text-secondary) !important; }
[data-theme="light"] :is(.currency-symbol, .currency-display, .currency-value) { color: #047857 !important; }

/* Receipt scan: setup note on a pale amber box */
[data-theme="light"] .ocr-unavailable a { color: #084298; }

/* Calendar payday stats and similar green/red amounts on white */
[data-theme="light"] .payday-stat .v.pos { color: #047857; }
[data-theme="light"] .payday-stat .v.neg { color: #b91c1c; }
:root:not([data-theme="light"]) a.today { color: #a5b4fc !important; }
[data-theme="light"] a.today { color: #4338ca !important; }
[data-theme="light"] .date-number { color: #0b5ed7 !important; }

/* Entries: income/expense type badges */
[data-theme="light"] .type-badge.expense { color: #b91c1c; }
[data-theme="light"] .type-badge.income  { color: #047857; }
:root:not([data-theme="light"]) .type-badge.expense { color: #fca5a5; }

/* Payment analytics reliability badge */
[data-theme="light"] .reliability-badge.excellent { color: #166534; }
:root:not([data-theme="light"]) .reliability-badge.excellent { color: #4ade80; }

/* Sign-in / sign-up / verification pages: grey helper text on the dark card */
:root:not([data-theme="light"]) :is(.auth-form-header p, .auth-divider span, .auth-divider, .strength-text,
  .resend-text, .input-wrapper i, .auth-footer p) {
  color: #9ca3af;
}

:root:not([data-theme="light"]) :is(.auth-footer a, .forgot-link, .terms-checkbox a) {
  color: #a5b4fc;
}

[data-theme="light"] :is(.auth-footer a, .forgot-link, .terms-checkbox a, .signup-legal a) {
  color: #4f46e5;
}

:root:not([data-theme="light"]) .signup-legal a {
  color: #a5b4fc;
}

.signup-legal {
  opacity: 1 !important;   /* was faded to 75% */
}

[data-theme="light"] :is(.auth-form-header p, .auth-divider span, .auth-divider, .strength-text,
  .resend-text, .input-wrapper i, .auth-footer p) {
  color: var(--text-secondary);
}

/* Inline code on dark cards (Bootstrap pink was 4:1) */
:root:not([data-theme="light"]) code:not(:is(.bg-light, .bg-white, .alert, .table) code) {
  color: #f9a8d4;
}