/* ══════════════════════════════════════════════════════════════════════════════
   COLOR AUTHORITY — Final-word color enforcement
   ══════════════════════════════════════════════════════════════════════════════

   WHY THIS FILE EXISTS:
   The codebase has 6+ CSS files and 3000+ inline styles with competing colors.
   Previous fixes in secondary-pages.css get overridden by ramsey-pages.css
   (which loads later and re-applies dark gradients with !important).

   This file loads LAST (in layout-foot.ejs) and uses !important to enforce
   a simple, readable Ramsey-style palette across EVERY page.

   PALETTE (simple, clean, professional):
   ─────────────────────────────────────────────────────────────────────────────
   Background (page):    #f8f9fa    (very light gray)
   Background (cards):   #ffffff    (white)
   Primary text:         #111827    (near-black — ALL body text)
   Secondary text:       #4b5563    (medium gray — captions, meta, dates)
   Accent / links:       #16a34a    (green)
   CTA button bg:        #16a34a    (solid green — NO gradients)
   CTA button text:      #ffffff    (white on green)
   Card borders:         #e5e7eb    (light gray)
   ─────────────────────────────────────────────────────────────────────────────

   RULES:
   - NO gradient backgrounds on sections or cards
   - NO text opacity below 0.8
   - NO dark section backgrounds (except error banners)
   - ALL text must be dark on light backgrounds
   - ALL CTA buttons: green bg + white text

   DO NOT ADD MORE COLORS. Fewer colors = fewer problems.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
   1. ROOT VARIABLE OVERRIDES
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Text */
  --text-base: #111827 !important;
  --text-subdued: #4b5563 !important;
  --text-muted: #4b5563 !important;
  --text-link: #16a34a !important;
  --text-link-hover: #15803d !important;

  /* Backgrounds */
  --bg-page: #f8f9fa !important;
  --bg-white: #ffffff !important;
  --bg-alt: #f8f9fa !important;

  /* Brand */
  --primary: #16a34a !important;
  --primary-dark: #15803d !important;

  /* Override light grays that get used as text colors */
  --gray-400: #6b7280 !important;
  --gray-500: #4b5563 !important;

  /* SP overrides */
  --sp-text-primary: #111827 !important;
  --sp-text-secondary: #4b5563 !important;
  --sp-text-muted: #4b5563 !important;
  --sp-bg-primary: #ffffff !important;
  --sp-bg-secondary: #f8f9fa !important;

  /* RP overrides */
  --rp-text: #111827 !important;
  --rp-bg: #f8f9fa !important;
  --rp-white: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   2. PAGE & SECTION BACKGROUNDS — White or very light gray ONLY
   ══════════════════════════════════════════════════════════════════════════════ */

body {
  background-color: #f8f9fa !important;
  color: #111827 !important;
}

main,
.main-content,
.page-content,
.content-wrapper,
#main-content {
  background: #ffffff !important;
}

/* Extra specificity for main elements with inline dark backgrounds */
main[style],
#main-content[style] {
  background: #ffffff !important;
}

/* Kill ALL dark hero sections — make them light */
.sp-hero,
.pricing-hero,
.law-firms-hero,
.employers-hero,
.help-hero,
.about-hero,
.api-hero,
.quiz-hero,
.contact-hero,
.advertise-hero,
.roundup-hero,
.dir-hero,
.hero-compact,
.hero-compact.hero-v2,
.resource-hero,
.policy-hero,
.share-hero,
.sotw-archive-hero,
[class*="-hero"] {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  color: #111827 !important;
}

/* Kill hero pseudo-element decorative gradients */
.sp-hero::before,
.sp-hero::after,
.pricing-hero::before,
.pricing-hero::after,
[class*="-hero"]::before,
[class*="-hero"]::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Generic sections — white, no gradients */
section,
.section {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Alternating sections → light gray */
section:nth-child(even),
.section-alt,
.sp-section--alt,
.bg-alt,
.bg-gray {
  background-color: #f8f9fa !important;
  background-image: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   3. TEXT COLORS — Dark text everywhere
   ══════════════════════════════════════════════════════════════════════════════ */

/* Headings — all dark */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.sp-hero h1,
.sp-hero h2,
.pricing-hero h1,
.pricing-hero h2,
[class*="-hero"] h1,
[class*="-hero"] h2,
[class*="-hero"] h3,
.sp-card-title,
.sp-card h3,
.sp-card h4,
.plan-name,
.plan-tier,
.sp-pricing-card h3,
.sp-section-title,
.hiw-title,
.section-title {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

/* Body text — all dark */
p, li, td, th, dt, dd,
label, legend, figcaption,
blockquote, cite, address,
summary,
.description,
.sp-page,
.sp-article-body,
.sp-article-body p,
.sp-article-body li,
.sp-article-body h2,
.sp-article-body h3,
.detail-text,
.sp-hero-sub,
.sp-hero p,
.pricing-hero p,
[class*="-hero"] p,
[class*="-hero-sub"],
.sp-pricing-feature,
.plan-feature,
.hiw-sub {
  color: #111827 !important;
}

/* Secondary text — medium gray (never lighter than #4b5563) */
small, time,
.meta, .date, .byline,
.caption, .footnote,
.subtitle, .subheading,
.text-muted, .text-secondary, .text-subdued,
.text-gray,
.secondary-text, .helper-text,
.form-text, .input-hint,
.sp-testimonial-attr,
.sp-hero-sub,
.hiw-desc,
.hero-v2-trust,
.sp-stat-label {
  color: #4b5563 !important;
}

/* Kill gradient text effects — make them solid */
[style*="-webkit-text-fill-color:transparent"],
[style*="-webkit-text-fill-color: transparent"],
[style*="text-fill-color:transparent"],
[style*="background-clip:text"],
[style*="background-clip: text"] {
  -webkit-text-fill-color: #111827 !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  color: #111827 !important;
}

/* Force opacity on text elements */
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th, label, div {
  text-decoration-color: currentColor;
}


/* ══════════════════════════════════════════════════════════════════════════════
   4. INLINE STYLE OVERRIDES — Target elements with problematic inline colors
   ══════════════════════════════════════════════════════════════════════════════ */

/* Light gray text that's hard to read on white */
[style*="color:#9ca3af"],
[style*="color: #9ca3af"],
[style*="color:#6b7280"],
[style*="color: #6b7280"],
[style*="color:#d1d5db"],
[style*="color: #d1d5db"],
[style*="color:#a7c4ae"],
[style*="color: #a7c4ae"],
[style*="color:#94a3b8"],
[style*="color: #94a3b8"] {
  color: #4b5563 !important;
}

/* Green text that's hard to read — make it the proper accent green */
[style*="color:#4ade80"],
[style*="color: #4ade80"],
[style*="color:#86efac"],
[style*="color: #86efac"] {
  color: #16a34a !important;
}

/* White/light text on now-light backgrounds — make dark */
[style*="color:#fff"]:not(button):not([class*="btn"]):not([class*="cta"]):not([role="alert"]),
[style*="color: #fff"]:not(button):not([class*="btn"]):not([class*="cta"]):not([role="alert"]),
[style*="color:#f1f5f9"]:not(button):not([class*="btn"]):not([class*="cta"]),
[style*="color: #f1f5f9"]:not(button):not([class*="btn"]):not([class*="cta"]),
[style*="color:#e2e8f0"],
[style*="color: #e2e8f0"] {
  color: #111827 !important;
}

/* Low-opacity white text — override to dark */
[style*="color:rgba(255,255,255,0.3"],
[style*="color:rgba(255,255,255,0.4"],
[style*="color:rgba(255,255,255,0.5"],
[style*="color:rgba(255,255,255,0.6"],
[style*="color:rgba(255,255,255,0.7"],
[style*="color:rgba(255,255,255,0.8"],
[style*="color:rgba(255,255,255,0.9"],
[style*="color: rgba(255,255,255,0.3"],
[style*="color: rgba(255,255,255,0.4"],
[style*="color: rgba(255,255,255,0.5"],
[style*="color: rgba(255,255,255,0.6"],
[style*="color: rgba(255,255,255,0.7"],
[style*="color: rgba(255,255,255,0.8"],
[style*="color: rgba(255,255,255,0.9"],
[style*="color:rgba(255, 255, 255"],
[style*="color: rgba(255, 255, 255"] {
  color: #111827 !important;
}

/* Dark background containers that should be white —
   Target divs/sections with inline dark backgrounds (not buttons) */
div[style*="background:#0"],
div[style*="background: #0"],
div[style*="background:#1a"],
div[style*="background: #1a"],
section[style*="background:#0"],
section[style*="background: #0"],
section[style*="background:linear-gradient"],
section[style*="background: linear-gradient"],
div[style*="background:linear-gradient(135deg,#0"],
div[style*="background:linear-gradient(135deg,#1"],
div[style*="background:linear-gradient(135deg, #0"],
div[style*="background:linear-gradient(135deg, #1"],
div[style*="background:linear-gradient(135deg,rgba(10"],
div[style*="background:linear-gradient(135deg,rgba(19"],
div[style*="background:linear-gradient(135deg,rgba(13"],
div[style*="background:linear-gradient(180deg, #0"],
div[style*="background:linear-gradient(180deg,#0"] {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   5. LINKS — Green accent
   ══════════════════════════════════════════════════════════════════════════════ */

a:not([class*="btn"]):not([class*="cta"]):not([class*="nav"]):not([class*="sidebar-btn"]):not(button) {
  color: #16a34a !important;
}

a:not([class*="btn"]):not([class*="cta"]):not([class*="nav"]):not([class*="sidebar-btn"]):not(button):hover {
  color: #15803d !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   6. CARDS — White background, subtle border
   ══════════════════════════════════════════════════════════════════════════════ */

.card,
.sp-card,
.pricing-card,
.plan-card,
.sidebar-card,
.feature-card,
.testimonial-card,
.sp-pricing-card,
.tool-card,
.guide-card,
.settlement-card,
.attorney-ad-card,
[class*="plan-card"] {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
}

/* Card hover */
.sp-card:hover,
.pricing-card:hover,
.plan-card:hover,
.sidebar-card:hover {
  border-color: #16a34a !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   7. BUTTONS — Solid green, white text, NO gradients
   ══════════════════════════════════════════════════════════════════════════════ */

/* Primary CTA buttons */
.btn-primary,
.cta-btn,
.btn-cta,
.sp-pricing-cta,
.sp-cta-btn,
.hero-cta-primary,
.hero-cta-dominant,
.ramsey-cta,
.sidebar-btn,
.sidebar-btn-xl,
.filing-cta-link,
.pe-file-btn,
.dir-cta-primary,
.adv-hero-cta,
.iadv-hero-cta,
button[type="submit"],
input[type="submit"] {
  background: #16a34a !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
}

.btn-primary:hover,
.cta-btn:hover,
.btn-cta:hover,
.sp-pricing-cta:hover,
.sp-cta-btn:hover,
.hero-cta-primary:hover,
.hero-cta-dominant:hover,
.adv-hero-cta:hover,
.iadv-hero-cta:hover,
button[type="submit"]:hover {
  background: #15803d !important;
  color: #ffffff !important;
}

/* Secondary/outline buttons */
.btn-secondary,
.btn-outline,
.hero-cta-secondary,
.dir-cta-secondary {
  background: #ffffff !important;
  background-image: none !important;
  color: #16a34a !important;
  border: 2px solid #16a34a !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.hero-cta-secondary:hover {
  background: #f0fdf4 !important;
  color: #15803d !important;
}

/* Inline-styled buttons/links with green gradient — make solid */
a[style*="background:linear-gradient"][style*="color:#fff"],
a[style*="background:linear-gradient"][style*="color:white"],
a[style*="background: linear-gradient"][style*="color:#fff"],
a[style*="background: linear-gradient"][style*="color: #fff"],
button[style*="background:linear-gradient"],
button[style*="background: linear-gradient"] {
  background: #16a34a !important;
  background-image: none !important;
  color: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   8. BADGES & PILLS — Light bg, dark text (consistent)
   ══════════════════════════════════════════════════════════════════════════════ */

.badge,
.pill,
.tag,
.sp-hero-badge,
.hero-eyebrow,
.hero-pill,
.sp-badge,
.dir-active-tag,
.dir-noproof-quick,
[class*="badge-"],
[class*="tag-"] {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

/* Urgent/deadline badges */
.badge-urgent,
.dir-badge-urgent,
[class*="badge-urgent"],
[class*="badge-danger"] {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

/* Gold/premium badges */
.nav-pro-badge,
.nav-pro-badge--plus,
[class*="badge-gold"],
[class*="badge-premium"] {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   9. FORM INPUTS — Dark text, visible borders
   ══════════════════════════════════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
textarea,
select,
.form-control,
.input-field {
  color: #111827 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
}

input::placeholder,
textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   10. NAVIGATION — Light theme, dark text
   ══════════════════════════════════════════════════════════════════════════════ */

/* Desktop nav links */
.nav-link,
.nav-item a,
nav a:not([class*="btn"]):not([class*="cta"]) {
  color: #111827 !important;
}

.nav-link:hover,
nav a:not([class*="btn"]):not([class*="cta"]):hover {
  color: #16a34a !important;
}

.nav-link.active,
.nav-link--active {
  color: #16a34a !important;
}

/* Mobile nav — ensure light theme */
.nav-mobile-menu {
  background: rgba(255, 255, 255, 0.98) !important;
}

.nav-mobile-link {
  color: #111827 !important;
}

.nav-mobile-link:hover {
  color: #16a34a !important;
  background: #f0fdf4 !important;
}

.nav-mobile-accordion-btn {
  color: #111827 !important;
  background: transparent !important;
}

.nav-mobile-accordion-btn:hover {
  color: #16a34a !important;
}

.nav-mobile-group-label,
.nav-mobile-sublabel {
  color: #6b7280 !important;
}

/* Mobile pricing pill — readable */
.nav-mobile-pricing {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

/* Mobile mega menu — For Business section contrast fixes */
.nav-mobile-sublabel {
  color: #374151 !important;         /* gray-700: 10:1 on white — was #6b7280 (4.6:1) */
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.nav-mobile-price-tag {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #92400e !important;          /* amber-800: 7:1 on white — was rgba(251,191,36,0.65) ~1.8:1 */
  margin-left: 0.25rem !important;
}

.nav-mobile-accordion-group--products .nav-mobile-accordion-body .nav-mobile-link {
  color: #1f2937 !important;          /* gray-800: 14:1 on white */
}

.nav-mobile-accordion-group--products .nav-mobile-accordion-body .nav-mobile-link:hover {
  color: #15803d !important;          /* green-700: 5.2:1 on white — was #fbbf24 (~1.7:1) */
  background: rgba(22, 163, 74, 0.06) !important;
}

.nav-mobile-accordion-btn--products {
  color: #92400e !important;          /* amber-800: 7:1 on white — was #F5A623 (~2.9:1) */
  font-weight: 700 !important;
}

.nav-mobile-accordion-btn--products:hover {
  color: #78350f !important;          /* amber-900: 9.4:1 on white */
  background: rgba(251, 191, 36, 0.08) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   11. FOOTER — Light theme
   ══════════════════════════════════════════════════════════════════════════════ */

footer,
.footer,
.sr-ft-footer,
[class*="footer"] {
  background: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
  border-top: 1px solid #e5e7eb !important;
}

footer a,
.footer a,
[class*="footer"] a {
  color: #4b5563 !important;
}

footer a:hover,
.footer a:hover {
  color: #16a34a !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   12. SETTLEMENT DETAIL PAGE — Specific overrides
   ══════════════════════════════════════════════════════════════════════════════ */

/* Detail sidebar cards */
.detail-sidebar .sidebar-card,
#legalHelpSection,
.payout-estimator-widget,
#sdSimilarEmailCard {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
}

/* Detail sidebar card headings */
.sidebar-card h3,
.sidebar-card h4,
.sidebar-card .card-heading {
  color: #111827 !important;
}

/* Detail sidebar card text */
.sidebar-card p,
.sidebar-card span,
.sidebar-card li,
.sidebar-card .card-text {
  color: #111827 !important;
}

/* Number circles in detail page */
div[style*="border-radius:50%"][style*="background:linear-gradient"] {
  background: #16a34a !important;
  background-image: none !important;
  color: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   13. QUIZ PAGE — Light theme enforcement
   ══════════════════════════════════════════════════════════════════════════════ */

.quiz-container,
.quiz-result,
.quiz-card,
#qzShareEarnPanel,
#qzProUpsellBox,
[id*="quiz"],
[class*="quiz-"] {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
}

.quiz-container h1,
.quiz-container h2,
.quiz-container h3,
[class*="quiz-"] h1,
[class*="quiz-"] h2,
[class*="quiz-"] h3 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

.quiz-container p,
.quiz-container span,
.quiz-container label,
[class*="quiz-"] p {
  color: #111827 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   14. REFER/SHARE PAGE — Light theme
   ══════════════════════════════════════════════════════════════════════════════ */

.refer-hero,
.login-prompt,
.share-hero,
[class*="refer-"] {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
}

.refer-hero h1,
.refer-hero h2,
.refer-hero p {
  color: #111827 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   15. POPUPS & MODALS — Keep dark (these are overlays, not page sections)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Exit intent and FOMO popups are overlays — they're fine dark.
   But text inside must be readable. */
.exit-intent-popup h3,
.quiz-cta-popup h3 {
  color: #f1f5f9 !important;
}

.exit-intent-popup p,
.exit-intent-cta-note,
.quiz-cta-popup .quiz-cta-subtext {
  color: rgba(255,255,255,0.85) !important;
}

/* Override popups that AREN'T modals (floating panels on page) */
/* The quiz share/earn panel floats on the page — make it light */
#qzShareEarnPanel {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

#qzShareEarnPanel h3,
#qzShareEarnPanel h4,
#qzShareEarnPanel p,
#qzShareEarnPanel span {
  color: #111827 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   16. EXCEPTIONS — Preserve these intentional colors
   ══════════════════════════════════════════════════════════════════════════════ */

/* Error/alert banners — keep colored */
[role="alert"],
.alert-error,
.alert-danger,
#urgentDeadlineBanner {
  /* Let these keep their red/warning backgrounds */
}

/* Explicitly allow white text on genuine alert banners */
#urgentDeadlineBanner,
#urgentDeadlineBanner * {
  color: #ffffff !important;
}

/* Success messages */
.alert-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
}

/* Warning messages */
.alert-warning {
  background: #fffbeb !important;
  color: #92400e !important;
}

/* Progress bars — keep their fill colors */
[role="progressbar"],
.progress-bar,
[class*="progress"] > div {
  /* Don't override - these need their visual fill */
}

/* Star ratings */
[class*="star-fill"],
.star-filled {
  color: #fbbf24 !important;
}

/* Icons inherit from parent */
button svg, button i,
a svg, a i,
.btn svg, .btn i {
  color: inherit !important;
  fill: currentColor !important;
}

/* Announcement bar — keep green bg */
.announce-bar {
  color: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   17. SETTLEMENT MONITORING PAGE — Has its own dark theme design system
       Only fix if it's causing readability issues, otherwise leave alone
   ══════════════════════════════════════════════════════════════════════════════ */

/* Settlement monitoring uses a custom dark theme — but we should still
   ensure its text is readable. No changes needed here since it's a
   self-contained design with intentionally dark backgrounds. */


/* ══════════════════════════════════════════════════════════════════════════════
   18. OPACITY ENFORCEMENT — All text at full opacity
   ══════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
p, li, td, th, label, a, span,
.sp-stat-label,
.sp-stat-number,
.sp-badge,
.hero-v2-trust,
.trust-strip .ts-label {
  opacity: 1 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   19. COMPARISON PAGES — Light theme
   ══════════════════════════════════════════════════════════════════════════════ */

[class*="compare-"],
[class*="vs-"] {
  color: #111827 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   20. DATA BREACH / CLOSING SOON / EXPIRED — Light section backgrounds
   ══════════════════════════════════════════════════════════════════════════════ */

.closing-section,
.expired-section,
.breach-section,
[class*="closing-"],
[class*="expired-"],
[class*="breach-"] {
  background: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   21. BREADCRUMBS — Readable
   ══════════════════════════════════════════════════════════════════════════════ */

.sp-breadcrumb,
.breadcrumb {
  color: #4b5563 !important;
}

.sp-breadcrumb a,
.breadcrumb a {
  color: #16a34a !important;
}

.sp-breadcrumb-sep {
  color: #9ca3af !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   22. TABLES — Readable
   ══════════════════════════════════════════════════════════════════════════════ */

table {
  color: #111827 !important;
}

th {
  color: #111827 !important;
  background: #f8f9fa !important;
}

td {
  color: #111827 !important;
}

table a {
  color: #16a34a !important;
}