:root {
    --app-blue: #0052a5;
    --app-blue-hover: #006cd7;
    --app-text: #1b1b1b;
    --app-muted: #767676;
    --app-grey: #f1f1f1;
    --app-border: #b7b7b7;
    --app-red: #d5233f;
    --app-accent: #0052a5;
    --app-accent-hover: #006cd7;
    --app-surface: #fff;
    --app-surface-muted: #fafafa;
    --app-line: #e3e3e3;
    --app-line-soft: #ececec;
    --app-hover: #f1f5fa;
    --app-selected: #e3edf8;
    --app-shadow: rgba(0, 0, 0, 0.12);
    --app-banner-bg: #fff7e0;
    --app-banner-text: #6b5200;
    --app-expired-bg: #fde8eb;
    --app-expired-text: #a7162d;
    --app-expiring-bg: #fff4d6;
    --app-expiring-text: #7a5a00;
    --app-header-height: 4.5rem;

    --bs-body-font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    --bs-body-color: var(--app-text);
    --bs-emphasis-color: var(--app-text);
    --bs-secondary-color: var(--app-muted);
    --bs-border-color: var(--app-border);
    --bs-border-radius: 4px;
    --bs-link-color: var(--app-blue);
    --bs-link-color-rgb: 0, 82, 165;
    --bs-link-hover-color: var(--app-blue-hover);
    --bs-link-hover-color-rgb: 0, 108, 215;
    --bs-primary: var(--app-blue);
    --bs-primary-rgb: 0, 82, 165;
    --bs-danger: var(--app-red);
    --bs-danger-rgb: 213, 35, 63;
    --bs-focus-ring-color: rgba(0, 82, 165, 0.35);
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --app-blue: #6aa6e8;
    --app-blue-hover: #8dbcf0;
    --app-text: #e3e6ea;
    --app-muted: #9aa3ad;
    --app-grey: #262a2f;
    --app-border: #4a525b;
    --app-red: #f0647a;
    --app-accent: #1f68b8;
    --app-accent-hover: #2b7bd0;
    --app-surface: #1e2226;
    --app-surface-muted: #191c20;
    --app-line: #343a40;
    --app-line-soft: #2d3238;
    --app-hover: #262d35;
    --app-selected: #1f3550;
    --app-shadow: rgba(0, 0, 0, 0.5);
    --app-banner-bg: #3a3015;
    --app-banner-text: #f0d68a;
    --app-expired-bg: #4a1d25;
    --app-expired-text: #ff9aa8;
    --app-expiring-bg: #3d3215;
    --app-expiring-text: #f0cf73;

    --bs-body-bg: #16191c;
    --bs-body-bg-rgb: 22, 25, 28;
    --bs-link-color-rgb: 106, 166, 232;
    --bs-link-hover-color-rgb: 141, 188, 240;
    --bs-primary-rgb: 106, 166, 232;
    --bs-danger-rgb: 240, 100, 122;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 700;
}

h1:focus {
    outline: none;
}

.btn {
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-active-bg: #0452a8;
    --bs-btn-active-border-color: #0452a8;
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-blue);
    --bs-btn-border-color: var(--app-blue);
    --bs-btn-hover-bg: var(--app-accent);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-active-bg: var(--app-accent);
    --bs-btn-active-border-color: var(--app-accent);
    --bs-btn-disabled-color: var(--app-blue);
    --bs-btn-disabled-border-color: var(--app-blue);
}

[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-hover);
    --bs-btn-hover-border-color: var(--app-muted);
}

.btn-outline-danger {
    --bs-btn-color: var(--app-red);
    --bs-btn-border-color: var(--app-red);
    --bs-btn-hover-bg: var(--app-red);
    --bs-btn-hover-border-color: var(--app-red);
    --bs-btn-active-bg: #a7162d;
    --bs-btn-active-border-color: #a7162d;
}

.btn-danger {
    --bs-btn-bg: var(--app-red);
    --bs-btn-border-color: var(--app-red);
    --bs-btn-hover-bg: #a7162d;
    --bs-btn-hover-border-color: #a7162d;
}

.form-control, .form-select {
    border-color: var(--app-border);
}

.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible {
    border-color: var(--app-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 82, 165, 0.25);
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.form-label.required::after {
    content: " *";
    color: var(--app-red);
}

.text-danger {
    color: var(--app-red) !important;
}

.table {
    --bs-table-active-bg: var(--app-selected);
    --bs-table-hover-bg: var(--app-hover);
}

.table > thead th {
    background-color: var(--app-grey);
    font-weight: 700;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #598527;
}

.invalid {
    outline: 1px solid var(--app-red);
}

.validation-message {
    color: var(--app-red);
}

.blazor-error-boundary {
    background: var(--app-red);
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Wystąpił błąd.";
}

html:lang(en) .blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
