@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --bf-font: 'Inter', 'Segoe UI', sans-serif;
    --bf-navy: #182b4d;
    --bf-nav-hover: #253f67;
    --bf-nav-border: #3c5273;
    --bf-nav-text: #dce5f4;
    --bf-nav-muted: #b9c8e1;
    --bf-brand: #abc9ff;
    --bf-brand-ink: #182b4d;
    --bf-bg: #f4f6f9;
    --bf-surface: #ffffff;
    --bf-subtle: #eef2f7;
    --bf-hover: #e7edf5;
    --bf-hover-soft: var(--bf-hover);
    --bf-subtle-hover-soft: var(--bf-hover);
    --bf-nav-hover-soft: color-mix(in srgb, var(--bf-navy) 30%, var(--bf-nav-hover));
    --bf-selected: #e6efff;
    --bf-border: #dce2ea;
    --bf-border-strong: #bdc8d8;
    --bf-text: #253247;
    --bf-muted: #606d82;
    --bf-accent: #245fcc;
    --bf-accent-hover: #1c4fae;
    --bf-link: #245fcc;
    --bf-link-hover: #1c4fae;
    --bf-focus: #5488e6;
    --bf-selection-bg: #a9c7ff;
    --bf-selection-text: #10213c;
    --bf-danger: #b43f48;
    --bf-danger-hover: #96323b;
    --bf-danger-text: #9f303b;
    --bf-danger-bg: #fff0f1;
    --bf-danger-border: #ecc4c9;
    --bf-success: #216c4b;
    --bf-success-bg: #eaf5ef;
    --bf-success-border: #bddcc9;
    --bf-warning: #835514;
    --bf-warning-bg: #fff5df;
    --bf-warning-border: #e5cc96;
    --bf-priority-urgent-bg: #a9253d;
    --bf-priority-urgent-border: #861b30;
    --bf-priority-urgent-text: #ffffff;
    --bf-priority-critical-bg: #d95d46;
    --bf-priority-critical-border: #b74836;
    --bf-priority-critical-text: #ffffff;
    --bf-priority-high-bg: #e4a63d;
    --bf-priority-high-border: #bd8123;
    --bf-priority-high-text: #3f2900;
    --bf-priority-medium-bg: #477db8;
    --bf-priority-medium-border: #35689f;
    --bf-priority-medium-text: #ffffff;
    --bf-priority-low-bg: #5f866d;
    --bf-priority-low-border: #4a6e58;
    --bf-priority-low-text: #ffffff;
    --bf-priority-none-bg: #eef2f7;
    --bf-priority-none-border: #bdc8d8;
    --bf-priority-none-text: #606d82;
    --bf-status-manual-dot: #a56b12;
    --bf-status-new-dot: #3973c8;
    --bf-status-dispatched-dot: #7652b3;
    --bf-status-started-dot: #17827e;
    --bf-status-completed-dot: #216c4b;
    --bf-status-not-completed-dot: #b43f48;
    --bf-status-neutral-dot: #727e90;
    --bf-on-accent: #ffffff;
    --bf-shadow: 0 8px 28px rgb(24 43 77 / 12%);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bf-navy: #101620;
    --bf-nav-hover: #232c3a;
    --bf-nav-border: #394354;
    --bf-nav-text: #e0e5ee;
    --bf-nav-muted: #b5becc;
    --bf-brand: #bccbe2;
    --bf-brand-ink: #151e2e;
    --bf-bg: #141922;
    --bf-surface: #1c222d;
    --bf-subtle: #242b37;
    --bf-hover: #2d3542;
    --bf-selected: #2c394c;
    --bf-border: #384251;
    --bf-border-strong: #515e70;
    --bf-text: #e3e7ee;
    --bf-muted: #b0bac9;
    --bf-accent: #446392;
    --bf-accent-hover: #38557f;
    --bf-link: #b2c5e2;
    --bf-link-hover: #d0dced;
    --bf-focus: #93add2;
    --bf-selection-bg: #6588b9;
    --bf-selection-text: #ffffff;
    --bf-danger: #b84350;
    --bf-danger-hover: #a33543;
    --bf-danger-text: #ffb1ba;
    --bf-danger-bg: #3b2530;
    --bf-danger-border: #74444f;
    --bf-success: #92d5b2;
    --bf-success-bg: #1e352e;
    --bf-success-border: #3c6352;
    --bf-warning: #edc980;
    --bf-warning-bg: #352f24;
    --bf-warning-border: #75613e;
    --bf-priority-urgent-bg: #8f293d;
    --bf-priority-urgent-border: #c14b62;
    --bf-priority-urgent-text: #ffe7eb;
    --bf-priority-critical-bg: #914537;
    --bf-priority-critical-border: #cd6b58;
    --bf-priority-critical-text: #ffebe7;
    --bf-priority-high-bg: #765a28;
    --bf-priority-high-border: #b58a3b;
    --bf-priority-high-text: #ffe5ae;
    --bf-priority-medium-bg: #345b84;
    --bf-priority-medium-border: #5d86b1;
    --bf-priority-medium-text: #e5f1ff;
    --bf-priority-low-bg: #3e654d;
    --bf-priority-low-border: #669575;
    --bf-priority-low-text: #e3f5e9;
    --bf-priority-none-bg: #242b37;
    --bf-priority-none-border: #515e70;
    --bf-priority-none-text: #b0bac9;
    --bf-status-manual-dot: #edc980;
    --bf-status-new-dot: #78a8e8;
    --bf-status-dispatched-dot: #ad91df;
    --bf-status-started-dot: #65c6bf;
    --bf-status-completed-dot: #92d5b2;
    --bf-status-not-completed-dot: #ff8996;
    --bf-status-neutral-dot: #9aa6b7;
    --bf-shadow: 0 8px 28px rgb(0 0 0 / 28%);
}

html, body {
    font-family: var(--bf-font);
    font-optical-sizing: auto;
    background: var(--bf-bg);
    color: var(--bf-text);
}
button, input, select, textarea { font-family: inherit; }
table { font-variant-numeric: tabular-nums; }
::selection { background: var(--bf-selection-bg); color: var(--bf-selection-text); }

.bf-theme-toggle, #header .bf-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    height: 36px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--bf-nav-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.bf-theme-toggle:hover { background: var(--bf-nav-hover-soft); }
.bf-theme-toggle:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: 3px; }
.bf-theme-toggle svg { width: 18px; height: 18px; }
.bf-theme-sun { display: none; }
html[data-theme="dark"] .bf-theme-sun { display: block; }
html[data-theme="dark"] .bf-theme-moon { display: none; }

/* Framework messages and translucent utility surfaces use the same palette. */
[class~="bg-white/50"] { background: var(--bf-surface); }
[class~="bg-red-50"] { background: var(--bf-danger-bg); }
[class~="text-red-700"], [class~="text-red-600"] { color: var(--bf-danger-text); }
[class~="border-red-200"] { border-color: var(--bf-danger-border); }
.bf-dialog { box-shadow: var(--bf-shadow); }
.bf-dialog::backdrop { background: rgb(9 17 31 / 55%); }

/* Django's alerts and legacy table filters inherit semantic colors. */
html[data-theme="dark"] .messagelist li { background-color: var(--bf-success-bg); color: var(--bf-success); }
html[data-theme="dark"] .messagelist li.warning { background-color: var(--bf-warning-bg); color: var(--bf-warning); }
html[data-theme="dark"] .messagelist li.error { background-color: var(--bf-danger-bg); color: var(--bf-danger-text); }
html[data-theme="dark"] .errornote, html[data-theme="dark"] .errorlist { color: var(--bf-danger-text); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Apply the entire theme in one paint; keep normal hover transitions afterward. */
html[data-theme-switching] *,
html[data-theme-switching] *::before,
html[data-theme-switching] *::after { transition: none !important; }

.bf-brand-mark, .bf-user-mark, #header .bf-admin-logo { color: var(--bf-brand-ink); }
.bf-message { display: flex; align-items: center; gap: 12px; }
.bf-message span { flex: 1; }
.bf-message [data-dismiss-message] { cursor: pointer; background: transparent; border: 0; color: inherit; font-size: 20px; padding: 4px; }
.bf-request-error { margin: 12px 20px; padding: 12px; background: var(--bf-danger-bg); color: var(--bf-danger-text); border: 1px solid var(--bf-danger-border); border-radius: 4px; }
.bf-mobile-label { display: block; margin-bottom: 4px; }
.bf-modal-footer { flex-wrap: wrap; }
.bf-tabs { scrollbar-width: thin; scrollbar-color: var(--bf-border-strong) transparent; }