/* Dark Mode Styles for RadioAura */

:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-card: #242424;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --border-color: #3d3d3d;
    --accent-color: #4a9eff;
    --accent-hover: #3a8eef;
    --success-color: #4caf50;
    --danger-color: #f44336;
    --warning-color: #ff9800;
}

/* Dark mode enabled */
body.dark-mode {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Cards and containers */
body.dark-mode .card,
body.dark-mode .player-card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Text colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .station-name {
    color: var(--text-primary) !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
    color: var(--text-primary);
}

body.dark-mode .text-muted,
body.dark-mode small {
    color: var(--text-muted) !important;
}

/* Forms */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

/* Buttons */
body.dark-mode .btn {
    border-color: var(--border-color) !important;
}

body.dark-mode .btn-primary {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

body.dark-mode .btn-primary:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

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

body.dark-mode .btn-success {
    background: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

body.dark-mode .btn-danger {
    background: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

/* Tables */
body.dark-mode .table {
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
}

body.dark-mode .table thead th {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-color: var(--border-color) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background: var(--bg-secondary) !important;
}

/* Navigation */
body.dark-mode nav,
body.dark-mode .navbar,
body.dark-mode .public-nav {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .nav-link,
body.dark-mode .navbar-brand {
    color: var(--text-primary) !important;
}

body.dark-mode .nav-link:hover {
    color: var(--accent-color) !important;
}

/* Alerts */
body.dark-mode .alert {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .alert-info {
    background: rgba(74, 158, 255, 0.2) !important;
    border-color: var(--accent-color) !important;
}

body.dark-mode .alert-success {
    background: rgba(76, 175, 80, 0.2) !important;
    border-color: var(--success-color) !important;
}

body.dark-mode .alert-danger {
    background: rgba(244, 67, 54, 0.2) !important;
    border-color: var(--danger-color) !important;
}

body.dark-mode .alert-warning {
    background: rgba(255, 152, 0, 0.2) !important;
    border-color: var(--warning-color) !important;
}

/* Modals */
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--border-color) !important;
}

/* Song details */
body.dark-mode .song-details-container,
body.dark-mode .song-detail-item {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .detail-label {
    color: var(--text-secondary) !important;
}

body.dark-mode .detail-value {
    color: var(--text-primary) !important;
}

/* Listener info */
body.dark-mode .listener-count,
body.dark-mode .countries-section {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .country-item {
    color: var(--text-primary) !important;
}

/* Audio player */
body.dark-mode audio {
    filter: invert(1) hue-rotate(180deg);
}

/* Spinner */
body.dark-mode .spinner-border {
    color: var(--accent-color) !important;
}

/* Badges */
body.dark-mode .badge {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Links */
body.dark-mode a {
    color: var(--accent-color) !important;
}

body.dark-mode a:hover {
    color: var(--accent-hover) !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body:not(.dark-mode) .dark-mode-toggle {
    background: #ffffff;
    border-color: #dddddd;
}

.dark-mode-toggle i {
    font-size: 1.5rem;
}

body:not(.dark-mode) .dark-mode-toggle i {
    color: #333;
}

body.dark-mode .dark-mode-toggle i {
    color: var(--text-primary);
}