/* NUDGEWIRE DARK MODE CONTRAST FIX - FINAL SOLUTION */

/* ================================================
   RESET ALL CONFLICTING STYLES
   ================================================ */

/* 1. Force dark mode background and text colors */
html.dark,
html.dark body {
    background-color: #0a0a0a !important;
    color: #e5e7eb !important;
}

/* 2. Override all text color classes in dark mode */
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600,
.dark .text-black {
    color: #e5e7eb !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
    color: #9ca3af !important;
}

.dark .text-gray-300,
.dark .text-gray-200,
.dark .text-gray-100,
.dark .text-white {
    color: #f3f4f6 !important;
}

/* 3. Fix dark mode backgrounds */
.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

.dark .bg-gray-200 {
    background-color: #374151 !important;
}

/* 4. Article cards must have proper contrast */
.dark article,
.dark .article-card,
.dark [class*="card"],
.dark .bg-white.rounded-lg {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
}

/* 5. Headers must be bright white in dark mode */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .font-bold,
.dark .font-semibold {
    color: #ffffff !important;
}

/* 6. Paragraphs and body text */
.dark p,
.dark .text-sm,
.dark .text-base,
.dark .text-lg {
    color: #d1d5db !important;
}

/* 7. Links in dark mode */
.dark a:not(.gradient-text):not(.glowing-title) {
    color: #60a5fa !important;
}

.dark a:hover:not(.gradient-text):not(.glowing-title) {
    color: #93bbfc !important;
}

/* 8. Navigation specific fixes */
.dark nav {
    background-color: #111827 !important;
    border-bottom: 1px solid #374151 !important;
}

.dark nav a,
.dark nav span {
    color: #e5e7eb !important;
}

.dark nav a:hover {
    color: #06b6d4 !important;
}

/* 9. Footer specific fixes */
.dark footer {
    background-color: #030712 !important;
}

.dark footer p,
.dark footer .text-gray-400 {
    color: #9ca3af !important;
}

.dark footer h3 {
    color: #ffffff !important;
}

/* 10. Disclaimer box fix */
.dark .bg-gradient-to-br.from-gray-900,
.dark .bg-warning-red\/20,
.dark [class*="bg-gradient"] {
    background: rgba(31, 41, 55, 0.95) !important;
    border: 1px solid rgba(75, 85, 99, 0.5) !important;
}

.dark .bg-gradient-to-br.from-gray-900 h3,
.dark .bg-warning-red\/20 h3 {
    color: #fbbf24 !important;
}

.dark .bg-gradient-to-br.from-gray-900 p,
.dark .bg-warning-red\/20 p {
    color: #e5e7eb !important;
}

/* 11. Special elements that should keep their colors */
.dark .text-warning-red {
    color: #ef4444 !important;
}

.dark .text-ai-accent {
    color: #06b6d4 !important;
}

.dark .gradient-text,
.dark .glowing-title {
    /* These keep their gradient effect */
    background: linear-gradient(45deg, #00ff00, #00ff88, #00ff00) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 12. Button fixes */
.dark button:not(#darkModeToggle) {
    background-color: #374151 !important;
    color: #e5e7eb !important;
    border: 1px solid #4b5563 !important;
}

.dark button:hover:not(#darkModeToggle) {
    background-color: #4b5563 !important;
}

/* 13. Input and form elements */
.dark input,
.dark textarea,
.dark select {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
}

/* 14. Code blocks and preformatted text */
.dark pre,
.dark code {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

/* 15. Table fixes */
.dark table {
    background-color: #1f2937 !important;
}

.dark th {
    background-color: #111827 !important;
    color: #ffffff !important;
}

.dark td {
    color: #d1d5db !important;
    border-color: #374151 !important;
}

/* 16. Dropdown and modal fixes */
.dark .dropdown,
.dark .modal,
.dark [role="dialog"] {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
}

/* 17. Badge and tag fixes */
.dark .badge,
.dark .tag,
.dark [class*="badge"],
.dark [class*="tag"] {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

/* 18. Alert and notification fixes */
.dark .alert,
.dark .notification {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
}

/* 19. Ensure all text is visible */
.dark * {
    color: inherit;
}

/* 20. Override any remaining inline styles */
.dark [style*="color: black"],
.dark [style*="color:#000"],
.dark [style*="color: #000"] {
    color: #e5e7eb !important;
}

.dark [style*="background: white"],
.dark [style*="background:#fff"],
.dark [style*="background: #fff"] {
    background-color: #1f2937 !important;
}

/* 21. Stats and counters */
.dark .stats-counter,
.dark .text-4xl.font-bold {
    color: #10b981 !important;
}

/* 22. Category badges */
.dark .category-badge,
.dark [class*="category"] {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

/* 23. Timestamp text */
.dark .timestamp,
.dark time,
.dark [data-timestamp] {
    color: #9ca3af !important;
}

/* 24. Image overlays */
.dark .image-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* 25. Loading states */
.dark .loading,
.dark .skeleton {
    background-color: #374151 !important;
}

/* ================================================
   LIGHT MODE FIXES (ensure contrast there too)
   ================================================ */

html:not(.dark) body {
    background-color: #ffffff !important;
    color: #111827 !important;
}

html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6 {
    color: #111827 !important;
}

html:not(.dark) p {
    color: #374151 !important;
}

html:not(.dark) .article-card {
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}

/* ================================================
   IMPORTANT OVERRIDES
   ================================================ */

/* Make sure these rules take precedence */
@media (prefers-color-scheme: dark) {
    html.dark * {
        color-scheme: dark;
    }
}

/* Debugging helper - uncomment to see which elements have contrast issues */
/*
.dark *:not(.gradient-text):not(.glowing-title) {
    outline: 1px solid red !important;
}
*/