:root {
    color-scheme: light;
    --app-background: #f2f5f9;
    --app-surface: #ffffff;
    --app-surface-muted: #f7f9fc;
    --app-surface-raised: #ffffff;
    --app-text: #172033;
    --app-text-muted: #667085;
    --app-border: #dfe5ec;
    --app-brand: #1478c9;
    --app-brand-strong: #0a4f88;
    --app-brand-soft: #e6f3ff;
    --app-on-brand: #ffffff;
    --app-focus-ring: rgba(37, 140, 251, 0.36);
    --app-input-background: #ffffff;
    --app-input-disabled: #edf1f5;
    --app-placeholder: #7c8796;
    --app-header-background: rgba(255, 255, 255, 0.9);
    --app-sidebar-start: #081f33;
    --app-sidebar-end: #123e5d;
    --app-sidebar-text: #dceaf5;
    --app-sidebar-muted: #9fc2d9;
    --app-sidebar-border: rgba(255, 255, 255, 0.12);
    --app-sidebar-active: rgba(81, 197, 255, 0.2);
    --app-sidebar-hover: rgba(255, 255, 255, 0.09);
    --app-sidebar-panel: rgba(255, 255, 255, 0.07);
    --app-sidebar-accent: #51c5ff;
    --app-sidebar-shadow: rgba(3, 17, 29, 0.22);
    --app-hero-start: #0b3558;
    --app-hero-end: #1478c9;
    --app-hero-glow: rgba(106, 211, 255, 0.28);
    --app-hero-text-muted: rgba(255, 255, 255, 0.8);
    --app-danger-soft: #fff3f4;
    --app-danger-border: #f2c4c9;
    --app-danger-text: #9f2432;
    --app-success-soft: #eaf7ef;
    --app-success-border: #acd7bb;
    --app-success-text: #176b39;
    --app-info-soft: #e9f6fc;
    --app-info-border: #add9ec;
    --app-info-text: #165d7d;
    --app-warning-soft: #fff9ed;
    --app-warning-border: #f1dcae;
    --app-warning-pill: #ffedbd;
    --app-warning-text: #714800;
    --app-neutral-pill: #e9eef4;
    --app-neutral-text: #344054;
    --app-overlay: rgba(8, 31, 51, 0.48);
    --app-shadow-sm: 0 0.35rem 1rem rgba(16, 24, 40, 0.07);
    --app-shadow-md: 0 0.8rem 2rem rgba(16, 24, 40, 0.1);
    --app-logo-shadow: 0 0.45rem 1rem rgba(8, 31, 51, 0.16);
    --bs-body-bg: var(--app-background);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-link-color: var(--app-brand-strong);
    --bs-link-hover-color: var(--app-brand);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --app-background: #091119;
    --app-surface: #111c27;
    --app-surface-muted: #172430;
    --app-surface-raised: #152330;
    --app-text: #edf5fb;
    --app-text-muted: #a5b5c3;
    --app-border: #293947;
    --app-brand: #5bc0ff;
    --app-brand-strong: #8bd2ff;
    --app-brand-soft: #12344b;
    --app-on-brand: #ffffff;
    --app-focus-ring: rgba(91, 192, 255, 0.42);
    --app-input-background: #0d1822;
    --app-input-disabled: #1b2935;
    --app-placeholder: #8195a5;
    --app-header-background: rgba(9, 17, 25, 0.9);
    --app-sidebar-start: #050d14;
    --app-sidebar-end: #0b2638;
    --app-sidebar-text: #d7e8f4;
    --app-sidebar-muted: #86adc5;
    --app-sidebar-border: rgba(139, 210, 255, 0.14);
    --app-sidebar-active: rgba(91, 192, 255, 0.19);
    --app-sidebar-hover: rgba(255, 255, 255, 0.08);
    --app-sidebar-panel: rgba(139, 210, 255, 0.07);
    --app-sidebar-accent: #5bc0ff;
    --app-sidebar-shadow: rgba(0, 0, 0, 0.42);
    --app-hero-start: #071d2d;
    --app-hero-end: #0d527e;
    --app-hero-glow: rgba(91, 192, 255, 0.2);
    --app-hero-text-muted: rgba(237, 245, 251, 0.8);
    --app-danger-soft: #321a20;
    --app-danger-border: #69303b;
    --app-danger-text: #ff9da8;
    --app-success-soft: #142c21;
    --app-success-border: #285d40;
    --app-success-text: #8ce0aa;
    --app-info-soft: #102b3a;
    --app-info-border: #28556a;
    --app-info-text: #91d9f6;
    --app-warning-soft: #2c2516;
    --app-warning-border: #5e4d27;
    --app-warning-pill: #473817;
    --app-warning-text: #ffd985;
    --app-neutral-pill: #24323e;
    --app-neutral-text: #d4e0e8;
    --app-overlay: rgba(0, 0, 0, 0.72);
    --app-shadow-sm: 0 0.35rem 1rem rgba(0, 0, 0, 0.24);
    --app-shadow-md: 0 0.8rem 2rem rgba(0, 0, 0, 0.3);
    --app-logo-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35);
    --bs-body-bg: var(--app-background);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-link-color: var(--app-brand);
    --bs-link-hover-color: var(--app-brand-strong);
}

html,
body {
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--app-background);
    color: var(--app-text);
}

a, .btn-link {
    color: var(--app-brand-strong);
}

.btn-primary {
    color: var(--app-on-brand);
    background-color: var(--app-brand-strong);
    border-color: var(--app-brand-strong);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: var(--app-on-brand);
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}

.btn-secondary {
    color: var(--app-neutral-text);
    background-color: var(--app-neutral-pill);
    border-color: var(--app-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    color: var(--app-text);
    background-color: var(--app-surface-muted);
    border-color: var(--app-brand);
}

.btn-outline-primary {
    color: var(--app-brand-strong);
    border-color: var(--app-brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: var(--app-on-brand);
    background-color: var(--app-brand-strong);
    border-color: var(--app-brand-strong);
}

.btn-outline-secondary {
    color: var(--app-neutral-text);
    border-color: var(--app-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    color: var(--app-text);
    background-color: var(--app-neutral-pill);
    border-color: var(--app-brand);
}

.btn-outline-danger {
    color: var(--app-danger-text);
    border-color: var(--app-danger-border);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    color: var(--app-danger-text);
    background-color: var(--app-danger-soft);
    border-color: var(--app-danger-text);
}

.btn-danger {
    color: var(--app-on-brand);
    background-color: var(--app-danger-text);
    border-color: var(--app-danger-text);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    color: var(--app-danger-text);
    background-color: var(--app-danger-soft);
    border-color: var(--app-danger-border);
}

.text-danger {
    color: var(--app-danger-text) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem var(--app-focus-ring);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    color: var(--app-text);
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.card-header,
.card-footer {
    color: var(--app-text);
    background-color: var(--app-surface-muted);
    border-color: var(--app-border);
}

.table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: var(--app-surface-muted);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: var(--app-surface-muted);
    --bs-table-hover-color: var(--app-text);
    color: var(--app-text);
    border-color: var(--app-border);
}

.table > thead {
    color: var(--app-text);
    background-color: var(--app-surface-muted);
}

.table-danger > * {
    --bs-table-bg-state: var(--app-danger-soft);
    --bs-table-color-state: var(--app-text);
}

.form-control,
.form-select,
.input-group-text {
    color: var(--app-text);
    background-color: var(--app-input-background);
    border-color: var(--app-border);
}

.form-control:focus,
.form-select:focus {
    color: var(--app-text);
    background-color: var(--app-input-background);
    border-color: var(--app-brand);
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--app-placeholder);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--app-text-muted);
    background-color: var(--app-input-disabled);
}

.form-select option {
    color: var(--app-text);
    background-color: var(--app-input-background);
}

.form-check-input {
    background-color: var(--app-input-background);
    border-color: var(--app-border);
}

.form-check-input:checked {
    background-color: var(--app-brand-strong);
    border-color: var(--app-brand-strong);
}

.form-floating > label,
.form-text,
.text-muted,
.text-secondary {
    color: var(--app-text-muted) !important;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: var(--app-input-background);
}

.alert {
    color: var(--app-text);
    background-color: var(--app-surface-muted);
    border-color: var(--app-border);
}

.alert-light,
.alert-secondary {
    --bs-alert-color: var(--app-text);
    --bs-alert-bg: var(--app-surface-muted);
    --bs-alert-border-color: var(--app-border);
}

.alert-danger {
    --bs-alert-color: var(--app-danger-text);
    --bs-alert-bg: var(--app-danger-soft);
    --bs-alert-border-color: var(--app-danger-border);
}

.alert-warning {
    --bs-alert-color: var(--app-warning-text);
    --bs-alert-bg: var(--app-warning-soft);
    --bs-alert-border-color: var(--app-warning-border);
}

.alert-success {
    --bs-alert-color: var(--app-success-text);
    --bs-alert-bg: var(--app-success-soft);
    --bs-alert-border-color: var(--app-success-border);
}

.alert-info {
    --bs-alert-color: var(--app-info-text);
    --bs-alert-bg: var(--app-info-soft);
    --bs-alert-border-color: var(--app-info-border);
}

.bg-light {
    background-color: var(--app-surface-muted) !important;
}

.border,
.border-primary,
.border-warning {
    border-color: var(--app-border) !important;
}

.text-bg-primary,
.text-bg-info {
    color: var(--app-brand-strong) !important;
    background-color: var(--app-brand-soft) !important;
}

.text-bg-secondary {
    color: var(--app-neutral-text) !important;
    background-color: var(--app-neutral-pill) !important;
}

.text-bg-success {
    color: var(--app-success-text) !important;
    background-color: var(--app-success-soft) !important;
}

.text-bg-danger {
    color: var(--app-danger-text) !important;
    background-color: var(--app-danger-soft) !important;
}

.text-bg-warning {
    color: var(--app-warning-text) !important;
    background-color: var(--app-warning-pill) !important;
}

hr {
    color: var(--app-border);
    opacity: 1;
}

code {
    color: var(--app-brand-strong);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--app-success-text);
}

.invalid {
    outline: 1px solid var(--app-danger-text);
}

.validation-message {
    color: var(--app-danger-text);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--app-border);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@media (prefers-reduced-motion: no-preference) {
    body,
    .card,
    .form-control,
    .form-select {
        transition:
            color 160ms ease,
            background-color 160ms ease,
            border-color 160ms ease;
    }
}
