/* Unified Dark Mode CSS - Universal for all subdomains
 * This file ensures consistent dark mode across all country pages
 * Priority: Load after all other CSS files
 */

/* CSS Variables for consistent theming */
:root {
    /* Light mode variables (default) */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #eeeeee;
    --shadow-light: rgba(0,0,0,0.08);
    --shadow-medium: rgba(0,0,0,0.12);
    --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
    --accent-color: #667eea;
}

/* Dark mode variables */
[data-theme="dark"] {
    --bg-primary: #121212 !important;
    --bg-secondary: #1e1e1e !important;
    --bg-card: #2a2a2a !important;
    --text-primary: #e0e0e0 !important;
    --text-secondary: #b3b3b3 !important;
    --border-color: #404040 !important;
    --shadow-light: rgba(0,0,0,0.3) !important;
    --shadow-medium: rgba(0,0,0,0.5) !important;
    --header-bg: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
    --gradient-start: #2d3748 !important;
    --gradient-end: #4a5568 !important;
    --accent-color: #667eea !important;
}

/* Base elements */
[data-theme="dark"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Header */
[data-theme="dark"] header {
    background: var(--header-bg) !important;
}

[data-theme="dark"] .logo h1,
[data-theme="dark"] .logo-text h1 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .tagline {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Navigation */
[data-theme="dark"] nav a,
[data-theme="dark"] .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] nav a:hover,
[data-theme="dark"] .nav-link:hover {
    color: #ffffff !important;
}

/* Dark mode toggle */
[data-theme="dark"] .dark-mode-text {
    filter: brightness(1.5) drop-shadow(0 0 5px #ffd700) !important;
}

/* Hero sections */
[data-theme="dark"] .radio-page-hero,
[data-theme="dark"] .country-hero {
    background: var(--header-bg) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .country-info h1 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .country-info p {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .stat-number {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Control sections */
[data-theme="dark"] .controls-section,
[data-theme="dark"] .stations-section {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

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

/* Filter bar */
[data-theme="dark"] .filters-bar {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

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

[data-theme="dark"] .filter-group select {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .filter-group select option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

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

/* View controls */
[data-theme="dark"] .view-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .view-btn:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
}

/* Radio cards */
[data-theme="dark"] .radio-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] .radio-info .genre,
[data-theme="dark"] .genre {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .radio-status {
    color: #10b981 !important;
}

[data-theme="dark"] .click-hint {
    color: var(--accent-color) !important;
}

/* Tags */
[data-theme="dark"] .tag.genre-tag {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #8fa4f3 !important;
}

[data-theme="dark"] .tag.country-tag {
    background: rgba(123, 31, 162, 0.2) !important;
    color: #b57edc !important;
}

/* Footer */
[data-theme="dark"] footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

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

[data-theme="dark"] footer p,
[data-theme="dark"] footer .country-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] footer .country-link:hover {
    color: var(--accent-color) !important;
}

/* Search container */
[data-theme="dark"] .search-container input {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .search-container input::placeholder {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .search-container button {
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .dropdown-menu li a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-menu li a:hover {
    background: var(--bg-secondary) !important;
    color: var(--accent-color) !important;
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Override any conflicting styles */
[data-theme="dark"] .magic-fm-page {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}