/* 
 * Scorix Dark Mode Styles
 * Inspired by VS Code dark theme
 * Colors from VS Code: #1e1e1e (dark), #252526 (medium), #2d2d2d (light)
 */

/* Root dark mode variables */
:root {
    --dark-bg-primary: #1e1e1e;      /* Main background - darkest */
    --dark-bg-secondary: #252526;    /* Cards, sections - medium */
    --dark-bg-tertiary: #2d2d2d;     /* Hover states, borders - lightest */
    --dark-text-primary: #e4e4e4;    /* Main text */
    --dark-text-secondary: #a0a0a0;  /* Secondary text */
    --dark-border: #3e3e3e;          /* Borders */
    --dark-accent: #006a67;          /* Teal accent (unchanged) */
}

/* Remove grey background from odds container on mobile (but NOT VA box or prediction sections) */
@media (max-width: 639px) {
    .bg-gray-50.rounded-lg.border.border-gray-200 {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    
    /* Restore VA box backgrounds on mobile */
    .mt-3.p-3.bg-gray-50.border.rounded-lg.mb-4,
    .mt-3.p-3.bg-green-50.border.rounded-lg.mb-4 {
        background-color: rgb(249 250 251) !important;
        border: 1px solid rgb(229 231 235) !important;
        padding: 0.75rem !important;
    }
    
    /* Green VA box on mobile */
    .mt-3.p-3.bg-green-50.border-green-200.border.rounded-lg.mb-4 {
        background-color: rgb(240 253 244) !important;
        border-color: rgb(187 247 208) !important;
    }
}

/* Reserve space for date filter section - prevents flash (removed - causing too much space when no recent searches) */

/* Skeleton loaders - dark mode */
.dark .skeleton {
    background: linear-gradient(to right, #2a2a2a 8%, #3a3a3a 18%, #2a2a2a 33%) !important;
    background-size: 800px 104px !important;
}

/* Expected Value (VA) box - dark mode backgrounds (desktop and mobile) */
/* Negative EV - LIGHTER gray background */
.dark .mt-3.p-3.bg-gray-50.border.rounded-lg.mb-4.text-gray-900,
.dark .mt-3.p-3.bg-gray-50.border-gray-200.border.rounded-lg.mb-4.text-gray-900,
.dark .mt-3.p-3.border.rounded-lg.mb-4.dark\:bg-gray-800.text-gray-900,
.dark .mt-3.p-3.border.rounded-lg.mb-4.text-gray-900.dark\:bg-gray-800.dark\:text-gray-100 {
    background-color: #2d2d2d !important; /* Lighter dark gray - dark-bg-tertiary */
    border-color: #3e3e3e !important;
}

/* Positive EV - dark green background */
.dark .mt-3.p-3.bg-green-50.border-green-200.border.rounded-lg.mb-4,
.dark .mt-3.p-3.border.rounded-lg.mb-4.dark\:bg-green-900\/20 {
    background-color: rgba(20, 83, 45, 0.2) !important;
    border-color: rgb(22, 101, 52) !important;
}

/* Text color for VA boxes */
.dark .dark\:text-gray-100 {
    color: rgb(243 244 246) !important;
}

/* Empty match state - keep it simple in dark mode */
.dark .text-center.py-8.text-gray-500 {
    color: var(--dark-text-secondary) !important;
}

.dark .text-center.py-8.text-gray-500 .text-2xl,
.dark .text-center.py-8.text-gray-500 .text-sm {
    color: var(--dark-text-secondary) !important;
}

/* Composition placeholder message - dark mode */
.dark #lineups-container .bg-gray-50.border-l-4.border-gray-300 {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark #lineups-container .bg-gray-50.border-l-4.border-gray-300 .text-gray-700,
.dark #lineups-container .bg-gray-50.border-l-4.border-gray-300 .text-gray-600 {
    color: var(--dark-text-primary) !important;
}

.dark #lineups-container .bg-gray-50.border-l-4.border-gray-300 svg {
    color: var(--dark-text-secondary) !important;
}

/* Global dark mode styles */
.dark {
    color-scheme: dark;
}

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

/* TEST: This will make it VERY obvious if dark mode is active */
.dark::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dark-bg-primary);
    z-index: -1;
    pointer-events: none;
}

/* Header */
.dark header {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark header.sticky {
    border-bottom: 1px solid var(--dark-border) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark header.border-b {
    border-bottom-color: var(--dark-border) !important;
}

.dark header.shadow-sm {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark header .nav-link {
    color: #006a67 !important; /* Keep original dark teal */
}

.dark header .nav-link:hover {
    color: #008380 !important; /* Slightly lighter on hover */
}

/* Mobile menu button */
.dark #mobile-menu-button {
    color: #e4e4e4 !important;
}

.dark #mobile-menu-button:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

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

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

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

.dark footer .border-gray-300 {
    border-color: var(--dark-border) !important;
}

.dark footer a {
    color: #006a67 !important; /* Keep original dark teal */
}

.dark footer a:hover {
    color: #008380 !important; /* Slightly lighter on hover */
}

/* Cards and containers */
.dark .bg-white {
    background-color: var(--dark-bg-secondary) !important;
}

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

/* BUT OVERRIDE FOR VA BOXES */
.dark .mt-3.p-3.bg-gray-50.border.rounded-lg.mb-4.text-gray-900 {
    background-color: #2d2d2d !important;
}

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

.dark .bg-gray-200 {
    background-color: #3a3a3a !important;
}

/* Borders */
.dark .border-gray-200 {
    border-color: var(--dark-border) !important;
}

.dark .border-gray-300 {
    border-color: var(--dark-border) !important;
}

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

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

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

.dark .text-gray-600 {
    color: #8a8a8a !important;
}

.dark .text-gray-500 {
    color: #7a7a7a !important;
}

/* Match cards */
.dark .rounded-xl {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Hover states */
.dark .hover\:bg-gray-50:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

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

.dark .hover\:bg-blue-50:hover {
    background-color: rgba(222, 55, 51, 0.1) !important;
}

/* Links */
.dark a:not([style*="color"]) {
    color: #006a67;
}

.dark a:not([style*="color"]):hover {
    color: #008380;
}

/* Inputs and forms */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: var(--dark-bg-secondary) !important;
    border-color: #006a67 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--dark-text-secondary) !important;
}

/* Tables */
.dark table {
    background-color: var(--dark-bg-secondary);
}

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

.dark tbody tr {
    background-color: var(--dark-bg-tertiary); /* Darker background for odds table rows */
}

.dark tbody tr:hover {
    background-color: #3a3a3a;
}

.dark th,
.dark td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary);
}

/* Odds cards in dark mode */
.dark .odds-card {
    background-color: #3a3a3a !important; /* Visible dark background by default */
    border-color: var(--dark-border) !important;
}

/* Remove odds card background on mobile only (light mode) */
@media (max-width: 639px) {
    .odds-card {
        background-color: transparent !important;
        border: none !important;
    }
}

/* Remove odds card background on mobile only (dark mode) */
@media (max-width: 639px) {
    .dark .odds-card {
        background-color: transparent !important;
        border: none !important;
    }
}

.dark .odds-card .font-semibold {
    color: var(--dark-text-primary) !important; /* Bookmaker name in white */
}

.dark .odds-card .text-gray-700,
.dark .odds-card .text-gray-500,
.dark .odds-card .text-gray-600 {
    color: var(--dark-text-secondary) !important; /* Lighter grey for text */
}

.dark .odds-card .text-gray-900,
.dark .odds-card .font-bold {
    color: #ffffff !important; /* Odds value in white */
}

.dark .odds-card .italic {
    color: var(--dark-text-secondary) !important; /* "En attente" and "Expiré" text */
}

/* Modals */
.dark .bg-black.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Calendar */
.dark #calendar-modal .bg-white {
    background-color: var(--dark-bg-secondary) !important;
}

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

/* Badges and pills */
.dark .bg-green-50 {
    background-color: rgba(0, 106, 103, 0.15) !important;
}

.dark .bg-green-100 {
    background-color: rgba(0, 106, 103, 0.25) !important;
}

.dark .border-green-200 {
    border-color: rgba(0, 106, 103, 0.3) !important;
}

/* BUT OVERRIDE FOR VA BOXES SPECIFICALLY */
.dark .mt-3.p-3.bg-green-50.border-green-200.border.rounded-lg.mb-4.text-gray-900 {
    background-color: rgba(20, 83, 45, 0.2) !important;
    border-color: rgb(22, 101, 52) !important;
}

/* Score displays - keep original colors for readability */
.dark .bg-green-600,
.dark .bg-red-600,
.dark .bg-yellow-500 {
    /* Keep original colors for status indicators */
}

/* Mobile menu */
.dark #mobile-menu {
    background-color: var(--dark-bg-secondary);
}

.dark #mobile-menu a {
    color: #006a67 !important;
}

.dark #mobile-menu a:hover {
    background-color: var(--dark-bg-tertiary) !important;
    color: #008380 !important;
}

/* Scrollbar (Webkit browsers) */
.dark::-webkit-scrollbar {
    width: 12px;
    background-color: var(--dark-bg-primary);
}

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

.dark::-webkit-scrollbar-thumb:hover {
    background-color: #3e3e3e;
}

/* Date picker */
.dark .border-t {
    border-color: var(--dark-border) !important;
}

/* H1, H2, H3 headings */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: var(--dark-text-primary) !important;
}

/* Code blocks and pre */
.dark pre,
.dark code {
    background-color: var(--dark-bg-tertiary) !important;
    color: #d4d4d4 !important;
}

/* Dividers */
.dark hr,
.dark .border-t,
.dark .border-b {
    border-color: var(--dark-border) !important;
}

/* Bullet points and list markers in dark mode */
.dark ul,
.dark li {
    color: var(--dark-text-primary) !important;
}

.dark ul li::marker,
.dark ol li::marker {
    color: var(--dark-text-primary) !important;
}

/* Fix blue bullet points and text */
.dark li[style*="color: blue"],
.dark li[style*="color:blue"],
.dark li[style*="color:#0000ff"],
.dark li[style*="color: #0000ff"],
.dark span[style*="color: blue"],
.dark span[style*="color:blue"],
.dark span[style*="color:#0000ff"],
.dark span[style*="color: #0000ff"] {
    color: var(--dark-text-primary) !important;
}

/* Override any blue text colors */
.dark .text-blue-500,
.dark .text-blue-600,
.dark .text-blue-700 {
    color: var(--dark-text-primary) !important;
}

/* Override Tailwind arbitrary value for dark blue bullets */
.dark .text-\[\#00224D\] {
    color: var(--dark-text-primary) !important;
}

/* Green lineup confirmation panel - Better contrast in dark mode */
.dark .bg-green-50.border-l-4.border-green-400 {
    background-color: #1a4d3e !important; /* Darker green background */
    border-color: #006a67 !important; /* Dark teal border */
}

.dark .bg-green-50.border-l-4.border-green-400 .text-green-800 {
    color: #a7f3d0 !important; /* Light green text for readability */
}

/* Recent search badges in dark mode */
.dark .recent-search-badge {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.dark .recent-search-badge:hover {
    background-color: var(--dark-bg-secondary) !important; /* Slightly darker on hover */
    border-color: #4a4a4a !important;
}

/* Statistics page - Confidence badges in dark mode */
.dark .bg-green-50.border-green-200.text-green-800 {
    background-color: var(--dark-bg-tertiary) !important; /* Solid dark background */
    border-color: #006a67 !important; /* Dark teal border */
    color: #006a67 !important; /* Dark teal text for emphasis */
}

.dark .bg-blue-50.border-blue-200.text-blue-800 {
    background-color: var(--dark-bg-tertiary) !important; /* Solid dark background */
    border-color: #6b7280 !important; /* Very muted grey-blue - almost grey */
    color: #6b7280 !important; /* Very muted grey-blue - almost grey */
}

.dark .bg-gray-50.border-gray-200.text-gray-800 {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}

/* Statistics page - Info panels at bottom - Simple dark backgrounds */
/* Already using bg-gray-50 with inline border-color #006a67, just need to update bg */
.dark .bg-gray-50.border-l-4[style*="border-color: #006a67"] {
    background-color: var(--dark-bg-secondary) !important; /* Solid dark background */
}

/* Keep original teal for buttons and specific elements */
.dark button[style*="#006a67"] {
    background-color: #006a67 !important;
}

/* Statistics page - Parier buttons stay teal in dark mode */
.dark .bg-green-600 {
    background-color: #006a67 !important;
}

.dark .hover\:bg-green-700:hover {
    background-color: #005552 !important;
}

.dark button[style*="#006a67"]:hover {
    background-color: #005552 !important;
}

/* Logo color in dark mode - keep original darker teal */
.dark header a span[style*="#006a67"] {
    color: #006a67 !important;
}

.dark footer span[style*="#006a67"] {
    color: #006a67 !important;
}

/* Theme toggle button - Desktop & Mobile */
#theme-toggle,
#theme-toggle-mobile {
    cursor: pointer;
    background-color: #e5e7eb !important; /* Light grey background in light mode */
    color: #006a67 !important; /* Dark teal icon in light mode */
}

#theme-toggle:hover,
#theme-toggle-mobile:hover {
    background-color: #d1d5db !important; /* Darker grey on hover */
    color: #005552 !important; /* Darker teal on hover */
}

.dark #theme-toggle,
.dark #theme-toggle-mobile {
    color: #e4e4e4 !important; /* Light gray for visibility in dark mode */
    background-color: var(--dark-bg-tertiary) !important; /* Dark grey background in dark mode */
}

.dark #theme-toggle:hover,
.dark #theme-toggle-mobile:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* Classement page - Tabs and sections */
.dark .bg-white.rounded-lg.shadow-sm,
.dark .bg-white.rounded-lg.shadow-md,
.dark .bg-white.rounded-lg.shadow,
.dark .bg-white.rounded-lg {
    background-color: var(--dark-bg-secondary) !important;
}

.dark .bg-white.border-b,
.dark .bg-white.overflow-x-auto {
    background-color: var(--dark-bg-secondary) !important;
}

/* Force legend boxes with inline styles to use dark background */
.dark div[style*="background: white"],
.dark div[style*="background:white"],
.dark div[style*="background-color: white"],
.dark div[style*="background-color:white"] {
    background: var(--dark-bg-secondary) !important;
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Make sure all text in these boxes is readable */
.dark div[style*="background: white"] *,
.dark div[style*="background:white"] *,
.dark div[style*="background-color: white"] *,
.dark div[style*="background-color:white"] * {
    color: var(--dark-text-primary) !important;
}

/* Warning boxes on mentions-legales page - Force white text */
.dark .bg-red-50 * {
    color: #ffffff !important;
}

.dark .bg-red-50 p,
.dark .bg-red-50 strong,
.dark .bg-red-50 .font-semibold,
.dark .bg-red-50 .text-red-800,
.dark .bg-red-50 .text-red-700 {
    color: #ffffff !important;
}

.dark .bg-amber-50 * {
    color: #ffffff !important;
}

.dark .bg-amber-50 p,
.dark .bg-amber-50 strong,
.dark .bg-amber-50 .font-semibold,
.dark .bg-amber-50 .text-amber-900,
.dark .bg-amber-50 .text-amber-800 {
    color: #ffffff !important;
}

/* Instant dark mode switching - no transitions */

/* ========== NEW HEADER STYLES (Tab Bar Design) ========== */

/* Desktop header layout - centered tabs */
.desktop-header-container {
    position: relative;
}

.desktop-tabs-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* League filter pills */
.league-filter-pill {
    background-color: #f3f4f6;
    color: #006a67 !important;
    text-decoration: none;
}
.league-filter-pill:hover {
    background-color: #e5e7eb;
    color: #005552 !important;
}
.league-filter-pill.active {
    background-color: #006a67;
    color: white !important;
}

/* Pill responsive text */
.pill-mobile {
    display: inline;
}
.pill-desktop {
    display: none;
}

@media (min-width: 768px) {
    .pill-mobile {
        display: none !important;
    }
    .pill-desktop {
        display: inline !important;
    }
}

/* Dark mode pills */
.dark .league-filter-pill {
    background-color: rgba(255, 255, 255, 0.05);
    color: #14b8a6 !important;
}
.dark .league-filter-pill:hover {
    background-color: #2d2d2d;
    color: #2dd4bf !important;
}
.dark .league-filter-pill.active {
    background-color: #006a67;
    color: white !important;
}

/* Injuries disclaimer - dark mode */
.dark .bg-yellow-50 {
    background-color: rgba(180, 83, 9, 0.2) !important;
}
.dark .bg-yellow-50 .text-yellow-800 {
    color: #fef3c7 !important;
}
.dark .bg-yellow-50 .border-yellow-400 {
    border-color: #f59e0b !important;
}