/* ============================================================
   WikiOdds — Site-wide Dark / Light Theme
   Applied via:  html[data-theme="dark"]
   ============================================================ */

/* ── Base ───────────────────────────────────────────────── */
html[data-theme="dark"] body {
    background-color: #0b1220;
    color: #e2e8f0;
}

/* ── Navigation & white surfaces ────────────────────────── */
html[data-theme="dark"] nav,
html[data-theme="dark"] .bg-white {
    background-color: #111827 !important;
}

/* Mobile dropdown */
html[data-theme="dark"] #mobile-menu {
    background-color: #111827 !important;
    border-color: #334155 !important;
}

/* ── Plain light backgrounds ─────────────────────────────── */
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-100 {
    background-color: #0f172a !important;
}

html[data-theme="dark"] .bg-gray-200 {
    background-color: #1e293b !important;
}

/* Coloured tint panels (50-level) */
html[data-theme="dark"] [class*="bg-green-50"],
html[data-theme="dark"] [class*="bg-blue-50"],
html[data-theme="dark"] [class*="bg-red-50"],
html[data-theme="dark"] [class*="bg-yellow-50"],
html[data-theme="dark"] [class*="bg-amber-50"],
html[data-theme="dark"] [class*="bg-orange-50"],
html[data-theme="dark"] [class*="bg-teal-50"],
html[data-theme="dark"] [class*="bg-emerald-50"],
html[data-theme="dark"] [class*="bg-indigo-50"],
html[data-theme="dark"] [class*="bg-purple-50"],
html[data-theme="dark"] [class*="bg-violet-50"],
html[data-theme="dark"] [class*="bg-sky-50"],
html[data-theme="dark"] [class*="bg-cyan-50"] {
    background-color: #1e293b !important;
}

/* Coloured tint panels (100-level) */
html[data-theme="dark"] [class*="bg-green-100"],
html[data-theme="dark"] [class*="bg-blue-100"],
html[data-theme="dark"] [class*="bg-blue-200"],
html[data-theme="dark"] [class*="bg-red-100"],
html[data-theme="dark"] [class*="bg-yellow-100"],
html[data-theme="dark"] [class*="bg-orange-100"],
html[data-theme="dark"] [class*="bg-indigo-100"],
html[data-theme="dark"] [class*="bg-purple-100"],
html[data-theme="dark"] [class*="bg-violet-100"],
html[data-theme="dark"] [class*="bg-sky-100"],
html[data-theme="dark"] [class*="bg-teal-100"],
html[data-theme="dark"] [class*="bg-emerald-100"] {
    background-color: #182338 !important;
}

/* Dark hero stays dark */
html[data-theme="dark"] .bg-gray-800,
html[data-theme="dark"] .bg-brand-dark {
    background-color: #0b1220 !important;
}

/* ── Gradient card panels → flat dark panels ─────────────── */
html[data-theme="dark"] [class*="from-green-50"],
html[data-theme="dark"] [class*="from-blue-50"],
html[data-theme="dark"] [class*="from-red-50"],
html[data-theme="dark"] [class*="from-orange-50"],
html[data-theme="dark"] [class*="from-yellow-50"],
html[data-theme="dark"] [class*="from-teal-50"],
html[data-theme="dark"] [class*="from-indigo-50"],
html[data-theme="dark"] [class*="from-amber-50"],
html[data-theme="dark"] [class*="from-gray-50"],
html[data-theme="dark"] [class*="from-slate-50"],
html[data-theme="dark"] [class*="from-purple-50"],
html[data-theme="dark"] [class*="from-violet-50"],
html[data-theme="dark"] [class*="from-sky-50"],
html[data-theme="dark"] [class*="from-emerald-50"],
html[data-theme="dark"] [class*="from-cyan-50"] {
    background-image: none !important;
    background-color: #1e293b !important;
}

/* ── Named component cards ───────────────────────────────── */
html[data-theme="dark"] .bookmaker-card,
html[data-theme="dark"] .bookie-card {
    background: linear-gradient(145deg, #1e293b, #182338) !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .bookmaker-card:hover,
html[data-theme="dark"] .bookie-card:hover {
    background: linear-gradient(145deg, #1e3558, #182338) !important;
    border-color: #3b82f6 !important;
}

html[data-theme="dark"] .info-tile {
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    border-color: #334155 !important;
}

/* ── Table rows ──────────────────────────────────────────── */
html[data-theme="dark"] table {
    background-color: #111827 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] table th {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] table td {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] table tbody tr:nth-child(even) {
    background-color: #0f172a !important;
}

html[data-theme="dark"] table tbody tr:hover,
html[data-theme="dark"] .table-container tbody tr:hover {
    background-color: #1e293b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] [class*="divide-gray-200"] > * + * {
    border-color: #334155 !important;
}

/* ── Borders ─────────────────────────────────────────────── */
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-100 {
    border-color: #334155 !important;
}

html[data-theme="dark"] [class*="border-green-200"],
html[data-theme="dark"] [class*="border-blue-200"],
html[data-theme="dark"] [class*="border-red-200"],
html[data-theme="dark"] [class*="border-yellow-200"],
html[data-theme="dark"] [class*="border-orange-200"],
html[data-theme="dark"] [class*="border-teal-200"],
html[data-theme="dark"] [class*="border-emerald-200"],
html[data-theme="dark"] [class*="border-indigo-200"],
html[data-theme="dark"] [class*="border-purple-200"],
html[data-theme="dark"] [class*="border-violet-200"],
html[data-theme="dark"] [class*="border-sky-200"],
html[data-theme="dark"] [class*="border-amber-200"],
html[data-theme="dark"] [class*="border-gray-100"] {
    border-color: #334155 !important;
}

/* ── Shadows ─────────────────────────────────────────────── */
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ── Text: neutral greys ─────────────────────────────────── */
html[data-theme="dark"] .text-brand-dark,
html[data-theme="dark"] .text-gray-900 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .text-gray-800 {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 {
    color: #cbd5e1 !important;
}

/* ── Text: greens ────────────────────────────────────────── */
html[data-theme="dark"] [class*="text-green-900"],
html[data-theme="dark"] [class*="text-green-800"],
html[data-theme="dark"] [class*="text-green-700"] {
    color: #86efac !important;
}

html[data-theme="dark"] [class*="text-green-600"] {
    color: #4ade80 !important;
}

html[data-theme="dark"] [class*="text-emerald-900"],
html[data-theme="dark"] [class*="text-emerald-800"],
html[data-theme="dark"] [class*="text-emerald-700"] {
    color: #86efac !important;
}

html[data-theme="dark"] [class*="text-emerald-600"] {
    color: #4ade80 !important;
}

/* ── Text: blues ─────────────────────────────────────────── */
html[data-theme="dark"] [class*="text-blue-900"],
html[data-theme="dark"] [class*="text-blue-800"],
html[data-theme="dark"] [class*="text-blue-700"] {
    color: #93c5fd !important;
}

html[data-theme="dark"] [class*="text-blue-600"] {
    color: #60a5fa !important;
}

/* ── Text: reds ──────────────────────────────────────────── */
html[data-theme="dark"] [class*="text-red-900"],
html[data-theme="dark"] [class*="text-red-800"],
html[data-theme="dark"] [class*="text-red-700"] {
    color: #fca5a5 !important;
}

html[data-theme="dark"] [class*="text-red-600"] {
    color: #f87171 !important;
}

/* ── Text: yellows / ambers ──────────────────────────────── */
html[data-theme="dark"] [class*="text-yellow-800"],
html[data-theme="dark"] [class*="text-yellow-700"],
html[data-theme="dark"] [class*="text-amber-800"],
html[data-theme="dark"] [class*="text-amber-700"] {
    color: #fde68a !important;
}

/* ── Text: oranges / indigos / purples ───────────────────── */
html[data-theme="dark"] [class*="text-orange-800"],
html[data-theme="dark"] [class*="text-orange-700"] {
    color: #fdba74 !important;
}

html[data-theme="dark"] [class*="text-indigo-800"],
html[data-theme="dark"] [class*="text-indigo-700"] {
    color: #a5b4fc !important;
}

html[data-theme="dark"] [class*="text-purple-600"],
html[data-theme="dark"] [class*="text-purple-700"],
html[data-theme="dark"] [class*="text-purple-800"],
html[data-theme="dark"] [class*="text-violet-600"],
html[data-theme="dark"] [class*="text-violet-700"],
html[data-theme="dark"] [class*="text-violet-800"] {
    color: #c4b5fd !important;
}

html[data-theme="dark"] [class*="text-sky-600"],
html[data-theme="dark"] [class*="text-sky-700"],
html[data-theme="dark"] [class*="text-sky-800"] {
    color: #7dd3fc !important;
}

/* ── Form elements ───────────────────────────────────────── */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* ── Modals / overlays ───────────────────────────────────── */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] [id*="Modal"] .bg-white,
html[data-theme="dark"] [id*="modal"] .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer {
    background-color: #0b1220 !important;
}

/* ── Cookie banner ───────────────────────────────────────── */
html[data-theme="dark"] #cookie-banner,
html[data-theme="dark"] .cookie-banner {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ── Notification / alert boxes ─────────────────────────── */
html[data-theme="dark"] .bg-green-50.border-green-200,
html[data-theme="dark"] .bg-red-50.border-red-200,
html[data-theme="dark"] .bg-blue-50.border-blue-200,
html[data-theme="dark"] .bg-yellow-50.border-yellow-200,
html[data-theme="dark"] .bg-amber-50.border-amber-200,
html[data-theme="dark"] .bg-emerald-50.border-emerald-200,
html[data-theme="dark"] .bg-indigo-50.border-indigo-200,
html[data-theme="dark"] .bg-purple-50.border-purple-200,
html[data-theme="dark"] .bg-violet-50.border-violet-200,
html[data-theme="dark"] .bg-sky-50.border-sky-200,
html[data-theme="dark"] .bg-teal-50.border-teal-200 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle-btn {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

html[data-theme="dark"] .theme-toggle-btn {
    border-color: #475569;
    color: #e2e8f0;
    background: #1e293b;
}