/* Shared UI tokens; leave drawing paint --buildscope-blue and SVG/canvas fills alone. */
:root {
    color-scheme: light;
    --buildscope-bg-app: #f3f6fa;
    --buildscope-page-bg: #f3f6fa;
    --buildscope-nav-bg: #ffffff;
    --buildscope-surface-bg: #ffffff;
    --buildscope-surface-muted-bg: #f5f7fa;
    --buildscope-text: #212529;
    --buildscope-muted: #667085;
    --buildscope-text-muted: var(--buildscope-muted);
    --buildscope-border: #dce3ec;
    --buildscope-border-strong: #b9c3ce;
    --buildscope-input-bg: #ffffff;
    --buildscope-input-text: #212529;
    --buildscope-accent: #006982;
    --buildscope-accent-hover: #00556b;
    --buildscope-on-accent: #ffffff;
    --buildscope-accent-soft: #e8f6fb;
    --buildscope-focus-ring: #006982;
    --buildscope-info-text: #075b70;
    --buildscope-info-bg: #e8f6fb;
    --buildscope-info-border: #87c6d8;
    --buildscope-success-text: #166534;
    --buildscope-success-bg: #eaf7ef;
    --buildscope-success-border: #8ac6a4;
    --buildscope-warning-text: #76580a;
    --buildscope-warning-bg: #fff4d6;
    --buildscope-warning-border: #ddba65;
    --buildscope-danger-text: #9b1c1c;
    --buildscope-danger-bg: #fff1f0;
    --buildscope-danger-border: #e5aaa5;
    --buildscope-radius-sm: 6px;
    --buildscope-radius-md: 10px;
    --buildscope-radius-lg: 14px;
    --buildscope-topbar-height: 4rem;
    --buildscope-shadow: 0 8px 28px rgba(20, 35, 55, 0.08);

    --bs-body-bg: var(--buildscope-page-bg);
    --bs-body-color: var(--buildscope-text);
    --bs-emphasis-color: var(--buildscope-text);
    --bs-secondary-color: var(--buildscope-muted);
    --bs-secondary-bg: var(--buildscope-surface-muted-bg);
    --bs-tertiary-color: var(--buildscope-muted);
    --bs-tertiary-bg: var(--buildscope-bg-app);
    --bs-border-color: var(--buildscope-border);
    --bs-link-color: var(--buildscope-accent);
    --bs-link-hover-color: var(--buildscope-accent-hover);
    --bs-info-text-emphasis: var(--buildscope-info-text);
    --bs-info-bg-subtle: var(--buildscope-info-bg);
    --bs-info-border-subtle: var(--buildscope-info-border);
    --bs-success-text-emphasis: var(--buildscope-success-text);
    --bs-success-bg-subtle: var(--buildscope-success-bg);
    --bs-success-border-subtle: var(--buildscope-success-border);
    --bs-warning-text-emphasis: var(--buildscope-warning-text);
    --bs-warning-bg-subtle: var(--buildscope-warning-bg);
    --bs-warning-border-subtle: var(--buildscope-warning-border);
    --bs-danger-text-emphasis: var(--buildscope-danger-text);
    --bs-danger-bg-subtle: var(--buildscope-danger-bg);
    --bs-danger-border-subtle: var(--buildscope-danger-border);
    --bs-primary-text-emphasis: var(--buildscope-accent);
    --bs-primary-bg-subtle: var(--buildscope-accent-soft);
    --bs-primary-border-subtle: var(--buildscope-info-border);
    --bs-secondary-text-emphasis: var(--buildscope-text);
    --bs-secondary-bg-subtle: var(--buildscope-surface-muted-bg);
    --bs-secondary-border-subtle: var(--buildscope-border-strong);
    --bs-light-text-emphasis: var(--buildscope-text);
    --bs-light-bg-subtle: var(--buildscope-surface-muted-bg);
    --bs-light-border-subtle: var(--buildscope-border);
    --bs-dark-text-emphasis: var(--buildscope-text);
    --bs-dark-bg-subtle: var(--buildscope-surface-muted-bg);
    --bs-dark-border-subtle: var(--buildscope-border-strong);
    --bs-body-bg-rgb: 243, 246, 250;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-emphasis-color-rgb: 33, 37, 41;
    --bs-secondary-color-rgb: 102, 112, 133;
    --bs-secondary-bg-rgb: 245, 247, 250;
    --bs-tertiary-color-rgb: 102, 112, 133;
    --bs-tertiary-bg-rgb: 243, 246, 250;
    --bs-link-color-rgb: 0, 105, 130;
    --bs-link-hover-color-rgb: 0, 85, 107;
}

html.buildscope-dark {
    color-scheme: dark;
    --buildscope-bg-app: #0c1422;
    --buildscope-page-bg: #0c1422;
    --buildscope-nav-bg: #0d1728;
    --buildscope-surface-bg: #121c2c;
    --buildscope-surface-muted-bg: #1a273a;
    --buildscope-text: #e8edf5;
    --buildscope-muted: #afbed0;
    --buildscope-border: #2a3a50;
    --buildscope-border-strong: #64768c;
    --buildscope-input-bg: #0f1929;
    --buildscope-input-text: #e8edf5;
    --buildscope-lt-grey: #1a273a;
    --buildscope-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    --buildscope-accent: #62d7f3;
    --buildscope-accent-hover: #9ee8f8;
    --buildscope-on-accent: #082f49;
    --buildscope-accent-soft: #123440;
    --buildscope-focus-ring: #62d7f3;
    --buildscope-info-text: #8cdef1;
    --buildscope-info-bg: #123440;
    --buildscope-info-border: #34798b;
    --buildscope-success-text: #86ddb0;
    --buildscope-success-bg: #16372b;
    --buildscope-success-border: #438264;
    --buildscope-warning-text: #f5d077;
    --buildscope-warning-bg: #3b3016;
    --buildscope-warning-border: #957329;
    --buildscope-danger-text: #ffb4b4;
    --buildscope-danger-bg: #432326;
    --buildscope-danger-border: #a25c62;
    --bs-body-bg-rgb: 12, 20, 34;
    --bs-body-color-rgb: 232, 237, 245;
    --bs-emphasis-color-rgb: 232, 237, 245;
    --bs-secondary-color-rgb: 175, 190, 208;
    --bs-secondary-bg-rgb: 26, 39, 58;
    --bs-tertiary-color-rgb: 175, 190, 208;
    --bs-tertiary-bg-rgb: 12, 20, 34;
    --bs-link-color-rgb: 98, 215, 243;
    --bs-link-hover-color-rgb: 158, 232, 248;
}

/* Paint page/legacy shell surfaces, not layout primitives such as rows,
   columns, main, or articles. Component status text keeps its own cascade. */
html.buildscope-dark,
html.buildscope-dark body {
    background-color: var(--buildscope-page-bg);
    color: var(--buildscope-text);
}

html.buildscope-dark .page,
html.buildscope-dark .top-row {
    background-color: var(--buildscope-page-bg);
    color: var(--buildscope-text);
}

html.buildscope-dark .card,
html.buildscope-dark .auth-card,
html.buildscope-dark .modal-card-custom,
html.buildscope-dark .metric-card,
html.buildscope-dark .theme-toggle-card {
    background-color: var(--buildscope-surface-bg);
    color: var(--buildscope-text);
    border-color: var(--buildscope-border);
}

html.buildscope-dark .card-header,
html.buildscope-dark .card-footer {
    background-color: var(--buildscope-surface-muted-bg);
    border-color: var(--buildscope-border);
}

/* Explicit utility roles only; no generic div/span/p/small text overrides. */
html.buildscope-dark .bg-white {
    background-color: var(--buildscope-surface-bg) !important;
    color: var(--buildscope-text) !important;
}

html.buildscope-dark .bg-light {
    background-color: var(--buildscope-surface-muted-bg) !important;
    color: var(--buildscope-text) !important;
}

html.buildscope-dark .text-muted { color: var(--buildscope-muted) !important; }

/* Plain-input fallback is intentionally weaker than scoped component rules.
   Native checkbox/radio/range/color controls retain their own paint. */
html.buildscope-dark :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), textarea, select) {
    background-color: var(--buildscope-input-bg);
    color: var(--buildscope-input-text);
    border-color: var(--buildscope-border);
}

html.buildscope-dark :where(input, textarea)::placeholder {
    color: var(--buildscope-muted);
    opacity: 1;
}

/* Keep Bootstrap's semantic/striped/hover rows; do not repaint every td/th. */
html.buildscope-dark .table-light {
    --bs-table-bg: var(--buildscope-surface-muted-bg);
    --bs-table-color: var(--buildscope-text);
    --bs-table-border-color: var(--buildscope-border);
    --bs-table-striped-bg: var(--buildscope-surface-bg);
    --bs-table-striped-color: var(--buildscope-text);
    --bs-table-hover-bg: var(--buildscope-accent-soft);
    --bs-table-hover-color: var(--buildscope-text);
}

html.buildscope-dark .table-primary {
    --bs-table-bg: var(--buildscope-accent-soft);
    --bs-table-color: var(--buildscope-accent);
    --bs-table-border-color: var(--buildscope-info-border);
}

html.buildscope-dark .table-info {
    --bs-table-bg: var(--buildscope-info-bg);
    --bs-table-color: var(--buildscope-info-text);
    --bs-table-border-color: var(--buildscope-info-border);
}

html.buildscope-dark .table-success {
    --bs-table-bg: var(--buildscope-success-bg);
    --bs-table-color: var(--buildscope-success-text);
    --bs-table-border-color: var(--buildscope-success-border);
}

html.buildscope-dark .table-warning {
    --bs-table-bg: var(--buildscope-warning-bg);
    --bs-table-color: var(--buildscope-warning-text);
    --bs-table-border-color: var(--buildscope-warning-border);
}

html.buildscope-dark .table-danger {
    --bs-table-bg: var(--buildscope-danger-bg);
    --bs-table-color: var(--buildscope-danger-text);
    --bs-table-border-color: var(--buildscope-danger-border);
}

html.buildscope-dark .table-light,
html.buildscope-dark .table-primary,
html.buildscope-dark .table-info,
html.buildscope-dark .table-success,
html.buildscope-dark .table-warning,
html.buildscope-dark .table-danger {
    --bs-table-striped-color: var(--bs-table-color);
    --bs-table-hover-color: var(--bs-table-color);
    --bs-table-active-color: var(--bs-table-color);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.065);
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
}

/* Readable UI accents; brighter brand/model paint stays unchanged. */
a,
.btn-link { color: var(--buildscope-accent); }

a:hover,
.btn-link:hover { color: var(--buildscope-accent-hover); }

.text-primary,
.buildscope-blue-text { color: var(--buildscope-accent) !important; }

.bg-primary,
.badge.bg-primary,
.list-group-item.active {
    background-color: var(--buildscope-accent) !important;
    border-color: var(--buildscope-accent) !important;
    color: var(--buildscope-on-accent) !important;
}

.btn-primary,
.buildscope-btn-blue {
    color: var(--buildscope-on-accent);
    background-color: var(--buildscope-accent);
    border-color: var(--buildscope-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.buildscope-btn-blue:hover {
    color: var(--buildscope-on-accent) !important;
    background-color: var(--buildscope-accent-hover) !important;
    border-color: var(--buildscope-accent-hover) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--buildscope-on-accent);
    background-color: var(--buildscope-accent);
    border-color: var(--buildscope-accent);
}

.buildscope-btn-blue a,
.buildscope-btn-blue a:hover { color: inherit; }

.buildscope-outline-btn-blue {
    color: var(--buildscope-accent);
    background-color: var(--buildscope-surface-bg);
    border-color: var(--buildscope-accent);
}

.buildscope-outline-btn-blue:hover {
    color: var(--buildscope-on-accent);
    background-color: var(--buildscope-accent);
    border-color: var(--buildscope-accent);
}

html.buildscope-dark .buildscope-outline-btn-grey,
html.buildscope-dark .buildscope-btn-grey:hover {
    color: var(--buildscope-text);
    background-color: var(--buildscope-surface-bg);
    border-color: var(--buildscope-border-strong);
}

html.buildscope-dark .buildscope-outline-btn-grey:hover {
    color: var(--buildscope-text);
    background-color: var(--buildscope-surface-muted-bg);
    border-color: var(--buildscope-border-strong);
}

.page-link {
    color: var(--buildscope-accent);
    background-color: var(--buildscope-surface-bg);
    border-color: var(--buildscope-border);
}

.page-link:hover,
.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--buildscope-on-accent);
    background-color: var(--buildscope-accent);
    border-color: var(--buildscope-accent);
}

.page-item.disabled .page-link {
    color: var(--buildscope-muted);
    background-color: var(--buildscope-surface-muted-bg);
    border-color: var(--buildscope-border);
}

html.buildscope-dark .nav-link:not(.active) { color: var(--buildscope-text); }

html.buildscope-dark .license-banner-active {
    color: var(--buildscope-success-text);
    background: var(--buildscope-success-bg);
    border-color: var(--buildscope-success-border);
}

html.buildscope-dark .license-banner-warning {
    color: var(--buildscope-warning-text);
    background: var(--buildscope-warning-bg);
    border-color: var(--buildscope-warning-border);
}

html.buildscope-dark .status-indicator-processing { color: var(--buildscope-info-text); }
html.buildscope-dark .status-indicator-complete { color: var(--buildscope-success-text); }
html.buildscope-dark .status-indicator-failed { color: var(--buildscope-danger-text); }
html.buildscope-dark .status-indicator-pending { color: var(--buildscope-muted); }
html.buildscope-dark .validation-message { color: var(--buildscope-danger-text); }

/* Bootstrap controls follow the same palette as purpose-built workspace UI. */
.form-control,
.form-select {
    color: var(--buildscope-input-text);
    background-color: var(--buildscope-input-bg);
    border-color: var(--buildscope-border-strong);
}

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

.form-control:disabled,
.form-select:disabled {
    color: var(--buildscope-muted);
    background-color: var(--buildscope-surface-muted-bg);
}

.form-control::placeholder { color: var(--buildscope-muted); opacity: .85; }
.form-check-input { border-color: var(--buildscope-border-strong); }

.btn-outline-primary {
    --bs-btn-color: var(--buildscope-accent);
    --bs-btn-border-color: var(--buildscope-accent);
    --bs-btn-hover-color: var(--buildscope-on-accent);
    --bs-btn-hover-bg: var(--buildscope-accent);
    --bs-btn-hover-border-color: var(--buildscope-accent);
    --bs-btn-active-color: var(--buildscope-on-accent);
    --bs-btn-active-bg: var(--buildscope-accent);
    --bs-btn-active-border-color: var(--buildscope-accent);
    --bs-btn-disabled-color: var(--buildscope-muted);
    --bs-btn-disabled-border-color: var(--buildscope-border);
}

.alert-primary {
    color: var(--buildscope-info-text);
    background-color: var(--buildscope-info-bg);
    border-color: var(--buildscope-info-border);
}

.text-bg-primary {
    color: var(--buildscope-on-accent) !important;
    background-color: var(--buildscope-accent) !important;
}