.mb-2 {
  color: #212529 !important;
  font-weight: 600 !important;
  background: #fff !important;
  opacity: 1 !important;
}
/* =========================================================
   WCAG 2.1 AA Accessibility Overrides for Bootstrap Spacelab
   Load AFTER spacelab.min.css
   Paste this code at the end of your custom styles to ensure
   it takes precedence over the default spacelab theme styles.
   ========================================================= */

/* ===============================
   1. Base Typography & Text
   =============================== */

body {
  color: #212529; /* 15:1 on white */
  background-color: #ffffff;
}

.text-muted {
  color: #495057 !important; /* 7:1 on white */
}

small,
.small {
  color: #495057;
}

/* ===============================
   2. Links (1.4.1 Use of Color)
   =============================== */

/* ===============================
  WCAG 2.1 AA: <strong> Emphasis
  =============================== */
strong {
  color: #111 !important; /* Very dark for max contrast */
  font-weight: 700 !important;
  background: #fff !important; /* Ensure on white for contrast */
  padding: 0 2px;
  border-radius: 2px;
}
a:not(.nav-link):not(.navbar-brand) {
  color: #0b5ed7 !important; /* 4.8:1 on white */
  text-decoration: underline;
}

a:hover,
a:focus {
  color: #446e9b !important; /* darker hover */
  text-decoration: underline;
}

/* ===============================
   3. Strong Visible Focus (2.4.7)
   =============================== */

:focus {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 2px;
}

/* Buttons, nav links, dropdowns */
.btn:focus,
.nav-link:focus,
.dropdown-item:focus,
.page-link:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px rgba(255,191,71,0.6) !important;
  outline: none !important;
}

/* ===============================
   4. Buttons (Contrast ≥ 4.5:1)
   =============================== */

.btn-primary {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #446e9b;
  border-color: #073b8a;
  color: #ffffff;
}

/* Outline buttons (≥3:1 border contrast) */
.btn-outline-primary {
  color: #0b5ed7;
  border-color: #0b5ed7;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #0b5ed7;
  color: #ffffff;
}

/* Disabled buttons – readable but distinct */
.btn:disabled,
.btn.disabled {
  opacity: 0.65;
}

/* ===============================
   5. Forms (1.4.3, 3.3.x)
   =============================== */

label {
  font-weight: 600;
  color: #212529;
}

.form-control,
.form-select {
  border: 1px solid #6c757d; /* 3:1 non-text contrast */
}

.form-control:focus,
.form-select:focus {
  border-color: #0b5ed7;
}

/* Placeholder contrast */
::placeholder {
  color: #6c757d;
  opacity: 1;
}

.is-invalid {
  color: #dc3545 !important;      /* Strong dark red, 7:1+ contrast on white */
  background: #fff !important;    /* Ensure white background */
  font-weight: 500 !important;    /* Bold for emphasis */
  padding: 2px 4px;
  border-radius: 2px;
}

.invalid-feedback {
  color: #dc3545; /* 7:1 on white */
  font-weight: 500;
}

/* ===============================
   6. Navbars & Dropdowns
   =============================== */

.navbar-light .navbar-nav .nav-link {
  color: #212529;
}

.navbar-light .navbar-nav .nav-link.active {
  font-weight: 600;
  color: #0b5ed7;
}

.dropdown-menu {
  color: #fff !important;           /* light text */
}

.dropdown-item {
  color: #fff !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: #444 !important;
  color: #fff !important;
}

/* Fix for typeahead dropdown items */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item span,
.dropdown-menu .dropdown-item strong {
  color: #212529 !important;
}

/* Stronger override for typeahead and dropdown-menu active/hovered items */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item.active span,
.dropdown-menu .dropdown-item.active strong,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #212529 !important;
  background-color: #e9ecef !important;
}

/* ===============================
   7. Tables (1.4.11 Non-text contrast)
   =============================== */

.table th {
  font-weight: 600;
}

.table-hover tbody tr:hover {
  background-color: #e9ecef;
}

/* ===============================
   8. Cards & Borders
   =============================== */

.card {
  border: 1px solid #adb5bd; /* 3:1 on white */
}

/* ===============================
   9. Pagination
   =============================== */

.page-link {
  color: #446e9b !important; /* darker blue, ~5.3:1 on white (WCAG AA compliant) */
  background-color: #fff !important;
  font-size: 1rem !important; /* Ensure at least 16px for AA */
}

.page-item.active .page-link {
  background-color: #446e9b !important;
  border-color: #446e9b !important;
  color: #fff !important;
}

.page-item.disabled .page-link,
.page-link.disabled {
  color: #212529 !important; /* darkest gray for max contrast */
  background-color: #e9ecef !important; /* light gray background */
  opacity: 1 !important; /* prevent faint text */
  cursor: not-allowed;
  font-weight: 600;
}

/* Ensure .pagination-sm is not too small for AA */
.pagination-sm .page-link {
  font-size: 0.95rem !important; /* ~15px, meets AA */
}

/* ===============================
   10. Alerts (Improved Contrast)
   =============================== */

.alert-primary {
  background-color: #cfe2ff;
  color: #446e9b;
}

.alert-danger {
  background-color: #f8d7da;
  color: #842029;
}

/* ===============================
   11. Modals
   =============================== */

.modal-content {
  border: 1px solid #6c757d;
}

/* ===============================
   12. Reduced Motion Support
   =============================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================
   LIGHTHOUSE CONTRAST FIX PATCH
   ===================================================== */

/* =====================================================
   1. Body text contrast (p, b, body)
   ===================================================== */

body {
  background-color: #ffffff !important;
  color: #212529 !important; /* 15:1 contrast */
}

p,
b {
  color: #212529 !important;
}

/* =====================================================
   2. Panel (.panel-info / .card.panel-info)
   ===================================================== */

div.panel.card.panel-info {
  background-color: #e7f1ff !important; /* darker than spacelab */
  border: 1px solid #9ec5fe !important; /* 3:1 non-text contrast */
  color: #1f2d3d !important; /* dark text */
}

/* =====================================================
   Custom Yes/No Button Contrast Fix (oepa-yes-no)
   ===================================================== */
oepa-yes-no .btn-group[style*="background-color: #e9f0f5;"] .btn,
oepa-yes-no-other-input .btn-group[style*="background-color: #e9f0f5;"] .btn,
.btn-group[style*="background-color: #e9f0f5;"] .btn {
  color: #212529 !important; /* Dark text for contrast */
  font-weight: 600;
}

/* Panel heading */
div.panel-heading.card-header.panel-enabled {
  background-color: #0b5ed7 !important; /* strong accessible blue */
  color: #ffffff !important; /* 4.5:1+ */
  border-bottom: 1px solid #0a58ca !important;
  font-weight: 600;
}

/* Ensure bold text inside heading passes */
div.panel-heading.card-header.panel-enabled b {
  color: #ffffff !important;
}
.mat-expansion-panel-header * {
  color: #ffffff !important;
}

/* High contrast card header */
.card-header {
  background: #fff !important;
  color: #000 !important;
  font-weight: bold !important;
}


/* =====================================================
   3. Form controls contrast
   ===================================================== */

input.form-control,
input#noticeType.form-control,
input#actionStartDate_Input.form-control,
input#actionEndDate_Input.form-control,
input#weeklyReviewStartDate_Input.form-control,
input#weeklyReviewEndDate_Input.form-control,
select.form-control,
select.form-select {
  background-color: #ffffff !important;
  color: #212529 !important; /* ensure readable text */
  border: 1px solid #6c757d !important; /* 3:1 against white */
}

input.form-control:disabled,
textarea.form-control:disabled {
  background-color: #e9ecef !important; /* light gray */
  color: #495057  !important;            /* muted, high-contrast text */
  opacity: 1 !important;                /* ensure text is readable */
  cursor: not-allowed;
}

/* =====================================================
   Custom File Upload Label Contrast Fix (oepa-npdes-file-upload)
   ===================================================== */
oepa-npdes-file-upload .font-weight-bold,
oepa-npdes-multi-file-upload .font-weight-bold {
  color: #212529 !important; /* High contrast */
  font-weight: 700 !important;
  background-color: #fff !important;
  opacity: 1 !important;
}

/* High contrast for form-label spans (questions) */
.form-label {
  color: #212529 !important;
  font-weight: 600 !important;
  background: #fff !important;
}

/* Focus state */
input.form-control:focus {
  border-color: #0b5ed7 !important;
  box-shadow: 0 0 0 3px rgba(11,94,215,0.25) !important;
}

/* Placeholder text */
input.form-control::placeholder {
  color: #6c757d !important; /* 4.5:1 on white */
  opacity: 1;
}

/* =====================================================
   4. .btn-link contrast fix
   ===================================================== */

a.btn.btn-link.link-small {
  color: #0b5ed7 !important; /* 4.8:1 */
  text-decoration: underline !important;
}

a.btn.btn-link.link-small:hover,
a.btn.btn-link.link-small:focus {
  color: #446e9b !important;
  text-decoration: underline !important;
}

button.btn-link,
button.accordion-toggle.btn-link {
  color: #0b5ed7 !important; /* 4.8:1 */
  background-color: #fff !important;
  text-decoration: underline !important;
}

button.btn-link:hover,
button.btn-link:focus {
  color: #446e9b !important;
  text-decoration: underline !important;
}

/* =====================================================
   5. Global safeguard for light-on-light issues
   ===================================================== */

/* Prevent faint gray text inherited from theme */
.text-light,
.text-secondary {
  color: #495057 !important;
}

/* Ensure cards never use very pale gray text */
.card,
.panel {
  color: #212529;
}

/* =====================================================
   6. Bootstrap-like styles for Angular Material accordion
   ===================================================== */



/* Accordion & Angular Material Expansion Panel - Neutral style */
.accordion {
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: none;
}
.accordion-item {
  border: none;
  border-bottom: 1px solid #dee2e6;
  box-shadow: none;
  background: #fff;
}
.accordion-item:last-child {
  border-bottom: none;
}
.mat-expansion-panel-header {
  background-color: #446e9b !important;
  border-bottom: 1px solid #0a58ca !important;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  min-height: unset;
  color: #ffffff !important;
  transition: background 0.2s, color 0.2s;
}
.mat-expansion-panel-header:hover,
.mat-expansion-panel-header:focus {
  background-color: #446e9b !important;
  color: #ffffff !important;
}
.mat-expansion-panel-header.mat-expanded {
  background-color: #446e9b !important;
  color: #ffffff !important;
}
.mat-expansion-panel-body {
  padding: 1rem 1.25rem;
  background: #fff !important;
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
}
.mat-expansion-panel:not(:last-child) {
  margin-bottom: 0;
}
.mat-expansion-panel {
  box-shadow: none !important;
  border-radius: 0.25rem !important;
  border: 1px solid #000 !important;
  margin-bottom: 0.5rem;
}

/* Accessible skip link styling */
.skip-to-content {
  color: #446e9b !important;
  background-color: #fff !important;
  padding: 8px 16px;
  text-decoration: underline;
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
  opacity: 1;
}
.skip-to-content:focus {
  left: 0 !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: auto !important;
  height: auto !important;
  background-color: #fff !important;
  color: #446e9b !important;
  outline: 3px solid #ffbf47 !important;
}

.high-contrast-link {
  color: #446e9b !important;         /* Darker blue for higher contrast */
  background: #fff !important;       /* White background */
  font-weight: 600;
  text-decoration: underline;
  border-radius: 2px;
  padding: 2px 6px;
  transition: background 0.2s, color 0.2s;
}

.high-contrast-link, .high-contrast-link * {
  color: #446e9b !important;
}

.high-contrast-link:hover, .high-contrast-link:focus, .high-contrast-link *:hover, .high-contrast-link *:focus {
  color: #052c65 !important;
}

.high-contrast-link:hover,
.high-contrast-link:focus {
  color: #052c65 !important;         /* Even darker blue on hover/focus */
  background: #e9ecef !important;    /* Light gray background on hover/focus */
  outline: 3px solid #ffbf47;        /* Strong visible focus */
  outline-offset: 2px;
}

/* Apply high-contrast-link styles to actionable links in table-striped tables */
.table-striped td a[role="button"],
.table-striped td a[tabindex="0"] {
  color: #446e9b !important;
  background: #fff !important;
  font-weight: 600;
  text-decoration: underline;
  border-radius: 2px;
  padding: 2px 6px;
  transition: background 0.2s, color 0.2s;
}

.table-striped td a[role="button"]:hover,
.table-striped td a[role="button"]:focus,
.table-striped td a[tabindex="0"]:hover,
.table-striped td a[tabindex="0"]:focus {
  color: #052c65 !important;
  background: #e9ecef !important;
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* WCAG 2.1 Compliant Table Striped Override */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f5f5f5 !important; /* Light gray for high contrast */
  color: #222 !important; /* Dark text for readability */
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #fff !important; /* White for even rows */
  color: #222 !important;
}

.table-striped tbody tr:hover,
.table-striped tbody tr:focus {
  background-color: #e0e0e0 !important; /* Slightly darker on hover/focus */
  color: #111 !important;
}

.table-striped th,
.table-striped td {
  border-color: #bdbdbd !important; /* Ensure visible borders */
}

/* WCAG 2.1 AA override for .btn-default */
.btn-default {
  background-color: #f8f9fa !important; /* very light gray */
  color: #446e9b !important; /* dark blue for strong contrast */
  border: 1px solid #bdbdbd !important;
  font-weight: 600;
}

.btn-default:hover,
.btn-default:focus {
  background-color: #e2e6ea !important; /* slightly darker on hover */
  color: #052c65 !important;
  border-color: #446e9b !important;
}

/* WCAG high contrast for secondary badge */
.badge.bg-secondary {
  background-color: #000 !important;
  color: #fff !important;
}

/* =========================================================
   WCAG 2.1 AA: Select/Option Text Contrast Fix
   Ensures <option> text in <select> is readable and high contrast
   ========================================================= */
select.form-control, select {
  color: #212529 !important; /* Strong readable text */
  background-color: #fff !important;
}
select.form-control option, select option {
  color: #212529 !important; /* Override browser default gray */
  background-color: #fff !important;
}
select.form-control:disabled, select.form-select:disabled, select:disabled {
  color: #495057 !important; /* Muted for disabled */
  background-color: #e9ecef !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* =========================================================
   WCAG 2.1 AA: ngx-bootstrap datepicker Contrast Fix
   Ensures datepicker text is readable and high contrast
   ========================================================= */

.bs-datepicker-body,
.bs-datepicker-body th,
.bs-datepicker-body td {
  color: #212529 !important;
  background-color: #fff !important;
}

.bs-datepicker-body span {
  color: #212529 !important;
}

.bs-datepicker-body table td span.is-other-month,
.bs-datepicker-body table td.is-other-month span {
  color: #6c757d !important; /* Bootstrap secondary text, higher contrast */
}

/* WCAG 2.1 AA: ngx-bootstrap datepicker navigation buttons Contrast Fix */
.bs-datepicker-head button,
.bs-datepicker-head button span {
  color: #212529 !important; /* Bootstrap dark text */
}

.bs-datepicker-head button.current span {
  color: #212529 !important;
}

.bs-datepicker-head button:disabled,
.bs-datepicker-head button[disabled],
.bs-datepicker-head button:disabled span,
.bs-datepicker-head button[disabled] span {
  color: #adb5bd !important; /* Bootstrap gray-500 for disabled */
}

/* High contrast for all list items (li) for WCAG compliance */
li {
  color: #212529 !important; /* Very dark text for max contrast */
  font-weight: 500;
}
 
li:hover, li:focus {
  color: #052c65 !important;
}

/* Accessible heading styles for spans */
.heading-style-1 {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #212529;
}
.heading-style-2 {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #212529;
}
.heading-style-3 {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #212529;
}
.heading-style-4 {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #212529;
}
.heading-style-5 {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #212529;
}
.heading-style-6 {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #212529;
}

span:not(.bi):not(.mat-mdc-chip-action-label):not(.badge) {
  color: #212529 !important;
}

/* High contrast for links inside .form-control */
.form-control a, a.form-control {
  color: #0b5ed7 !important; /* Strong blue, 4.8:1 on white */
  background-color: #fff !important;
  text-decoration: underline;
  font-weight: 600;
}
.form-control a:hover, .form-control a:focus, a.form-control:hover, a.form-control:focus {
  color: #052c65 !important; /* Even darker blue on hover/focus */
  outline: 3px solid #ffbf47 !important;
  outline-offset: 2px;
}

fieldset legend {
  font-size: 1rem;      /* match label size */
  font-weight: 600;
  color: #212529;
  margin-bottom: 0rem;
}

fieldset {
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
}

.township-wrapper {
  position: relative;
  width: 100%;
}

.township-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  z-index: 2000;

  max-height: 220px;
  overflow-y: auto;

  background: white;
  border: 1px solid #ccc;
  border-top: none;
}

/* High-contrast styles for mat-chip-row accessibility */
.mat-mdc-chip-row, .mat-mdc-chip {
	background-color: #212121 !important; /* dark background */
	color: #fff !important; /* white text */
}

.mat-mdc-chip-action-label {
	color: #fff !important;
}

.mat-mdc-chip-remove, .mat-mdc-chip-trailing-icon {
	color: #fff !important;
}

/* High-contrast link style for Stream ID links in table cells */
td a {
  color: #0050b3 !important; /* Accessible dark blue */
  font-weight: 600;
  text-decoration: underline;
}

td a:hover,
td a:focus {
  color: #003366 !important; /* Even darker blue for hover/focus */
  outline: 2px solid #003366;
  outline-offset: 2px;
}

.form-group {
  margin-bottom: 16px; /* or 1rem+ */
}
.form-control {
  min-height: 44px; /* ensures touch-friendly */
}

.oram-button {
  color: #212529 !important; /* Dark text for contrast */
  font-weight: 600;
  background-color: #e9f0f5 !important; /* Light background for contrast */
}

/* ===============================
  WCAG 2.1 AA: <strong> Emphasis
  =============================== */
strong {
  color: #111 !important; /* Very dark for max contrast */
  font-weight: 700 !important;
  background: #fff !important; /* Ensure on white for contrast */
  padding: 0 2px;
  border-radius: 2px;
}

textarea.form-control {
  color: #212529; /* dark text */
  background-color: #fff; /* white background */
}

textarea.form-control.is-invalid {
  border-color: #dc3545; /* Bootstrap red */
  background-color: #fff;
  color: #212529;
}

textarea.form-control:disabled,
textarea.form-control[readonly] {
  background-color: #e9ecef;
  color: #495057;
}

.mat-radio-button.mat-radio-disabled .mat-radio-label-content,
.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle,
.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {
  color: #495057 !important;         /* Much darker gray */
  border-color: #495057 !important;
  background-color: #e9ecef !important;
  opacity: 1 !important;
}

/* =========================================================
   END of WCAG 2.1 AA Accessibility Overrides for Bootstrap Spacelab
   Load AFTER spacelab.min.css
   ========================================================= */

/* WCAG: Angular Material MDC Radio Disabled Label Contrast Fix */
.mat-mdc-radio-button .mdc-radio--disabled + .mat-mdc-radio-label,
.mat-mdc-radio-button .mdc-radio--disabled + label,
.mat-mdc-radio-button .mat-mdc-radio-label.mdc-radio--disabled,
.mat-mdc-radio-button .mat-mdc-radio-label[aria-disabled="true"] {
  color: #495057 !important;
  opacity: 1 !important;
}
.mat-mdc-radio-button .mdc-radio--disabled .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-radio--disabled .mdc-radio__inner-circle {
  border-color: #495057 !important;
  background-color: #e9ecef !important;
}
.mat-mdc-radio-button .mdc-radio--disabled .mdc-radio__inner-circle {
  background-color: #495057 !important;
}