/**
 * Theme Override CSS - Surgical Tailwind Color Fixes
 *
 * This file overrides hardcoded Tailwind classes to make them theme-aware.
 * Uses surgical targeting to avoid layout breakage.
 *
 * Load Order: MUST load AFTER Tailwind CDN
 */

/* ============================================================================
   BACKGROUND OVERRIDES - Only for theme-related backgrounds
   ============================================================================ */

/* White backgrounds → Theme surface (but not affecting layout classes) */
.bg-white:not(.absolute):not(.fixed):not(.relative) {
    background-color: var(--color-surface) !important;
}

/* Gray backgrounds → Theme secondary background */
.bg-gray-50:not(.absolute):not(.fixed):not(.relative),
.bg-gray-100:not(.absolute):not(.fixed):not(.relative) {
    background-color: var(--color-background-secondary) !important;
}

.bg-gray-200:not(.absolute):not(.fixed):not(.relative) {
    background-color: var(--color-background-tertiary) !important;
}

.bg-gray-800:not(.absolute):not(.fixed):not(.relative),
.bg-gray-900:not(.absolute):not(.fixed):not(.relative) {
    background-color: var(--color-surface-dark) !important;
}

/* ============================================================================
   TEXT COLOR OVERRIDES
   ============================================================================ */

/* Dark text → Theme primary text */
.text-gray-900,
.text-gray-800 {
    color: var(--color-text-primary) !important;
}

/* Medium gray text → Theme secondary text */
.text-gray-700,
.text-gray-600 {
    color: var(--color-text-secondary) !important;
}

/* Light gray text → Theme tertiary text */
.text-gray-500,
.text-gray-400 {
    color: var(--color-text-tertiary) !important;
}

/* ============================================================================
   BORDER OVERRIDES
   ============================================================================ */

/* Gray borders → Theme border */
.border-gray-200,
.border-gray-300,
.border-gray-400 {
    border-color: var(--color-border) !important;
}

/* Ring borders (focus states) */
.ring-gray-300 {
    --tw-ring-color: var(--color-border) !important;
}

/* ============================================================================
   FORM ELEMENT OVERRIDES
   ============================================================================ */

/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    background-color: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    --tw-ring-color: var(--color-primary) !important;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
    color: var(--color-text-tertiary) !important;
}

/* Select dropdowns */
select option {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================================================
   TABLE OVERRIDES
   ============================================================================ */

table {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

table thead {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 2px solid var(--color-border) !important;
}

table thead th {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

table tbody tr {
    border-bottom: 1px solid var(--color-border) !important;
}

table tbody tr:hover {
    background-color: var(--color-background-secondary) !important;
}

table tbody td {
    color: var(--color-text-secondary) !important;
}

/* Alternating row colors */
table tbody tr:nth-child(even) {
    background-color: var(--color-background-secondary) !important;
}

table tbody tr:nth-child(odd) {
    background-color: var(--color-surface) !important;
}

/* ============================================================================
   DROPDOWN MENU OVERRIDES
   ============================================================================ */

/* Admin dropdown - theme aware */
#adminDropdown {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

#adminDropdown a,
#adminDropdown button {
    color: var(--color-text-primary) !important;
}

#adminDropdown a:hover,
#adminDropdown button:hover {
    background-color: var(--color-background-secondary) !important;
}

/* Generic dropdown menus */
.dropdown-menu,
[role="menu"] {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.dropdown-menu a,
.dropdown-menu button,
[role="menuitem"] {
    color: var(--color-text-primary) !important;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover,
[role="menuitem"]:hover {
    background-color: var(--color-background-secondary) !important;
}

/* ============================================================================
   PAGINATION OVERRIDES
   ============================================================================ */

.pagination a,
.pagination button {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.pagination a:hover,
.pagination button:hover {
    background-color: var(--color-background-secondary) !important;
}

.pagination .active {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* ============================================================================
   CODE/PRE OVERRIDES
   ============================================================================ */

code,
pre {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
}

/* ============================================================================
   HR/DIVIDER OVERRIDES
   ============================================================================ */

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

/* ============================================================================
   SCROLLBAR OVERRIDES
   ============================================================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-background-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-background-secondary);
}

/* ============================================================================
   PHASE 2 OVERRIDES - Badge, Button, Icon & Text Accent Colors
   Added: 2025-10-28 - Comprehensive Tailwind Class Coverage
   ============================================================================ */

/* === BADGE COLOR OVERRIDES === */
.bg-blue-100 { background-color: var(--color-badge-primary-bg) !important; }
.text-blue-800 { color: var(--color-badge-primary-text) !important; }

.bg-green-100 { background-color: var(--color-badge-success-bg) !important; }
.text-green-800 { color: var(--color-badge-success-text) !important; }

.bg-yellow-100 { background-color: var(--color-badge-warning-bg) !important; }
.text-yellow-800, .text-yellow-700 { color: var(--color-badge-warning-text) !important; }

.bg-red-100 { background-color: var(--color-badge-error-bg) !important; }
.text-red-800 { color: var(--color-badge-error-text) !important; }

.bg-purple-100 { background-color: var(--color-badge-secondary-bg) !important; }
.text-purple-800 { color: var(--color-badge-secondary-text) !important; }

.bg-sky-100, .bg-cyan-100 { background-color: var(--color-badge-info-bg) !important; }
.text-sky-800, .text-cyan-800 { color: var(--color-badge-info-text) !important; }

/* === BUTTON BACKGROUND OVERRIDES === */
.bg-blue-600 { background-color: var(--color-btn-primary) !important; }
.hover\:bg-blue-700:hover { background-color: var(--color-btn-primary-hover) !important; }

.bg-indigo-600 { background-color: var(--color-btn-primary) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--color-btn-primary-hover) !important; }

.bg-green-600 { background-color: var(--color-btn-success) !important; }
.hover\:bg-green-700:hover { background-color: var(--color-btn-success-hover) !important; }

.bg-orange-600, .bg-amber-600 { background-color: var(--color-btn-warning) !important; }
.hover\:bg-orange-700:hover, .hover\:bg-amber-700:hover { background-color: var(--color-btn-warning-hover) !important; }

.bg-red-600 { background-color: var(--color-btn-error) !important; }
.hover\:bg-red-700:hover { background-color: var(--color-btn-error-hover) !important; }

.bg-gray-600 { background-color: var(--color-btn-secondary) !important; }
.hover\:bg-gray-700:hover { background-color: var(--color-btn-secondary-hover) !important; }

/* === ICON/STAT CARD BACKGROUND OVERRIDES === */
.bg-blue-500 { background-color: var(--color-icon-bg-primary) !important; }
.bg-green-500 { background-color: var(--color-icon-bg-success) !important; }
.bg-yellow-500, .bg-amber-500 { background-color: var(--color-icon-bg-warning) !important; }
.bg-red-500 { background-color: var(--color-icon-bg-error) !important; }
.bg-cyan-500, .bg-sky-500 { background-color: var(--color-icon-bg-info) !important; }
.bg-violet-500, .bg-purple-500 { background-color: var(--color-icon-bg-secondary) !important; }

/* === TEXT ACCENT COLOR OVERRIDES === */
.text-blue-600, .text-blue-700, .text-indigo-600 { color: var(--color-text-blue) !important; }
.text-green-600, .text-green-700 { color: var(--color-text-green) !important; }
.text-red-500, .text-red-600, .text-red-700 { color: var(--color-text-red) !important; }
.text-purple-600, .text-violet-600 { color: var(--color-text-purple) !important; }
.text-yellow-600, .text-amber-600 { color: var(--color-text-yellow) !important; }
.text-orange-600 { color: var(--color-text-orange) !important; }
.text-cyan-600, .text-sky-600 { color: var(--color-text-cyan) !important; }
.text-white { color: var(--color-text-white) !important; }
.text-black { color: var(--color-text-black) !important; }

/* === HOVER TEXT COLOR OVERRIDES === */
.hover\:text-blue-700:hover, .hover\:text-blue-800:hover { color: var(--color-text-blue) !important; }
.hover\:text-green-800:hover, .hover\:text-green-900:hover { color: var(--color-text-green) !important; }
.hover\:text-red-800:hover, .hover\:text-red-900:hover { color: var(--color-text-red) !important; }
.hover\:text-gray-900:hover { color: var(--color-text-primary) !important; }
.hover\:text-gray-700:hover { color: var(--color-text-secondary) !important; }

/* === FOCUS RING OVERRIDES === */
.focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--color-focus-ring) !important;
}

.focus\:border-blue-500:focus, .focus\:border-indigo-500:focus {
  border-color: var(--color-focus-ring) !important;
}

.ring-blue-500 {
  --tw-ring-color: var(--color-focus-ring) !important;
}

/* === DISABLED INPUT OVERRIDES === */
input:disabled, textarea:disabled, select:disabled {
  background-color: var(--color-input-disabled-bg) !important;
  color: var(--color-input-disabled-text) !important;
  border-color: var(--color-input-disabled-border) !important;
}

.bg-gray-100.cursor-not-allowed {
  background-color: var(--color-input-disabled-bg) !important;
}

/* === HOVER BACKGROUND OVERRIDES === */
.hover\:bg-gray-50:hover { background-color: var(--color-hover-light) !important; }
.hover\:bg-gray-100:hover { background-color: var(--color-hover-medium) !important; }
.hover\:bg-gray-200:hover { background-color: var(--color-hover-medium) !important; }

/* === DIVIDER/BORDER COLOR OVERRIDES === */
.divide-gray-200 > * + * { border-color: var(--color-divider) !important; }
.divide-gray-300 > * + * { border-color: var(--color-divider-strong) !important; }
.border-gray-200 { border-color: var(--color-divider) !important; }
.border-blue-400 { border-color: var(--color-primary) !important; }
.border-green-400 { border-color: var(--color-success) !important; }
.border-yellow-400, .border-amber-400 { border-color: var(--color-warning) !important; }
.border-red-400 { border-color: var(--color-error) !important; }

/* === INFO BOX / ALERT BACKGROUNDS === */
.bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; }
.bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }
.bg-yellow-50, .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }
.bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
.bg-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; }

[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; }
[data-theme="dark"] .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
[data-theme="dark"] .bg-purple-50 { background-color: rgba(139, 92, 246, 0.15) !important; }

/* === BORDER LEFT ACCENT OVERRIDES (for info boxes) === */
.border-l-4.border-blue-400 { border-left-color: var(--color-primary) !important; }
.border-l-4.border-green-400 { border-left-color: var(--color-success) !important; }
.border-l-4.border-yellow-400 { border-left-color: var(--color-warning) !important; }
.border-l-4.border-red-400 { border-left-color: var(--color-error) !important; }
.border-l-4.border-purple-400 { border-left-color: var(--color-text-purple) !important; }

/* ============================================================================
   PHASE 3 OVERRIDES - Slate Palette & Extended Coverage
   Added: 2025-12-11 - Theme QA Hardening
   ============================================================================ */

/* === SLATE COLOR OVERRIDES (Maps to Gray Scale) === */
.text-slate-50 { color: var(--color-text-primary) !important; }
.text-slate-100 { color: var(--color-text-primary) !important; }
.text-slate-200 { color: var(--color-text-secondary) !important; }
.text-slate-300 { color: var(--color-text-secondary) !important; }
.text-slate-400 { color: var(--color-text-tertiary) !important; }
.text-slate-500 { color: var(--color-text-tertiary) !important; }
.text-slate-600 { color: var(--color-text-secondary) !important; }
.text-slate-700 { color: var(--color-text-secondary) !important; }
.text-slate-800 { color: var(--color-text-primary) !important; }
.text-slate-900 { color: var(--color-text-primary) !important; }

.bg-slate-50 { background-color: var(--color-background-tertiary) !important; }
.bg-slate-100 { background-color: var(--color-background-secondary) !important; }
.bg-slate-200 { background-color: var(--color-background-secondary) !important; }
.bg-slate-800 { background-color: var(--color-surface-dark) !important; }
.bg-slate-900 { background-color: var(--color-background) !important; }

.border-slate-200 { border-color: var(--color-border) !important; }
.border-slate-300 { border-color: var(--color-border) !important; }
.border-slate-400 { border-color: var(--color-border-medium) !important; }
.border-slate-700 { border-color: var(--color-border-medium) !important; }

/* === GRADIENT BACKGROUND FIXES (for dark mode) === */
[data-theme="dark"] .from-slate-50 { --tw-gradient-from: var(--color-background) !important; }
[data-theme="dark"] .to-slate-100 { --tw-gradient-to: var(--color-background-secondary) !important; }
[data-theme="dark"] .from-slate-900 { --tw-gradient-from: var(--color-background) !important; }
[data-theme="dark"] .to-slate-800 { --tw-gradient-to: var(--color-background-secondary) !important; }

/* === EXTENDED BLUE TEXT (Dark shades for better contrast) === */
.text-blue-100 { color: var(--color-text-primary) !important; }
.text-blue-200 { color: var(--color-text-secondary) !important; }
.text-blue-900 { color: var(--color-text-primary) !important; }

[data-theme="dark"] .text-blue-100 { color: var(--color-text-primary) !important; }
[data-theme="dark"] .text-blue-200 { color: var(--color-text-secondary) !important; }

/* === SURFACE/BACKGROUND DARK TOKEN === */
:root, [data-theme="light"] {
    --color-surface-dark: #374151; /* gray-700 for dark surfaces in light mode */
}

[data-theme="dark"] {
    --color-surface-dark: #1f2937; /* gray-800 for dark surfaces in dark mode */
}