/* Dark mode styles for List Building UI */

/* CSS variables for theming */
:root {
    /* Light mode colors (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --border-color: #dee2e6;
    --link-color: #0d6efd;
    --link-hover-color: #0a58ca;
    --navbar-bg: #212529;
    --navbar-text: #ffffff;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: #86b7fe;
    --table-bg: #ffffff;
    --table-stripe-bg: #f8f9fa;
    --table-hover-bg: #e9ecef;
    --dropdown-bg: #ffffff;
    --dropdown-link-hover-bg: #e9ecef;
    --code-bg: #f8f9fa;
    --alert-info-bg: #cff4fc;
    --alert-info-border: #b6effb;
    --alert-info-text: #055160;
    --alert-success-bg: #d1e7dd;
    --alert-success-border: #badbcc;
    --alert-success-text: #0f5132;
    --alert-warning-bg: #fff3cd;
    --alert-warning-border: #ffecb5;
    --alert-warning-text: #664d03;
    --alert-danger-bg: #f8d7da;
    --alert-danger-border: #f5c2c7;
    --alert-danger-text: #842029;
}

/* Dark mode colors */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;
    --text-primary: #e4e4e4;
    --text-secondary: #b0b0b0;
    --text-muted: #6c757d;
    --border-color: #404040;
    --link-color: #6ea8fe;
    --link-hover-color: #8bb9fe;
    --navbar-bg: #1a1a1a;
    --navbar-text: #e4e4e4;
    --card-bg: #1e1e1e;
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --input-focus-border: #6ea8fe;
    --table-bg: #1e1e1e;
    --table-stripe-bg: #2d2d2d;
    --table-hover-bg: #3d3d3d;
    --dropdown-bg: #2d2d2d;
    --dropdown-link-hover-bg: #3d3d3d;
    --code-bg: #2d2d2d;
    --alert-info-bg: #194d5e;
    --alert-info-border: #21617a;
    --alert-info-text: #9ec5fe;
    --alert-success-bg: #1c3829;
    --alert-success-border: #224636;
    --alert-success-text: #a3cfbb;
    --alert-warning-bg: #4d3800;
    --alert-warning-border: #664d00;
    --alert-warning-text: #ffecb5;
    --alert-danger-bg: #4d1f24;
    --alert-danger-border: #662429;
    --alert-danger-text: #f5c2c7;
}

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

/* Navbar customizations */
.navbar-dark {
    background-color: var(--navbar-bg) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--navbar-text);
}

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

.card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

/* Tables */
.table {
    color: var(--text-primary);
    --bs-table-bg: var(--table-bg);
    --bs-table-striped-bg: var(--table-stripe-bg);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-border-color: var(--border-color);
}

/* Forms */
.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(--input-focus-border);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

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

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-link-hover-bg);
    color: var(--text-primary);
}

.dropdown-divider {
    border-top-color: var(--border-color);
}

/* Alerts */
.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

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

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

/* Code blocks */
code {
    background-color: var(--code-bg);
    color: var(--text-primary);
}

pre {
    background-color: var(--code-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Links */
a {
    color: var(--link-color);
}

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

/* Badges */
.badge {
    --bs-badge-color: var(--text-primary);
}

/* Progress bars */
.progress {
    background-color: var(--bg-tertiary);
}

/* Pagination */
.page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--link-color);
}

.page-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--link-hover-color);
}

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

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

.list-group-item:hover {
    background-color: var(--bg-tertiary);
}

/* Footer */
footer {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary);
}

/* Dark mode toggle button styling */
.theme-toggle {
    background: none;
    border: none;
    color: var(--navbar-text);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

/* Mapping page specific styles */
.mapping-section {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.field-row {
    background-color: var(--bg-primary);
}

.match-highlight {
    background-color: var(--bg-tertiary);
    border-left-color: #28a745;
}

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

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

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

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-color) var(--border-color) transparent;
}

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

.tab-pane {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

/* Loading spinner overlay */
#loadingSpinner {
    background: rgba(0, 0, 0, 0.8);
}

/* Log viewer specific */
.log-line {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.log-line:hover {
    background-color: var(--bg-tertiary);
}

/* Status badges */
.badge.bg-success {
    background-color: #198754 !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

/* Custom scrollbar for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

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

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