/* Centralized color definitions for all HTML templates */

/* Background Colors */
:root {
    /* Light mode backgrounds */
    --bg-primary-light: #ffffff;
    --bg-secondary-light: #bfdbfe;
    --bg-tertiary-light: #f3f4f6;
    
    /* Dark mode backgrounds */
    --bg-primary-dark: #0d1929;
    --bg-secondary-dark: #1e3a5c;
    --bg-tertiary-dark: #1f3a5c;
}

/* Text Colors */
:root {
    /* Light mode text */
    --text-primary-light: #111827;
    --text-secondary-light: #374151;
    --text-tertiary-light: #6b7280;
    --text-inverse-light: #ffffff;
    
    /* Dark mode text */
    --text-primary-dark: #ffffff;
    --text-secondary-dark: #e5e7eb;
    --text-tertiary-dark: #d1d5db;
    --text-inverse-dark: #000000;
}

/* Chart Colors */
:root {
    --chart-axis-light: #374151;
    --chart-axis-dark: #d1d5db;
    --chart-line-light: #3b82f6;
    --chart-line-dark: #60a5fa;
}

/* Apply theme-specific colors */
.light {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --bg-tertiary: var(--bg-tertiary-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-tertiary: var(--text-tertiary-light);
    --text-inverse: var(--text-inverse-light);
    --chart-axis: var(--chart-axis-light);
    --chart-line: var(--chart-line-light);
}

.dark {
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-tertiary: var(--text-tertiary-dark);
    --text-inverse: var(--text-inverse-dark);
    --chart-axis: var(--chart-axis-dark);
    --chart-line: var(--chart-line-dark);
}

/* Force dark mode styles with higher specificity */
.dark body {
    background-color: var(--bg-primary-dark) !important;
    color: var(--text-primary-dark) !important;
}

.dark .bg-gray-100 {
    background-color: var(--bg-secondary-dark) !important;
}

.dark .bg-gray-200 {
    background-color: var(--bg-tertiary-dark) !important;
}

/* Additional dark mode overrides for all common background classes */
.dark .bg-primary {
    background-color: var(--bg-primary-dark) !important;
}

.dark .bg-secondary {
    background-color: var(--bg-secondary-dark) !important;
}

.dark .bg-tertiary {
    background-color: var(--bg-tertiary-dark) !important;
}

/* Override any Tailwind dark mode classes */
.dark .dark\:bg-gray-800 {
    background-color: var(--bg-secondary-dark) !important;
}

.dark .dark\:bg-gray-700 {
    background-color: var(--bg-tertiary-dark) !important;
}

/* Force text colors in dark mode */
.dark .text-gray-900 {
    color: var(--text-primary-dark) !important;
}

.dark .text-gray-700 {
    color: var(--text-secondary-dark) !important;
}

.dark .text-gray-600 {
    color: var(--text-tertiary-dark) !important;
}

/* Override Tailwind dark text colors */
.dark .dark\:text-white {
    color: var(--text-primary-dark) !important;
}

.dark .dark\:text-gray-300 {
    color: var(--text-secondary-dark) !important;
}

.dark .dark\:text-gray-400 {
    color: var(--text-tertiary-dark) !important;
}

/* Ultra-specific overrides for all possible background scenarios */
html.dark body {
    background-color: var(--bg-primary-dark) !important;
    color: var(--text-primary-dark) !important;
}

/* Removed conflicting rule that was overriding tile backgrounds */

/* Remove overly broad color overrides that affect buttons */
/* Button colors are now handled specifically below */

/* Force all text colors in dark mode */
html.dark * {
    color: inherit;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark span,
html.dark div,
html.dark td,
html.dark th {
    color: #ffffff !important;
}

html.dark .text-gray-900,
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: #ffffff !important;
}

/* Override any white backgrounds */
html.dark [style*="background-color: white"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background: white"],
html.dark [style*="background: #ffffff"] {
    background-color: var(--bg-primary-dark) !important;
}


/* Specific element overrides */
html.dark body,
html.dark body[style*="background"],
html.dark body[style*="background-color"] {
    background-color: var(--bg-primary-dark) !important;
    color: var(--text-primary-dark) !important;
}

/* Note: Removed body[class*="bg-"] to prevent affecting buttons */

html.dark div:not(.bg-gray-100):not(.bg-gray-200):not([class*="max-w-"]):not([class*="container"]) {
    background-color: inherit !important;
}

/* Note: Removed div[class*="bg-"] rule to preserve button colors */

html.dark section,
html.dark article,
html.dark main,
html.dark aside,
html.dark nav,
html.dark header,
html.dark footer:not(.bg-gray-100):not(.bg-gray-200) {
    background-color: inherit !important;
    color: #ffffff !important;
}

/* Force dark mode on ALL background-related classes */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-200,
html.dark .bg-gray-300,
html.dark .bg-gray-400,
html.dark .bg-gray-500,
html.dark .bg-gray-600,
html.dark .bg-gray-700,
html.dark .bg-gray-800,
html.dark .bg-gray-900 {
    background-color: #1e3a5c !important;
    color: #ffffff !important;
}

/* Force text colors in dark mode */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
    color: #ffffff !important;
}

/* EMERGENCY FALLBACK - If CSS variables fail, use direct colors */
html.dark {
    --bg-primary: var(--bg-primary-dark) !important;
    --bg-secondary: var(--bg-secondary-dark) !important;
    --bg-tertiary: var(--bg-tertiary-dark) !important;
    --text-primary: var(--text-primary-dark) !important;
    --text-secondary: var(--text-secondary-dark) !important;
    --text-tertiary: var(--text-tertiary-dark) !important;
}

/* Force immediate application of dark mode styles */
html.dark body {
    background: var(--bg-primary-dark) !important;
    color: var(--text-primary-dark) !important;
}

html.dark .bg-gray-100,
html.dark .bg-gray-200,
html.dark .bg-gray-800 {
    background: #1e3a5c !important;
    color: #ffffff !important;
}

/* Additional safety overrides for any remaining white backgrounds */
/* Note: Removed overly broad selectors that could affect buttons */


html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark p, html.dark span, html.dark div, html.dark td, html.dark th {
    color: #ffffff !important;
}

/* Utility classes for easy color application */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-inverse { color: var(--text-inverse) !important; }

.chart-axis { color: var(--chart-axis) !important; }
.chart-line { color: var(--chart-line) !important; }

/* Legacy Tailwind-like classes for backward compatibility */
.bg-gray-50 { background-color: var(--bg-primary-light) !important; }
.dark .bg-gray-50 { background-color: var(--bg-primary-dark) !important; }

.bg-gray-100 { background-color: var(--bg-secondary-light) !important; }
.dark .bg-gray-100 { background-color: var(--bg-secondary-dark) !important; }

.bg-gray-200 { background-color: var(--bg-tertiary-light) !important; }
.dark .bg-gray-200 { background-color: var(--bg-tertiary-dark) !important; }

/* Ensure completely black background outside tiles in dark mode */
html.dark body,
html.dark html,
.dark body {
    background-color: var(--bg-primary-dark) !important;
    background: var(--bg-primary-dark) !important;
}

/* Ensure main content areas use the blueish background */
html.dark main,
html.dark .container > div:first-child,
html.dark .max-w-2xl > div:first-child,
html.dark .max-w-md > div:first-child {
    background-color: var(--bg-primary-dark) !important;
}

/* Ensure tiles use the darker blue shade in dark mode */
.dark .bg-gray-100,
.dark div[class*="bg-gray-100"] {
    background-color: var(--bg-secondary-dark) !important;
}

.text-gray-900 { color: var(--text-primary-light) !important; }
.dark .text-gray-900 { color: var(--text-primary-dark) !important; }

.text-gray-700 { color: var(--text-secondary-light) !important; }
.dark .text-gray-700 { color: var(--text-secondary-dark) !important; }

.text-gray-600 { color: var(--text-tertiary-light) !important; }
.dark .text-gray-600 { color: var(--text-tertiary-dark) !important; }

.text-gray-300 { color: var(--text-secondary-dark) !important; }
.dark .text-gray-300 { color: var(--text-secondary-light) !important; }

.text-gray-500 { color: var(--text-tertiary-light) !important; }
.dark .text-gray-500 { color: var(--text-tertiary-dark) !important; }

/* FINAL OVERRIDE - Most specific rules for dark mode */
html.dark body,
html.dark html {
    background-color: var(--bg-primary-dark) !important;
    background: var(--bg-primary-dark) !important;
}

/* Force ONLY the specific tile interiors to use darker blue */
html.dark .container > div:first-child,
html.dark .max-w-2xl > div:first-child,
html.dark .max-w-md > div:first-child,
html.dark .bg-gray-100,
html.dark .bg-gray-100 *,
html.dark div[class*="bg-gray-100"]:not(body):not(html),
html.dark div[class*="bg-gray-100"] *:not(body):not(html),
html.dark .container > div[class*="rounded-lg"],
html.dark .container > div[class*="rounded-lg"] *,
html.dark .container > div[class*="shadow"],
html.dark .container > div[class*="shadow"] *,
html.dark .max-w-2xl > div[class*="rounded-lg"],
html.dark .max-w-2xl > div[class*="rounded-lg"] *,
html.dark .max-w-2xl > div[class*="shadow"],
html.dark .max-w-2xl > div[class*="shadow"] *,
html.dark .max-w-md > div[class*="rounded-lg"],
html.dark .max-w-md > div[class*="rounded-lg"] *,
html.dark .max-w-md > div[class*="shadow"],
html.dark .max-w-md > div[class*="shadow"] * {
    background-color: #1e3a5c !important;
    background: #1e3a5c !important;
}

/* Force everything else to be transparent (so body black shows through) */

/* Ensure buttons have proper colored backgrounds in dark mode */
/* Target both light and dark mode Tailwind classes */
html.dark body .bg-blue-500,
html.dark body .dark\:bg-blue-600,
html.dark body a[class*="bg-blue"],
html.dark body button[class*="bg-blue"],
html.dark div .bg-blue-500,
html.dark div .dark\:bg-blue-600,
html.dark div a[class*="bg-blue"],
html.dark div button[class*="bg-blue"] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

html.dark body .bg-green-500,
html.dark body .dark\:bg-green-600,
html.dark body a[class*="bg-green"],
html.dark body button[class*="bg-green"],
html.dark div .bg-green-500,
html.dark div .dark\:bg-green-600,
html.dark div a[class*="bg-green"],
html.dark div button[class*="bg-green"] {
    background-color: #22c55e !important;
    color: #ffffff !important;
}

html.dark body .bg-purple-500,
html.dark body .dark\:bg-purple-600,
html.dark body a[class*="bg-purple"],
html.dark body button[class*="bg-purple"],
html.dark div .bg-purple-500,
html.dark div .dark\:bg-purple-600,
html.dark div a[class*="bg-purple"],
html.dark div button[class*="bg-purple"] {
    background-color: #a855f7 !important;
    color: #ffffff !important;
}

html.dark body .bg-yellow-500,
html.dark body .dark\:bg-yellow-600,
html.dark body a[class*="bg-yellow"],
html.dark body button[class*="bg-yellow"],
html.dark div .bg-yellow-500,
html.dark div .dark\:bg-yellow-600,
html.dark div a[class*="bg-yellow"],
html.dark div button[class*="bg-yellow"] {
    background-color: #eab308 !important;
    color: #ffffff !important;
}

html.dark body .bg-teal-500,
html.dark body .dark\:bg-teal-600,
html.dark body a[class*="bg-teal"],
html.dark body button[class*="bg-teal"],
html.dark div .bg-teal-500,
html.dark div .dark\:bg-teal-600,
html.dark div a[class*="bg-teal"],
html.dark div button[class*="bg-teal"] {
    background-color: #14b8a6 !important;
    color: #ffffff !important;
}

html.dark body .bg-red-500,
html.dark body .dark\:bg-red-600,
html.dark body a[class*="bg-red"],
html.dark body button[class*="bg-red"],
html.dark div .bg-red-500,
html.dark div .dark\:bg-red-600,
html.dark div a[class*="bg-red"],
html.dark div button[class*="bg-red"] {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

html.dark body .bg-indigo-500,
html.dark body .dark\:bg-indigo-600,
html.dark body a[class*="bg-indigo"],
html.dark body button[class*="bg-indigo"],
html.dark div .bg-indigo-500,
html.dark div .dark\:bg-indigo-600,
html.dark div a[class*="bg-indigo"],
html.dark div button[class*="bg-indigo"] {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

html.dark body .bg-pink-500,
html.dark body .dark\:bg-pink-600,
html.dark body a[class*="bg-pink"],
html.dark body button[class*="bg-pink"],
html.dark div .bg-pink-500,
html.dark div .dark\:bg-pink-600,
html.dark div a[class*="bg-pink"],
html.dark div button[class*="bg-pink"] {
    background-color: #ec4899 !important;
    color: #ffffff !important;
}

html.dark body .bg-orange-500,
html.dark body .dark\:bg-orange-600,
html.dark body a[class*="bg-orange"],
html.dark body button[class*="bg-orange"],
html.dark div .bg-orange-500,
html.dark div .dark\:bg-orange-600,
html.dark div a[class*="bg-orange"],
html.dark div button[class*="bg-orange"] {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

/* Ensure hover states work properly in dark mode */
html.dark body .bg-blue-500:hover,
html.dark body .dark\:bg-blue-600:hover,
html.dark body a[class*="bg-blue"]:hover,
html.dark body button[class*="bg-blue"]:hover,
html.dark div .bg-blue-500:hover,
html.dark div .dark\:bg-blue-600:hover,
html.dark div a[class*="bg-blue"]:hover,
html.dark div button[class*="bg-blue"]:hover {
    background-color: #2563eb !important;
}

html.dark body .bg-green-500:hover,
html.dark body .dark\:bg-green-600:hover,
html.dark body a[class*="bg-green"]:hover,
html.dark body button[class*="bg-green"]:hover,
html.dark div .bg-green-500:hover,
html.dark div .dark\:bg-green-600:hover,
html.dark div a[class*="bg-green"]:hover,
html.dark div button[class*="bg-green"]:hover {
    background-color: #16a34a !important;
}

html.dark body .bg-purple-500:hover,
html.dark body .dark\:bg-purple-600:hover,
html.dark body a[class*="bg-purple"]:hover,
html.dark body button[class*="bg-purple"]:hover,
html.dark div .bg-purple-500:hover,
html.dark div .dark\:bg-purple-600:hover,
html.dark div a[class*="bg-purple"]:hover,
html.dark div button[class*="bg-purple"]:hover {
    background-color: #9333ea !important;
}

html.dark body .bg-yellow-500:hover,
html.dark body .dark\:bg-yellow-600:hover,
html.dark body a[class*="bg-yellow"]:hover,
html.dark body button[class*="bg-yellow"]:hover,
html.dark div .bg-yellow-500:hover,
html.dark div .dark\:bg-yellow-600:hover,
html.dark div a[class*="bg-yellow"]:hover,
html.dark div button[class*="bg-yellow"]:hover {
    background-color: #ca8a04 !important;
}

html.dark body .bg-teal-500:hover,
html.dark body .dark\:bg-teal-600:hover,
html.dark body a[class*="bg-teal"]:hover,
html.dark body button[class*="bg-teal"]:hover,
html.dark div .bg-teal-500:hover,
html.dark div .dark\:bg-teal-600:hover,
html.dark div a[class*="bg-teal"]:hover,
html.dark div button[class*="bg-teal"]:hover {
    background-color: #0d9488 !important;
}

html.dark body .bg-red-500:hover,
html.dark body .dark\:bg-red-600:hover,
html.dark body a[class*="bg-red"]:hover,
html.dark body button[class*="bg-red"]:hover,
html.dark div .bg-red-500:hover,
html.dark div .dark\:bg-red-600:hover,
html.dark div a[class*="bg-red"]:hover,
html.dark div button[class*="bg-red"]:hover {
    background-color: #dc2626 !important;
}

html.dark body .bg-indigo-500:hover,
html.dark body .dark\:bg-indigo-600:hover,
html.dark body a[class*="bg-indigo"]:hover,
html.dark body button[class*="bg-indigo"]:hover,
html.dark div .bg-indigo-500:hover,
html.dark div .dark\:bg-indigo-600:hover,
html.dark div a[class*="bg-indigo"]:hover,
html.dark div button[class*="bg-indigo"]:hover {
    background-color: #4f46e5 !important;
}

html.dark body .bg-pink-500:hover,
html.dark body .dark\:bg-pink-600:hover,
html.dark body a[class*="bg-pink"]:hover,
html.dark body button[class*="bg-pink"]:hover,
html.dark div .bg-pink-500:hover,
html.dark div .dark\:bg-pink-600:hover,
html.dark div a[class*="bg-pink"]:hover,
html.dark div button[class*="bg-pink"]:hover {
    background-color: #db2777 !important;
}

html.dark body .bg-orange-500:hover,
html.dark body .dark\:bg-orange-600:hover,
html.dark body a[class*="bg-orange"]:hover,
html.dark body button[class*="bg-orange"]:hover,
html.dark div .bg-orange-500:hover,
html.dark div .dark\:bg-orange-600:hover,
html.dark div a[class*="bg-orange"]:hover,
html.dark div button[class*="bg-orange"]:hover {
    background-color: #ea580c !important;
}

/* ULTRA-SPECIFIC BUTTON COLOR OVERRIDES - Maximum priority */
html.dark [class*="bg-blue-500"],
html.dark [class*="dark:bg-blue-600"] {
    background-color: #3b82f6 !important;
}

html.dark [class*="bg-green-500"],
html.dark [class*="dark:bg-green-600"] {
    background-color: #22c55e !important;
}

html.dark [class*="bg-purple-500"],
html.dark [class*="dark:bg-purple-600"] {
    background-color: #a855f7 !important;
}

html.dark [class*="bg-yellow-500"],
html.dark [class*="dark:bg-yellow-600"] {
    background-color: #eab308 !important;
}

html.dark [class*="bg-teal-500"],
html.dark [class*="dark:bg-teal-600"] {
    background-color: #14b8a6 !important;
}

html.dark [class*="bg-red-500"],
html.dark [class*="dark:bg-red-600"] {
    background-color: #ef4444 !important;
}

html.dark [class*="bg-indigo-500"],
html.dark [class*="dark:bg-indigo-600"] {
    background-color: #6366f1 !important;
}

html.dark [class*="bg-pink-500"],
html.dark [class*="dark:bg-pink-600"] {
    background-color: #ec4899 !important;
}

html.dark [class*="bg-orange-500"],
html.dark [class*="dark:bg-orange-600"] {
    background-color: #f97316 !important;
}

/* Ensure tile content areas maintain proper backgrounds */
html.dark .bg-gray-100,
html.dark .bg-gray-200,
html.dark .max-w-2xl > div,
html.dark .max-w-md > div,
html.dark .container > div {
    background-color: #1e3a5c !important;
}

/* Fix any elements that became black */
html.dark p,
html.dark span,
html.dark td,
html.dark th {
    background-color: inherit !important;
}