/* Theme Variables */

/* Light Theme (Default) */
:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --accent: #8b0000;
    --accent-hover: #660000;
    --border: #dddddd;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --navbar-bg: rgba(13, 17, 23, 0.95);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #dddddd;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --text-primary: #e6e6e6;
    --text-secondary: #9eaab6;
    --accent: #c9151b;
    --accent-hover: #e01e24;
    --border: #30363d;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --navbar-bg: rgba(22, 27, 34, 0.95);
    --card-bg: #161b22;
    --input-bg: #0d1117;
    --input-border: #30363d;
}

/* Apply theme colors */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

.text-muted {
    color: var(--text-secondary) !important;
}

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

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

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.25);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #161b22;
    border-color: #3d444d;
    color: #f0f0f0;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
    color: #9eaab6;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(201, 21, 27, 0.25);
}

.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.modal-header {
    border-bottom-color: var(--border);
}

.navbar {
    background-color: var(--navbar-bg) !important;
    backdrop-filter: blur(10px);
}

.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.btn-accent:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

.btn-outline-accent {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline-accent:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* Navbar btn-outline-accent - visible on dark navbar */
.navbar .btn-outline-accent {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.85);
}

.navbar .btn-outline-accent:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.text-accent {
    color: var(--accent) !important;
}

.border {
    border-color: var(--border) !important;
}

/* Theme Toggle Button - always light on dark navbar */
#themeToggle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    padding: 0.5rem;
}

#themeToggle:hover {
    color: #ffffff;
}

/* Navbar - all text/links always light on dark navbar background */
.navbar .nav-link,
.navbar .btn-link {
    color: rgba(255, 255, 255, 0.75) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .btn-link:hover,
.navbar .btn-link:focus {
    color: #ffffff !important;
}

.navbar .navbar-brand {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar .navbar-brand:hover {
    color: #ffffff !important;
}

.navbar a {
    color: rgba(255, 255, 255, 0.75);
}

.navbar a:hover {
    color: #ffffff;
}

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

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

/* Alert colors for dark theme */
[data-theme="dark"] .alert-info {
    background-color: rgba(13, 110, 253, 0.2);
    border-color: rgba(13, 110, 253, 0.4);
    color: #a8d4ff;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffda6a;
}

/* Badge colors */
.badge {
    font-weight: 500;
}

/* Badge bg-secondary - readable in both themes */
.badge.bg-secondary {
    background-color: #e9ecef !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: #30363d !important;
    color: #e6e6e6 !important;
}

/* Tab styling */
.nav-tabs {
    border-bottom-color: var(--border);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-secondary);
    color: var(--accent);
    border-color: var(--border) var(--border) var(--bg-secondary);
}

/* Pagination */
.pagination .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-primary);
}

.pagination .page-link:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.pagination .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* Form check inputs for dark theme */
[data-theme="dark"] .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* Dropdown menu */
.dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border);
}

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

.dropdown-item:hover {
    background-color: var(--bg-primary);
    color: var(--accent);
}

/* Input group text */
.input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--input-border);
    color: var(--text-secondary);
}

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

/* Source badge colors - dark theme overrides (brighter for dark backgrounds) */
[data-theme="dark"] .source-official {
    color: #3ddc6e;
}

[data-theme="dark"] .source-festival {
    color: #ffd54f;
}

[data-theme="dark"] .source-physical {
    color: #6ea8fe;
}

[data-theme="dark"] .source-archive {
    color: #adb5bd;
}

[data-theme="dark"] .source-private {
    color: #b197fc;
}

[data-theme="dark"] .source-unavailable {
    color: #f07078;
}

/* Nav pills for dark theme */
.nav-pills .nav-link {
    color: var(--text-secondary);
}

.nav-pills .nav-link:hover {
    color: var(--text-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--accent);
    color: #ffffff;
}

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

/* Empty state text */
.empty-state {
    color: var(--text-secondary);
}

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

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

/* Accordion / collapsible for dark theme */
[data-theme="dark"] .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border);
    color: var(--text-primary);
}

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

[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* Auth section & form labels - dark theme */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

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

/* Card title/text in dark theme */
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text {
    color: var(--text-primary);
}

/* Disabled buttons - both themes */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-accent:disabled,
.btn-accent.disabled {
    background-color: var(--accent);
    border-color: var(--accent);
    opacity: 0.4;
}

.btn-outline-accent:disabled,
.btn-outline-accent.disabled {
    opacity: 0.4;
}