/* Theme tokens for List Building UI.
 *
 * The layout language is the one the 19-lenses report
 * (templates/lense_report.html) established: a blue-grey slate base and white
 * surfaces, with a single navy accent (#000080) used for actions and
 * emphasis. This file owns the values; theme.css
 * maps them onto Bootstrap's components, and every page picks them up from
 * there rather than hard-coding colours of its own.
 *
 * Dark mode keeps the same accent and shifts the neutrals to deep slate.
 */

:root {
    /* Light mode colors (default) */
    --bg-primary: #eef2f8;
    --bg-secondary: #f4f8ff;
    --bg-tertiary: #e2eaf6;
    --text-primary: #1e293b;
    --text-secondary: #556174;
    --text-muted: #6b7a90;
    --border-color: #dce4f0;
    --link-color: #1d4ed8;
    --link-hover-color: #1e40af;
    --navbar-bg: #0f172a;
    --navbar-text: #ffffff;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #cbd8ea;
    --input-focus-border: #000080;
    --table-bg: #ffffff;
    --table-stripe-bg: #f4f8ff;
    --table-hover-bg: #e2eaf6;
    --dropdown-bg: #ffffff;
    --dropdown-link-hover-bg: #eff6ff;
    --code-bg: #f4f8ff;
    --alert-info-bg: #eff6ff;
    --alert-info-border: #bfdbfe;
    --alert-info-text: #1e40af;
    --alert-success-bg: #ecfdf5;
    --alert-success-border: #a7f3d0;
    --alert-success-text: #065f46;
    --alert-warning-bg: #fffbeb;
    --alert-warning-border: #fde68a;
    --alert-warning-text: #92400e;
    --alert-danger-bg: #fef2f2;
    --alert-danger-border: #fecaca;
    --alert-danger-text: #991b1b;

    /* Brand: navy accent, the report's type pairing and its surfaces */
    --accent: #000080;
    --accent-hover: #1a1aa6;
    --accent-contrast: #ffffff;
    /* Navy is nearly the same value as --heading-color, so text emphasis uses
       a brighter tint instead of the fill colour. */
    --accent-emphasis: #1f2fb8;
    --accent-soft: rgba(0, 0, 128, 0.10);
    /* Mid-strength tint: a border that reads against an --accent-soft fill. */
    --accent-border: rgba(0, 0, 128, 0.28);
    --accent-ring: rgba(0, 0, 128, 0.25);
    --heading-color: #0f172a;

    /* Secondary buttons need a surface of their own: the page ground is a
       light tint now, so a tinted button would disappear into it. */
    --btn-secondary-bg: #475569;
    --btn-secondary-hover-bg: #334155;
    --btn-secondary-text: #ffffff;
    --btn-outline-border: #64748b;
    --panel-gradient: linear-gradient(135deg, #eff6ff 0%, #e0ecff 60%, #dbeafe 100%);
    --shadow-card: 0 4px 32px rgba(30, 60, 120, 0.10);
    --font-display: 'Syne', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode colors */
[data-theme="dark"] {
    --bg-primary: #0b1220;
    --bg-secondary: #111a2b;
    --bg-tertiary: #1b2537;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #24314a;
    --link-color: #8ab4ff;
    --link-hover-color: #a9c8ff;
    --navbar-bg: #070d18;
    --navbar-text: #e2e8f0;
    --card-bg: #111a2b;
    --input-bg: #16203a;
    --input-border: #2a3752;
    --input-focus-border: #8fa8ff;
    --table-bg: #111a2b;
    --table-stripe-bg: #16203a;
    --table-hover-bg: #1f2b42;
    --dropdown-bg: #16203a;
    --dropdown-link-hover-bg: #1f2b42;
    --code-bg: #16203a;
    --alert-info-bg: #16253d;
    --alert-info-border: #24406b;
    --alert-info-text: #bfdbfe;
    --alert-success-bg: #10291f;
    --alert-success-border: #1c4636;
    --alert-success-text: #a7f3d0;
    --alert-warning-bg: #2e2410;
    --alert-warning-border: #4d3d16;
    --alert-warning-text: #fde68a;
    --alert-danger-bg: #2e1518;
    --alert-danger-border: #4d2126;
    --alert-danger-text: #fecaca;

    /* #000080 is invisible against a deep-slate page, so dark mode uses the
       same navy lightened to stay legible; fills then need dark text. */
    --accent: #8fa8ff;
    --accent-hover: #adc0ff;
    --accent-contrast: #0b1220;
    --accent-emphasis: #adc0ff;
    --accent-soft: rgba(143, 168, 255, 0.16);
    --accent-border: rgba(143, 168, 255, 0.42);
    --accent-ring: rgba(143, 168, 255, 0.35);
    --heading-color: #f1f5f9;

    --btn-secondary-bg: #5a6b86;
    --btn-secondary-hover-bg: #6b7d99;
    --btn-secondary-text: #ffffff;
    --btn-outline-border: #8494ab;
    --panel-gradient: linear-gradient(135deg, #101a2c 0%, #132038 60%, #16294a 100%);
    --shadow-card: 0 4px 32px rgba(0, 0, 0, 0.45);
}

/* 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 var(--accent-ring);
}

/* 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 sit on saturated fills (bg-danger, bg-success, bg-info…), so their
   text is white regardless of theme — not --text-primary, which made light
   mode paint dark ink on red and dark mode paint light ink on yellow. The
   two fills that need dark ink say so themselves: .badge.bg-warning below,
   and .bg-light via the utility rules in theme.css. */
.badge {
    --bs-badge-color: #ffffff;
}

/* 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;
    /* Lives on the always-dark top bar, so the ring is the lightened navy
       rather than --accent-ring, which would vanish there. */
    box-shadow: 0 0 0 0.25rem rgba(143, 168, 255, 0.35);
}

/* 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;
}