/* Dark Mode CSS Variables and Overrides */
/* ========================================= */

/* Light Mode (Default) */
:root {
    /* Bootstrap 5 CSS Variables for Light Mode */
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    
    /* Custom Application Colors - Light Mode */
    --app-bg-primary: #ffffff;
    --app-bg-secondary: #f8f9fa;
    --app-text-primary: #212529;
    --app-text-secondary: #6c757d;
    --app-card-bg: #ffffff;
    --app-card-border: #dee2e6;
    --app-input-bg: #ffffff;
    --app-input-border: #dee2e6;
    --app-input-focus-border: #80bdff;
    --app-navbar-bg: rgba(255, 255, 255, 0.95);
    --app-navbar-text: #212529;
    --app-link-color: #0d6efd;
    --app-link-hover-color: #0b5ed7;
    --app-success-bg: #198754;
    --app-danger-bg: #dc3545;
    --app-warning-bg: #ffc107;
    --app-info-bg: #0dcaf0;
    --app-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --app-modal-bg: #ffffff;
    --app-modal-border: #dee2e6;
    --app-code-bg: #f8f9fa;
    --app-code-color: #212529;
    --app-loader-color: #0d6efd;
    --app-empty-state-text: #6c757d;
    --app-empty-state-icon-color: #dee2e6;
    --app-toast-bg: #ffffff;
    --app-toast-border: #dee2e6;
    --app-toast-text: #212529;
}

/* Dark Mode */
[data-bs-theme="dark"] {
    /* Bootstrap 5 CSS Variables for Dark Mode */
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #e9ecef;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    
    /* Custom Application Colors - Dark Mode */
    --app-bg-primary: #1a1a1a;
    --app-bg-secondary: #2d2d2d;
    --app-text-primary: #e9ecef;
    --app-text-secondary: #adb5bd;
    --app-card-bg: #2d2d2d;
    --app-card-border: #495057;
    --app-input-bg: #2d2d2d;
    --app-input-border: #495057;
    --app-input-focus-border: #60a5fa;
    --app-navbar-bg: rgba(26, 26, 26, 0.98);
    --app-navbar-text: #e9ecef;
    --app-link-color: #60a5fa;
    --app-link-hover-color: #93c5fd;
    --app-success-bg: #198754;
    --app-danger-bg: #dc3545;
    --app-warning-bg: #ffc107;
    --app-info-bg: #0dcaf0;
    --app-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    --app-modal-bg: #2d2d2d;
    --app-modal-border: #495057;
    --app-code-bg: #1a1a1a;
    --app-code-color: #e9ecef;
    --app-loader-color: #60a5fa;
    --app-empty-state-text: #adb5bd;
    --app-empty-state-icon-color: #495057;
    --app-toast-bg: #2d2d2d;
    --app-toast-border: #495057;
    --app-toast-text: #e9ecef;
    
    /* Dark mode specific overrides */
    color-scheme: dark;
}

/* General Utilities */
.bg-app-primary {
    background-color: var(--app-bg-primary);
}

.bg-app-secondary {
    background-color: var(--app-bg-secondary);
}

.text-app-primary {
    color: var(--app-text-primary);
}

.text-app-secondary {
    color: var(--app-text-secondary);
}

.card {
    background-color: var(--app-card-bg);
    border-color: var(--app-card-border);
}

.card-header {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-card-border);
}

.modal-content {
    background-color: var(--app-modal-bg);
    border-color: var(--app-modal-border);
}

.form-control,
.form-select {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-focus-border);
    color: var(--app-text-primary);
}

.form-control::placeholder {
    color: var(--app-text-secondary);
}

.table {
    border-color: var(--app-card-border);
    color: var(--app-text-primary);
}

.table thead {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-card-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--app-bg-secondary);
}

.list-group-item {
    background-color: var(--app-bg-primary);
    border-color: var(--app-card-border);
    color: var(--app-text-primary);
}

.list-group-item.active {
    background-color: var(--app-link-color);
    border-color: var(--app-link-color);
}

/* Code blocks */
pre,
code {
    background-color: var(--app-code-bg);
    color: var(--app-code-color);
}

/* Toast notifications */
.toast {
    background-color: var(--app-toast-bg);
    border-color: var(--app-toast-border);
    color: var(--app-toast-text);
}

/* Empty states */
.empty-state-icon {
    color: var(--app-empty-state-icon-color);
}

.empty-state-text {
    color: var(--app-empty-state-text);
}

/* Scrollbar styling for dark mode */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

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

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--app-bg-secondary);
    border-radius: 5px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

/* Ensure proper contrast for links in dark mode */
[data-bs-theme="dark"] a {
    color: var(--app-link-color);
}

[data-bs-theme="dark"] a:hover {
    color: var(--app-link-hover-color);
}

/* Ensure buttons have proper styling in dark mode */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--app-text-primary);
    border-color: var(--app-card-border);
}

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

/* Badge styling */
[data-bs-theme="dark"] .badge:not(.badge-primary):not(.badge-success):not(.badge-danger):not(.badge-warning):not(.badge-info) {
    background-color: var(--app-bg-secondary);
    color: var(--app-text-primary);
}

/* Alert styling */
[data-bs-theme="dark"] .alert-secondary {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-card-border);
    color: var(--app-text-primary);
}

/* ========================================= */
/* Bootstrap utility overrides for dark mode */
/* ========================================= */

/* bg-light is blinding in dark mode — map it to the secondary dark surface */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--app-bg-secondary) !important;
}

/* bg-white similarly needs remapping */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--app-bg-primary) !important;
}

/* list-group-item-action hover/active states are too bright by default */
[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--app-text-primary);
}

[data-bs-theme="dark"] .list-group-item-action:active {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--app-text-primary);
}

/* text-success (used for played/selected song icons) — softer green for dark mode */
[data-bs-theme="dark"] .text-success {
    color: #4ade80 !important;
}

/* input-group-text (e.g. tip config prefixes) */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-input-border);
    color: var(--app-text-secondary);
}

/* Navbar: override the hardcoded white blur background */
[data-bs-theme="dark"] .navbar-blur {
    background: rgba(26, 26, 26, 0.85) !important;
}

/* navbar-light forces dark text; swap to light text in dark mode */
[data-bs-theme="dark"] .navbar-light .navbar-brand,
[data-bs-theme="dark"] .navbar-light .nav-link,
[data-bs-theme="dark"] .navbar-light .navbar-toggler {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .navbar-light .nav-link:hover,
[data-bs-theme="dark"] .navbar-light .nav-link:focus {
    color: var(--app-link-color) !important;
}

[data-bs-theme="dark"] .navbar-light .nav-link.active {
    color: var(--app-link-color) !important;
}

/* Artist search bar: hardcoded white backgrounds */
[data-bs-theme="dark"] .artist-search-sticky-top {
    background: var(--app-bg-primary) !important;
    border-bottom-color: var(--app-card-border) !important;
}

[data-bs-theme="dark"] .artist-search-dock {
    background: rgba(26, 26, 26, 0.96) !important;
    border-top-color: var(--app-card-border) !important;
}

/* Modal header/footer borders */
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--app-card-border);
}

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

/* Alert variants */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.3);
    color: #67d6ed;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffcd39;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
    color: #ea868f;
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.3);
    color: #75b798;
}

/* Dropdown menus */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--app-bg-secondary);
    border-color: var(--app-card-border);
}

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

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--app-text-primary);
}

/* text-muted override — ensure readable in dark mode */
[data-bs-theme="dark"] .text-muted {
    color: var(--app-text-secondary) !important;
}

/* Nav tabs — active tab blends with bright light theme by default */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--app-card-border);
}

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

[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link:focus {
    border-color: var(--app-card-border) var(--app-card-border) transparent;
    color: var(--app-text-primary);
}

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

/* btn-light is too bright in dark mode (e.g. QR Code button on gig dashboard) */
[data-bs-theme="dark"] .btn-light {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* btn-outline-light text readability on gradient backgrounds */
[data-bs-theme="dark"] .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
}