/*
 * Bootstrap 4.6 -> 5.3.3 visual-parity layer.
 * Load immediately AFTER bootstrap.min.css and BEFORE site.css.
 *
 * Two kinds of rules live here:
 *  1. Re-declarations of classes Bootstrap 5 removed but our markup still
 *     uses (.form-group, .close, .rounded-lg, .navbar-light) - these are now
 *     app-owned CSS, copied from Bootstrap 4.6.
 *  2. Overrides of Bootstrap 5 defaults that changed value (colors, radii,
 *     gutters, paddings) pinned back to the Bootstrap 4.6 values so the UI
 *     renders pixel-identical after the upgrade.
 */

/* ---------- Reboot parity ---------- */
/* BS5 underlines links by default; BS4 only on hover. */
a {
  color: #007bff;
  text-decoration: none;
}
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* BS4 re-declared text-decoration: none on these components' hover states;
   BS5 dropped that (its links aren't underlined on hover globally). Since the
   a:hover rule above restores BS4's underline-on-hover for plain links, the
   component-level resets must come back too, or <a class="btn">, nav links,
   the brand, and dropdown items get underlined on hover. */
.btn:hover, .btn:focus,
.nav-link:hover, .nav-link:focus,
.navbar-brand:hover, .navbar-brand:focus,
.dropdown-item:hover, .dropdown-item:focus {
  text-decoration: none;
}

/* BS5 removed the default label margin (moved to .form-label). */
label {
  margin-bottom: 0.5rem;
}

/* BS5 headings scale fluidly with viewport (RFS); BS4 sizes were fixed. */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

/* BS4: small = 80%; BS5: 0.875em. */
small, .small {
  font-size: 80%;
}

/* BS4 hr: rgba(0,0,0,.1) solid; BS5 uses currentcolor at .25 opacity. */
hr {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* ---------- Grid: BS4 30px gutters / 15px container padding ---------- */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  --bs-gutter-x: 1.875rem;
}
.row {
  --bs-gutter-x: 1.875rem;
}
/* BS5 added an xxl tier (>=1400px) that widens containers to 1320px; BS4
   capped them at 1140px from 1200px up. Pin the BS4 maximum. (.container-xxl
   is deliberately left out - it's a BS5-only class absent from BS4 markup.) */
@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1140px;
  }
}

/* BS4 gave every .col-* class 15px horizontal padding unconditionally; BS5
   only pads columns via `.row > *`, so columns used OUTSIDE a .row (e.g. the
   footer's `ul.nav.col-md-12`) lost their padding. Restore it with a
   zero-specificity :where() so BS4's cascade is reproduced exactly - any
   class rule (like .nav's padding-left: 0) still wins, and inside a .row the
   value is identical to what `.row > *` already applies. */
:where(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5,
  .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
  .col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5,
  .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
  .col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5,
  .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
  .col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5,
  .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12) {
  position: relative;
  padding-right: calc(var(--bs-gutter-x, 1.875rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.875rem) * 0.5);
}

/* The inverse case: BS4 grid styled ONLY .col-* children of a .row; BS5's
   `.row > *` gives every child width:100%, flex-shrink:0 and gutter padding,
   which stacks plain divs that used to sit side by side (e.g. the management
   grid's .job-results-header-options-container icons) and pads/stretches
   wrappers like .manage-account-forms. Restore BS4 behavior: non-column
   children are content-sized, unpadded flex items. :where keeps specificity
   at .row's (0,1,0), so this beats bootstrap's earlier `.row > *` but still
   loses to any app rule. .modal/.toast are excluded - they define their own
   width in bootstrap.css and would lose the equal-specificity tie to this
   later-loaded sheet. */
.row > :where(:not([class^="col-"]):not([class*=" col-"]):not([class~="col"]):not(.modal):not(.toast)) {
  width: auto;
  max-width: none;
  flex-shrink: 1;
  padding-right: 0;
  padding-left: 0;
}

/* ---------- Removed BS4 classes still used in markup ---------- */
/* .form-group is also a styling hook in site.css - keep it working. */
.form-group {
  margin-bottom: 1rem;
}

.rounded-lg {
  border-radius: 0.3rem !important;
}

/* BS4 dismiss button (BS5 replaced it with .btn-close). */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}
.close:hover {
  color: #000;
  text-decoration: none;
}
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: 0.75;
}
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

/* ---------- Navbar ---------- */
/* BS4 navbars had 1rem horizontal padding; BS5 moved it to the container. */
.navbar {
  --bs-navbar-padding-x: 1rem;
}
/* BS4 removed inner container padding below the expand breakpoint. */
@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
/* .navbar-light was removed in BS 5.3 - restore the BS4.6 light scheme. */
.navbar-light {
  --bs-navbar-color: rgba(0, 0, 0, 0.5);
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
  --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
  --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Buttons: BS4 palette and radii ---------- */
.btn {
  --bs-btn-border-radius: 0.25rem;
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-border-radius: 0.2rem;
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-border-radius: 0.3rem;
}
/* BS4 primary #007bff (BS5 moved to #0d6efd). */
.btn-primary {
  --bs-btn-bg: #007bff;
  --bs-btn-border-color: #007bff;
  --bs-btn-hover-bg: #0069d9;
  --bs-btn-hover-border-color: #0062cc;
  --bs-btn-active-bg: #0062cc;
  --bs-btn-active-border-color: #005cbf;
  --bs-btn-disabled-bg: #007bff;
  --bs-btn-disabled-border-color: #007bff;
  --bs-btn-focus-shadow-rgb: 38, 143, 255;
}
.btn-outline-primary {
  --bs-btn-color: #007bff;
  --bs-btn-border-color: #007bff;
  --bs-btn-hover-bg: #007bff;
  --bs-btn-hover-border-color: #007bff;
  --bs-btn-active-bg: #007bff;
  --bs-btn-active-border-color: #007bff;
  --bs-btn-disabled-color: #007bff;
  --bs-btn-disabled-border-color: #007bff;
  --bs-btn-focus-shadow-rgb: 0, 123, 255;
}
/* BS4 secondary hover/active shades differ from BS5. */
.btn-secondary {
  --bs-btn-hover-bg: #5a6268;
  --bs-btn-hover-border-color: #545b62;
  --bs-btn-active-bg: #545b62;
  --bs-btn-active-border-color: #4e555b;
}
.btn-danger {
  --bs-btn-hover-bg: #c82333;
  --bs-btn-hover-border-color: #bd2130;
  --bs-btn-active-bg: #bd2130;
  --bs-btn-active-border-color: #b21f2d;
}
.btn-light {
  --bs-btn-color: #212529;
  --bs-btn-hover-color: #212529;
  --bs-btn-active-color: #212529;
  --bs-btn-hover-bg: #e2e6ea;
  --bs-btn-hover-border-color: #dae0e5;
  --bs-btn-active-bg: #dae0e5;
  --bs-btn-active-border-color: #d3d9df;
}
.btn-link {
  --bs-btn-color: #007bff;
  --bs-btn-hover-color: #0056b3;
}

/* BS4 hard-coded .nav-link { padding: .5rem 1rem }. BS5 takes it from CSS
   vars that only .nav / .navbar-nav / .nav-tabs ancestors define, so a
   standalone .nav-link (e.g. the Blazor management left menu, whose wrapper
   is a <nav> element without the .nav class) resolves to padding 0. Restore
   the BS4 default as var fallbacks - inside .nav/.navbar contexts the
   defined vars still win. */
.nav-link {
  padding: var(--bs-nav-link-padding-y, 0.5rem) var(--bs-nav-link-padding-x, 1rem);
}

/* BS5's .nav-link gained `background: none; border: 0` (to support <button>
   nav links) and outranks .btn by source order, so elements carrying BOTH
   classes (e.g. the navbar profile-avatar button) lose the 1px .btn border
   they had under BS4 and shrink by 2px. Restore the .btn box. */
.nav-link.btn {
  background-color: var(--bs-btn-bg);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
}
.nav-link.btn:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.nav-link.btn:active {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

/* ---------- Forms: BS4 radius, colors, focus ring, placeholder ---------- */
.form-control,
.form-select {
  color: #495057;
  border-color: #ced4da;
  border-radius: 0.25rem;
}
/* BS4 custom-select reserved 1.75rem for the arrow; BS5 uses 2.25rem. */
.form-select {
  padding-right: 1.75rem;
}
.form-control-sm,
.form-select-sm {
  border-radius: 0.2rem;
}
.form-control-lg,
.form-select-lg {
  border-radius: 0.3rem;
}
.form-control:focus,
.form-select:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
  --bs-dropdown-border-radius: 0.25rem;
  --bs-dropdown-item-padding-x: 1.5rem;
  --bs-dropdown-link-color: #212529;
  --bs-dropdown-link-hover-color: #16181b;
  --bs-dropdown-link-hover-bg: #e9ecef;
  --bs-dropdown-link-active-bg: #007bff;
  --bs-dropdown-divider-bg: #e9ecef;
}

/* ---------- Modals ---------- */
.modal-content {
  --bs-modal-border-color: rgba(0, 0, 0, 0.2);
  --bs-modal-border-radius: 0.3rem;
  --bs-modal-inner-border-radius: calc(0.3rem - 1px);
}

/* ---------- Alerts: BS4 paddings and palette (BS5.3 recolored) ---------- */
.alert {
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-padding-y: 0.75rem;
  --bs-alert-border-radius: 0.25rem;
}
.alert-dismissible {
  padding-right: 4rem;
}
.alert-success {
  --bs-alert-color: #155724;
  --bs-alert-bg: #d4edda;
  --bs-alert-border-color: #c3e6cb;
}
.alert-danger {
  --bs-alert-color: #721c24;
  --bs-alert-bg: #f8d7da;
  --bs-alert-border-color: #f5c6cb;
}
.alert-warning {
  --bs-alert-color: #856404;
  --bs-alert-bg: #fff3cd;
  --bs-alert-border-color: #ffeeba;
}
.alert-info {
  --bs-alert-color: #0c5460;
  --bs-alert-bg: #d1ecf1;
  --bs-alert-border-color: #bee5eb;
}

/* ---------- Cards ---------- */
.card {
  --bs-card-border-radius: 0.25rem;
  --bs-card-inner-border-radius: calc(0.25rem - 1px);
  --bs-card-border-color: rgba(0, 0, 0, 0.125);
  --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
}

/* ---------- Tables: BS4 cell padding and border placement ---------- */
/* BS4: 0.75rem padding, 1px top border per cell, 2px bottom border on thead.
   BS5 also paints cell backgrounds and uses near-black text - revert both. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: #212529;
}
.table > :not(caption) > * > * {
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-width: 0;
}
.table > thead > tr > th {
  border-bottom: 2px solid #dee2e6;
}

/* ---------- Utility color drift between BS4 and BS5.3 ---------- */
.text-muted {
  color: #6c757d !important;
}
.text-dark {
  color: #343a40 !important;
}