/* ── Palette ────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="dark"] {
    --bg-primary:    #0d0d0d;
    --bg-secondary:  #141414;
    --bg-card:       #1a1a1a;
    --bg-input:      #111111;
    --border-subtle: #2e2e2e;
    --text-primary:  #e2e2e2;
    --text-muted:    #8a8a8a;
    --text-dim:      #666;
    --success:       #3EAA6D;
    --warning:       #C89030;
    --danger:        #CC5050;
    --info:          #4A90D4;
    --accent:        #5a7fd4;

    /* Override Bootstrap dark-mode variables so its components use our palette */
    --bs-body-bg:               #0d0d0d;
    --bs-body-color:            #e2e2e2;
    --bs-secondary-bg:          #141414;
    --bs-tertiary-bg:           #111111;
    --bs-border-color:          #2e2e2e;
    --bs-border-color-translucent: rgba(255,255,255,0.1);
    --bs-secondary-color:       #8a8a8a;
    --bs-tertiary-color:        #666;
    --bs-card-bg:               #1a1a1a;
    --bs-card-border-color:     #2e2e2e;
    --bs-card-cap-bg:           #141414;
    --bs-table-bg:              transparent;
    --bs-table-striped-bg:      rgba(255,255,255,0.025);
    --bs-table-hover-bg:        rgba(255,255,255,0.04);
    --bs-table-border-color:    #2e2e2e;
    --bs-table-color:           #e2e2e2;
    --bs-form-control-bg:       #111111;
    --bs-form-select-bg:        #111111;
    --bs-link-color:            #7fa4e8;
    --bs-link-hover-color:      #a0bcf0;
    --bs-emphasis-color:        #fff;
    --bs-navbar-color:          rgba(226,226,226,0.75);
    --bs-navbar-hover-color:    #e2e2e2;
    --bs-navbar-active-color:   #fff;
    --bs-navbar-brand-color:    #e2e2e2;
    --bs-nav-link-color:        rgba(226,226,226,0.7);
    --bs-nav-link-hover-color:  #e2e2e2;
    --bs-dropdown-bg:           #1e1e1e;
    --bs-dropdown-border-color: #2e2e2e;
    --bs-dropdown-color:        #e2e2e2;
    --bs-dropdown-link-color:   #e2e2e2;
    --bs-dropdown-link-hover-bg: rgba(255,255,255,0.06);
    --bs-modal-bg:              #1a1a1a;
    --bs-modal-header-border-color: #2e2e2e;
    --bs-progress-bg:           #141414;
}

/* ── Base reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    margin: 0;
}

/* Catch-all: every element's text defaults to light */
* { color: inherit; }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
.navbar-brand, .navbar-text { color: var(--text-primary) !important; }
.brand-accent { color: var(--accent); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
}
.card-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
}
.card-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* ── Login card ─────────────────────────────────────────────────────────── */
.login-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
}
.login-card h2 { color: var(--text-primary); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control,
.form-select,
input[type="text"],
input[type="password"],
select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: 5px;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--accent) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 2px rgba(90, 127, 212, 0.2) !important;
}
.form-control::placeholder { color: var(--text-dim) !important; }

/* Select option text (browser-native) */
select option {
    background-color: #1e1e1e;
    color: var(--text-primary);
}

/* Labels — both form-label and form-check-label */
.form-label,
label,
.form-check-label {
    color: var(--text-muted) !important;
}

/* Checkboxes & switches */
.form-check-input {
    background-color: var(--bg-input) !important;
    border-color: #444 !important;
}
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(90, 127, 212, 0.2) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: #4a6bc4 !important;
    border-color: #4a6bc4 !important;
}
.btn-primary:disabled {
    background-color: #3a4e8a !important;
    border-color: #3a4e8a !important;
    opacity: 0.6;
}
.btn-outline-secondary {
    border-color: #3a3a3a !important;
    color: var(--text-muted) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.btn-outline-danger {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    background: transparent !important;
    font-size: 11px;
    padding: 1px 6px;
}
.btn-outline-danger:hover {
    background-color: var(--danger) !important;
    color: #fff !important;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert-warning {
    background-color: rgba(200, 144, 48, 0.15) !important;
    border-color: rgba(200, 144, 48, 0.3) !important;
    color: #e0a840 !important;
}
.alert-danger {
    background-color: rgba(204, 80, 80, 0.15) !important;
    border-color: rgba(204, 80, 80, 0.3) !important;
    color: #e07070 !important;
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.table {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-subtle);
}
.table thead th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}
.table tbody tr {
    border-color: var(--border-subtle);
    background-color: transparent;
}
.table tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-color: var(--border-subtle);
    font-size: 13px;
    color: var(--text-primary);
    background-color: transparent !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.035) !important;
    color: var(--text-primary) !important;
}
.table-responsive { border: none; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.badge-ok {
    display: inline-block;
    background-color: rgba(62, 170, 109, 0.15);
    color: #4ec882;
    border: 1px solid rgba(62, 170, 109, 0.3);
    font-size: 11px; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.badge-failed {
    display: inline-block;
    background-color: rgba(204, 80, 80, 0.15);
    color: #e07070;
    border: 1px solid rgba(204, 80, 80, 0.3);
    font-size: 11px; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.badge-deprecated {
    display: inline-block;
    background-color: rgba(100, 100, 100, 0.12);
    color: #777;
    border: 1px solid rgba(100, 100, 100, 0.2);
    font-size: 11px; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.badge-untested {
    display: inline-block;
    background-color: rgba(136, 136, 136, 0.08);
    color: #666;
    border: 1px solid rgba(136, 136, 136, 0.18);
    font-size: 11px; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}

/* ── Lab pills ──────────────────────────────────────────────────────────── */
.lab-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.lab-Anthropic { background-color: rgba(212, 169, 110, 0.15); color: #D4A96E; }
.lab-OpenAI    { background-color: rgba(74, 144, 212, 0.15);  color: #6aaae8; }
.lab-Gemini    { background-color: rgba(93, 187, 99, 0.15);   color: #6dcc74; }
.lab-Meta      { background-color: rgba(229, 115, 115, 0.15); color: #E57373; }
.lab-xAI       { background-color: rgba(171, 71, 188, 0.15);  color: #c466d8; }
.lab-DeepSeek  { background-color: rgba(38, 198, 218, 0.15);  color: #26C6DA; }
.lab-Alibaba   { background-color: rgba(255, 138, 101, 0.15); color: #FF8A65; }
.lab-Mistral   { background-color: rgba(128, 203, 196, 0.15); color: #80CBC4; }
.lab-Canopy    { background-color: rgba(174, 213, 129, 0.15); color: #AED581; }
.lab-Custom    { background-color: rgba(136, 136, 136, 0.12); color: #999; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar {
    background-color: var(--bg-secondary);
}
.filter-bar .text-muted,
.filter-bar label,
.filter-bar small {
    color: var(--text-muted) !important;
}

/* ── Console area ───────────────────────────────────────────────────────── */
.console-area {
    background-color: #080808;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    color: #a0a0a0;
    padding: 12px;
    height: 280px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.console-area .log-ok      { color: #4ec882; }
.console-area .log-failed  { color: #e07070; }
.console-area .log-warning { color: #e0a840; }
.console-area .log-info    { color: #6aaae8; }
.console-area .log-muted   { color: var(--text-dim); }

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress {
    background-color: #111 !important;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}
.progress-bar {
    background-color: var(--accent) !important;
    transition: width 0.3s ease;
}

/* ── Typography helpers ─────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }
small, .small { color: inherit; }

.model-id-cell {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 12px;
    color: var(--text-primary);
}
.latency-cell {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}
.last-tested-cell {
    color: var(--text-dim);
    font-size: 11px;
    white-space: nowrap;
}

/* ── Deprecated rows ────────────────────────────────────────────────────── */
tr.row-deprecated td { opacity: 0.4; }

/* ── Nav active link ────────────────────────────────────────────────────── */
.nav-active { color: var(--text-primary) !important; }

/* ── Collapse toggle arrow colour ──────────────────────────────────────── */
[data-bs-toggle="collapse"] { cursor: pointer; }

/* ── Sortable table headers ─────────────────────────────────────────────── */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text-primary) !important; }
.sort-ind { font-size: 10px; color: var(--accent); margin-left: 3px; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #505050; }