/*
 * WillebrandXPERT (cid 3124) - Bootstrap 5.3.8 running with the Bootstrap 5.0.2 look.
 * Same layer as HaemophiliaXPERT (cid 3344); only the card title colors differ (custom.css heading colors).
 * Load right after bootstrap.min.css and before theme-style.css / custom.css,
 * so the theme cascade stays the same as with 5.0.2.
 * Each rule restores a 5.0.2 value that 5.3 moved to a CSS variable or changed.
 */

:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-secondary-color: #6c757d;
  --bs-border-radius: .25rem;
  --bs-border-radius-sm: .2rem;
  --bs-border-radius-lg: .3rem;
  --bs-border-color-translucent: rgba(0, 0, 0, .125);
}

/* 5.3 sets the body color on these components; 5.0.2 let them inherit the theme color */
.card,
.modal-content {
  color: inherit;
}

/* 5.3 .card-title forces color: var(--bs-card-title-color), which beats the custom.css heading colors */
:is(h1, h2, h3, h4, h5, h6).card-title {
  color: #585978;
}

h2.card-title {
  color: #E72E55;
}

.modal {
  --bs-modal-border-color: rgba(0, 0, 0, .2);
}

.list-group {
  --bs-list-group-border-color: rgba(0, 0, 0, .125);
}

.dropdown-menu {
  --bs-dropdown-border-color: rgba(0, 0, 0, .15);
  --bs-dropdown-link-hover-color: #1e2125;
  --bs-dropdown-link-hover-bg: #e9ecef;
}

.form-control,
.form-select,
.input-group-text {
  --bs-border-color: #ced4da;
}

.form-check-input {
  --bs-border-color: rgba(0, 0, 0, .25);
}

/* Floating labels: 5.0.2 inherited the color and faded with opacity */
.form-floating > label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: inherit;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  opacity: .65;
}

.table {
  color: #212529;
  --bs-table-color: #212529;
  --bs-table-striped-color: #212529;
  --bs-table-active-color: #212529;
  --bs-table-hover-color: #212529;
  --bs-table-bg: transparent;
}

.btn-group {
  border-radius: 0;
}

.btn-close {
  border-radius: .25rem;
}

/* 5.0.2 kept the toggler border transparent outside .navbar-light / .navbar-dark */
.navbar-toggler {
  --bs-navbar-toggler-border-color: transparent;
}

/* 5.3 alerts use the "subtle" palette; 5.0.2 also styled .alert-* without .alert */
.alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; }
.alert-primary .alert-link { color: #06357a; }
.alert-secondary { color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8; }
.alert-secondary .alert-link { color: #34383c; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.alert-success .alert-link { color: #0c4128; }
.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.alert-info .alert-link { color: #04414d; }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.alert-warning .alert-link { color: #523e02; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.alert-danger .alert-link { color: #6a1a21; }
.alert-light { color: #636464; background-color: #fefefe; border-color: #fdfdfe; }
.alert-light .alert-link { color: #4f5050; }
.alert-dark { color: #141619; background-color: #d3d3d4; border-color: #bcbebf; }
.alert-dark .alert-link { color: #101214; }

/* 5.0.2 let .col-* win over .row-cols-lg-auto (header search form) */
@media (min-width: 992px) {
  .row-cols-lg-auto > .col-10 { width: 83.33333333%; }
  .row-cols-lg-auto > .col-1 { width: 8.33333333%; }
}