/* 
 * Dark Mode Fixes for CasinoUK
 * This file resolves all readability issues in dark mode
 */

/* ========================================
   IMPROVED DARK MODE VARIABLES
   ======================================== */
@media (prefers-color-scheme: dark) {
	:root {
		/* Enhanced main colors for dark mode */
		--brand-bg: #0a0a1f;  /* Very dark blue instead of #010275 */
		--brand-fg: #f0f0f5;  /* Slightly gray white for less contrast */
		--brand-accent: #5355b3;  /* Lighter accent */
		--brand-muted: #b8b9e0;  /* More readable muted */
		
		/* Improved input and forms */
		--input-bg: #1a1a3e;  /* Darker input background */
		--input-fg: #f0f0f5;
		--input-border: #3a3a5c;
		
		/* Text and contrasts */
		--text-primary: #f0f0f5;
		--text-secondary: #b8b9d8;
		--text-muted: #8888a8;
		
		/* Backgrounds for cards and sections */
		--card-bg: #12122a;
		--card-hover-bg: #1a1a3a;
		--section-bg: #0f0f28;
		
		/* Borders */
		--border-color: #2a2a4a;
		--border-hover: #3a3a5a;
		
		/* Softer shadows for dark mode */
		--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
		--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
		--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
	}
}

/* Explicit dark theme selector */
[data-bs-theme="dark"] {
	--brand-bg: #0a0a1f;
	--brand-fg: #f0f0f5;
	--brand-accent: #5355b3;
	--brand-muted: #b8b9e0;
	--input-bg: #1a1a3e;
	--input-fg: #f0f0f5;
	--input-border: #3a3a5c;
	--text-primary: #f0f0f5;
	--text-secondary: #b8b9d8;
	--text-muted: #8888a8;
	--card-bg: #12122a;
	--card-hover-bg: #1a1a3a;
	--section-bg: #0f0f28;
	--border-color: #2a2a4a;
	--border-hover: #3a3a5a;
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
	--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
	--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}

/* ========================================
   NAVBAR DARK MODE
   ======================================== */
[data-bs-theme="dark"] .navbar-modern,
[data-bs-theme="dark"] .navbar {
	background: rgba(10, 10, 31, 0.95) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .navbar .nav-link {
	color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover {
	color: var(--brand-accent) !important;
	background: rgba(83, 85, 179, 0.15);
}

[data-bs-theme="dark"] .search-input {
	background: var(--input-bg) !important;
	color: var(--input-fg) !important;
	border-color: var(--input-border) !important;
}

[data-bs-theme="dark"] .search-input::placeholder {
	color: var(--text-muted);
	opacity: 0.7;
}

[data-bs-theme="dark"] .search-input:focus {
	background: #222244 !important;
	border-color: var(--brand-accent) !important;
	box-shadow: 0 0 0 0.2rem rgba(83, 85, 179, 0.25) !important;
}

[data-bs-theme="dark"] .icon-btn {
	background: var(--card-bg);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .icon-btn:hover {
	background: var(--card-hover-bg);
	border-color: var(--brand-accent);
}

/* ========================================
   DROPDOWN MENUS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .dropdown-menu {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
}

[data-bs-theme="dark"] .dropdown-item {
	color: var(--text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
	background: var(--card-hover-bg);
	color: var(--brand-accent);
}

[data-bs-theme="dark"] .dropdown-divider {
	border-color: var(--border-color);
}

/* ========================================
   CARDS & SECTIONS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .section-wrapper,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .casino-card {
	background: var(--card-bg) !important;
	border: 1px solid var(--border-color);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .section-wrapper:hover,
[data-bs-theme="dark"] .card:hover,
[data-bs-theme="dark"] .casino-card:hover {
	background: var(--card-hover-bg) !important;
	border-color: var(--brand-accent);
	transform: translateY(-2px);
}

[data-bs-theme="dark"] .section-header {
	border-bottom-color: var(--border-color);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .casino-card-header {
	background: linear-gradient(135deg, #1a1a3e 0%, #2a2a4e 100%);
	color: var(--text-primary);
}

/* ========================================
   GAME CARDS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .game-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .game-card:hover {
	background: var(--card-hover-bg);
	border-color: var(--brand-accent);
	box-shadow: 0 8px 24px rgba(83, 85, 179, 0.2);
}

[data-bs-theme="dark"] .game-title {
	color: var(--text-primary);
}

[data-bs-theme="dark"] .game-provider,
[data-bs-theme="dark"] .game-stats {
	color: var(--text-secondary);
}

[data-bs-theme="dark"] .game-thumbnail {
	background: var(--section-bg);
}

[data-bs-theme="dark"] .game-play-overlay {
	background: rgba(0, 0, 0, 0.85);
}

[data-bs-theme="dark"] .play-button {
	background: var(--brand-accent);
	color: white;
}

/* ========================================
   PAGINATION DARK MODE
   ======================================== */
[data-bs-theme="dark"] .pagination a,
[data-bs-theme="dark"] .pagination span {
	background: var(--card-bg);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .pagination a:hover {
	background: var(--card-hover-bg);
	border-color: var(--brand-accent);
	color: var(--brand-accent);
}

[data-bs-theme="dark"] .pagination a.actived,
[data-bs-theme="dark"] .pagination .active a {
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	color: white;
}

[data-bs-theme="dark"] .pagination a.disabled {
	background: var(--section-bg);
	color: var(--text-muted);
	opacity: 0.5;
}

/* ========================================
   FORMS & INPUTS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
	background: var(--input-bg);
	border-color: var(--input-border);
	color: var(--input-fg);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] select:focus {
	background: #222244;
	border-color: var(--brand-accent);
	color: var(--input-fg);
	box-shadow: 0 0 0 0.2rem rgba(83, 85, 179, 0.25);
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] label {
	color: var(--text-secondary);
}

[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .help-block {
	color: var(--text-muted);
}

/* ========================================
   BUTTONS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .btn-primary {
	background: linear-gradient(135deg, #5355b3 0%, #6366c3 100%);
	border: 1px solid transparent;
	color: white;
}

[data-bs-theme="dark"] .btn-primary:hover {
	background: linear-gradient(135deg, #6366c3 0%, #7377d3 100%);
	box-shadow: 0 4px 12px rgba(83, 85, 179, 0.3);
}

[data-bs-theme="dark"] .btn-secondary {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .btn-secondary:hover {
	background: var(--card-hover-bg);
	border-color: var(--brand-accent);
	color: var(--brand-accent);
}

[data-bs-theme="dark"] .btn-outline-primary {
	color: var(--brand-accent);
	border-color: var(--brand-accent);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	color: white;
}

[data-bs-theme="dark"] .btn-play {
	background: linear-gradient(135deg, #d946ef 0%, #ec4899 100%);
	box-shadow: 0 4px 12px rgba(217, 70, 239, 0.2);
}

[data-bs-theme="dark"] .btn-play:hover {
	background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
	box-shadow: 0 6px 20px rgba(236, 72, 153, 0.3);
}

/* ========================================
   BADGES DARK MODE
   ======================================== */
[data-bs-theme="dark"] .badge {
	opacity: 0.95;
}

[data-bs-theme="dark"] .badge-primary {
	background: var(--brand-accent);
	color: white;
}

[data-bs-theme="dark"] .badge-secondary {
	background: var(--card-hover-bg);
	color: var(--text-primary);
}

/* ========================================
   TABLES DARK MODE
   ======================================== */
[data-bs-theme="dark"] .table {
	color: var(--text-primary);
	border-color: var(--border-color);
}

[data-bs-theme="dark"] .table thead th {
	background: var(--section-bg);
	color: var(--text-primary);
	border-color: var(--border-color);
}

[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
	background: rgba(255, 255, 255, 0.02);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
	background: var(--card-hover-bg);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
	border-color: var(--border-color);
}

/* ========================================
   MODALS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .modal-content {
	background: var(--card-bg);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .modal-header {
	background: var(--section-bg);
	border-bottom-color: var(--border-color);
}

[data-bs-theme="dark"] .modal-footer {
	background: var(--section-bg);
	border-top-color: var(--border-color);
}

[data-bs-theme="dark"] .modal-title {
	color: var(--text-primary);
}

[data-bs-theme="dark"] .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========================================
   OFFCANVAS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .offcanvas-modern,
[data-bs-theme="dark"] .offcanvas {
	background: var(--card-bg);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .offcanvas-header {
	border-bottom: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .offcanvas-modern .nav-link {
	color: var(--text-primary);
}

[data-bs-theme="dark"] .offcanvas-modern .nav-link:hover {
	background: var(--card-hover-bg);
	color: var(--brand-accent);
}

[data-bs-theme="dark"] .theme-chip {
	background: var(--card-bg);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-bs-theme="dark"] .theme-chip.active {
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	color: white;
}

/* ========================================
   SIDEBAR DARK MODE
   ======================================== */
[data-bs-theme="dark"] .side-menu-wrapper {
	background: var(--section-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

[data-bs-theme="dark"] .sidebar .nav-link {
	color: var(--text-primary);
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
	background: var(--card-hover-bg);
	color: var(--brand-accent);
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
	background: var(--brand-accent);
	color: white;
}

/* ========================================
   LINKS & TEXT DARK MODE
   ======================================== */
[data-bs-theme="dark"] a {
	color: var(--brand-accent);
}

[data-bs-theme="dark"] a:hover {
	color: #7377d3;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
	color: var(--text-primary);
}

[data-bs-theme="dark"] p,
[data-bs-theme="dark"] li,
[data-bs-theme="dark"] span {
	color: var(--text-secondary);
}

[data-bs-theme="dark"] .text-muted {
	color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .text-white {
	color: var(--text-primary) !important;
}

/* ========================================
   ALERTS & NOTIFICATIONS DARK MODE
   ======================================== */
[data-bs-theme="dark"] .alert {
	border: 1px solid;
}

[data-bs-theme="dark"] .alert-primary {
	background: rgba(83, 85, 179, 0.15);
	border-color: var(--brand-accent);
	color: #a8aaff;
}

[data-bs-theme="dark"] .alert-success {
	background: rgba(34, 197, 94, 0.15);
	border-color: #22c55e;
	color: #86efac;
}

[data-bs-theme="dark"] .alert-warning {
	background: rgba(245, 158, 11, 0.15);
	border-color: #f59e0b;
	color: #fcd34d;
}

[data-bs-theme="dark"] .alert-danger {
	background: rgba(239, 68, 68, 0.15);
	border-color: #ef4444;
	color: #fca5a5;
}

/* ========================================
   HERO SECTION DARK MODE
   ======================================== */
[data-bs-theme="dark"] .bg-blu {
	background: linear-gradient(135deg, var(--brand-bg) 0%, #151538 100%);
}

[data-bs-theme="dark"] .hero-section {
	color: var(--text-primary);
}

[data-bs-theme="dark"] .hero-title {
	color: var(--text-primary);
}

/* ========================================
   SCROLLBAR DARK MODE
   ======================================== */
[data-bs-theme="dark"] ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
	background: var(--section-bg);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 6px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: var(--brand-accent);
}

/* ========================================
   UTILITY OVERRIDES DARK MODE
   ======================================== */
[data-bs-theme="dark"] .bg-white {
	background-color: var(--card-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
	background-color: var(--section-bg) !important;
}

[data-bs-theme="dark"] .border {
	border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .shadow-sm {
	box-shadow: var(--shadow-sm) !important;
}

[data-bs-theme="dark"] .shadow {
	box-shadow: var(--shadow-md) !important;
}

[data-bs-theme="dark"] .shadow-lg {
	box-shadow: var(--shadow-lg) !important;
}