/* ---------- DARK THEME ROOT --------- */
:root {
    --bg: #212121;
    --panel: #1c1c1c;
    --panel-soft: #262626;
    --text: #e8e8e8;
    --text-dim: #b9b9b9;
    --brand: #004DA8;
    --brand-contrast: #ffffff;
    --primary: var(--brand);
    --msg-ai-bg: #262626;
    --msg-user-bg: #333333;
    --msg-border: #3a3a3a;
    --composer-bg: #2a2a2a;
    --composer-border: #3a3a3a;
    --btn-close-filter: invert(1);
    --modal-header-bg: var(--panel);
    --modal-header-text: var(--text);
    --modal-header-border: var(--msg-border);
    --table-head-bg: #1f1f1f;
    --table-head-text: var(--text);
    --table-head-hover-bg: #2a2a2a;
    --table-striped-odd-bg: rgba(255,255,255,0.02);
    --viz-grid: rgba(255,255,255,0.12);
    /* Status colours */
    --st-info-bg: #2b3445;
    --st-info-border: #37507a;
    --st-info-dot: #76a8ff;
    --st-thinking-bg: #2e2840;
    --st-thinking-border: #4a3b7a;
    --st-thinking-dot: #8f7aff;
    --st-exec-bg: #3a2f1e;
    --st-exec-border: #6b4a1e;
    --st-exec-dot: #ffb84d;
    --st-success-bg: #1f3a2a;
    --st-success-border: #2e6b4a;
    --st-success-dot: #3ddc84;
    --st-warn-bg: #3a321e;
    --st-warn-border: #6b5a1e;
    --st-warn-dot: #ffd24d;
    --st-error-bg: #3a2323;
    --st-error-border: #6b2e2e;
    --st-error-dot: #ff6b6b;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f8fa;
        --panel: #ffffff;
        --panel-soft: #f2f4f7;
        --text: #1f2328;
        --text-dim: #57606a;
        --btn-close-filter: none;
        --table-head-bg: var(--brand);
        --table-head-text: var(--brand-contrast);
        --table-head-hover-bg: #003d86;
        --table-striped-odd-bg: rgba(0, 77, 168, 0.04);
        --viz-grid: rgba(0,0,0,0.10);
        --msg-ai-bg: #f6f8fa;
        --msg-user-bg: #eef2ff;
        --msg-border: #d0d7de;
        --composer-bg: #ffffff;
        --composer-border: #d0d7de;
        --modal-header-bg: var(--brand);
        --modal-header-text: var(--brand-contrast);
        --modal-header-border: var(--msg-border);
        /* Status colours */
        --st-info-bg: #e7f1ff;
        --st-info-border: #b6d4fe;
        --st-info-dot: #0d6efd;
        --st-thinking-bg: #f1e8ff;
        --st-thinking-border: #d0bfff;
        --st-thinking-dot: #6f42c1;
        --st-exec-bg: #fff4e5;
        --st-exec-border: #ffd8a8;
        --st-exec-dot: #d9480f;
        --st-success-bg: #e6fcf5;
        --st-success-border: #96f2d7;
        --st-success-dot: #198754;
        --st-warn-bg: #fff9db;
        --st-warn-border: #ffe066;
        --st-warn-dot: #d9480f;
        --st-error-bg: #ffe3e3;
        --st-error-border: #ffc9c9;
        --st-error-dot: #dc3545;
    }
}

html[data-theme="dark"] {
    --bg: #212121;
    --panel: #1c1c1c;
    --panel-soft: #262626;
    --text: #e8e8e8;
    --text-dim: #b9b9b9;
    --msg-ai-bg: #262626;
    --msg-user-bg: #333333;
    --msg-border: #3a3a3a;
    --composer-bg: #2a2a2a;
    --composer-border: #3a3a3a;
    --btn-close-filter: invert(1);
    --modal-header-bg: var(--panel);
    --modal-header-text: var(--text);
    --modal-header-border: var(--msg-border);
    --table-head-bg: #1f1f1f;
    --table-head-text: var(--text);
    --table-head-hover-bg: #2a2a2a;
    --table-striped-odd-bg: rgba(255,255,255,0.02);
    --viz-grid: rgba(255,255,255,0.12);
    --st-info-bg: #2b3445;
    --st-info-border: #37507a;
    --st-info-dot: #76a8ff;
    --st-thinking-bg: #2e2840;
    --st-thinking-border: #4a3b7a;
    --st-thinking-dot: #8f7aff;
    --st-exec-bg: #3a2f1e;
    --st-exec-border: #6b4a1e;
    --st-exec-dot: #ffb84d;
    --st-success-bg: #1f3a2a;
    --st-success-border: #2e6b4a;
    --st-success-dot: #3ddc84;
    --st-warn-bg: #3a321e;
    --st-warn-border: #6b5a1e;
    --st-warn-dot: #ffd24d;
    --st-error-bg: #3a2323;
    --st-error-border: #6b2e2e;
    --st-error-dot: #ff6b6b;
}

html[data-theme="light"] {
    --bg: #f6f8fa;
    --panel: #ffffff;
    --panel-soft: #f2f4f7;
    --text: #1f2328;
    --text-dim: #57606a;
    --msg-ai-bg: #f6f8fa;
    --msg-user-bg: #eef2ff;
    --msg-border: #d0d7de;
    --composer-bg: #ffffff;
    --composer-border: #d0d7de;
    --btn-close-filter: none;
    --modal-header-bg: var(--brand);
    --modal-header-text: var(--brand-contrast);
    --modal-header-border: var(--msg-border);
    --table-head-bg: var(--brand);
    --table-head-text: var(--brand-contrast);
    --table-head-hover-bg: #003d86;
    --table-striped-odd-bg: rgba(0, 77, 168, 0.04);
    --viz-grid: rgba(0,0,0,0.10);
    --st-info-bg: #e7f1ff;
    --st-info-border: #b6d4fe;
    --st-info-dot: #0d6efd;
    --st-thinking-bg: #f1e8ff;
    --st-thinking-border: #d0bfff;
    --st-thinking-dot: #6f42c1;
    --st-exec-bg: #fff4e5;
    --st-exec-border: #ffd8a8;
    --st-exec-dot: #d9480f;
    --st-success-bg: #e6fcf5;
    --st-success-border: #96f2d7;
    --st-success-dot: #198754;
    --st-warn-bg: #fff9db;
    --st-warn-border: #ffe066;
    --st-warn-dot: #d9480f;
    --st-error-bg: #ffe3e3;
    --st-error-border: #ffc9c9;
    --st-error-dot: #dc3545;
}

/* ---------- GLOBAL --------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow-anchor: none;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- BOOTSTRAP MODALS (theme) --------- */
.modal .modal-content {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--msg-border);
}

.modal .modal-header {
    background: var(--modal-header-bg);
    color: var(--modal-header-text);
    border-bottom: 1px solid var(--modal-header-border);
}

.modal .modal-header .modal-title {
    color: inherit;
}

.modal .modal-body {
    background: var(--panel);
    color: var(--text);
}

.modal .modal-footer {
    background: var(--panel);
    border-top: 1px solid var(--msg-border);
}

.modal .btn-close {
    filter: var(--btn-close-filter);
}

/* ---------- BOOTSTRAP BUTTON BRANDING --------- */
.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--brand-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #003d86 !important;
    border-color: #003d86 !important;
    color: var(--brand-contrast) !important;
}

.btn-outline-primary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--brand-contrast) !important;
}