/* ============================================
   TEXT COLOR UTILITIES
   Use these classes for consistent theming
   ============================================ */

/* Primary Text - Main content color */
.text-theme-primary {
    color: var(--text-primary) !important;
}

/* Secondary Text - Less prominent text */
.text-theme-secondary {
    color: var(--text-secondary) !important;
}

/* Muted Text - Subtle, low emphasis */
.text-theme-muted {
    color: var(--text-muted) !important;
}

/* Force white text (for dark backgrounds) */
.text-theme-white {
    color: #ffffff !important;
}

/* Force black text (for light backgrounds) */
.text-theme-black {
    color: #000000 !important;
}

/* Auto text color - switches based on theme */
.text-theme-auto {
    color: var(--text-primary);
}

/* Background-aware text color */
.bg-light-text {
    color: #1a1a1a !important;
}

.bg-dark-text {
    color: #f9fafb !important;
}

/* ============================================
   BACKGROUND COLOR UTILITIES
   ============================================ */

.bg-theme-primary {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.bg-theme-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   BORDER COLOR UTILITIES
   ============================================ */

.border-theme {
    border-color: var(--border-color) !important;
}

/* ============================================
   COMPONENT-SPECIFIC OVERRIDES
   ============================================ */

/* Modals */
.modal-content,
.modal-body,
.modal-header {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.dark .modal-content,
.dark .modal-body,
.dark .modal-header {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Cards */
.card {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark .dropdown-menu {
    background-color: var(--bg-secondary);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Tables */
table {
    color: var(--text-primary);
}

th {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

td {
    color: var(--text-primary);
}

.dark table {
    border-color: var(--border-color);
}

/* ============================================
   TAILWIND COMPATIBILITY
   Fix Tailwind classes in wrong theme
   ============================================ */

/* IMPORTANT: Protect buttons FIRST before any overrides */
/* Force white text on colored buttons in ALL modes */
button.text-white,
.btn.text-white,
[type="button"].text-white,
[type="submit"].text-white,
a.text-white[class*="bg-"],
button[class*="bg-gradient"],
button[class*="bg-blue"],
button[class*="bg-purple"],
button[class*="bg-green"],
button[class*="bg-teal"],
button[class*="bg-red"],
button[class*="bg-indigo"] {
    color: #ffffff !important;
}

/* Override Tailwind's text-white in light mode (but NOT on buttons) */
:not(.dark) .text-white:not(.bg-gradient-to-r):not(.bg-gradient-to-l):not(.bg-gradient-to-t):not(.bg-gradient-to-b):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-indigo"]):not([class*="bg-green"]):not([class*="bg-teal"]):not([class*="bg-red"]):not([class*="bg-gray-8"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not(button):not(.btn):not([type="button"]):not([type="submit"]) {
    color: var(--text-primary) !important;
}

/* Override Tailwind's text-black in dark mode */
.dark .text-black:not(.bg-white):not(.bg-gray-50):not(.bg-gray-100):not(.bg-gray-200) {
    color: var(--text-primary) !important;
}

/* Override Tailwind's text-gray classes to use theme colors */
:not(.dark) .text-gray-600,
:not(.dark) .text-gray-700,
:not(.dark) .text-gray-800,
:not(.dark) .text-gray-900 {
    color: var(--text-primary) !important;
}

.dark .text-gray-100,
.dark .text-gray-200,
.dark .text-gray-300,
.dark .text-gray-400 {
    color: var(--text-primary) !important;
}

/* ============================================
   SPECIFIC COMPONENT FIXES
   ============================================ */

/* Ensure buttons keep their explicit text colors */
button,
.btn,
[type="button"],
[type="submit"],
[role="button"] {
    /* Don't override button text colors - let them use their explicit classes */
}

/* Fix Settings page text colors */
.settings-container,
.settings-section {
    color: var(--text-primary);
}

/* Fix form labels */
label:not([class*="bg-"]) {
    color: var(--text-primary) !important;
}

/* Fix navigation text */
nav a:not(.btn):not(.button) {
    color: var(--text-secondary);
}

nav a:hover:not(.btn):not(.button) {
    color: var(--text-primary);
}

.dark nav a:not(.btn):not(.button) {
    color: var(--text-secondary);
}

/* Fix breadcrumb text */
.breadcrumb-item {
    color: var(--text-secondary);
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

/* Fix alert text */
.alert {
    color: var(--text-primary);
}

/* Fix badge text - keep contrasting colors */
.badge {
    /* Keep badges with their original contrasting colors */
}

/* Fix toast notifications */
.toast {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

/* ============================================
   BUTTON TEXT COLOR PROTECTION
   Ensure buttons with colored backgrounds keep white text
   HIGHEST PRIORITY - This overrides ALL theme rules
   ============================================ */

/* Ultra-specific selectors for maximum specificity */
/* These rules will override EVERYTHING including Tailwind utilities */

/* Force white text on ANY button with text-white class */
:not(.dark) button.text-white,
:not(.dark) .btn.text-white,
:not(.dark) [type="button"].text-white,
:not(.dark) [type="submit"].text-white {
    color: #ffffff !important;
}

/* Protect ALL button text colors - most specific selectors */
button.text-white,
button .text-white,
.btn.text-white,
a.btn.text-white,
[type="button"].text-white,
[type="submit"].text-white,
[role="button"].text-white {
    color: #ffffff !important;
}

/* Protect buttons with gradient backgrounds */
button[class*="bg-gradient-to"],
.btn[class*="bg-gradient-to"],
[class*="bg-gradient-to-r"].text-white,
[class*="bg-gradient-to-l"].text-white,
[class*="bg-gradient-to-t"].text-white,
[class*="bg-gradient-to-b"].text-white,
[class*="bg-gradient-to-tr"].text-white,
[class*="bg-gradient-to-br"].text-white,
[class*="bg-gradient-to-tl"].text-white,
[class*="bg-gradient-to-bl"].text-white {
    color: #ffffff !important;
}

/* Protect buttons with solid color backgrounds */
button[class*="bg-blue"].text-white,
button[class*="bg-purple"].text-white,
button[class*="bg-green"].text-white,
button[class*="bg-teal"].text-white,
button[class*="bg-red"].text-white,
button[class*="bg-indigo"].text-white,
button[class*="bg-yellow"].text-white,
button[class*="bg-pink"].text-white,
.btn[class*="bg-blue"].text-white,
.btn[class*="bg-purple"].text-white,
.btn[class*="bg-green"].text-white,
.btn[class*="bg-teal"].text-white,
.btn[class*="bg-red"].text-white,
.btn[class*="bg-indigo"].text-white,
.btn[class*="bg-yellow"].text-white,
.btn[class*="bg-pink"].text-white {
    color: #ffffff !important;
}

/* Specific protection for gradient buttons (from-{color} to-{color}) */
button[class*="from-blue"],
button[class*="from-purple"],
button[class*="from-green"],
button[class*="from-teal"],
button[class*="from-red"],
.btn[class*="from-blue"],
.btn[class*="from-purple"],
.btn[class*="from-green"],
.btn[class*="from-teal"],
.btn[class*="from-red"] {
    color: #ffffff !important;
}

/* Light mode specific - force button text to stay white on colored backgrounds */
:not(.dark) button[class*="bg-"],
:not(.dark) .btn[class*="bg-"],
:not(.dark) button[class*="from-"],
:not(.dark) .btn[class*="from-"] {
    color: #ffffff !important;
}

/* Nuclear option - target specific button IDs and classes from settings */
button#lookupPostalCodeBtn,
button[type="submit"].bg-gradient-to-r,
button.font-semibold.text-white,
.btn.font-semibold.text-white {
    color: #ffffff !important;
}