/* ------------------------------------------------------------------
   PayTracker — dark-mode fixes (2026-09-01)
   Bug: several React components use inline styles with hardcoded
   Tailwind pastel-100 backgrounds (amber-100, emerald-100). In dark
   mode the text color switches to slate-100 (white-ish) while the
   background stays light, so the text becomes invisible.
   Fix: in dark mode, replace those light pastel backgrounds with a
   subtle dark tint of the same accent hue, and set an accent-tinted
   light text color so contrast returns.
   Attribute-selectors are needed because the offending styles are
   inline (`style="background: rgb(...); ..."`) so class overrides
   would not win specificity.
   ------------------------------------------------------------------ */

/* --- amber-100 (rgb(254, 243, 199)) — Dashboard peak day chip, Analytics OVERALL card --- */
[data-theme="dark"] [style*="rgb(254, 243, 199)"] {
  background: rgba(251, 191, 36, 0.14) !important;
  color: #fef3c7 !important;
  border: 1px solid rgba(251, 191, 36, 0.28);
}

/* --- emerald-100 (rgb(209, 250, 229)) — Dashboard daily-avg chip, Analytics RETENTION card --- */
[data-theme="dark"] [style*="rgb(209, 250, 229)"] {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #d1fae5 !important;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

/* --- Also cover other pastel-100 variants that may appear on other pages --- */
[data-theme="dark"] [style*="rgb(254, 226, 226)"] {  /* red-100 */
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fee2e2 !important;
  border: 1px solid rgba(239, 68, 68, 0.28);
}
[data-theme="dark"] [style*="rgb(219, 234, 254)"] {  /* blue-100 */
  background: rgba(59, 130, 246, 0.14) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(59, 130, 246, 0.28);
}
[data-theme="dark"] [style*="rgb(243, 232, 255)"] {  /* purple-100 */
  background: rgba(168, 85, 247, 0.14) !important;
  color: #e9d5ff !important;
  border: 1px solid rgba(168, 85, 247, 0.28);
}
[data-theme="dark"] [style*="rgb(252, 231, 243)"] {  /* pink-100 */
  background: rgba(236, 72, 153, 0.14) !important;
  color: #fce7f3 !important;
  border: 1px solid rgba(236, 72, 153, 0.28);
}
[data-theme="dark"] [style*="rgb(224, 231, 255)"] {  /* indigo-100 */
  background: rgba(99, 102, 241, 0.14) !important;
  color: #e0e7ff !important;
  border: 1px solid rgba(99, 102, 241, 0.28);
}
[data-theme="dark"] [style*="rgb(254, 249, 195)"] {  /* yellow-100 */
  background: rgba(234, 179, 8, 0.14) !important;
  color: #fef9c3 !important;
  border: 1px solid rgba(234, 179, 8, 0.28);
}

/* --- Tailwind -50 family (even paler than -100 — same problem, different value) --- */
[data-theme="dark"] [style*="rgb(238, 242, 255)"] {  /* indigo-50 — 30D TOTAL chip */
  background: rgba(99, 102, 241, 0.14) !important;
  color: #e0e7ff !important;
  border: 1px solid rgba(99, 102, 241, 0.28);
}
[data-theme="dark"] [style*="rgb(255, 251, 235)"] {  /* amber-50 */
  background: rgba(251, 191, 36, 0.10) !important;
  color: #fef3c7 !important;
}
[data-theme="dark"] [style*="rgb(236, 253, 245)"] {  /* emerald-50 */
  background: rgba(16, 185, 129, 0.10) !important;
  color: #d1fae5 !important;
}
[data-theme="dark"] [style*="rgb(254, 242, 242)"] {  /* red-50 */
  background: rgba(239, 68, 68, 0.10) !important;
  color: #fee2e2 !important;
}
[data-theme="dark"] [style*="rgb(239, 246, 255)"] {  /* blue-50 */
  background: rgba(59, 130, 246, 0.10) !important;
  color: #dbeafe !important;
}
[data-theme="dark"] [style*="rgb(250, 245, 255)"] {  /* purple-50 */
  background: rgba(168, 85, 247, 0.10) !important;
  color: #e9d5ff !important;
}
[data-theme="dark"] [style*="rgb(253, 242, 248)"] {  /* pink-50 */
  background: rgba(236, 72, 153, 0.10) !important;
  color: #fce7f3 !important;
}
[data-theme="dark"] [style*="rgb(254, 252, 232)"] {  /* yellow-50 */
  background: rgba(234, 179, 8, 0.10) !important;
  color: #fef9c3 !important;
}
[data-theme="dark"] [style*="rgb(247, 250, 252)"] {  /* slate-50 — Gross-volume date-range tab pill container */
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
}
[data-theme="dark"] [style*="rgb(249, 250, 251)"] {  /* gray-50 */
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
}
[data-theme="dark"] [style*="rgb(248, 250, 252)"] {  /* slate-50 alt */
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
}
[data-theme="dark"] [style*="rgb(227, 232, 238)"] {  /* slate-200 — thin border pairs with slate-50 bg */
  border-color: rgba(148, 163, 184, 0.20) !important;
}

/* --- Text-color inversions ---
   Several components hard-code dark navy/slate text colors inline (designed
   for light mode). In dark mode they become invisible on dark backgrounds.
   Force them light in dark mode. Children inherit unless they set their own
   color, which fixes cases like the Gross-volume big "455" number
   (parent SPAN has `color: rgb(10, 37, 64)` inline, digits inherit). */

[data-theme="dark"] [style*="color: rgb(10, 37, 64)"],
[data-theme="dark"] [style*="color:rgb(10, 37, 64)"] {
  color: #f8fafc !important;
}
[data-theme="dark"] [style*="color: rgb(30, 27, 75)"],
[data-theme="dark"] [style*="color:rgb(30, 27, 75)"] {
  color: #e2e8f0 !important;
}
[data-theme="dark"] [style*="color: rgb(66, 84, 102)"],
[data-theme="dark"] [style*="color:rgb(66, 84, 102)"] {
  color: #cbd5e1 !important;
}
[data-theme="dark"] [style*="color: rgb(15, 23, 42)"],
[data-theme="dark"] [style*="color:rgb(15, 23, 42)"] {
  color: #f1f5f9 !important;
}

/* --- Tailwind-class fallbacks in case some cards use classes instead of inline styles --- */
[data-theme="dark"] .bg-amber-100   { background-color: rgba(251, 191,  36, 0.14) !important; color: #fef3c7 !important; }
[data-theme="dark"] .bg-emerald-100 { background-color: rgba( 16, 185, 129, 0.14) !important; color: #d1fae5 !important; }
[data-theme="dark"] .bg-red-100     { background-color: rgba(239,  68,  68, 0.14) !important; color: #fee2e2 !important; }
[data-theme="dark"] .bg-blue-100    { background-color: rgba( 59, 130, 246, 0.14) !important; color: #dbeafe !important; }
[data-theme="dark"] .bg-indigo-50   { background-color: rgba( 99, 102, 241, 0.14) !important; color: #e0e7ff !important; }