/**
 * Tournament Module - Dark Mode Tailwind Overrides
 * Version: 1.0.0
 *
 * Overrides Tailwind utility classes for dark mode support
 */

/* ===========================================
   BACKGROUND OVERRIDES
   =========================================== */

.bg-gray-50,
.bg-gray-100 {
    background-color: var(--bg-primary) !important;
}

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

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

/* Hover backgrounds */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Blue/accent backgrounds */
.bg-blue-50,
.bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

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

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

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

.text-gray-500,
.text-gray-400,
.text-gray-300 {
    color: var(--text-muted) !important;
}

/* Keep white text white */
.text-white {
    color: #ffffff !important;
}

/* Accent text */
.text-blue-700,
.text-blue-600 {
    color: var(--accent-primary) !important;
}

.text-blue-100 {
    color: var(--text-secondary) !important;
}

/* Status colors */
.text-green-600,
.text-green-700 {
    color: var(--success) !important;
}

.text-yellow-600,
.text-yellow-700,
.text-orange-600 {
    color: var(--warning) !important;
}

.text-red-600,
.text-red-700 {
    color: var(--error) !important;
}

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

.border,
.border-b,
.border-t,
.border-l {
    border-color: var(--border-color) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300 {
    border-color: var(--border-color) !important;
}

.border-green-300,
.border-green-500 {
    border-color: var(--success) !important;
}

.border-yellow-300,
.border-yellow-500 {
    border-color: var(--warning) !important;
}

.border-red-300 {
    border-color: var(--error) !important;
}

.border-blue-500 {
    border-color: var(--accent-primary) !important;
}

/* ===========================================
   GRADIENT OVERRIDES
   =========================================== */

.gradient-header,
.bg-gradient-to-r.from-blue-600 {
    background: var(--gradient-header) !important;
}

/* ===========================================
   BUTTON OVERRIDES
   =========================================== */

.bg-blue-600,
.bg-blue-700 {
    background-color: var(--accent-primary) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover {
    background-color: var(--accent-secondary) !important;
}

/* ===========================================
   SHADOW OVERRIDES
   =========================================== */

.shadow,
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-xl,
.shadow-2xl {
    box-shadow: var(--shadow-xl) !important;
}

/* ===========================================
   INPUT OVERRIDES
   =========================================== */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder) !important;
}

input:focus,
select:focus,
textarea:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--accent-primary) !important;
}

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

table {
    background-color: var(--card-bg) !important;
}

thead {
    background-color: var(--table-header-bg) !important;
}

th {
    color: var(--text-secondary) !important;
    background-color: var(--table-header-bg) !important;
}

td {
    color: var(--text-primary) !important;
    border-color: var(--table-border) !important;
}

tbody tr {
    background-color: var(--card-bg) !important;
}

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

/* ===========================================
   MATCH CARD TEXT OVERRIDES
   =========================================== */

.match-card,
.match-card span,
.match-team-name {
    color: var(--text-primary) !important;
}

.match-meta {
    color: var(--text-muted) !important;
}

/* ===========================================
   GROUP CARD TEXT OVERRIDES
   =========================================== */

.group-team-left,
.group-team-left span,
.group-card-body span {
    color: var(--text-primary) !important;
}

.group-team-right span {
    color: var(--text-primary) !important;
}

.group-team-gd {
    color: var(--text-muted) !important;
}

.group-team-points {
    color: var(--accent-primary) !important;
}

/* ===========================================
   CARD OVERRIDES
   =========================================== */

.card-shadow,
.rounded-xl.bg-white,
.rounded-lg.bg-white {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

/* ===========================================
   BADGE OVERRIDES
   =========================================== */

.badge-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.badge-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

.badge-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

/* ===========================================
   LIGHT MODE RESETS
   =========================================== */

[data-theme="light"] .bg-gray-50,
[data-theme="light"] .bg-gray-100 {
    background-color: #f8fafc !important;
}

[data-theme="light"] .bg-white {
    background-color: #ffffff !important;
}

[data-theme="light"] .text-gray-900,
[data-theme="light"] .text-gray-800 {
    color: #1f2937 !important;
}

[data-theme="light"] .text-gray-600 {
    color: #4b5563 !important;
}

[data-theme="light"] .text-gray-500 {
    color: #6b7280 !important;
}

[data-theme="light"] .border,
[data-theme="light"] .border-b {
    border-color: #e5e7eb !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

[data-theme="light"] table {
    background-color: #ffffff !important;
}

[data-theme="light"] thead {
    background-color: #f9fafb !important;
}

[data-theme="light"] tbody tr {
    background-color: #ffffff !important;
}

[data-theme="light"] tbody tr:hover {
    background-color: #f8fafc !important;
}

[data-theme="light"] .shadow,
[data-theme="light"] .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .card-shadow {
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .match-card,
[data-theme="light"] .match-card span,
[data-theme="light"] .match-team-name {
    color: #1e293b !important;
}

[data-theme="light"] .group-team-left,
[data-theme="light"] .group-team-left span,
[data-theme="light"] .group-card-body span {
    color: #1e293b !important;
}

[data-theme="light"] .group-team-right span {
    color: #1e293b !important;
}

[data-theme="light"] .group-team-gd {
    color: #64748b !important;
}

[data-theme="light"] .bg-green-50 {
    background-color: #ecfdf5 !important;
}

[data-theme="light"] .bg-yellow-50 {
    background-color: #fffbeb !important;
}

[data-theme="light"] .bg-blue-50 {
    background-color: #eff6ff !important;
}

[data-theme="light"] .bg-red-50 {
    background-color: #fef2f2 !important;
}