/* Light Mode Styles */

/* Base light mode styles */
.light body {
    background-color: #F8FAFC;
    color: #1E293B;
    background-image: none;
}

/* Header and navigation */
.light header {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

.light .bg-dark {
    background-color: #FFFFFF !important;
}

.light .bg-darker {
    background-color: #F8FAFC !important;
}

.light .bg-sidebar-bg {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

.light .bg-card-bg {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

.light .bg-card-hover {
    background-color: #F1F5F9 !important;
}

/* Text colors */
.light .text-white {
    color: #1E293B !important;
}

.light .text-gray-300 {
    color: #64748B !important;
}

.light .text-gray-400 {
    color: #64748B !important;
}

.light .text-gray-500 {
    color: #64748B !important;
}

/* Border colors */
.light .border-gray-800 {
    border-color: #E2E8F0 !important;
}

.light .border-gray-700 {
    border-color: #E2E8F0 !important;
}

/* Sidebar links */
.light .sidebar-link {
    color: #64748B;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.light .sidebar-link:hover {
    background-color: #E2E8F0;
    color: #10B981;
}

.light .sidebar-link.active {
    background-color: #10B981;
    color: #FFFFFF;
}

/* Navigation links */
.light .nav-link {
    color: #64748B !important;
}

.light .nav-link:hover {
    color: #10B981 !important;
}

.light .nav-link.active {
    color: #FFFFFF !important;
    background-color: rgba(16, 185, 129, 0.2) !important;
}

/* Search bar */
.light .search-bar {
    background-color: #F1F5F9;
    border-color: #E2E8F0;
}

.light .search-bar input {
    background-color: transparent;
    color: #1E293B;
}

.light .search-bar input::placeholder {
    color: #64748B;
}

.light .search-bar button {
    color: #64748B;
}

.light .search-bar button:hover {
    color: #10B981;
}

/* Category search input */
.light input[type="text"] {
    background-color: #F1F5F9;
    border-color: #E2E8F0;
    color: #1E293B;
}

.light input[type="text"]::placeholder {
    color: #64748B;
}

/* Game cards */
.light .game-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.light .game-card:hover {
    border-color: #10B981;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.light .game-card-title {
    color: #1E293B !important;
    font-weight: 600;
}

.light .game-card-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent);
}

.light .game-card-overlay .game-card-title {
    color: #1E293B !important;
    text-shadow: none;
}

/* Game card play button in light mode */
.light .game-card .play-button {
    background-color: #10B981 !important;
    color: #FFFFFF !important;
    border: none;
}

.light .game-card .play-button:hover {
    background-color: #059669 !important;
}

.light .category-badge {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

/* Game card content */
.light .game-card-content {
    background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);
}

/* Game stats */
.light .game-stats {
    color: #64748B;
}

.light .game-stats i {
    color: #10B981;
}

/* Dropdown menus */
.light .dropdown-menu {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.light .dropdown-item {
    color: #64748B;
}

.light .dropdown-item:hover {
    background-color: #F1F5F9;
    color: #10B981;
}

/* Mobile navigation */
.light .mobile-bottom-nav {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

.light .mobile-nav-item {
    color: #64748B !important;
}

.light .mobile-nav-item.active {
    color: #10B981 !important;
}

.light .mobile-nav-item:hover {
    color: #10B981 !important;
}

/* Mobile sidebar */
.light #mobileSidebar {
    background-color: rgba(248, 250, 252, 0.95);
}

/* Footer */
.light footer {
    background-color: #F1F5F9;
    border-color: #E2E8F0;
}

/* Footer positioning to avoid sidebar overlap */
footer,
.footer-ad {
    margin-left: 0;
}

@media (min-width: 1024px) {
    footer,
    .footer-ad {
        margin-left: 16rem; /* 256px / 16 = 16rem (w-64) */
    }
}

/* Buttons */
.light .btn-primary {
    background-color: #10B981 !important;
    color: #FFFFFF !important;
}

.light .btn-primary:hover {
    background-color: #059669 !important;
}

.light .btn-secondary {
    background-color: #F1F5F9 !important;
    color: #64748B !important;
    border-color: #E2E8F0 !important;
}

.light .btn-secondary:hover {
    background-color: #E2E8F0 !important;
    color: #10B981 !important;
}

/* Active button states */
.light button.active,
.light .active {
    background-color: #10B981 !important;
    color: #FFFFFF !important;
}

/* Play button in game cards */
.light .game-card .bg-primary {
    background-color: #10B981 !important;
}

.light .game-card .text-white {
    color: #FFFFFF !important;
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: transparent;
    border: 1px solid #374151;
    color: #9CA3AF;
    transition: all 0.2s;
    cursor: pointer;
}

.theme-toggle:hover {
    background-color: #374151;
    color: #FFFFFF;
}

.light .theme-toggle {
    border-color: #E2E8F0 !important;
    color: #64748B !important;
}

.light .theme-toggle:hover {
    background-color: #F1F5F9 !important;
    color: #10B981 !important;
}

/* Ensure only one icon shows at a time */
.theme-toggle i {
    font-size: 1rem;
}

.theme-toggle i.hidden {
    display: none !important;
}

/* Hero section */
.light .hero-section h1 {
    color: #1E293B;
}

.light .hero-section p {
    color: #64748B;
}

/* Prose/content styles */
.light .prose {
    color: #374151;
}

.light .prose h1,
.light .prose h2,
.light .prose h3,
.light .prose h4,
.light .prose h5,
.light .prose h6 {
    color: #1E293B;
}

.light .prose a {
    color: #10B981;
}

.light .prose blockquote {
    color: #64748B;
    border-left-color: #10B981;
}

/* Form elements */
.light input,
.light textarea,
.light select {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #1E293B;
}

.light input:focus,
.light textarea:focus,
.light select:focus {
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.light input::placeholder,
.light textarea::placeholder {
    color: #64748B;
}

/* Slider styles */
.light .slider-nav {
    background-color: rgba(255, 255, 255, 0.9);
    color: #1E293B;
}

.light .slider-nav:hover {
    background-color: rgba(255, 255, 255, 1);
}

.light .slider-dot {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

.light .slider-dot:hover {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

/* Active slider dot */
.light .slider-container .slider-dot.bg-white,
.light .slider-container .slider-dot[style*="background-color: rgb(255, 255, 255)"],
.light .slider-container .slider-dot[class*="bg-white"] {
    background-color: #1E293B !important;
}

/* Slider overlay gradients */
.light .slider-slide .absolute.inset-0.bg-gradient-to-r {
    background: linear-gradient(to right, rgba(248, 250, 252, 0.8), transparent);
}

.light .hero-section {
    background: linear-gradient(to right, #F8FAFC, #F1F5F9);
    border-color: #E2E8F0;
}

/* Hero section light mode */
.light .hero-section {
    background: linear-gradient(to right, #F8FAFC, #F1F5F9);
    border-color: #E2E8F0;
}

.light .hero-section h1 {
    color: #1E293B !important;
}

.light .hero-section p {
    color: #64748B !important;
}

/* Ad containers */
.light .ad-container {
    background-color: #F8FAFC;
    border-color: #E2E8F0;
}

/* Leaderboard */
.light .bg-primary\/20 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

/* Blog post cards */
.light .line-clamp-3 {
    color: #64748B;
}

/* Scrollbar styles for light mode */
.light ::-webkit-scrollbar {
    width: 8px;
}

.light ::-webkit-scrollbar-track {
    background: #F1F5F9;
}

.light ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.light ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .light .mobile-bottom-nav {
        background-color: #FFFFFF;
        border-top: 1px solid #E2E8F0;
    }
}

/* Animation for theme transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Override any dark mode specific styles when in light mode */
.light [class*="bg-gray-"] {
    background-color: #F8FAFC !important;
}

.light [class*="text-gray-"] {
    color: #64748B !important;
}

.light [class*="border-gray-"] {
    border-color: #E2E8F0 !important;
}

/* Specific text color overrides for light mode */
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
    color: #1E293B !important;
}

.light p {
    color: #64748B !important;
}

.light .text-white {
    color: #1E293B !important;
}

.light .text-gray-300 {
    color: #64748B !important;
}

.light .text-gray-400 {
    color: #64748B !important;
}

.light .text-gray-500 {
    color: #64748B !important;
}

/* Card text specifically */
.light .game-card h3,
.light .game-card .game-card-title,
.light .game-card-title {
    color: #1E293B !important;
}

/* Breadcrumb text */
.light .breadcrumb-text,
.light .breadcrumb-text-last {
    color: #64748B !important;
}

.light nav a {
    color: #64748B !important;
}

.light nav a:hover {
    color: #10B981 !important;
}

/* Section titles and headings */
.light .section-title {
    color: #1E293B !important;
}

.light .text-2xl,
.light .text-3xl,
.light .text-4xl,
.light .text-5xl {
    color: #1E293B !important;
}

/* Game overlay text */
.light .game-card-overlay h3 {
    color: #1E293B !important;
    text-shadow: none;
}

/* Category page specific */
.light .bg-card-bg.rounded-xl.p-6 h3 {
    color: #1E293B !important;
}

.light .bg-card-bg.rounded-xl.p-6 p {
    color: #64748B !important;
}

/* Search results and category listings */
.light .text-xl.font-semibold {
    color: #1E293B !important;
}

/* Make sure all white text becomes dark in light mode */
.light * {
    color: inherit;
}

.light .text-white:not(.btn-primary):not(.category-badge):not(.sidebar-link.active) {
    color: #1E293B !important;
}